Initially close the Block Styles sidebar panel

[richtabor]

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:

After:

With CoBlocks (adding block styles):

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.

[shaunandrews]

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:

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

[mtias]

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

[shaunandrews]

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.

[richtabor]

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

[MichaelArestad]

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:

[mtias]

That could work

[richtabor]

I like that idea as well.

[getsource]

I see that in the attached PR, #24073, there was a mix of opinions, but the final feedback was against closing initially, which is different than was noted above, afterwards.

Would it be better to close this issue, given the feedback on the PR, in lieu of the other tickets making the experience better, or is initially closing still something under discussion?

[getsource]

Thought of this later, so thought I'd add:
If user testing would be appreciated to A/B, I can ask to see if this is a possibility, or if there are any existing studies that might help with data.

[paaljoachim]

I do wonder if the Styles thumbnails should be made smaller, and that we have a preview on the left. Somewhat similar to what @shaunandrews is mentioning here: #24072 (comment)

Today we have the hover over blocks in the Inserter panel. Adding the same method to Style smaller thumbnails could be helpful. I do wonder about accessibility.

Today the Styles take a lot of visual space in the Styles panel. Having the thumbnails half the size could make the visual distraction feel less disturbing. Adding hover could then show a bigger preview than todays thumbnails. A user can choose to just click the small thumbnail without really looking much at the preview seen on hover to just add the style and see how it looks.

Another option (which might not work) is actually showing a live preview directly affecting the block in the Gutenberg layout. As in hover over a style and see the preview directly, and click the thumbnail to apply the style.

[getsource]

#34522 is merged, which changes the behavior / UX here.

Does that seem like enough to solve this issue, or should be leave this open?

[paaljoachim]

Well let's do a before and after.

Before:

After:

The new Styles Panel takes a lot less space than the earlier one. It is still open by default though.
Let's see what @richtabor says.

[mtias]

@getsource yes, this addresses the main inconveniences we had before more reliably than initially collapsing.