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!

[ndiego]

Given the discussion above and the short time frame till Beta 3, this seems like an issue to tackle post-6.7. Thoughts @richtabor @getdave @jasmussen?

[getdave]

Agreed 👍

[getdave]

Since #67232 Zoom Out will not longer be active if there is no section root. As the Post Editor has no section root Zoom Out will not be activated or possible to activate.

@cbravobernal We may want to backport #67232 to 6.7.X if it proves to be a stable approach in the Gutenberg Plugin.

[cbravobernal]

Feel free to add the label if needed!

[richtabor]

Since #67232 Zoom Out will not longer be active if there is no section root. As the Post Editor has no section root Zoom Out will not be activated or possible to activate.

Can we close this issue now?

[getdave]

The same UX could affect editing Pages in the Site Editor but I don't think there is any clear route for moving forward here.

One thing we could try is to only enable these larger inserters for container-type blocks (e.g Group, Cover, Columns) and not lower level blocks such as paragraph.

I don't see this as a top priority item though.

[richtabor]

One thing we could try is to only enable these larger inserters for container-type blocks (e.g Group, Cover, Columns) and not lower level blocks such as paragraph.

Yea, could we do for blocks that have nested blocks? I think it's worth trying if it's not too intense.

[getdave]

Just noting that includes a lot of lower level blocks that might fall into the category of looking "odd" when added consecutively. For example:

• List
• Quote

My instinct is that we need a more detailed heuristic but we can start with exploring the inner blocks route and iterate.