How to Build a Block WordPress Theme

Note: This page is a work in progress and will be updated often.

WordPress 5.9 was recently released, and with it came full site editing. At the highest level, full site editing provides a collection of features that allow users to leverage the editor to build their site from header to footer.

As we enter this new frontier, a unique theme style is being built, taking advantage of everything WordPress offers. For example, block themes use blocks instead of traditional page content for posts and other parts.

This allows users to create layouts with ease and edit every aspect of the website using just one tool. There’s no limit placed on what kind of design element a website can have with block themes.

Building a Block WordPress Theme

Block themes are a new paradigm when it comes to building with WordPress. To take advantage of full site editing and its features, you’ll need to start with the following files/folders inside your theme:

  • functions.php
  • style.css
  • theme.json
  • templates
  • parts
  • patterns

Templates

Similar to classic WordPress themes, block themes allow for templates to control specific page types on a website. While classic themes have traditionally required .php files, block themes utilizes .html files.

Examples of files that work inside of block themes: index.html, single.html, page.html, home.html, archive.html, author.html, search.html, 404.html. These files should be included in a /templates/ folder inside of a theme.

Block templates are made up of a list of blocks and template parts such as header.html, footer.html, sidebar.html.

View example templates in the Frost theme.