Zoom Out Feature inserters provide poor UX for consecutive lower level blocks

[asad-dc]

Description

When I click on Zoom Out Button its show buttons at start to add Pattern as able to see in given Sreenshot

The next thing is there is no space between 2 buttons

Step-by-step reproduction instructions

1. Add New Post
2. Add any block click on zoom out you are able to see 2 buttons for add patterens

Screenshots, screen recording, code snippet

Environment info

Wordpress 6.7 Beta

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

[colorful-tones]

I verified this behavior.

The UI does seem odd. I'm not sure how to address it. @WordPress/gutenberg-design might have some insight here.

[t-hamano]

My understanding is that in zoomed out mode, buttons for inserting a pattern appear above and below the selected block at the root level.

So technically this is correct, but it seems odd to me to have the buttons stuck together.

The zoomed out view is a new feature in WP 6.7, so I'd like to add it to the project board.

[richtabor]

Related: #65474

[getdave]

Thanks for reporting this and for the resulting discussion.

I don't think that this Issue offers a clear route to "solve" this from a technical perspective.

The problem is that the blocks in question are technically considered "sections" within Zoom Out because they are at the root level of the current editor.

For me this is a Design/UX problem. What do we want to do with the large inserters which work well for Patterns/Groups but provide a poor UX for lower level blocks such as paragraph...etc.

For me, if Zoom Out is designed to help compose larger content Posts/Pages then perhaps we should disable the Zoom Out inserters unless it's between "container" type blocks - e.g:

• Pattern
• Group
• Cover
• Query

Tagging @WordPress/gutenberg-design here for wider opinions because we should try and offer a solution to this otherwise it's going to get repeatedly flagged as a bug.

[jasmussen]

For me this falls into the same category as the smarts that are being built into the block toolbar, smarts like that toolbar moving below the block if the block itself is close to the top, or moving below an opened navigation menu to not cover the blocks inside if the parent is selected. Or the sticky behavior where the toolbar sticks with you as you scroll down the page. But if you scroll far enough, the block toolbar disappears, because in that situation, it just isn't useful.

In this sense, the inserters are not useful when they are so close together. Is there a way to simply fade them out when they are too close to each other or even overlap?

[colorful-tones]

For me this falls into the same category as the smarts that are being built into the block toolbar, smarts like that toolbar moving below the block if the block itself is close to the top, or moving below an opened navigation menu to not cover the blocks inside if the parent is selected. Or the sticky behavior where the toolbar sticks with you as you scroll down the page. But if you scroll far enough, the block toolbar disappears, because in that situation, it just isn't useful.

If anybody has links to open items related to these enhancements, it would be amazing if they linked them here to provide context to the overall discussion.

[jasmussen]

If anybody has links to open items related to these enhancements, it would be amazing if they linked them here to provide context to the overall discussion.

I was a bit short there, sorry! I'm actually referring to shipping features of the product that are already in. Here's a GIF of the features I described:

Let me know if I'm missing nuance!