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 sixth streaming session.
Legend: ❓question, 👨🏻💻 code, ✅ check, 📖 read, 🎥 watch, 🧠 learn.
Part1: Block theme styling theory
- ❓How do you style block themes?
- 👀 There’s practically 0 CSS in WP themes like twentytwenty-two or twentytwenty-three, but the themes are still styled.
- ❓How do they do that?
- ❓What’s the current WP philosophy regarding theme styles?
- 📖 https://make.wordpress.org/core/2022/08/01/moving-core-block-styling-to-json/
- 📖 https://fullsiteediting.com/lessons/global-styles/
- 📖 https://github.com/jonathanbossenger/block-theme-course/blob/main/module-02/02-Converting-the-Style-Guide-to-theme.json.md
- 🧠 Use the global styles interface
- 🧠 Declare elements and blocks styles in theme.json
Part2: Global styles
- 👨🏻💻 Test the global styles interface
- ✅ It does apply styles in my theme
- 🧠 Global styles are generated by the style engine as inline styles
<style id='global-styles-inline-css’> - ❓Where are global styles stored if not in theme.json
- 🧠 global styles are stored in a post type
wp_global_styles - 🧠 We can export that back to theme.json with some adjustments
- turn this variable syntax (
var:preset|font-family|itc-avant-garde) to (var(--wp--preset--font-family--itc-avant-garde))
- turn this variable syntax (
- 👨🏻💻 apply global styles to
- background color
- text color
- buttons colors
- headings typography
- 🧠 By default it doesn’t seem possible to colorize links via the global styles interface. Possible in theme.json though.
"elements": { "link": { "color": { "text": "#000" } }}
- ❓Is it possible to set the REM scale on the HTML element?
- 🧠 It is possible to add custom styles in theme.json
"styles": { "css": "html { font-size: 62.5%; }"- It is a bit cumbersome to write CSS in theme.json
- The HTML rem font size doesn’t seem to be applied in the back office properly.
- ❓ I’m missing the line height management, how can I activate that?
- 📖 https://fullsiteediting.com/lessons/theme-json-typography-font-styles/#h-line-height
- 🧠 Line height management can be activated in theme.json
"settings/typography/lineHeight": true- This setting is not configurable, just activable
Part 3: moving global styles from database to theme.json
We’ve seen earlier that global styles were stored by WordPress in a post type wp_global_styles and that it could be translated back into your theme.json with a few syntax adjustments.
Let’s try that.
- 👨🏻💻 Located the wp_global_styles post, and copied its content to a JSON formatter to see how it looks.
- 👨🏻💻 Copied some parts to theme.json
- 🧠 Can be a little burden to do that every time.
- 👨🏻💻 Used the create block theme plugin to see if it was easier. Used the overwrite export. It saved it all properly in theme.json, much easier!
Current theme.json file
{
"settings": {
"color": {
"palette": [
{
"color": "#f7f7f7",
"name": "Light",
"slug": "light"
},
{
"color": "#3a3a3a",
"name": "Dark",
"slug": "dark"
},
{
"color": "#1a1a1a",
"name": "Darker",
"slug": "darker"
}
]
},
"layout": {
"contentSize": "960px",
"wideSize": "1280px"
},
"spacing": {
"blockGap": true,
"margin": true,
"padding": true,
"spacingSizes": [
{
"name": "Tiny (.5rem D)",
"size": ".5rem",
"slug": "30"
},
{
"name": "Small (1rem D)",
"size": "1rem",
"slug": "40"
},
{
"name": "Medium (2rem D)",
"size": "2rem",
"slug": "50"
},
{
"name": "Large (4rem D)",
"size": "4rem",
"slug": "60"
},
{
"name": "XL (8rem D)",
"size": "8rem",
"slug": "70"
},
{
"name": "2XL (16rem D)",
"size": "16rem",
"slug": "80"
}
],
"units": [
"rem"
]
},
"typography": {
"fontFamilies": [
{
"fontFace": [
{
"fontDisplay": "auto",
"fontFamily": "itc-avant-garde-gothic-pro",
"fontStyle": "normal",
"fontWeight": "700",
"src": [
"file:./assets/fonts/itc-avant-garde-bold.woff2"
]
},
{
"fontDisplay": "auto",
"fontFamily": "itc-avant-garde-gothic-pro",
"fontStyle": "normal",
"fontWeight": "300",
"src": [
"file:./assets/fonts/itc-avant-garde.woff2"
]
}
],
"fontFamily": "\"itc-avant-garde-gothic-pro\", Arial, sans-serif",
"name": "itc-avant-garde",
"slug": "itc-avant-garde"
}
],
"fontSizes": [
{
"name": "Small",
"size": "1.5rem",
"slug": "small"
},
{
"name": "Normal",
"size": "2rem",
"slug": "normal"
},
{
"name": "Medium",
"size": "2.5rem",
"slug": "medium"
},
{
"name": "Large",
"size": "3.5rem",
"slug": "large"
},
{
"name": "XL",
"size": "5.5rem",
"slug": "x-large"
},
{
"name": "Huge",
"size": "8.5rem",
"slug": "huge"
}
],
"lineHeight": true
}
},
"styles": {
"blocks": {
"core/button": {
"color": {
"background": "var(--wp--preset--color--dark)",
"text": "var(--wp--preset--color--light)"
}
},
"core/categories": {
"css": "list-style: none; padding: 0; & a{text-decoration: none;}"
},
"core/list": {
"typography": {
"fontSize": "var(--wp--preset--font-size--normal)"
}
},
"core/navigation": {
"typography": {
"fontSize": "2rem"
}
},
"core/paragraph": {
"spacing": {
"margin": {
"bottom": "2.5rem"
}
},
"typography": {
"fontSize": "var(--wp--preset--font-size--normal)",
"lineHeight": "1.6"
}
},
"core/post-excerpt": {
"typography": {
"fontSize": "var(--wp--preset--font-size--medium)",
"fontStyle": "normal",
"fontWeight": "700"
}
},
"core/query-title": {
"spacing": {
"margin": {
"bottom": "0"
}
}
},
"core/separator": {
"color": {
"background": "var(--wp--preset--color--light)"
}
}
},
"color": {
"background": "var(--wp--preset--color--light)",
"text": "var(--wp--preset--color--dark)"
},
"css": "html { font-size: 62.5%; }",
"elements": {
"caption": {
"css": "text-align: right;",
"typography": {
"fontSize": "0.5em"
}
},
"h1": {
"typography": {
"fontSize": "9.5rem",
"fontStyle": "normal",
"fontWeight": "700",
"lineHeight": "1"
}
},
"h2": {
"typography": {
"fontSize": "var(--wp--preset--font-size--large)",
"fontStyle": "normal",
"fontWeight": "700"
}
},
"h3": {
"typography": {
"fontSize": "var(--wp--preset--font-size--medium)"
}
},
"h4": {
"typography": {
"fontSize": "var(--wp--preset--font-size--medium)"
}
},
"link": {
"color": {
"text": "#000"
},
"typography": {
"fontStyle": "normal",
"fontWeight": "700"
}
}
},
"typography": {
"fontFamily": "var(--wp--preset--font-family--itc-avant-garde)",
"fontSize": "var(--wp--preset--font-size--normal)"
}
},
"version": 2,
"$schema": "https://schemas.wp.org/wp/6.3/theme.json"
}See the associated pull request to watch the theme.json changes.
Current website look
The styling is coming into shape.
So far I’ve styled buttons, categories lists, core lists, the navigation, paragraphs, excerpts, query titles, separators, captions, headings, and links. First via the global styles interface, then exported the changes into my theme.json.
Plan for next time
Now that I’ve done most of the work I can do without any custom development, it will be time to enhance the editing experience by adding a few custom blocks. For example, I’m not happy with the logo and copyright as dynamic template parts as it does not render properly in the admin and it gets overridden by the template parts engine when saved in the style editor. So I’ll build two custom blocks for this, or see if I can override the logo output.
To build those blocks, I will use the WordPress’ create-block package, create a plugin to store my blocks, and see how to articulate that with the wordpress-scripts package.
If you found this article interesting, I encourage you to follow my work via the form below. I mainly write about production teams' optimization, processes, management, and the tooling around those subjects. I’m even preparing an online course to concentrate all of this for you in a unique place. I hope it can help you get the very best out of your development team.
Follow my work
Follow me to get notified of new posts, resources, and online courses I create.