fix(block-theme): ensure Overlay Menu block panel opens in editor after template part switch#4642
fix(block-theme): ensure Overlay Menu block panel opens in editor after template part switch#4642laurelfulford wants to merge 5 commits intotrunkfrom
Conversation
There was a problem hiding this comment.
Pull request overview
This PR fixes editor preview toggling for the Overlay Menu block so the “Open panel” toolbar button continues to work reliably after switching template parts in the Site Editor, by changing how the panel toggle function and open-state subscriptions are keyed and looked up.
Changes:
- Switch preview toggle/subscription keys from the panel block clientId to the parent Overlay Menu block’s clientId.
- Update the parent and trigger blocks to subscribe/toggle using the parent clientId rather than searching for the panel sibling/child.
- Update the panel block to register its toggle under the parent clientId and notify subscribers using that same key.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 5 comments.
| File | Description |
|---|---|
| src/blocks/overlay-menu/edit.js | Parent now subscribes/toggles preview state using its own clientId (the new shared key). |
| src/blocks/overlay-menu/trigger/edit.js | Trigger now derives parentClientId via getBlockRootClientId and uses it for subscribing/toggling. |
| src/blocks/overlay-menu/panel/edit.js | Panel now derives parentClientId and registers/notifies preview state using the parent key. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
adekbadek
left a comment
There was a problem hiding this comment.
Tested. The panel open/close toggle works correctly after template-part style switches in the site editor – the re-keying from panel clientId to parent clientId is a solid fix for the React transition timing issue.
One minor nit inline about a redundant cleanup effect.
| return () => panelToggles.delete( parentClientId ); | ||
| }, [ parentClientId ] ); // eslint-disable-line react-hooks/exhaustive-deps | ||
|
|
||
| useEffect( () => { |
There was a problem hiding this comment.
nit: The useLayoutEffect cleanup on line 86 already handles panelToggles.delete(parentClientId) on unmount and dependency change. This additional useEffect cleanup is a no-op in practice – could it be dropped, or is it here as a deliberate safety net?
All Submissions:
Changes proposed in this Pull Request:
This PR cleans up an issue I noticed adding the block to the block theme:
The 'Open Panel' button in the main block, button trigger block, and panel block should all open/close the panel. This wasn't working after switching template parts in the site editor. This was a timing thing overall -- the method the parent and trigger block were using to find the panel was returning empty while the editor was still loading.
It should be tested alongside Automattic/newspack-block-theme#438, which has the block added to different template parts you can swap between.
How to test the changes in this Pull Request:
Other information: