[HelpHub] Global Styles

[femkreations]

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

Update for 6.2

• Make css input fill remainder of screen by default. 47437
• Move custom css to its own inline style generation method and combine with customizer CSS 47396
• move custom CSS to ellipsis menu if no custom CSS present yet 47371
• Add validation message to custom CSS input 47132
• Change "Custom" CSS navigation label to "Additional CSS" 47093
• Add "Learn more about CSS" help text to Custom CSS control 47091
• Inline block preview: add preview block in nested global style panels 46401
• Edit block style variations from global styles 46343
• add custom CSS panel to site editor 46141
• move border from layout to own menu 45995
• Add Style Book to Global Styles 45960
• Add a text decoration control to link elements 45643
• Add block preview component in global styles 45719
• Remove the beta label from global styles header 44251
• Use ToolsPanel in Global Styles → Typography 44180
• Show Letter Spacing in Global Styles -> Typography -> Headings 44142
• Allow setting Letter case and Decoration to 'None' and add Letter case to Global Styles 44067
• Try generating random color palettes 40988
• Modify Frame animation of styles grid 39717
• Try per block custom CSS 46571
• Hide the done button of the Global Style palette editor when there aren't colors to edit 44372
• Update design of FontSizePicker when withSlider is set 44598
• Update hint text to match the design 44966
• Rename Comments pagination inner blocks 44287
• Update the border icon 46264
• center align block in global styles inline preview 46727
• Add shadow presets and UI tools in global styles 46502
• Add a minHeight block support under dimensions 45300

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

[zzap]

Heads up @WordPress/docs-issues-coordinators, we have a new issue open. Time to use 'em labels.

[github-actions]

Heads up @femkreations @atachibana - the "user documentation" label was applied to this issue.

[github-actions]

Heads up @zzap @femkreations - the "block editor" label was applied to this issue.

[annezazu]

Notes for the future -- of the issues linked to above, the most important features are as follows:

• Custom CSS for the whole site and on a per block basis, especially as this is linked to from the Site Editor.
• Shadow presets for Buttons block
• Edit block style variations from global styles
• Inline block preview: add preview block in nested global style panels
• The Style Book

Notes about what I did:

• Removed all references to "beta".
• Updated screenshot for the Welcome Guide to show the CSS panel.
• Added in a general CSS section with screenshots for both global and per block CSS.
• Updated the Blocks video to show the in line preview.
• Noted the in line preview in the block setting.
• Added a section about editing block variations under Blocks called "Editing block variations".
• Removed mentions of 6.1 as that's now a version behind and added in notes about 6.2 instead.
• Added a section about box shadows for buttons under blocks called "Adding box shadows to Button block".
• Added a video for the above section.
• Added a new section called "Preview your changes with Style Book" and included a video.

Only odd thing is the table of contents isn't updating to include CSS and Style Book.

Closing out!

[mrfoxtalbot]

Should we re-open this to include the "Copy/Paste Styles" and "Apply Globally" features?