Level: Beginner

  • Introduction to the Site Editor

    Level: ,

    I wrote this introduction to the Site Editor using WordPress version 6.2 and Gutenberg version 15.7.0. If you are using different versions, there may be differences both in the interface and the functionality. Last updated Accessing the Site Editor You can open the Site Editor from the WordPress Admin area under Appearance > Editor: Or,…


  • 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 create a sticky header with a group block

    Level: ,

    Last updated This short lesson covers a new feature in WordPress 6.2. You can follow the video guide below to create a sticky header in less than a minute; no code is necessary. From Gutenberg version 15.0, the group block has a new settings panel called Position, where you can choose the Sticky option to…


  • How to use custom CSS in theme.json

    Level: ,

    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…


  • How to add box-shadows with theme.json

    Level: ,

    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

    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 text decoration

    Level: ,

    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…

    Theme.json typography: Line height, font weight and text decoration

  • Accessibility in full site editing themes

    Level: ,

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


  • 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: To disable the “Inherit default layout” setting for container blocks like group, remove the


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


  • Global style variations

    Level: ,

    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…


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


  • 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 options: Font family and size

    Level: ,

    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 typography options: Font family and size

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


  • What will full site editing mean for site creators?

    Level: ,

    Last updated More freedom to adjust the look and feel of the website With full site editing (FSE), you can change parts of a website that you previously could not change without using code. You can make changes directly in a template by using a block theme. You are no longer limited to the content…


  • What is a full site editing template?

    Level: ,

    There are different types of templates in WordPress: Custom page templates let you select different designs for different content. These templates are optional, and you decide if you want to use or create a custom template.While only developers can create traditional page templates with code, anyone (with the correct permission) can create a block template…


  • 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 basic styling to the theme.This lesson is suitable for those who want a quick recap of the global styles lesson. For this full site editing lesson, you will need: If you created a theme…


  • 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 add structure to the theme to avoid having to…


  • 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 point out some important differences between classic themes and block themes. By the end of…


  • Global Styles & theme.json

    Level: , ,

    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

    Level: ,

    This lesson is an introduction to WordPress block patterns. You will learn how to create patterns with a file or with register_block_pattern(), how to register custom pattern categories, how to disable patterns, and how to add them to block templates using the pattern block. Last updated What is a block pattern? A block pattern is…


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


  • Custom block styles

    Level: ,

    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

    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: ,

    Level: Beginner, developer Last updated This full site editing quick start guide has three simple steps. All you need is WordPress, Gutenberg (optional), and a block theme with support for the Site Editor. Step 1: Installing WordPress Any test install with at least WordPress 6.3 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: ,

    What is full site editing? The site editing features are a collection of new WordPress features that focus on styling and editing blocks and using blocks for all parts of a website, not only the content area. This includes the Site Editor screen and the Styles settings sidebar, block patterns, block templates and template parts,…

    What is full site editing?