Styles: Relocate the revisions toggle

[afercia]

Description

Splitting this out from https://github.com/WordPress/gutenberg/pull/63243

The global styles panel header contains 3 additional buttons besides the X close button:

• Style Book
• Revisions
• More

In https://github.com/WordPress/gutenberg/pull/63243 it was pointed out that this buttons shouldn't be placed in the panel header in teh first place.

• It's a pretty unique case. The only other case I can think of it's the 'Pin / Unpin' button in the Plugins panel.
• These buttons take way more horizontal space when the showIconLabels preference is true. The length of the text is unpredictable as translations may provide strings that are way longer than the English ones. https://github.com/WordPress/gutenberg/pull/63243 tries to improve things but there may still be cases where the buttons visibel text overlaps.
• The original design didn't take into account the showIconLabels preference.
• Ideally, all panel heaaders should only contain the panel Title and the X close button. Any other content should be moved to a 'sub-header' as proposed on https://github.com/WordPress/gutenberg/issues/63251

It was also noted that the Revisions toggle placement is inconsistent with other parts of the UI:

While in the Site editor navigation panel it's placed at the bottom of the Styles panel::

I'd tend to agree with @jameskoster comment:

The revisions button invokes a drilldown, which feels strange given the access point (panel header toggle button).

As such, I'd like to propose to consider relocating this button at the bottom of the Global styles panel:

• For better consistency.
• As a temporary improvement to mitigate the text overlap issue. A more future-proof option would certainly be to not place any additional control in the panel headers.

Cc @WordPress/gutenberg-design @t-hamano @aaronrobertshaw

Step-by-step reproduction instructions

• Go to the Site editor > Design > Styles (in the left navigation panel)
• Observe the Revisions toggle button is at the bottom of the panel.
• Go to the Site editor > Styles (the Global Styles panel)
• Observe the Revisions toggle button is in the panel's header.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

• [x] Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• [x] Yes

[jameskoster]

For now it could be as simple as:

[t-hamano]

To me, the following description seems redundant, because the same description is also included on the next screen:

What do you think about just displaying the button like this:

[afercia]

Personally, I would be in favor of removing the descriptions and placing the navigation buttons grouped together. Cc @WordPress/gutenberg-design

[jameskoster]

I wouldn't object, but feels like a detail to discuss separately.

[afercia]

I tend to think the best path forward here is to tackle this issue together with https://github.com/WordPress/gutenberg/issues/66333. To me, it's important to consider these two proposed changes holistically to better evaluate the overall change in the design and user experience.

To recap:

• Remove the Revisions icon button from the panel header.
• Add a 'Styles revisions' navigation button at the bottom of the panel. This button should appear only when there are revisions.
• Remove the 'Additional CSS' menu item from the ellipsis 'More' menu.
• Make the 'Additional CSS' navigation button in the panel always visible, also when there's no custom CSS set. This basically reverts https://github.com/WordPress/gutenberg/issues/47266
• Remove the descriptions for 'Blocks' and 'Additional CSS'.

Re: the navigation button styling: for now, I'd propose to use the built-in variants of the ItemGroup component, which is the component already in use to group many nqvigational controls in the settings panel. Specifically, I'd use the variants isBordered isSeparated.

I wouldn't object to use other variants of the component. However, I think it's important to use built-in variants and avoid ad-hoc implementation and / or CSS overrides. If a different styling is desired, I'd strongly recommend to create a new issue to consider to introduce a new variant.

Screenshot before and after:

[jameskoster]

There is a lot of high level design work around the Styles panel happening in https://github.com/WordPress/gutenberg/issues/66376, so I would lean towards keeping changes focused on functionality for now.

[richtabor]

There is a lot of high level design work around the Styles panel happening in #66376, so I would lean towards keeping changes focused on functionality for now.

Yes, let's not do design work on this panel here. One-off changes aren't going to improve the experience—it's going to continue making WordPress feel more and more fragmented and difficult to understand.