Bugs Block patterns / Reusable blocks / core/block

[tatof]

Describe the bug
ACF admin fields don't work good in Patterns editor. When you edit a pattern from post edit screen the styling from ACF breaks and looks unusable. And when you edit a pattern block through the pattern editor the ACF fields only present themselfs in the sidebar. Even with the "auto & edit" block.json setting.

To Reproduce
Steps to reproduce the behavior:

1. Edit a page/post or CPT
2. Click on block pattern -> edit original
3. Click on the block to edit
4. ACF styling broken

To Reproduce

1. Goto view -> patterns
2. Edit a pattern
3. Click on the block to edit
4. ACF only in sidebar

Expected behavior
Same behavior as the Gutenberg editor

Screenshots or Video
Problem in editor overlayer: https://devtof.nl/acfbroken.png
Problem in pattern editor: https://devtof.nl/acfbroken2.png

Code
acf-export-2025-04-29.json
block.json

Maybe problem of the bug.. not sure

global $all_blocks_allowed;
$all_blocks_allowed = array(          
       "tatof/archive-kennisbank",        
);

function tf_allowed_block_types( $allowed_blocks, $post ) {
            // Allow all blocks
            global $all_blocks_allowed;
            $allowed_blocks = $all_blocks_allowed;
            return $allowed_blocks;
        }
        add_filter( 'allowed_block_types_all', 'tf_allowed_block_types', 10, 2 );

Version Information:

• WordPress Version [6.8]
• PHP Version [8.3.6]
• ACF Version [ACF PRO 6.4.0.1]
• Browser [chrome & brave latest]

[FalkoJoseph]

damn so there's no fix huh. just encountered this bug too.

[FalkoJoseph]

@lgladdy & @CreativeDive any update on this?

Patterns don't work with ACF blocks.

[lgladdy]

Hi there,

This isn't a bug I'm afraid, but is temporary intended behaviour to workaround a breaking change in WordPress 6.8 that causes the in-block edit form to no longer work when blocks are rendered inside an iframe.

WordPress 6.8 renders more blocks inside iframes, and libraries like TinyMCE don’t support targeting inside a local iframe, so the block crashes, and our CSS for field editing isn't loaded.

To avoid this, in ACF 6.4.1 we disabled in-block edit mode whenever the iframe is used, forcing you to the sidebar.

We’re working on a new edit mode view which will use a modal so you’re not forced to the sidebar, and this will be available later this summer.

There are plugins available which make the sidebar of the block editor resizable, and that may help you edit blocks in patterns until this is available.

[FalkoJoseph]

Hi there,

This isn't a bug I'm afraid, but is temporary intended behaviour to workaround a breaking change in WordPress 6.8 that causes the in-block edit form to no longer work when blocks are rendered inside an iframe.

WordPress 6.8 renders more blocks inside iframes, and libraries like TinyMCE don’t support targeting inside a local iframe, so the block crashes, and our CSS for field editing isn't loaded.

To avoid this, in ACF 6.4.1 we disabled in-block edit mode whenever the iframe is used, forcing you to the sidebar.

We’re working on a new edit mode view which will use a modal so you’re not forced to the sidebar, and this will be available later this summer.

There are plugins available which make the sidebar of the block editor resizable, and that may help you edit blocks in patterns until this is available.

Thank you for the transparency. I get that it's hard working around Gutenberg.

Looking forward to the new edit mode and modal.

[FalkoJoseph]

Hi there,

This isn't a bug I'm afraid, but is temporary intended behaviour to workaround a breaking change in WordPress 6.8 that causes the in-block edit form to no longer work when blocks are rendered inside an iframe.

WordPress 6.8 renders more blocks inside iframes, and libraries like TinyMCE don’t support targeting inside a local iframe, so the block crashes, and our CSS for field editing isn't loaded.

To avoid this, in ACF 6.4.1 we disabled in-block edit mode whenever the iframe is used, forcing you to the sidebar.

We’re working on a new edit mode view which will use a modal so you’re not forced to the sidebar, and this will be available later this summer.

There are plugins available which make the sidebar of the block editor resizable, and that may help you edit blocks in patterns until this is available.

For some reason it seems to work when you are using template parts instead of patterns.

For now I'll stick to using this solution.

maybe useful for you as well @tatof ?

Best of luck with your projects guys.

[johnstonphilip]

ACF Blocks V3 has been released in ACF PRO 6.6, which contains the larger pop-out sidebar that @lgladdy mentioned. This will make them usable in the Pattern Editor again.

You can opt your blocks into V3 by following this doc:
https://www.advancedcustomfields.com/resources/acf-blocks-v3/

See the full release post for 6.6 here:
https://www.advancedcustomfields.com/blog/acf-6-6-released/

[tatof]

Nice! I quickly tested it and it works well. Design need some fixes (maybe on my end).

Also "mode: auto" doesn't work anymore. So all the fields are cramped in the sidebar unless you press the pencil (edit) button.
I don't think my clients will understand / like that behavior. Is auto mode coming back eventually?

Also can we remove this api value from the block.json?
"apiVersion" : 3

Block.json:

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "name": "tatof/text-media",
    "title": "Tekst & Media",
    "description": "Tekst met media. (formulier, afbeedling)",
    "keywords": ["Image", "Afbeelding", "Foto", "Form"],
    "category": "tatof",
    "icon": "<svg></svg>",
    "script": "tf-text-media-faq",
    "style": [ "file:./text-media.css","file:../button/button.css" ],
    "apiVersion": 3,
    "version": "1337",
    "acf": {
        "mode": "auto",
        "blockVersion": 3,
        "renderTemplate": "text-media.php"
    },
    "supports": {
        "anchor"        : true,
        "className"     : true,
        "html"          : false,
        "align"         : false,
        "alignWide"     : false,
        "alignText"     : false,
        "alignContent"  : false,
        "lock"          : false,
        "color": {
            "text": false,
            "background": false,
            "link": false
        },
        "spacing": {
            "margin": [ "top", "bottom" ],
            "padding": false,
            "blockGap": false
        },
        "multiple"      : true,
        "jsx"           : true
    }
}