Navigation block: block inserter cut off in editable list view

[annezazu]

Description

This was found as part of the FSE Outreach Program's Front Page Fun call for testing:

Another example is the “add navigation item” popup, that appear when you click the “+” icon in the sidebar while the navigation block is selected. The position is unpredictable and it changes a lot depending of the window size. In small screens, it just appears outside the window, making the selection of options very hard.

Step-by-step reproduction instructions

1. Open Appearance > Editor.
2. Select the Home template.
3. Add a navigation block and add an increasing number of items.
4. After adding 5-6 items, notice the inserter is cut off and you have a scrollbar to see the full block inserter.

Screenshots, screen recording, code snippet

https://github.com/WordPress/gutenberg/assets/26996883/e020ff87-be88-4418-bf4a-3706828fc704

Environment info

• WP 6.2.
• GB 15.7
• TT3
• MacOS
• Chrome

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

[draganescu]

I am not sure this is a bug, and definitely not something about the navigation block. I think the behavior is actually expected for a pop-over: to float in the optimal direction and be scrollable inside.

[annezazu]

Oh interesting! I wonder who can confirm this. Will leave for now and see if design can chime in at some point. Minor issue in the grand scheme of things.

[getdave]

I wonder if @ciampo would have some insight here? The base component controlling this is Popover so I wonder if this behaviour is expected or similar specific that the <Inserter /> is doing to cause this.

[ciampo]

Currently, it looks like the Inserter component is setting the position prop. Internally, that component renders a Dropdown, setting the shift prop via popoverProps

The Popover component can behave in a few different ways — I encourage experimenting with the Storybook example, and focus on the shift, flip and resize props (including their default values) to tweak the behavior of the floating element when it meets the edges of the viewport.

Finally, I would encourage using the placement prop instead of the position prop, which was deprecated a few months ago.

[MaggieCabrera]

I tested this and I couldn't reproduce it on FF, it has to be on Chrome to see the issue

[annezazu]

This is still replicable in 6.7 RC1 on Chrome.

[getdave]

I feel like this is a bug related to the specific implementation. As @ciampo noted we maybe using outdated props on the implementation. This will need to be fixed during 6.8 cycle now.