Gutenberg: Initially close the Block Styles sidebar panel

Created on 20 Jul 2020  路  7Comments  路  Source: WordPress/gutenberg

Applying a Block Style is not be a high-priority action within a block's Settings Sidebar. Thinking through the flow of editing, its not likely a style will be changed often. I suggest initially closing the Styles PanelBody to limit the amount of actionable UI when a block's settings sidebar is opened.

While not a _major_ deal using core blocks, if any third-party blocks add a Block Style to a particular block, it can quickly clutter the sidebar - pushing all other controls away and directly affecting cognitive overload.

Before:

Screen Shot 2020-07-20 at 2 43 58 PM

After:

Screen Shot 2020-07-20 at 2 43 45 PM

With CoBlocks (adding block styles):

Screen Shot 2020-07-20 at 2 52 16 PM
Screen Shot 2020-07-20 at 2 50 28 PM

Describe the solution you'd like
Set the initialOpen prop to false for the Styles PanelBody which will clean up the Settings Sidebar UI and lowering cognitive overload.

Describe alternatives you've considered
Closing the Styles panel every time I open a block that has a number of Block Styles, before moving to edit additional sidebar controls.

Needs Design Feedback [Status] In Progress

Most helpful comment

I wonder if there's a way to reduce the size of the Styles UI. Maybe if we introduce a preview on hover, we can show smaller thumbnails. We could also remove the accordion UI and closely tie the block description with the styles:

block styles floating preview on hover

We might not even need the floating preview; Maybe we can just show the preview directly on the canvas:

block styles preview on hover

All 7 comments

I wonder if there's a way to reduce the size of the Styles UI. Maybe if we introduce a preview on hover, we can show smaller thumbnails. We could also remove the accordion UI and closely tie the block description with the styles:

block styles floating preview on hover

We might not even need the floating preview; Maybe we can just show the preview directly on the canvas:

block styles preview on hover

How would those little things be created from a block author perspective?

I'd expect it to work the way it does now, just with smaller thumbnails. They're rendered blocks, not some static image or other representation.

So just smaller previews? Would be great if like in your example, they were based on the block - not the example.

The root of the problem is hierarchy within the sidebar. For now, defaulting the panel to being closed works well and we should likely go with that.

I think a more complete solution involves something like what @ItsJonQ proposed here using a context popover. Perhaps something like this:

image

That could work

I like that idea as well.

Was this page helpful?
0 / 5 - 0 ratings