Skip to content

Fix block editor rendering: query decoding and StrictMode#391

Open
adrianmomorales wants to merge 2 commits intoWordPress:trunkfrom
adrianmomorales:fix/block-editor-rendering
Open

Fix block editor rendering: query decoding and StrictMode#391
adrianmomorales wants to merge 2 commits intoWordPress:trunkfrom
adrianmomorales:fix/block-editor-rendering

Conversation

@adrianmomorales
Copy link

Summary

Two fixes for ACF block rendering in the Gutenberg editor:

1. Decode $query when sent as JSON string (acf_ajax_fetch_block)

The block editor JS may serialize the query parameter as a JSON string, but acf_ajax_fetch_block() assumes it is already a PHP array. On PHP 8.4 this causes a fatal TypeError at line 1099:

Cannot access offset of type string on string

The $block and $context parameters are already decoded with json_decode() (lines 1040-1046), but $query is not. This adds the same treatment.

2. Enable StrictMode flag in localized block editor data

The block editor JS already has code to handle React 18 StrictMode (mount → unmount → remount), gated behind acf.get('StrictMode'):

// acf-pro-blocks.js — V.setState()
(this.subscribed || acf.get('StrictMode')) && super.setState(e);

But the flag is never setacf.get('StrictMode') always returns null. Without it, when React StrictMode remounts a block component, this.subscribed is false (set during unmount) and super.setState() is skipped. The block form HTML is fetched successfully but never rendered — the block shows an infinite spinner.

This adds 'StrictMode' => true to the localized data in acf_enqueue_block_assets().

Steps to reproduce

  1. Use WordPress 6.9+ (React 18 StrictMode in the block editor)
  2. Register any ACF block with acf_block_version: 2 and mode: edit
  3. Insert the block in the editor
  4. Block shows infinite spinner (fix 2), or on PHP 8.4 a 500 error (fix 1)

Test plan

  • Insert an ACF block in the editor on PHP 8.4 — should render form without errors
  • Insert an ACF block in the editor on WordPress 6.9+ — should render form without infinite spinner
  • Verify block preview mode works correctly
  • Verify block frontend rendering is unaffected

🤖 Generated with Claude Code

Two fixes for block rendering in the Gutenberg editor:

1. Decode $query when sent as JSON string in acf_ajax_fetch_block().
   The block editor JS may serialize the query parameter as a JSON string,
   but the PHP code assumes it is already an array. On PHP 8.4 this causes
   a fatal TypeError: "Cannot access offset of type string on string".

2. Enable StrictMode flag in localized block editor data.
   The block JS already has code to handle React 18 StrictMode
   (mount → unmount → remount), gated behind acf.get('StrictMode'),
   but the flag was never set. Without it, blocks inserted in the editor
   show an infinite spinner because setState is skipped when the component
   is remounted after StrictMode cleanup.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@github-actions
Copy link

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @adrianmomorales.

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant