AdvancedCustomFields / AdvancedCustomFields/acf
Expanded Editor silently ignores Done, Esc and click-away while the block preview re-fetches
Nobody has claimed this yet.
- Dominant language
- PHP
- Stars
- 945
- Forks
- 197
- PR merge metrics
- No merged PRs in 30d
Description
Describe the bug
While the Expanded Editor is open, changing a field queues a block preview re-fetch. For as long as that fetch is in flight, all three ways of closing the panel stop working at the same time: the Done button, the Escape key, and clicking outside it. The panel also sets isDismissible: false, so there is no close icon to fall back on. Nothing indicates the panel is busy (Done has no spinner and no disabled styling), so it reads as frozen rather than working. On our blocks the window lasts between 0.4 and 4.5 seconds depending on how heavy the block's preview is.
To Reproduce
Steps to reproduce the behavior:
- Register an ACF v3 block from
block.jsonwith a wysiwyg field (any block whose preview takes a moment to render server-side). - Add the block to a page and open the Expanded Editor from the pencil in the block toolbar.
- Type into the wysiwyg, which queues a preview re-fetch.
- Immediately click Done - nothing happens.
- Press Escape - nothing happens.
- Click outside the panel - nothing happens.
- All three start working the moment the fetch resolves.
Expected behavior
At least one exit should work at all times. Either Done stays enabled and closes the panel, since the field values are already in the store by that point, or the busy state is made visible with a spinner or a genuinely disabled-looking button. The silent dropping of Escape and click-away is the most confusing part, as neither gives the editor any feedback at all.
Screenshots or Video
[attach a screen recording of clicking Done repeatedly with nothing happening]
Code
block.json:
{
"name": "acf/repro-expanded-editor",
"title": "Repro Expanded Editor",
"description": "Minimal block to reproduce the Expanded Editor close guard.",
"category": "widgets",
"icon": "edit",
"acf": {
"blockVersion": 3,
"mode": "preview",
"renderTemplate": "render.php"
},
"supports": { "anchor": true }
}
render.php:
<div class="repro-expanded-editor">
<?php the_field( 'body' ); ?>
</div>
Field group export:
{
"key": "group_6b0a1c2d3e4f5",
"title": "Repro Expanded Editor",
"fields": [
{
"key": "field_6b0a1c2d3e4f6",
"label": "Body",
"name": "body",
"type": "wysiwyg",
"tabs": "visual",
"media_upload": 0
}
],
"location": [
[
{ "param": "block", "operator": "==", "value": "acf/repro-expanded-editor" }
]
],
"active": true
}
Version Information:
- WordPress Version 7.1
- PHP Version 8.2.16
- ACF Version ACF PRO 6.8.7
- Browser [add yours]
Additional context
The relevant code is the Expanded Editor modal in assets/build/js/pro/acf-pro-blocks.min.js. Reading the minified bundle, four things are keyed to the same isFetchingBlock flag:
onRequestClosereturns early while fetching with no validation errors, so click-away is dropped- the Done button's
disabledprop isisFetchingBlock && !validationErrors shouldCloseOnEscis!isFetchingBlock || validationErrorsisDismissibleisfalse
So for the duration of a fetch the modal has no exit at all. Guarding against closing mid-fetch is reasonable in itself; the problem is that every route is gated on one flag with no user-facing feedback.
In practice editors read it as a hang, click Done several times, and some reload the page and lose the edit. Our production blocks also set hideFieldsInSidebar and expandedEditorButtons: ["toolbar"], which is where we first hit this - the minimal repro above leaves them out, since the guards themselves don't reference either option.
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Reproduce the issue with the supplied block.json, render.php, and field-group export, then inspect the Expanded Editor modal in assets/build/js/pro/acf-pro-blocks.min.js. Trace how isFetchingBlock controls onRequestClose, the Done button, shouldCloseOnEsc, and isDismissible. Done means the editor has a usable exit during preview re-fetches or clearly communicates the busy state without silently dropping all close actions.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, php
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 68/100