Full Site Editing

Level: Developer

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

  • How to remove block templates

    •

    ,

    Templates can be added by users, plugins, parent- and child themes. But there are scenarios where this is not applicable: So in this lesson I will describe two ways to solve it using PHP filters. Last updated How to use a PHP template instead of a block template I have mentioned that when you use…

  • Theme.json image options

    •

    ,

    There are four image options in the theme.json settings section, and one in styles: Settings: Styles: The styles section is where you add default background images to the site or the blocks. I have covered the aspect ratio settings and presets in the theme.json layout and spacing lesson, because right now, the block editor only…

  • Learn together by building block themes in public

    •

    , ,

    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

    •

    ,

    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

    Theme.json typography: Font size

    •

    ,

    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…

  • Block Support

    •

    ,

    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

    •

    ,

    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

    •

    ,

    WordPress version 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. Prerequisites: Global Styles & theme.json. Last updated How it works Here is how it works: WordPress loads a default theme.json file (source). This file has all the default settings…

  • How to use custom CSS in theme.json

    •

    ,

    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

    •

    ,

    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

    •

    ,

    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. The type of shadow used is a box shadow. There are no settings for text shadows. Theme…

  • 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. Last updated How to add the CSS pseudo classes The keys that you use to style link states in theme.json are 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 than the block styles offer. Let’s take these examples: This is problematic because to create a consistent site design, you would have to style the extra headings and buttons separately. The theme.json elements…

  • Theme.json typography: Line height, font weight and more

    Theme.json typography: Line height, font weight and more

    •

    ,

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

  • Accessibility in full site editing themes

    •

    ,

    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

    •

    ,

    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

    WooCommerce and 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 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…

  • 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: 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 Border allows custom…

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

    •

    ,

    You probably already know that activating a block theme removes the Customizer and the Menus screen from the sidebar in the WordPress admin area. They are still part of WordPress, and you can still access them by visiting the pages directly: You may want to re-enable these features if your users/customers are struggling with the…

  • Style variations

    •

    ,

    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

    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, block gap and aspect ratios. Prerequisites: Global Styles & theme.json. Last updated The layout setting The theme.json layout setting decides the width of the content and enables wide and full width blocks. This…

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

    Theme.json typography: Font family

    •

    ,

    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 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 What colors can you change with theme.json? The WordPress block editor has many different types of color options,…

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

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

  • Global Styles & theme.json

    •

    , ,

    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

    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

    •

    ,

    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…

  • Block style variations and section styles

    •

    ,

    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

    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

    •

    ,

    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.7 will do. I recommend always using the latest version of WordPress.…

  • What is full site editing?

    What is full site editing?

    •

    ,

    Full site editing, or “site editing” in short, is an umbrella term for a collection of 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 that…

  • Welcome & How to use the course

    •

    ,

    Hi! 👋 Welcome to this course about full site editing with WordPress.My name is Carolina Nymark. I am a developer at Yoast, a long-time WordPress and Gutenberg contributor, and core committer.I am a bundled theme component maintainer and was one of the leads for Twenty Twenty-One and Twenty Twenty-Five. I started sharing guides about full…