Additional CSS navigation button only shown when there is some additional CSS already set

[afercia]

Description

Noticed on a screenshot provided by @jameskoster on #66307 (comment)

Looking at that screenshot, I was wondering why I didn't see any 'Additional CSS' button in my Styles panel.

Turns out that seems intentional, as the navigation button is rendered based on a condition that also checks whether some additional CSS is already set.

I had to figure out how to navigate to the Additional CSS panel and ultimately found it in the 'More' ellipsis button at the top of the Styles panel.

To me, this seems to be a perfect way to hide features and make them less discoverable from users. I'd appreciate to know why the navigation button is rendered conditionally and whether this makes the UI more usable in any way.

I'd like to propose to make things simple and just not implement behaviors that may look smart at first but ultimately are arguable ad likely confusing for users.

@WordPress/gutenberg-design do you know why this is rendered only after some adidtional CSS has been set?

Also, the feature description:
Add your own CSS to customize the appearance and layout of your site.
is completely missing at first and only shown after the feature has been used. It's arguably usable to provide a description only after the feature it relates too has been used.

Step-by-step reproduction instructions

• Make sure you dont have any additional CSS set in the Global Styles.
• Open the Styles panel
• Observe there is no 'Additional CSS' navigation button at the bottom of the panel.
• Open the ellipsis menu and click 'Additional CSS'.
• Enter some additional CSS.
• No need to save.
• Go back to the main panel by using the 'Back' chevron icon button at the top of the additional CSS panel.
• Onserve the main Styles panel and see there is now an 'Additional CSS' navigation button, together with the feature description.

Screenshots, screen recording, code snippet

No response

Environment info

No response

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

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[afercia]

Additionally:
Why the 'Blocks' and 'Additional CSS' descriptions are placed before the navigation buttons?
This seems inconsistent with the vast majority of cases where descriptions in the editor are placed after the related control.

Also, for better accessibility, these descriptions should be associated with their related controls via aria-describedby.

[t-hamano]

do you know why this is rendered only after some adidtional CSS has been set?

It seems related to #47266.

I too would expect Additional CSS button to always be rendered. This functionality has been present in the Customizer for a long time and I don't think it should be hidden by default:

[afercia]

@t-hamano thanks for pointing to #47266

It appears the two points in that issues are:

Move the Additional CSS access point to the Global Styles ellipsis menu
Only if there is additional CSS present, add the Additional CSS component top-level to Global Styles (like it is currently)

i disagree with both points. To me, initially burying down a feature into a barely noticeable ellipsis menu is a perfect way to hide that feature. The fact the navigation button appeaers only when there is some additional CSS set may be smart at first but it;s confusing for users. I can't support this kind of design approach where, in the name of aiming to make the UI 'less cluttered', features and content get removed or hidden.

I only share the point that Additional CSS shouldn't be much prominent. It's sort of an advanced feature but it still needs to be discoverable. I'd think the best option is to just place the navigation button after the 'Blocks' one, with no special prominence.

[afercia]

It's worth mentioning that based on #63243 (comment) and #66307 the Revisions button is candiate to be moved to the main panel as well. So taht there would be 3 navigation buttons always shown, with no special prominence:

[afercia]

Looking into this, I just noticed a different beheavior when accessing the Additional CSS that I'd consider a functional bug.

• Make sure you have some additional CSS set e.g. a simple p {background: red; }
• Click the Style Book. The editor canvas changes to show the style book view.
• Access the Additional CSS from the ellipsis menu at the top of the Styles panel.
• Observe the canvas view changes and switches back to the default view.
• Click Style Book again.
• Access the Additional CSS from the navigatiom button at the bottom of the Styles panel.
• Observe the canvas view does not change.