AdvancedCustomFields / AdvancedCustomFields/acf

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

Open
#951 0 comments 3 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
PHP
Stars
945
Forks
197
PR merge metrics
No merged PRs in 30d

Description

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: https://github.com/WordPress/gutenberg/pull/66800 where it was decided to get much more aggressive in how the block iframe was determined it should be used.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the issue with WordPress 6.8-rc1, the WordPress 2023 theme, and the linked tt3child.zip sample block. Read the linked Gutenberg PR 66800 and trace how ACF blocks are handled when the canvas is iframed. Done means the testimonial block's CSS and JavaScript load correctly and its fields can be edited in the canvas.

Written by the indexing model from the issue text.

Assessment

Tech stack
php, wordpress
Domain
frontend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.