Essential resources for learning WordPress block themes

@mike • 13,000

Tip the AuthorCopy linkTweet this

Nov 30.2022

Creating a WordPress theme is quite a different process than it was just a few years ago. With the arrival of the block editorBlock editor The WordPress block editor is editing interface where you create content and layouts with blocks (paragraphs, images, columns, etc.). and the Site Editor, we now have a whole new suite of tools at our disposal. That also means we need a new kind of WordPress theme — a WordPress block theme.

A block theme is a WordPress theme that is made up of blocksBlocks Blocks are content elements that you add to the editor in posts and pages to create content layouts. Each item you add to your post or page is a block., patternsBlock patterns Block Patterns are a collection of pre-designed blocks that you can insert into pages and posts and then customize with your own content., template partsTemplate parts Template parts are used to organize a theme in smaller reusable structural parts. They are commonly used for site headers and site footers., templatesTemplates Templates are designs for pages and can include one or more template parts., and a theme.json file. All of these elements are brought together in the WordPress Site Editor, a new interface for building websites visually within the WordPress admin.

With all of these changes, it can be hard to chase down all of the essential resources to learn and build block themes. To give you a good head start, I’ve put together a list of links I reference most often when building WordPress block themes.

Block Themes Handbook

When you’re just getting started with block themes, it’s best to start with the Block Themes Handbook, which will give you a quick overview of block themes and quick links to all of the major features of block themes.

There’s also a really helpful comparison chart that shows you the differences and similarities between classic themes and block themes. This will help you understand the aim of block themes.

• Visit the Block Themes Handbook

Global StylesGlobal styles Global styles is a collection of styles and settings that control the overall look and feel of your website. These settings can be adjusted with a user interface in the editor. and Settings

As you’ll quickly learn, theme.json (Global Styles and Settings) is a significant feature of WordPress block themes. In fact, it’s basically the engine of your theme. The theme.json file defines settings and styles for your entire site as well as individual blocks.

The Global Styles and Settings Reference is a good place to become familiar with the theme.json concept and what it’s capable of.

Be warned! There’s a lot to learn on this page, but understanding how theme.json works and how to leverage it into a powerful new WordPress theme is a highly-valuable skill to learn right now.

• Visit the Global Styles and Settings Reference

Core Blocks Reference

One of the powerful features of theme.jsontheme.json A configuration file that provides your WordPress theme with CSS styling and settings for how the editor works. is being able enable different styles and settings on a per-block basis. Although the Global Styles Reference above will show you a few examples of how to do this, you’re going to need a list of the core blocks available to modify.

The Core Blocks Reference is a full list of all the blocks that ship with WordPress. This page will show you the block names (core/post-title), which you’ll use in theme.json, as well as the attributes and styles it supports.

• Visit the Core Blocks Reference

TwentyTwentyTwo and TwentyTwentyThree Themes

All these resources are great, but how do we put it all together in a full block theme? The best place to look at how it’s done is WordPress itself. WordPress ships with two block themes, TwentyTwentyTwo and TwentyTwentyThree.

You can browse the code of both themes by visiting their respective repos on Github. Here, you’ll see the latest features and best practices for block themes, patterns, theme.json, templates and more.

• Visit the TwentyTwentyTwo Repo
• Visit the TwentyTwentyThree Repo

FullSiteEditing.com

Generally speaking, WordPress.orgWordPress.org WordPress.org is the source where you can download the software itself, which you can use to build and maintain a website on your own. docs are the best place to go for WordPress developer docs. However, some sites have popped up with more detailed examples that may be helpful for developers.

FullSiteEditing.com, by WordPress contributor Carolina Nymark, is a great resource for those looking to dig a little deeper and explore some advanced use cases for blocks and block themes.

• Visit FullSiteEditing.com

Wrapping up

Combining the historical power of WordPress content management with a new visual site building paradigm will have a rippling effect on the software and the millions of people who use it.

Although block themes are still relatively new to WordPress, there’s no doubt that they will be transformative to the future of WordPress site building.

I hope these resources help you learn something new! If this article was helpful, please consider subscribing to the newsletter below and I’ll send you this content regularly so you don’t miss a beat!