[HelpHub]: Styles overview

[femkreations]

Article: https://wordpress.org/documentation/article/styles-overview/

Update for 6.3

• Global styles revisions: move from experimental to 6.3 51474
• add revisions UI 50089
• Unify the global block styles panel with the block inspector panels 49428
• Link to the block type panel when selecting a block with Styles open 49350
• Caption element UI controls for color and typography 49141
• Remove copy for managing a block's style variations 48367
• Add example so that it will display in style book 48300
• Allow button text labels for style book icon 48088
• Update 'Additional CSS' subtitle string 47671
• move shadow into own panel 47634
• Add Global Styles controls for blocks that support duotone 48255

General

• Make sure all screenshots are relevant to the latest version
• Make sure videos, if any, are up to date
• Add ALT tags for the images
• Make sure the headings are in sentence case
• Convert all reusable blocks to a ‘regular block’.
• Update the changelog at the end of the article

Notes

1. We are not adding detailed updates for the Block settings - Typography, Color, Layout, Dimension and Border and for the More Options setting in the block toolbar. Pls mention the settings included for the block and link to the detailed settings pages instead.
2. Some of the PRs have great videos that can be added to the article.

[sagargurnani99]

Please assign this to me.

[sagargurnani99]

• Global styles revisions: move from experimental to 6.3 51474

This is not required, being technical.

• Add revisions UI 50089

Global styles timeline

All the changes made to global styles would appear in the global styles sidebar like a list which would show the history of edits made. The rest controller allows only up to 100 revisions to be shown and the revisions panel would only appear when there are more than two revisions.

global_styles_timeline_video_example.mp4

[sagargurnani99]

• Link to the block type panel when selecting a block with Styles open 49350

New navigate block option - Skip Focus

When the Global Styles panel is open in the site editor, clicking on a block will now open the settings for that specific block type. To make this happen without causing any disruption to the way you're writing, a new option has been added which is known as the skipFocus. This keeps the focus on the block you're working on.
This new option could also be helpful in other situations where you need to move to different parts of the website programmatically to other components outside of the editor.

new-feature-skipfocus.mov

[sagargurnani99]

• Caption element UI controls for color and typography 49141

Customizable caption elements

The caption elements can be customized through the Global Styles and can be found under the "Color" and "Typography" sections in the editor. So, if you want to apply a font, color or a background to a caption, you can do that from the Global Styles sidebar itself.

[sagargurnani99]

• Remove copy for managing a block's style variations 48367
  This seems like a minor text change and I believe that it needs no documentation. Please confirm @femkreations.

[sagargurnani99]

@femkreations The following issue seems like a developer issue which fixes the issue in which the global and local blocks are styled consistently. Please confirm.

• Unify the global block styles panel with the block inspector panels 49428

[sagargurnani99]

• Add example so that it will display in style book 48300

Site tagline

The Global Styles section lets the users set and unset the Site Tagline. Users can also update the font and color of the site tagline through this section. This is an optional setting which the users can utilize if they as per their needs.

[sagargurnani99]

• Allow button text labels for style book icon 48088
  It seems this doesn't need to be documented for the end users. Please confirm. @femkreations @zzap

[sagargurnani99]

• Move shadow into own panel 47634
  The "Borders & Shadow" panel in Global Styles has been separated into two - Borders and Effects, by moving shadow under "Effects". This is done because even though a block doesn't have the shadow support enabled the panel label "Borders & Shadow" is misleading. Instead it has been moved to a different menu "Effects" so it appears only for the shadow enabled blocks.

[sagargurnani99]

• Add Global Styles controls for blocks that support duotone 48255

Duotone filters

Global Styles now support Duotone filters. Earlier, themes could define duotone presets for their blocks via theme.json only and there was no way for the users to disable, unset or change those. Now, a filters panel in Global Styles has been added that contains the Duotone picker in it which overrides whatever the theme defines for the blocks.

[sagargurnani99]

• Update 'Additional CSS' subtitle string 47671
  This seems like a minor label text change and doesn't need to be documented for the end user. Please confirm. @femkreations @zzap.

[atachibana]

@sagargurnani99
Thank you for your careful work. My comment on the whole thing.

• HelpHub is an end user document. Backgrounds about feature changes, past history, and internal workings are unnecessary.
• The word 'Now' is ambiguous. 'Since WordPress 6.3' is appropriate if you want to emphasize it, which is not necessary in the first place.
• Please be sure to speak clearly to the end user about the function. Explain what the function is and how to use it.

Global styles revisions: move from experimental to 6.3 51474

• I don't think it is required. it is too technical.

Add revisions UI 50089

• Remove 'Now'

Link to the block type panel when selecting a block with Styles open 49350

• I don't think it is required.
• At least, later parts of skipFocus is not required in the HelpHub.

Caption element UI controls for color and typography 49141

• Remove 'Now'
• Remove 'Earlier this could only be achieved by modifying the theme.json file.'

Remove copy for managing a block's style variations 48367

• No, we don't need it as you say.

Unify the global block styles panel with the block inspector panels 49428

• No, we don't need it as you say.

Add example so that it will display in style book 48300

• Remove 'Now'
• Remove 'When there is no site tagline, a placeholder is shown which simply says "A site tagline.".'

Allow button text labels for style book icon 48088

• No, we don't need it as you say.

Move shadow into own panel 47634

• I don't think it is required.
• We just update our screenshot with separated Borders and Effects.

Add Global Styles controls for blocks that support duotone 48255

• We don't need those explanation but add the Duotone in the filter panel.

Update 'Additional CSS' subtitle string 47671

• No, we don't need it as you say.

@femkreations @zzap
please check my comments.

[sagargurnani99]

@atachibana I will make sure that I don't repeat the points which you highlighted above. Many thanks for reviewing it. I have edited my comments above as per your feedback.

[atachibana]

@sagargurnani99

Add Global Styles controls for blocks that support duotone 48255
We don't need those explanation but add the Duotone in the filter panel.

You can follow the sections under "Blocks", such as "Adding box shaows to Button block". Or simply, insert the 'duotone' as the one of customizable style in the below sentence in Blocks chapter:

For example, you can customize the border, radius, duotone, etc. for the Image block or change the paddings, margins, colors, and fonts for the Heading block.

[sagargurnani99]

/review