Block Themes

A brief look at styles

by Ryan Oeltjenbruns

Important Parts

  • Theme.json
  • Styles: style.css (& editor-style.css?)
  • Functions.php
  • Templates
  • Template Parts

Style Flows

  1. Theme.json defines css variables
  2. CSS leverages those variables
  3. ..?
  4. Profit.

How they tie together

Theme.json

{
// ...
"palette": [
    {
        "name": "Awesome Dark",
        "slug": "black",
        "color": "#1c1c1c"
    },
    // ...

How WP Generates that

body {
    --wp--preset--color--black: #1c1c1c;
    // ...
}

A dash of SASS

#site-header {
    background-color: var(--wp--preset--color--black);
}

--OR--

$color-dark: var(--wp--preset--color--black);
#site-header {
    background-color: $color-dark;
}

Gutenberg Color Picker Too