[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[bot]]

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

[github-actions[bot]]

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?