2 responses on “Custom CSS in the Site-Editing era”

1. Kathryn P.
   June 15, 2023 at 6:43 am | Reply

   Here are the code snippets I used during the site-wide CSS editor demo, along with all the resources that were mentioned:

   
   

   	/* Image block – caption */
   	.wp-block-image figcaption {
   	margin-top: 0;
   	padding: 20px 10px;
   	background-color: #4ccee6;
   	color: #563429;
   	font-weight: bold;
   	}
   	/* Quote block – first letter different */
   	.wp-block-quote p::first-letter {
   	font-weight: bold;
   	color: #4ccee6;
   	font-size: 70px;
   	}
   	/* Quote block – citation */
   	.wp-block-quote cite {
   	font-variant: small-caps;
   	}
   	/* Button hover */
   	.wp-block-button__link:hover {
   	background-color:#4ccee6;
   	}
   	/* Unordered list */
   	ul {
   	list-style-type: square;
   	}
   	/* Special button hover – use this with an Additional CSS class in the block editor */
   	.my-special-class .wp-block-button__link:hover {
   	background-color: #bb00bb;
   	}

   view raw
   
   custom-css-site-editing.css
   
   hosted with ❤ by GitHub
2. Kathryn P.
   June 15, 2023 at 6:44 am | Reply

   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-css

   Site-wide Custom CSS
   https://wordpress.org/documentation/article/styles-overview/#site-wide-custom-css

   Per-block Custom CSS
   https://wordpress.org/documentation/article/styles-overview/#per-block-css

   Using 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/CSS

   More 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/issues

   WHAT’S NEXT

   Code Linting
   https://github.com/WordPress/gutenberg/issues/47945

   List of blocks with custom CSS applied
   https://github.com/WordPress/gutenberg/issues/47946

   Selective loading of block CSS
   https://github.com/WordPress/gutenberg/issues/49559

   Clear hierarchy of styles
   https://github.com/WordPress/gutenberg/issues/49278