Create Block Theme Improvements


There have been a few quality-of-life improvements to the Create Block Theme plugin over the course of the WordPress 6.3 and 6.4 releases. This tutorial will give you a brief introduction to these improvements.

Learning outcomes

  1. Describe the improvements that have been made to Create Block Theme for WordPress 6.3 and 6.4

Comprehension questions

  1. What improvements have been made to the Manage Your Theme Fonts page
  2. Name the four theme actions that have been added to the Site Editor

Introduction

Hey there, and welcome to Learn WordPress.

In this tutorial, you will learn about some of the improvements that have been made to the Create Block Theme plugin for WordPress 6.3 and 6.4.

What is Create Block Theme?

Create Block Theme is a WordPress plugin which extends the functionality of the block editor for theme developers.

Not only does it allow you to write any changes you have made to your theme in the site editor to your theme files, but it also allows you to create a new theme from scratch.

If this is the first time you are learning about Create Block Theme, you may want to check out the Streamline your Block Theme development with Create Block Theme and Manage your block theme fonts with Create Block Theme tutorials, which cover the basic functionality of this plugin.

Theme font previews

One of the improvements that has been made to Create Block Theme is the addition of theme font previews.

When you navigate to the Manage Theme Fonts page, you see a list of all the theme fonts that are installed for the current theme.

Clicking on the arrow next to a specific theme font will show you a preview of that font.

You can then select different options in the Preview Type dropdown to see how the font will look in different contexts.

The options included are:

  • Heading
  • Sentence
  • and Paragraph

If the installed theme has more than one variant installed, you will also be able to preview the different variants.

It is also possible to change the demo text.

As well as the demo size.

Another addition to the Manage Theme Fonts page is the Theme Fonts overview on the right-hand side of the screen, which also includes the total size of the installed fonts.

This font preview is also available when you add a font. For example, if you choose to install a Google font, you will be able to preview the font before you install it.

Additionally, as you select variants to install, the list of variants and the total size of the installed fonts on the right-hand side is updated.

Site editor actions

The other addition to Create Block Theme is the ability to trigger theme-related actions from the site editor.

If you are editing a theme in the Site Editor, there is now a new Wrench icon in the top right-hand corner of the screen.

Clicking on this icon reveals the following four Create Block theme actions.

You can save the current changes to the theme files.

You can export your theme.

You can edit the theme metadata, like the theme name or theme description.

And finally, you can create a new theme based on your current changes, and either save it or export it.

This means that you no longer have to save your changes in the site editor, and then go all the way back to the main Create Block Theme page to save or export your theme.

Conclusion

And that wraps up this tutorial on the improvements that have been made to Create Block Theme.

Happy coding.

Workshop Details


Presenters

Jonathan Bossenger
@psykro

WordPress Developer Educator at Automattic, full-time sponsored member of the training team creating educational content for developers on Learn WordPress. Husband and father of two energetic boys.