Custom CSS in the Site-Editing era
Speaker: Álvaro Gómez Velasco, Kathryn Presner
WordPress 6.2 introduced two new ways to add custom CSS to your site: a global CSS editor, and a per-block CSS editor. Both methods let you add CSS overrides directly in the Site Editor, in order to tweak the way your site looks. In this session we’ll cover the differences between the two types of editors, and how to use them effectively and appropriately.
We’ll also look at:
– A brief history of custom CSS in WordPress.
– The purpose of having custom CSS editors in the Site Editor in the first place; when to use them, and when not to.
– A cross-section of practical examples that you can put into action right away!
To get the most out of this workshop, you should have some knowledge of CSS basics and understand how to use a browser inspector to find the right elements to target. The workshop won’t cover how to write CSS itself.
Comments
4 responses to “Custom CSS in the Site-Editing era”
-
Here are the code snippets I used during the site-wide CSS editor demo, along with all the resources that were mentioned:
https://gist.github.com/kathrynwp/96239c20a33084e1b1be7a4e31cc60ec
-
Here are the code snippets I used during the site-wide CSS editor demo, along with all the resources that were mentioned:
https://gist.github.com/kathrynwp/96239c20a33084e1b1be7a4e31cc60ec
-
DOCUMENTATION/TUTORIALS
Block Themes
https://wordpress.org/documentation/article/block-themes/Styles
https://wordpress.org/documentation/article/styles-overview/Styles Overview – Applying Custom CSS
https://wordpress.org/documentation/article/styles-overview/#applying-custom-cssSite-wide Custom CSS
https://wordpress.org/documentation/article/styles-overview/#site-wide-custom-cssPer-block Custom CSS
https://wordpress.org/documentation/article/styles-overview/#per-block-cssUsing the Style Book With Block Themes
https://learn.wordpress.org/tutorial/how-to-use-the-wordpress-stylebook-with-your-block-theme/Create Block Theme Plugin
https://wordpress.org/plugins/create-block-theme/OTHER RESOURCES
Mozilla CSS Reference
https://developer.mozilla.org/en-US/docs/Web/CSSMore Advanced reading – Per-block CSS with theme.json
https://developer.wordpress.org/news/2023/04/per-block-css-with-theme-json/GETTING HELP
Theme Support Forum – for example, here’s the Twenty Twenty-Three forum
https://wordpress.org/support/theme/twentytwentythree/Gutenberg Support Forum
https://wordpress.org/support/plugin/gutenberg/Gutenberg GitHub
https://github.com/WordPress/gutenberg/issuesWHAT’S NEXT
Code Linting
https://github.com/WordPress/gutenberg/issues/47945List of blocks with custom CSS applied
https://github.com/WordPress/gutenberg/issues/47946Selective loading of block CSS
https://github.com/WordPress/gutenberg/issues/49559Clear hierarchy of styles
https://github.com/WordPress/gutenberg/issues/49278 -
DOCUMENTATION/TUTORIALS
Block Themes
https://wordpress.org/documentation/article/block-themes/Styles
https://wordpress.org/documentation/article/styles-overview/Styles Overview – Applying Custom CSS
https://wordpress.org/documentation/article/styles-overview/#applying-custom-cssSite-wide Custom CSS
https://wordpress.org/documentation/article/styles-overview/#site-wide-custom-cssPer-block Custom CSS
https://wordpress.org/documentation/article/styles-overview/#per-block-cssUsing the Style Book With Block Themes
https://learn.wordpress.org/tutorial/how-to-use-the-wordpress-stylebook-with-your-block-theme/Create Block Theme Plugin
https://wordpress.org/plugins/create-block-theme/OTHER RESOURCES
Mozilla CSS Reference
https://developer.mozilla.org/en-US/docs/Web/CSSMore Advanced reading – Per-block CSS with theme.json
https://developer.wordpress.org/news/2023/04/per-block-css-with-theme-json/GETTING HELP
Theme Support Forum – for example, here’s the Twenty Twenty-Three forum
https://wordpress.org/support/theme/twentytwentythree/Gutenberg Support Forum
https://wordpress.org/support/plugin/gutenberg/Gutenberg GitHub
https://github.com/WordPress/gutenberg/issuesWHAT’S NEXT
Code Linting
https://github.com/WordPress/gutenberg/issues/47945List of blocks with custom CSS applied
https://github.com/WordPress/gutenberg/issues/47946Selective loading of block CSS
https://github.com/WordPress/gutenberg/issues/49559Clear hierarchy of styles
https://github.com/WordPress/gutenberg/issues/49278
Video details
This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
Leave a Reply