Editing Navigation shows small sub menu area

[paaljoachim]

Description

I am seeing very little of the submenu and need to scroll.

Associated issue: #65195

Step-by-step reproduction instructions

1. Site Editor: Edit a navigation with a submenu.
2. Click to edit the submenu.
3. How much of the submenu is visible?

Screenshots, screen recording, code snippet

.

Environment info

WordPress 6.6.2
Gutenberg plugin: 19.5.0
WooCommerce plugin: 9.3.3

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

[t-hamano]

Thanks for the report.

You're probably inserting a Navigation block inside a pattern, right? Here's a video showing the steps I took to reproduce it:

048a25929bdcdf71617879d9d068ee43.mp4

Pattern editors, i.e. resizable editors, change height depending on their content. But navigation menus can have absolutely positioned submenus, which I think is not taken into account when determining the editor height.

I definitely think the current editing UX is not ideal.

[paaljoachim]

Thank you for making the video Aki. It is very appreciated!

You're probably inserting a Navigation block inside a pattern, right?

Yes. I was editing the header pattern (see header title) and noticed the problem with editing the submenu.

[paaljoachim]

@t-hamano and @getdave I see that @rohitmathur-7 has made a PR here:
#66788

Personally I believe it would be better to make the whole editing experience bigger. As currently it is very small and expending it to become a larger editing experience would help. Using much more of the screen canvas space.

[t-hamano]

I'm not sure if going ahead with #66788 is ideal. #66788 changes the canvas to full height when a Navigation block is present on the canvas, but this issue can occur with more than just the Navigation block. Block developers may have custom blocks with absolutely positioned elements or blocks.

The best approach I can imagine would be to determine the canvas height based on the visually displayed blocks, but I'm not sure if this is easily achievable.

[getdave]

@t-hamano As you know we had the work to place the block toolbar in the correct location. However that relies on the elements being active/visible in the DOM. Having the canvas height dynamically calculated based on a potential element becoming visible is going to be extremely challenging/impossible. I guess you are thinking along the same lines?

When we had a dedicated Navigation editor it used to force the canvas to full height. However, in that scenario we could guarantee we'd have only the Navigation block. Patterns are deliberately made smaller height canvas.

I think we need some wider input here to help determine if there's a compromise to be had.

[getdave]

@paaljoachim This seems related to #49339. If it's the same Issue could we/you close this one out in favour of that one?

[paaljoachim]

Of course. Closing this issue.