Navigation submenus hidden when editing template parts #73024
Description
Description
When editing a header template, for example, opening a submenu to add more links doesn't visibly do anything, as the submenu is clipped by the editor canvas.
I tried to identify what exactly was causing this and got a little lost - could see where the height prop was getting passed to the resizable editor comp, but not where it was getting refreshed from. Any pointers would be appreciated!
Was able to kinda hack something together in a BlockEdit filter to instead manually adjust the editor canvas based on the submenu's owner document's scollHeight, instead of offsetHeight or something similar (sorry, kinda gross):
useLayoutEffect( () => {
if ( ! document.querySelector( '.edit-site-visual-editor__editor-canvas' ) || ! ref?.current?.ownerDocument?.body?.scrollHeight ) {
return;
}
const editor = document.querySelector( '.editor-resizable-editor' );
editor.style.setProperty( 'height', `${ ref?.current?.ownerDocument?.body?.scrollHeight }px` );
}, [ isVisible ] );
Anyhow, yeah. Kinda weird experience, had a few clients complain about it.
Step-by-step reproduction instructions
- Create a template part (header)
- Add a nav block to it
- Add a submenu to that nav block
- Click the submenu block
Screenshots, screen recording, code snippet
No response
Environment info
No response
Please confirm that you have searched existing issues in the repo.
- Yes
Please confirm that you have tested with all plugins deactivated except Gutenberg.
- Yes
Please confirm which theme type you used for testing.
- Block
- Classic
- Hybrid (e.g. classic with theme.json)
- Not sure
