Block error in new ACF alpha when changing field values

[CreativeDive]

hey @lgladdy I've noticed a new issue and I think this could be related to the fix by this issue: #650

I have an ACF block, which contains innerBlocks. After changing some field values, I get this block error:

And this is the result of the console:

I've switched back to the latest stable ACF version, and this error is gone. Switched back to the new alpha and the error is there again. It's seems this error occours only, if content is below the ACF innerblocks output, like described by this issue: #650

Originally posted by @CreativeDive in #654 (comment)

[CreativeDive]

@lgladdy I'll try to provide more information quickly.

[CreativeDive]

@lgladdy ok, it seems this bug is only related to field changes, which adds a new container inside the block.

Jun-08-2022.08-31-44.mp4

[CreativeDive]

@lgladdy ok, it seems it's not related to #650

The same issue is there if I have removed the inner blocks container.

But, if I remove the 'jsx' => true from the block setting. It's working again without this block error. Therefore this bug should be related to the innerblocks component.

I try to show you a simple example, but my blocks with all the other stuff is too complex.

<div class="<?php echo $block['...']; ?>"> <!-- This is the ACF block container which contains classes like the block alignment -->

    <?php if( $acf_field_value === 'carousel' ) { ?>
        <script> ... carousel init script here ... </script>

        <div class="new-container">
    <?php } ?>

    ... BLOCK STUFF HERE ...

    <?php if( $acf_field_value === 'carousel' ) { ?>
        </div>
    <?php } ?>

</div>

No error occurs the first time the field value $acf_field_value is changed. If I then switch back to the original field value, the error occurs (see video).

Now I have moved the <script> ... carousel init script here ... </script> outside of the ACF block container and it's working without this bug, like the following example. But the script tag should be inside the ACF block container.

<?php if( $acf_field_value === 'carousel' ) { ?>
        <script> ... carousel init script here ... </script>
<?php } ?>

<div class="<?php echo $block['...']; ?>"> <!-- This is the ACF block container which contains classes like the block alignment -->

    <?php if( $acf_field_value === 'carousel' ) { ?>
        <div class="new-container">
    <?php } ?>

    ... BLOCK STUFF HERE ...

    <?php if( $acf_field_value === 'carousel' ) { ?>
        </div>
    <?php } ?>

</div>

BUT, in the source code I could see another change. The script tag is wrapped by a div container like: <div><script> ... carousel init script here ... </script></div>. Is this coming from ACF?

This error seems to be something complicated and only appears under certain conditions.

[CreativeDive]

@lgladdy in the same way there is an additional inline <style> tag. But this <style> tag is not wrapped in an additional <div> container like the <script> tag.

<div class="<?php echo $block['...']; ?>"> <!-- This is the ACF block container which contains classes like the block alignment -->

     <style> ... inline block styles ... </style>

    <?php if( $acf_field_value === 'carousel' ) { ?>
        <script> ... carousel init script here ... </script>

        <div class="new-container">
    <?php } ?>

    ... BLOCK STUFF HERE ...

    <?php if( $acf_field_value === 'carousel' ) { ?>
        </div>
    <?php } ?>

</div>

Maybe there is an extra condition from ACF to prevent wrapping <style> tags?

[CreativeDive]

This extra div container is not added by me.

[lgladdy]

Cheers for making a new issue for this one. I'm not yet convinced this is an ACF bug, but whatever this behaviour is, is something we need to document so let's get to the bottom of it!

We don't do anything that would add an extra div, so my guess is WordPress is doing something for security here. I also don't think that

is likely to be the thing causing the fatal error here.

Does that div appear when the block isn't loaded by preload? Maybe disable preloading and see if that causes the fatal error to happen earlier?

I have a suspicion that WordPress just catches any JS error that happens inside a block and kill it when it happens. The errors about removeNode definitely seem viable to be caused by your carousel script. Could it be it's having issues figuring out where to attach the slides?

JSX is enabled by default now on all v2 blocks; and it means we parse the HTML out to it's elements so React can render it, and we can pull out "InnerBlocks" to be the actual React component, but so long as you have valid markup that should be fine.

Let's try and strip everything back to the most basic point possible. You say the current public release is fine, is that with the exact same block definition and markup on the template?

[CreativeDive]

@lgladdy It's a strange one. It's a tiny slider carousel from github. It's work perfectly in frontend and block editor. There are no script errors by the tiny slider. This bug is only related to a special case if the innerblocks component is used.

There is a selector <div class="slider"></div> which is the start point for the tiny slider script.

I have tried several things and e.g. I have wrapped the <div class="slider"></div> inside an additional div <div><div class="slider"></div></div> and it's working without this block error. Very very strange.

I can confirm this happens with both, the ACF alpha and the version before. Firstly it looks like an ACF alpha issue, but now it's clear it's a general conflict with the inner blocks component.

The tiny slider is adding additional containers dynamical and it seems this is a special conflict with the inner blocks component and how tiny slider works.

It's not the best way but wrapping <div class="slider"></div> inside an additional div solves this issue in the case the innerblocks component is used.

[CreativeDive]

@lgladdy but I have no idea why WordPress is wrapping <script> tags inside a div container. Maybe this is also a innerblocks thing. Without innerblocks the <script> tag is not wrapped inside a div container.

[lgladdy]

@CreativeDive I wonder if it's trying to manipulate the React InnerBlocks component and that's breaking things as React (and WordPress) add all kinds of different handlers, so adding an additional wrapper stops it trying to do things React won't let it to that parent div?

[CreativeDive]

@lgladdy tiny slider creates additional div containers around the initial <div class="slider"></div> and this works great even when using the innerblocks component. This block error only occurs when switching back to the initial block view. Actually, the tiny slider is no longer used since the initial view is a grid.

All the thing are working fine. It's just a matter of changing the view. Only in this case does the error occur.

[CreativeDive]

I will close this issue.