WYSIWYG field turns blank inside block after changing position in columns

[pwkip]

Spotted a strange bug with the WYSIWYG field. The field gets cleared if it is used inside a block that is inside a column if you move the block's position below another block in the same column. Switching from edit mode to view mode and back makes the text reappear. Also this bug only seems to occur when moving the block below another block. When moving the block above another block, the text remains visible.. It's easier to explain with a video:

Steps to reproduce the bug

1. Create Gutenberg block

add_action('acf/init', 'my_acf_blocks_init');
function my_acf_blocks_init() {

    // Check function exists.
    if( function_exists('acf_register_block_type') ) {

        // Register a testimonial block.
        acf_register_block_type(array(
            'name'              => 'testimonial',
            'title'             => __('Testimonial'),
            'description'       => __('A custom testimonial block.'),
            'category'          => 'formatting',
            'mode'              => 'edit',
        ));
    }
}

2. Create an ACF group with a WYSIWYG field, and assign it to the block. (Import this ACF JSON code)

   [
   {
       "key": "group_5ff085f624e26",
       "title": "test",
       "fields": [
           {
               "key": "field_5ff085fce7156",
               "label": "wysiwyg",
               "name": "wysiwyg",
               "type": "wysiwyg",
               "instructions": "",
               "required": 0,
               "conditional_logic": 0,
               "wrapper": {
                   "width": "",
                   "class": "",
                   "id": ""
               },
               "default_value": "",
               "tabs": "all",
               "toolbar": "full",
               "media_upload": 1,
               "delay": 0
           }
       ],
       "location": [
           [
               {
                   "param": "block",
                   "operator": "==",
                   "value": "acf\/testimonial"
               }
           ]
       ],
       "menu_order": 0,
       "position": "normal",
       "style": "default",
       "label_placement": "top",
       "instruction_placement": "label",
       "hide_on_screen": "",
       "active": true,
       "description": ""
   }
   ]

3. Create a post or a page

4. Create 2 columns

5. Add the testimonial block containing the WYSIWYG field to the page

6. Create another block inside the same column.

7. Change the position of the blocks. Notice that the moment the WYSIWYG block gets move below another element inside the column, the output is cleared.

[elliotcondon]

Hi @pwkip

Thanks for the bug report and great explanation! I've got a good idea of what the issue is, but a little confused as it is something that we fixed in an earlier version... perhaps there has been some sort of regression that our fix no longer works with.

Are you using the Gutenberg plugin, or just the latest version of WP?

[pwkip]

Hi Elliot,

You're welcome. I do understand that good bug reports are often half the work to get them fixed, so I like to be thorough and contribute to a quick solution the best I can.

I have tested this in a fresh WP installation, that I set up for the sole purpose of testing this bug.

The bug appears both with the Gutenberg plugin enabled and disabled. I do want to point out again that this only happens if the ACF block is nested in another block (like columns, or other custom blocks that allow InnerBlocks)

Some more specs:

• WP 5.6
• Gutenberg 9.7.0
• ACF Pro 5.9.3

Do let me know if there's anything else I can do

[ironland]

Hi @elliotcondon and @pwkip !

I reported the same bug a few days ago as well. I have:

• WP 5.5.3
• ACF Pro 5.9.3.
• No Gutenberg plugin

I think you might have fixed the bug on the parent / root level but you missed this particular use case, which is when a block containing a WYSIWYG field is inside a container block. This use case however is coming increasingly common.

My case is this:

• I have made a custom core container block as a predefined "column" on a specific page template.
• I allow the container block to have an ACF block as its child / innerblock.
• The ACF block contains a WYSIWYG
• When I drag the ACF block, it doesn't remove the text content
• When I move the ACF block up, it doesn't remove the text content
• When I move it down, the text content disappears

Tested the same ACF block on a different post type that doesn't have any container blocks and on the root level, the block can be moved down with no bugs. So the cuplrit is most probably the container block and some logic behind that.

Hope this helps!

[ironland]

@elliotcondon Have you found anything yet that might be the cause of this?

[ironland]

Hi, all!

Have you still had any luck in fixing this? Notifying @elliotcondon as well as @pwkip .

Thanks!

[pwkip]

Nope. Still waiting :)

[ironland]

@elliotcondon Any progress? :)

[ironland]

Have you had any luck yet? @elliotcondon