Global Styles: Better labeling and instructions for global CSS and per-block CSS

[jordesign]

Description

The two options for adding CSS via the Site Editor (Additional CSS and Per-block CSS) are powerful and useful - but there are some places where labeling and instructions could give more clarity to which function the user is currently viewing, and assistance on how to use them.

For Example:

• The labeling at the top of each section is very similar, making it harder to tell if you are in the 'Additional CSS' or 'Per Block CSS' tool. The only visual difference is in the description.

• In the 'Per Block' CSS tool - it is not clear that CSS needs to be added without the selector being used.
  This has been previously raised in [Global Styles] Provide guidance on how to add per-block CSS #49531.

Step-by-step reproduction instructions

1. Go to the Site Editor and open the styles panel.
2. Compare the 'Additonal CSS' panel, to a CSS panel when editing the styles for a specific block.

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

[jordesign]

There are some existing PRs in discussion to address some aspects of this issue - but it could probably do with a holistic solution.

• Global Styles: Add conditional Placeholder for Custom CSS when it is for a block #49627 to add placeholder CSS in per-block CSS textarea. There's also a suggestion of adding the selector outside the textarea.
• Global Styles: Update Block specific CSS label to include additional instructions. #49626 to include more specific instructions for the per-block CSS. The copy/approach here could do with a review.
• No PR - but could we consider changing the label of the 'Additional CSS' to be clearer that it is global, or site-wide?

[richtabor]

No PR - but could we consider changing the label of the 'Additional CSS' to be clearer that it is global, or site-wide?

Maybe the opposite, “Block CSS”.

[jordesign]

Maybe the opposite, “Block CSS”.

That's a good thought - label the more specific instance. I think that would definitely help.

[jasmussen]

Worth noting, I don't think custom CSS is enabled in the core offering quite yet — or am I missing it some details on how to add this? I know it has landed, but not quite sure how to activate it locally. It's clearly active on wp.com where these screenshots are from.

In that light, I'd echo Rich, just noting it as block CSS. But I'll also share the original mockups, which haven't yet been fully implemented:

Global CSS:

Group CSS:

I also recall a conversation around how to scope the group CSS to not bleed, and one of the suggestions were to use :self, which potentially we could lock into place inside the editable field:

[richtabor]

or am I missing it some details on how to add this? I know it has landed, but not quite sure how to activate it locally.

Via the vertical ellipsis menu in the Global Styles sidebar.

[jasmussen]

Ah, we really hid that one didn't we 😅 — I'm sure there's context that steered it away from the original mockups. Thanks.

[richtabor]

Yea.. perhaps a bit too much. It's a risky thing to put so much emphasis on at the top-level Styles panel though. Perhaps in the future there would be sidebar for developer tools, and it could live in there.

[jordesign]

I think the thing will be that there are plenty of non-developers who will use the Additional CSS - prompted via support, forums, tutorials etc. So making it as clear as possible would be great.

[jordesign]

I just spotted that the Block-Specific CSS is now under the 'Advanced' section of the sidebar settings - which sets a much better context - so this change of labeling is probably no longer an issue.