Level: Developer

In this archive, I am listing all developer-oriented full-site editing lessons. These lessons may be at beginner level or intermediate.

  • Learn together by building block themes in public

    Level: , ,

    If you have completed the first lessons about creating a block theme, and you want to learn more by working on a real-life block theme project, then I hope that you will join the WordPress.org Themes team and build a community theme together with others. Last updated What is a community theme? A community theme…

  • Display custom data with the Block Bindings API

    Level: ,

    With the Block Bindings API, you can use blocks to display content and dynamic data from custom fields and other sources. This feature requires WordPress version 6.5 or newer. In short, the Block Bindings API works by registering a source and referencing the source in an attribute on a block. The block then displays the…

  • Theme.json typography: Font size

    Level: ,

    In this lesson, you will learn how to add custom font sizes to your theme using theme.json.To add custom font sizes to theme.json, you need to add an array of sizes to the typography object in the settings section: settings.typography.fontSizes. WordPress then creates a font size preset with a custom CSS property and a CSS…

    Theme.json typography: Font size
  • Block Support

    Level: ,

    Block supports are used to enable or disable block features such as alignments, colors and spacing. These are features that are commonly shared across many block types. During block development, developers can register blocks supports in the block.json file (Example). Read the official documentation for block supports. To learn which WordPress core block has which…

  • How to add blocks to user-created templates

    Level: ,

    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

    Level: ,

    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

    Level: ,

    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

    Level: ,

    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

    Level: ,

    WordPress 6.2 added two new custom CSS options to the Styles sidebar in the Site Editor: From WordPress 6.6, the custom CSS also works for elements and variations. These have no user interface. If you need a re-cap of how to use theme.json before you continue, please read the first lesson about Global styles &…

  • Full site editing child themes

    Level: ,

    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 shadows with theme.json

    Level: ,

    Just like colors and gradients, the shadow block support uses a set of default presets, applied with the help of CSS variables. In the editor, the shadow settings are in the same styles panel as the border settings. Theme developers can add new custom shadows via theme.json, and in this short lesson I will show…

  • How to add hover and focus styles using theme.json

    Level: ,

    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

    Level: ,

    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 more

    Level: ,

    In this third typography lesson, I bring up the theme.json font style settings as well as line height, font weight, text decoration and miscellaneous 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:…

    Theme.json typography: Line height, font weight and more
  • Accessibility in full site editing themes

    Level: ,

    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. The WordPress.org themes team has been…

  • How to lock blocks and templates

    Level: ,

    In this short lesson, I explain briefly what block locking is and when it is useful for 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 from…

  • WooCommerce and full site editing themes

    Level: ,

    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 checkout 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…

    WooCommerce and full site editing themes
  • How to remove default block styles

    Level: ,

    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

    Level: ,

    Last updated Below is a code example of every setting that you can remove using theme.json: Note that if you remove the background image support, it does not remove any existing background images from your blocks. To disable the “Inherit default layout” setting for container blocks like group, remove the Known issues The border settings…

  • How to re-enable the Customizer in a block theme

    Level: ,

    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. Last updated Activating a plugin that uses the Customizer also re-enables the links I am mentioning this…

  • Style variations

    Level: ,

    In previous lessons I have talked about theme.json as a single configuration file for your theme, but you can use multiple JSON files to add alternative settings and global style variations. This feature has been available since WordPress version 6.0, so chances are that if you have used any type of block theme, you have…

  • Creating templates for custom post types

    Level: ,

    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…

    Creating templates for custom post types
  • How to use PHP templates in block themes

    Level: ,

    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

    Level: ,

    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

    Level: ,

    -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

    Level: , ,

    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: Font family

    Level: ,

    In this lesson, you will learn how to use theme.json to add font families to your WordPress theme and how to assign different font families to different blocks. You add font families to theme.json in settings.typography.fontFamilies. You can refer to an existing font family, like a system font, or you can use advanced optional parameters,…

    Theme.json typography: Font family
  • Theme.json color options

    Level: ,

    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

    Level: , ,

    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

    Level: ,

    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 structure the theme to avoid repeating code. You will…

  • Creating WordPress block themes

    Level: ,

    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 highlight some differences between classic themes and block themes. By the end of this first…

  • Global Styles & theme.json

    Level: , ,

    Global Styles helps 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

    Level: ,

    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.

    Introduction to block patterns
  • Block variation examples for full site editing

    Level: ,

    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

    Level: ,

    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…

  • Block style variations and section styles

    Level: ,

    WordPress offers many ways to style blocks. In this lesson I want to talk about registering block style variations and section styles that helps users select premade designs. The custom block styles, often called block style variations, are options in the Styles section of the block settings sidebar. You use them to quickly apply styles…

  • Block grammar, attributes, and supports

    Level: ,

    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…

    Block grammar, attributes, and supports
  • Preparations -Quick start guide

    Level: ,

    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. Last updated Step 1: Install WordPress Any test install with at least WordPress 6.5 will do. I recommend always using the latest version of WordPress.…

  • Full site editing development progress

    Level: ,

    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?

    Level: ,

    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 the new site editing features added to WordPress, you use blocks to create everything from page layouts, site headers…

    What is full site editing?