1. What makes a block theme different 2. The architecture behind them 3. How they facilitate full site editing 4. How to build one using Create Block Theme
Blocks are cool micro experiences within the editor — but they’re only as good as the holistic WordPress experience. And you know what drives much of that?
Your theme.
If you’re using the block editor — your theme has never been more relevant in this #NewEraOfThemes.
Block themes differ from classic themes in form and function:
1. They are mostly HTML based. 2. Everything is a block (i.e. headers, footers, etc). 3. You get the Site Editor with a block theme. 4. Designed to reduce friction from theme to theme.
Theme.json, the foundation of block themes — sets the stage for a #NewEraOfThemes.
A block theme’s theme.json file defines a site’s styles and settings (including the template layer, i.e. templates, parts, and patterns).
Styles are managed by the Hierarchy of Styles: the way theme.json styles supersede default core styles, and user styles supersede theme.json styles.
Styling HTML elements with theme.json is easy. These target the body element on the front-end and the content wrapper within editor:
And these target the button and h1 elements on the front-end, and again within editor:
The theme.json file can also be used to scope styles to specific Gutenberg blocks.
A site’s settings can be configured by a theme’s theme.json file.
That is, what options/controls are available, what features the themes opts into and the default colors/font sizes/layout widths etc.
You can also tighten up the editing experience, such as limiting colors or typography options of a specific block (like buttons for example).
Doings so can lead to a “safer” editing environment, when you don’t want a stylistic free-for-all in the block editor.
Looking at the template layout (templates, parts, and patterns), there are plenty of similarities across the board.
1. Each are block-based. 2. Each are leveraged to level-up block editing. 3. Templates and parts are HTML. 4. Patterns can be PHP.
Parts are sections of a site that can be added to a template (think headers and footers).
They can be registered within a WordPress block theme’s theme.json file, like this:
Registered parts can be edited directly within the Site Editor.
Editing a part (and template) will opt it out of the theme’s ownership, i.e theme updates won’t override your custom parts and templates.
You can also replace whole "like" parts (headers for example) within the Site Editor, allowing you to swap the part out in just a few steps.
Did you know that you can add patterns directly from the WordPress Patterns Directory into a block theme, using theme.json?
Add a pattern’s slug from the WordPress Patterns Directory to a patterns array within a block theme’s theme.json file and you’ll see those show up within the local pattern library.
Creating patterns for the WordPress Patterns Directory, then including them in a theme’s theme.json file is much more maintainable than building 100’s of one-off patterns across multiple themes.
And here are those same patterns loaded within the local pattern library:
Anyone can create and share WordPress block patterns using the block editor. Jump in today and give it a go. wordpress.org/patterns/new-p…
I think patterns are great, but my favorite component of a block theme is style variations.
That is, variations on the origin theme.json design language, which allow you to change the look of a site with minimal friction.
Like these, from my theme Wabi:
The best part of style variations in this is that each one inherits styles from the theme.json file, so there's no need to replicate entire JSON files just to change a couple style choices.
Block themes are a sum of all parts (styles, settings, templates, parts, patterns, and variations) — that come together to support Full Site Editing.
WordPress FSE (Full Site Editing) is the collection of features that bring blocks to all parts of a site. This includes template editing, setting global styles, and configuring navigation within the Site Editor.
I know this is touchy… but the Site Editor is intended to replace the Customizer.
When running a block theme, you won’t have the Customizer menu link (even though the Customizer is technically still around).
However, if you have a plugin that leverages it, you’ll still see the Customizer.
So with the Full Site Editing experience in full swing, we can now leverage it to build block themes — instead of having to write JSON, copy/paste blocks into templates, etc.
Now this is mind-blowing. 🤯
Use the new Create Block Theme plugin to take any template and style changes from your current WordPress theme, to export a brand new theme… without writing any code.
Change colors, layout widths, viewport padding, typography, block styles, templates, parts — the whole nine yards. Make it yours.
Then export all your changes all at once. 🤯
This unlocks WordPress block theme creation for, well creators. You don’t have to be an developer — or rather understand any of the code — to create a block theme.
Sure, it helps to understand what’s happening, and how this all works — but code is no longer a limitation.
Well, that’s that! Everything I know about this new era of WordPress themes we’re in.
Thoughts or questions? Let’s hear ‘em!
P. S. I’m at #WCUS in San Diego through Monday morning if you’d like to talk shop in person.
Follow me and subscribe to my newsletter — and I'll keep you up to date with the future of WordPress & design. getrevue.co/profile/richta…
"Thank you" to everyone who's been a driving force on the block theme front. This took the combined efforts of 100's of folks, but I wanted to name a few stand-outs:
Here’s everything you need to know about the latest release of WordPress:
1/ Color palettes and typesets
Add color palettes and typesets to themes, which can be each be applied independently of each other. Think of a library of colors and typography styles, all interchangeable.
2/ Variations for groups of blocks
Curate one-click styles for groups of blocks with this next big iteration of block style variations. Basically, mini-themes to use throughout your site, keeping each section on-brand.
Here’s everything you need to know about latest release of WordPress:
1/19 A new default WordPress theme
Twenty Twenty-Four sets the stage for site editing at its highest level, empowering swift website creation with diverse site templates, patterns, and stunning theme variations.
The future of WordPress themes is here. 💫
2/19 Image lightbox
Enable images to expand and fill the screen, offering a distraction-free view to showcase the intricate details of images, portfolios, and galleries.
Here’s everything you need to know about the latest release of WordPress…🧵
Site Editor, now out of beta
If you're using a block theme, you have access to one of the best tools for expression on the web: the WordPress Site Editor.
Edit your block-based header, footers and page templates — and style away within the Site Editor's global style controls.
Reimagined Site Editor
An updated interface that cleans up the WordPress site editing experience, making it more intuitive to jump between your site's templates and template parts.