WordPress FSE live stream#4

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

• 📖 https://twitter.com/dcook/status/1580964541432999936
• 🧠 Theme.json only recognizes local URLs.
• 👨🏻‍💻 Tried to use a local font instead of a distant one
• ✅ Fonts worked
• ✅ Applied a bold font to my navigations

Part 2: Theme.json / layout

• ❓ Is it possible to contain the layout?
• 📖 https://developer.wordpress.org/themes/advanced-topics/theme-json/#layout
• 📖 https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/
• 📖 https://fullsiteediting.com/lessons/theme-json-layout-and-spacing-options/
• 🧠 Layout section, with contentSize and wideSize attributes
• 👨🏻‍💻 Setup contentSize to 960px and wideSize to 1280px
• ❌ Didn’t do much at first sight
• 👨🏻‍💻 Tried to toggle the block editor layout control
• ✅ The layout is now contained but at 960px wide, when I would prefer 1280px
• ❓How can I contain the layout at 1280 ?
• 🧠 By adding an alignwide class

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

Link to the stream video

• WordPress FSE live stream#4