Icons for block-specific and overall styling within the Site Editor

[Olein-jp]

What problem does this address?

When editing in the site editor with WordPress 6.3.1 and the Gutenberg plugin activated, we often see the styling icons.

While it is true that once you get used to it, you will be able to identify it, we see many users who get lost with the styling icons when explaining their use to beginners and novice users.

Currently, when any block is selected in the editor that can be styled, a settings panel and a style panel are displayed, with the settings panel being displayed by default.

If you want to make changes related to the style in that state, the explanation is that you select the style panel and work with it, but the same icons are present at the top of the screen. And when you hover over each one, you will see the same 'Styles' description. But it is the icon to the screen where you style the whole site.

We have heard more than one person say they are confused or find this difference confusing, so we report it here.

What is your proposed solution?

There are obviously more optimal solutions than this, but the two I have come up with are

• Use a uniform colour scheme for icons and other elements on screens where you do the overall configuration (including style books) (e.g. blue in WordPress).
• Change the design of the icons.

Personally, I think it would be better to use a colour scheme or other form of identification rather than changing the icon design, as they are still the same style settings.