Level: Developer
-
How to add blocks to user-created templates
With full site editing, the user has two new ways to create templates: In this lesson, I cover how to change the blocks that WordPress adds when the user creates a custom template in the block editor. A template assigned to a post or page. To learn how to add default blocks to the block…
-
How to add default blocks to the block editor
In this short lesson, I will explain how to add default blocks to any post type. This feature is independent of the theme templates because it adds blocks to the content, directly in the block editor. This lesson is an updated rewrite of two previous lessons. Last updated I have found three reliable ways to…
-
How to filter theme.json with PHP
Prerequisites: Global Styles & theme.json. Last updated WordPress 6.1 introduced four new PHP filters for theme.json. You can use the filters to override both the WordPress default theme.json, theme settings, and user settings. This post is explorative, as I myself is learning about the filters and their use cases. The documentation about these filters is very…
-
Modifying block style variations via theme.json
Last updated If you have used the block editor for a while, you are probably familiar with the selectable styles that are available for some blocks through the block editor UI. For example, the rounded image, the striped table, and the pill shaped social icons. From Gutenberg version 15.0 and WordPress 6.2, these styles are…
-
How to use custom CSS in theme.json
WordPress 6.2 adds two new custom CSS options to the Styles sidebar in the Site Editor: This lesson focuses on the theme.json implementation. If you need a re-cap of how to use theme.json before you continue, please read the first lesson about Global styles & theme.json. Last updated Introduction The new CSS options have been…
-
Full site editing child themes
In 2021 I wrote a widely spread blog post called “The state of child themes” about the problems I encountered while trying to create block child themes. The update is long overdue, but it is finally here: The good news is, block child themes are now fully supported! To follow along with this article, you…
-
How to add box-shadows with theme.json
Last updated WordPress 6.1 introduced the first version of the box shadow support. Gutenberg version 15.1 and WordPress version 6.2 adds some improvements, but development is ongoing. In WordPress 6.1: In WordPress 6.2: Shadow presets Shadow presets are very similar to the color palette and belong under the theme.json settings section: settings.shadow. Default shadow presets…
-
How to add hover and focus styles using theme.json
In the previous lesson you learnt how to use theme.json elements. In this lesson, I will show you examples of how to add hover and focus styles to link and buttons in theme.json. This lesson has been updated in preparation for WordPress 6.3 with a planned release in August 2023. Last updated Changes to the…
-
Theme.json elements
Last updated What are theme.json elements? Sometimes you want to style a part of a complex block, and you want more control over the block styles than just adding the same colors or font sizes to all the inner elements.Let’s take these examples: This is where the theme.json elements category becomes useful. The Gutenberg developers…
-
Theme.json typography: Line height, font weight and text decoration
In this second typography lesson, I bring up the theme.json font style settings as well as line height, font weight, and text decoration settings. Prerequisites: Global Styles & theme.json. Last updated Line height The custom line height is one of the theme.json settings that are not experimental. WordPress supports it without the Gutenberg plugin active: -In…
-
Accessibility in full site editing themes
Prerequisite: Basic knowledge of web accessibility Did you know that the block editor and full site editing have built-in features for creating accessible websites? The enhancements to the block editor are beneficial for both developers and editors. The accessibility features in full site editing themes focus on solving common accessibility problems found in classic themes.…
-
How to lock blocks and templates
In this short lesson, I explain briefly what block locking is and when it is useful for full site editing, and I describe techniques for locking blocks and templates. Last updated What is block locking? The primary use for block locking is to prevent the accidental removal of important blocks or to prevent specific users…
-
WooCommerce in full site editing themes
In this article, I explore how to add templates for WooCommerce in full site editing themes.I wanted to learn if it is possible to customize shop pages and checkouts and if we can edit our products visually with drag and drop, adding our brand colors by only using block settings. I learned that we are…
-
How to remove default block styles
To learn how to remove default block styles, we have to do a bit of reverse engineering on how block styles are registered and overwritten. It also means that the solutions are a bit “hacky”.Some of the code examples on this page may be time sensitive as Gutenberg continues to be updated. Check the date…
-
Cheat Sheet: Every setting that you can remove using theme.json
Last updated Below is a code example of every setting that you can remove using theme.json: To disable the “Inherit default layout” setting for container blocks like group, remove the
-
How to re-enable the Customizer in a block theme
You probably already know that activating block themes removes the Customizer from the menus in the WordPress admin. The Customizer is still a part of WordPress, and you can re-enable the links with just one line of code. Activating a plugin that uses the Customizer also re-enables the links I am mentioning this mostly as…
-
Global style variations
Last updated What are global style variations? With global style variations, users can choose between predefined color palettes and block styles. A theme developer can add new colors, font family variations, and a dark mode. Or why not boxed and full-width layouts? Style variations have been available for block themes since WordPress version 6.0. Users…
-
Creating templates for custom post types
Several theme developers have reached out asking how to create full site editing templates for custom post types. In this lesson, I will briefly explain: Prerequisites: For the templates and the Site Editor options to be available, you must first register the custom post type. This Site Editor feature is only for creating templates, not…
-
How to use PHP templates in block themes
In the introduction to creating block themes, I mentioned that if WordPress can not find a matching .html file, it tries to find a .php version of that file. For theme developers, this means that you can use PHP in situations where full site editing is not mature enough; For example to cover features that…
-
Theme.json layout and spacing options
In this lesson, you will learn about basic usage of the theme.json layout and spacing options, including content width, spacing and spacing units, and blockGap. This lesson has been updated in preparation for WordPress version 6.3. Prerequisites: Global Styles & theme.json. Last updated The layout setting The theme.json layout setting decides the width of the content…
-
Adding full site editing features to classic themes
-Did you know that you can add almost every full site editing feature to your classic theme and still use PHP templates? The only two features not available to classic themes are the site editor and the global styles interface. You can add template editing to the theme and still keep widgets and the customizer.…
-
Troubleshooting block themes
When you are building block themes you may run into blank pages, error messages, and other mysterious problems. When it comes to WordPress block themes and Gutenberg, we still have work to do to improve error handling. The most common mistakes are simple typos, and they are easy to solve if you know where to…
-
Theme.json typography options: Font family and size
In this lesson you will learn how to use the theme.json typography options, including: Prerequisites: Global Styles & theme.json. Updated August 5, 2022. I have separated the original lesson into two parts. In the next lesson, I will bring up line height, font weight, text decoration and more. Font family Which blocks support font family? You…
-
Theme.json color options
In this lesson, you will learn how to use all the theme.json color options, including: At the end of the lesson, you will also find answers to frequently asked questions. Prerequisites: Global Styles & theme.json. Last updated Introduction What color options can you change with theme.json? The WordPress block editor has many different types of…
-
Exercise: Creating theme.json
In this exercise, you will practice creating a theme.json file for a WordPress block theme.You will create presets and add some very basic styling to the theme.This lesson is suitable for those who want a quick recap of the global styles lesson. If you created a theme with template parts in the previous exercise, you…
-
Introduction to templates and template parts
In this exercise, you will learn to create templates and template parts for block themes. Templates are your base files. The lesson starts with index.html. Next, you will add templates for single posts, pages, archives, and search results. You will use template parts to organize and add structure to the theme to avoid having to…
-
Creating WordPress block themes
This lesson is the first in a series of exercises to learn how to create block themes, also known as full site editing themes. You will learn about the minimum file requirements, theme setup, and file structure. I will also point out some important differences between classic themes and block themes. By the end of…
-
Global Styles & theme.json
Global Styles help users change the style of their site without having to edit individual blocks or pages. It also lowers the entry barrier and makes it easier for theme developers to style blocks. Theme.json is a new theme configuration for block settings, site-wide styles, and block styles. In this lesson, you will learn what…
-
Introduction to block patterns
This lesson is an introduction to WordPress block patterns, including synced patterns, formerly reusable blocks. You will learn how to create patterns via the user interface, theme files, or with a PHP function called register_block_pattern(). The lesson also describes how to register pattern categories, use patterns from the pattern directory, and disable patterns.
-
Block variation examples for full site editing
Prerequisites: This is lesson 2 out of 2 about WordPress block variations. In this lesson, you will use the same JavaScript file that you created in the introduction to block variations. If you are not sure how to set up your first block variation, please go back to the previous lesson. Last updated Site header and…
-
Block variations
Last updated What are block variations? Block variations are easily confused with block styles. With a block style, you can change how the block looks with CSS, and the style can be selected in the block’s settings sidebar in the editor. With a block variation, you change the block settings and create a variation with…
-
Custom block styles
Last updated: February 19, 2022. What are custom block styles? Custom block styles are all about adding new styles to existing blocks.The difference between just styling a block and adding a custom block style is that the custom block style is available as an option in the editor interface. Custom block styles have been available…
-
Block grammar, attributes, and supports
As I mentioned in the first lesson, What is full site editing? theme developers will use HTML templates instead of PHP files and HTML comments and block markup instead of PHP functions. In this lesson, I will not discuss building custom blocks with JavaScript but rather the HTML code or the so-called block grammar you…
-
Preparations -Quick start guide
Last updated This full site editing quick start guide has four simple steps. All you need is WordPress, the Gutenberg plugin (optional), and a block theme with support for the Site Editor. Step 1: Install WordPress Any test install with at least WordPress 6.4 will do. I recommend always using the latest version of WordPress.…
-
Full site editing development progress
Level: Beginner, developer Full site editing is a focus area for WordPress. The editor team updates the Gutenberg plugin every two weeks. As a result, these features change frequently. Updated September 16, 2022. What’s coming in WordPress 6.1? WordPress 6.1 is scheduled for release on November 1, 2022 (pushed from October 25).The feature freeze for this…
-
What is full site editing?
Full site editing, or “site editing” in short, is an umbrella term for a collection of new WordPress features that focus on using blocks for all parts of a website, not only the content area.With full site editing, you use blocks to create everything from page layouts, site headers and footers that are synced across…
