Code snippets and resources from Custom CSS in the Site-Editing Era workshop presented on June 14, 2023

custom-css-site-editing.css

/* 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;
}

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
WordPress/gutenberg#47945

List of blocks with custom CSS applied
WordPress/gutenberg#47946

Selective loading of block CSS
WordPress/gutenberg#49559

Clear hierarchy of styles
WordPress/gutenberg#49278