Skip to content

Editing ACF blocks in the canvas broken in WordPress 6.8 with FSE themes #951

@Zealth57

Description

@Zealth57

Describe the bug
In WordPress 6.8 (currently in RC 1), there was a change that forces blocks to be iframed if the theme is a block theme. In WordPress 6.7 and prior, even block themes would disable the iframe when it detected blocks registered with a v2 (ACF blocks are registered as v2 in the latest versions and schemas). So when using a block theme and ACF blocks, the JS/CSS isn't loaded properly into the canvas and breaks the editing experience.

To Reproduce
Steps to reproduce the behavior:

  1. Install the latest version of WordPress as of this filing (6.8-rc1)
  2. Make sure your site has the WordPress 2023 theme available in the themes folder
  3. Download the sample block from https://www.advancedcustomfields.com/wp-content/uploads/2023/08/tt3child.zip
  4. Activate this child theme which comes with the testimonial block
  5. Add the testimonial block to a page and try to edit the fields in edit mode, where they show up in the canvas.

Expected behavior
The CSS/JS should be properly loaded for the block, instead it is a broken experience.

Screenshots or Video

Image

Code
Please drag and drop an export of your field group, option page, custom post type or taxonomy JSON here.
If your issue relates to ACF Blocks, please also provide a reproducable code example of your ACF Block including it's block.json so we can reproduce the issue.

Version Information:

  • WordPress Version 6.8-rc1
  • PHP Version 8.1.23
  • ACF Version 6.3.12
  • Browser Chrome (latest)

Additional context
This is due to a change made here: WordPress/gutenberg#66800 where it was decided to get much more aggressive in how the block iframe was determined it should be used.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions