The easy and compliant way that every theme developer should know. TL;DR: Use the Create Block Theme plugin to bundle fonts in your theme with just a few clicks. WordPress block themes allow you to add fonts to a theme by adding the font file assets to the theme folder and referencing them in the theme.json. Editing a JSON file manually does not deliver the best user experience. The good news is you can use the plugin to make this task much simpler without technical trade-offs. Disclaimer: The plugin is for development only and is not intended for live production websites because it modifies t ..read more

We have been working on a plugin to help you create a Blockbase child theme. The idea is that you can use the existing tools to make changes to a Blockbase theme, and then export a bundle of templates and theme.json as a new child theme. I tried to create a new theme called “Typewriter” using these tools. Step 1 – Setup Install and activate Blockbase , and the Create Blockbase Theme plugin. Step 2 – Customizations Make changes to your site using the customizer. I chose some new colors: I changed the fonts: You could also use Global Styles to make changes to your theme at this point: I only ..read more

Since our last post about Universal Themes we have fleshed out this idea and are using it to build all our themes. The Problem WordPress is introducing the Full Site Editor and with it new ways to build themes.  These themes are called “Block” themes and integrate deeply with Gutenberg Blocks. These types of themes require the use of the new (and still in development) Full Site Editor.  The Site Editor is still being built, and block themes are in a nascent stage; they don’t yet offer the full gamut of features that will be available in the future. Block themes also require a very re ..read more

With WordPress 5.8 launching on July 20th, it seems like a great time to round up some resources to help theme authors prepare for the future. By now, you’ve probably heard about block themes and the upcoming future of full site editing. Perhaps you have even begun to explore creating a block theme or adapting your current theme to some of the new features, like template editing mode. Whether you’re just starting out or already deep in the block theme world, the following resources should help you be aware of what’s to come and how to get involved in shaping the future. If you’re looking for a ..read more

In the last post we shared the idea of a “universal” theme. This post looks at how we can use classic WordPress tools (in this case the Customizer) to customize a block theme, while saving these changes in Global Styles – making a universal theme! Global Styles Everywhere Block themes use a theme.json file to define many aspects of the theme, e.g. color palettes and typography. Gutenberg provides a tool to edit these settings (called Global Styles). When a user changes these values in the Global Styles UI, the changes are not saved back into the theme.json file but instead are saved to a Custo ..read more

We’ve been bundling block patterns with all of our themes for quite a while now, but recent improvements to the Template Part and Query Loop blocks has opened up a whole new world for how patterns can be used. Both blocks can now display a carousel of block patterns in their setup state, allowing users to choose between a menu of pre-designed versions of these blocks. These patterns can be bundled with your theme, so that users have a wide range of pre-designed header, query, and footer options available to choose from in the Site Editor: The only difference between these and other patterns y ..read more

With the Full Site Editing project well underway, theme developers need to be thinking about what the future holds for themes.  Why block themes? To take advantage of the Site Editor, themes need to be built out of blocks – this is why we need block themes. Block themes are an entirely new way of creating themes. Classic themes bundle all of the code needed to control the presentation and functionality of the site, with the theme itself. This often means that themes contain extra code to add features (e.g. a slideshow) as well CSS to control the layout. With block themes, much of the them ..read more

Last week I spent a little time putting Blockbase to the test. I had some explorations into warping text and images using CSS and SVG filters gathering dust, and I thought it would be fun to explore pulling those into a highly-opinionated block theme. In the past when I’ve done a theme experiment like this, I’ve generally started with something like the emptytheme generator in the WordPress theme-experiments repository. This provides you with just the required files for building a block theme, so it’s a good minimal way to get started. This time around, I used Blockbase. While it doesn’t yet i ..read more

Phase 2 of Gutenberg introduces Full Site Editing to WordPress; to make this possible, we need a new way of building themes – using blocks. How do block themes work? Block themes use templates made entirely of blocks. The layout is configured using a combination of theme.json and CSS. The settings in theme.json are used to generate CSS – this is part of the Global Styles feature. The theme CSS is added after the theme.json CSS and together these rules define the layout for a theme. If you’re just getting started with block themes, this guide should help. Can I style my whole theme with Global ..read more

Block Patterns, or simply patterns, enable theme developers to create custom blocks that are compositions of blocks provided by the standard block library, and if desired, with additional design flourishes. For example, Twenty Twenty One includes support for blocks designed with overlapping images and text, among others. In the blocks version of Twenty Twenty One, these will be registered as patterns within the theme. Repeatable design patterns Unlike templates, patterns are defined in PHP in a way that might be more familiar to experienced theme developers. We can define them in the functions ..read more