Anatomy of a Block Theme


What is a block theme, and what is it made of? Quickly learn the key components of what makes up a block theme.

Learning outcomes

  1. Identify the different parts of a block theme.
  2. Explain what each part of a block theme does.

Comprehension questions

  1. What is a block theme?
  2. What are the eight parts of a block theme?
  3. What can you do with theme.json?
  4. What do templates and template parts do for block themes?

Transcript

Welcome to Anatomy of a Block Theme. If you’ve ever wondered what the code behind a WordPress blog theme looks like, or wanted to design your own block theme to distribute, you’ve come to the right workshop.

By the end of this brief video, you will be able to identify the different parts of a block theme and explain what each one does. Let’s get started. Now, what are block themes? Well, block themes are a new type of WordPress theme that allow users the novel experience of Full Site Editing in WordPress no code required. However, for theme developers, being able to look inside the code itself empowers them to create themes and child themes of their own. So let’s explore what is the anatomy of a block theme. Today, we will be exploring the WordPress block theme 2022 and analyzing it.

If you’re familiar with WordPress, you may notice a few familiar files such as functions.PHP, index.PHP, readme.txt, a screenshot and style .CSS. The newest file you may notice is the theme.JSON file. So how do all these work?

First functions.PHP exists to add other code to utilize the WordPress API, anything PHP basically. Next index.PHP. This once crucial file actually does nothing for new block themes. For now, it’s a required file for WordPress to be able to interpret the theme, though that may change in the future.

Next, you’ll notice the readme.txt. This file exists to give important information about your theme to the WordPress repository. It’s optional in a theme that you might make for yourself, but required if you plan to distribute your theme.

Next, you’ll notice the screenshot dot png. Have you ever looked for a theme on WordPress.org? If so, you’ve seen these images in action. This is the image that shows within WordPress as a preview of what a theme might look like. Now, do know that this image is static, not dynamic. So think of it as more of an unchanging photograph rather than a video. It will not update with changes as your theme does; you’ll have to take your themes photo again if you make significant changes.

Finally, you may be familiar with style.CSS, but its function has changed. In block themes, this file exists only to let the WordPress software know that this group of files is in fact a theme, perhaps with a few more comments to tell other developers a bit more about it.

The last and most exciting file that we’ll discuss before getting into block theme directories is the one called theme.JSON. This file allows you as a theme creator to create selections you can make available to users within the site editor. For example, in your themes theme.json file, you can decide which colors are available to a user if they will be able to turn features such as borders, on and off, and so much more.

Finally, let’s look at some of the block theme directories. Now you’ll notice some directories within your block theme. Inside these directories are HTML files. The first is templates. These establish what options exist in your site editors template section. Now, this replaced the classic themes index.PHP and your single.PHP file. It’s all of the full templates that make up any view on your website. For example, the way your blog posts might show up, or how a static page might look. You can see the HTML here. This might look like this in your site editor. But in the code it looks like this. The last directory specific to new block themes is parts. This directory houses the code for all your block themes reusable template parts that templates can pull from. The intention here is to make designing a consistent site a breeze in that a template part can be reused across multiple templates. So for example, any change I make to a header template, either in this code or in the site editor itself will be applied across my website within any templates that use that part.

I can hear you wondering, “What’s with the extra directories at the top: “assets” and “inc”? These are simply extra files for the 2022 theme. They are not specific to or required for block themes. There you have it. That’s the condensed version of the anatomy of a WordPress blog theme.

Workshop Details


Presenters

Sarah Snow
@arasae

WordPress educator and/or mad scientist; my professional hobbies include breaking WordPress websites in front of audiences, investigating simple solutions to odd problems collaboratively, and designing lesson plans and courses for learn.wordpress.org. Ask me about caring for parrots, training stubborn Shar Peis, cooking super spicy recipes, learning American Sign Language & French, teaching and writing. Changing the narrative one story at a time.