JSX parser fails if block contains "{" in data attributes

[dnnsjsk]

Hey,

InnerBlocks are not displayed in the editor if using something like https://alpinejs.dev/ and using inline objects like so:

<div class="block block-accordion" x-data="{ open: false }"></div>

VM2378:1 Uncaught SyntaxError: Expected property name or '}' in JSON at position 1
    at JSON.parse (<anonymous>)
    at q (acf-pro-blocks.min.js?ver=6.0.0-RC2:1:23702)
    at Array.map (<anonymous>)
    at M (acf-pro-blocks.min.js?ver=6.0.0-RC2:1:22706)
    at acf-pro-blocks.min.js?ver=6.0.0-RC2:1:22941
    at Array.forEach (<anonymous>)
    at M (acf-pro-blocks.min.js?ver=6.0.0-RC2:1:22859)
    at acf.parseJSX (acf-pro-blocks.min.js?ver=6.0.0-RC2:1:23888)
    at G.setHtml (acf-pro-blocks.min.js?ver=6.0.0-RC2:1:27202)
    at Object.<anonymous> (acf-pro-blocks.min.js?ver=6.0.0-RC2:1:30079)

[joseph-farruggio]

I've run into this exact issue before. I hide the x-data when $is_preview == true. I'm not sure if there's a better solution.

[cearls]

I disabled jsx and got alpine x-data working by adding the following to my block.json. Any drawbacks?

"supports": {
    "jsx": false
}

[retlehs]

You can use the acf_blocks_parse_node_attr JS filter to not convert/parse elements that have attributes starting with x-:

add_action('acf/input/admin_footer', function () {
?>
    <script>
        acf.addFilter('acf_blocks_parse_node_attr', (currentValue, nodeAttr) => {
            return nodeAttr.name.startsWith('x-') ? nodeAttr : currentValue;
        });
    </script>
<?php
});

[joshuafredrickson]

@cearls The drawback of disabling jsx is that you can no longer use <InnerBlocks /> within that particular block. May or may not be an issue depending on the block.

@retlehs Thanks for the filter!