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…

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…

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…

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…

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…

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

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

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…

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…

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…

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…

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…

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…

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…

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…

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…

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…

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

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…