WordPress FSE live stream#4

↳ theme.json fonts and layout
Posted in Gutenberg, the 21/10/2022.

Introduction

I plan to rebuild my current theme into a full-site editing one and do so while live coding and live streaming.

Here’s the recap of the fourth streaming session.

Legend: 👨🏻‍💻 code, ✅ check, 📖 read, 🎥 watch, 🧠 learn.

Part 1: Theme.json / fonts

Part 2: Theme.json / layout

Current theme.json file

{
  "version": 2,
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "settings": {
    "color": {
      "palette": [
        {
          "color": "#f7f7f7",
          "slug": "light",
          "name": "Light"
        },
        {
          "color": "#3A3A3A",
          "slug": "dark",
          "name": "Dark"
        }
      ]
    },
    "typography": {
      "fontFamilies": [
        {
          "fontFamily": "\"itc-avant-garde-gothic-pro\", Arial, sans-serif",
          "name": "itc-avant-garde",
          "slug": "itc-avant-garde",
          "fontFace": [
            {
              "fontFamily": "itc-avant-garde-gothic-pro",
              "fontDisplay": "auto",
              "fontStyle": "normal",
              "fontWeight": "700",
              "src": [
                "file:./assets/fonts/itc-avant-garde-bold.woff2"
              ]
            },
            {
              "fontFamily": "itc-avant-garde-gothic-pro",
              "fontDisplay": "auto",
              "fontStyle": "normal",
              "fontWeight": "300",
              "src": [
                "file:./assets/fonts/itc-avant-garde.woff2"
              ]
            }    
          ]
        }
      ]
    },
    "layout": {
      "contentSize": "960px",
      "wideSize": "1280px"
    }    
  },
  "styles": {
    "color": {
      "background": "var(--wp--preset--color--light)",
      "text": "var(--wp--preset--color--dark)"
    },
    "typography": {
      "fontFamily": "var(--wp--preset--font-family--itc-avant-garde)"
    }
  }
}

Current website look

As you can see, the header and footer have the correct bold font. Do not have the correct font size nor padding / margin yet.

Plan for next time

  • 👨🏻‍💻 Work on font size, margin and padding
  • 👨🏻‍💻 Work on the home page content