Level: Intermediate
In this archive, I am listing all intermediate-level full site editing lessons. These lessons are suitable for those who have already completed the beginner-level lessons. They may have prerequisites and might not explain common terms in detail.
-
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…
-
How to create WordPress themes without coding
This lesson will teach you how to create WordPress themes in the Site Editor without writing a single line of code. You will learn how to create the required theme files, edit templates, and add fonts and styles. Following this guide, you can create a WordPress block theme in about an hour, depending on your…
-
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…
-
Creating sidebars with blocks
With full site editing, you can add new sidebars to any WordPress block theme, even themes that do not originally include sidebars. There are a couple of different ways to create sidebars using blocks. You can use the columns block and add one or more sidebars, create the sidebar as a template part, or add…
-
Managing color palettes
When you activate a block theme, WordPress enables several types of color palettes:Solid colors, gradients, and duotone image filters. The palettes can come from different sources: WordPress (Default), a theme or plugin, or a user. A user-created color palette is labeled as “custom”: A theme or plugin can disable color palettes and color settings, which…
-
Theme style variations
A theme style variation is an optional design for a block theme. You can use style variations to change the look of the website without needing to switch themes. Style variations are like a layer on top of the existing blocks and templates and can change one or many styles on the website. It can…
-
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…
-
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…
-
Editing with a purpose: Which WordPress editor should I use?
WordPress supports multiple editors and editing modes, and tracking which editor to use can become overwhelming. In the WordPress community, we sometimes call the default editor the block editor or the “editor.” In addition, you have the classic editor, which you can add via a plugin, and the Site Editor for site editing. To answer…
-
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
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…
-
How to switch your website to full site editing
In this article, I list my recommendations of what you need to consider before switching your website to full site editing. These are lessons learned from the first months after WordPress 5.9 up to the current version, 6.5. I write about what precautions and steps you should take and how to set up your full…
-
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
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…
-
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…
-
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…
-
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
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.
