Gutenberg compatibility

There is a very good chance that this plugin cannot be made compatible with the block editor.

I have not tested it, but my guess here is that JavaScript cannot locate the textarea field to apply medium editor to it. With regular ACF field groups I can find the field because it is in a fixed location in the HTML markup. As I understand it, this is not the case with blocks. The html for the field may or may not actually exist when script is attempting to initialize the field.

Have you tried using turning on the delayed initialization option for the field?

What JS error are you seeing? What else is it doing? not doing?

Hi John,

there is an error in input.js lines 24 and 43. I tried the delayed initialization but the same error persists. Probably the js can’t find the right form input as you said.

Can you tell me exactly the errors that are reported on those lines.

Sorry, I don’t have the time at the moment to go through building an ACF block with a medium editor field do the testing myself. But if I understand the error and with you’re help, I might be able to figure out why those two lines in particular are causing errors.

$parent.prop(‘nodeName’) is undefined in the acf_get_medium_editor_selector recursion. I can’t quite understand why are you doing a recursion here?

I will do some looking into this.

The reason for the recursion. If you’ll notice, every medium editor field you create can have its own settings. You can have multiple line input in one place and single line in another or they can have different buttons, etc, etc. In order to do this each field must be initialized with it’s own settings. This means than I can’t simply target a common class. I must specifically target each field. The recursion finds each field and then reads up, finding each parent, to build a CSS selector that targets just that field without targeting other fields. form>child>child>child>field This is necessary because I cannot know where that field will be. Will it be in a repeater, in a flex field, in a nested repeater/flex field. I also did it this way because of difficulties in using a unique ID value for each field, when a field is in a repeater of a flex field there isn’t difficult to know what the ID of the field might be, or even if it will be unique. I may need to take a look at this again.

The reason for all the recursion and building a selector was that the ID of fields in repeaters at one time was not unique. That was some time ago and there have been changes in the way ACF outputs ID values and it seems I can do away with this.

Can you do a test for me to see if this clears up the issue with the block editor?

In the JS file …/plugins/acf-medium-editor/assets/js/input.js

Can you change line 50 to

var $selector = 'textarea#'+$textarea.attr('id');

and delete lines 51 to 54

and then test.

Hi John,

yes, now it’s working :), thank you for the support. Will you put this in the next update so it’s official? or should I make a PR?

Thank you for helping me test that with the block editor. I will be pushing an update later today that does this an also removes the recursive targeting lookup for the field. Like I said it was necessary when I built this plugin because fields in repeaters would not have unique IDs. Not exactly sure when Elliot corrected that issue.