WordPress Block Themes

In this tutorial, you will learn about WordPress block themes – what block themes are and when to use them.

Refer to the following tutorials if you need help with this section:

• What’s New In WordPress – WP 5.9
• The WordPress Block Editor
• How To Use WordPress Blocks
• The WordPress Site Editor
• WordPress Blocks – Navigation Block
• Using WordPress Themes
• Where To Find WordPress Themes
• How To Use The WordPress Theme Customizer
• Using Widgets

***

What Is Full Site Editing?

Since the introduction of the WordPress Gutenberg Block Editor in version 5.0, WordPress has been moving toward a way of creating and designing websites made entirely out of blocks and block-based features like block themes, templates, and global styles.

This is called Full Site Editing (FSE).

Block themes are an integral part of Full Site Editing.

What Is A Block Theme? What is a block theme?

Block themes were introduced to WordPress as a new type of theme built entirely with blocks in WordPress 5.9.

A block theme is a WordPress theme that uses blocks for all parts of your website, including your navigation menus, site header, content, and site footer.

Block themes let you create entire pages or websites using blocks, and edit and customize all parts of your WordPress site without the need to change themes.

For example, WordPress 5.9 included its first block theme, called Twenty Twenty-Two:

This theme is composed entirely out of blocks.

Prior to the introduction of block themes, blocks were only used inside the WordPress Block Editor to edit your content and its layout. With a block theme, you can add and edit blocks outside of your content. This is done using web design-based block features like the Site Editor.

Learn more about using the WordPress Site Editor.

In addition to default blocks. You can use blocks in templates that are provided by a theme or plugin. For example, certain block themes may include an archive page or a 404 page (a “page not found” page). You can go in and edit the blocks in these pages to further customize them.

With block themes, you can also create custom templates.

Notes:

• We recommend visiting the WP 5.9 announcement post and watching the videos on that post to better understand block theme features.
• Editing and/or customizing block themes requires basic web design skills. Website editing is outside the scope of our tutorials. If your site uses a block theme and you need help editing or customizing it, ask your website developer, or refer to the external resources listed at the end of this tutorial for more information.

How Are Block Themes Different From Classic WordPress Themes? How are block themes different from classic themes?

Block themes are built for the newer Full Site Editing functionality in WordPress and allow you to use blocks to edit all parts of your site, including easier ways to quickly customize everything from your background colors to font sizes for all Heading blocks.

In contrast, classic themes are built with different elements and include features like Widgets, a dedicated Menus section, the Theme Customizer, and more.

Classic WordPress themes do not work with the WordPress Site Editor.

You can tell if your site uses a block theme by going to the Appearance section of your admin menu. A block theme does not display sections like the Customizer, Widgets, Menus, and other theme-specific elements (e.g. Header, Background, etc.). Instead, a block theme displays the Site Editor submenu.

How Do Block Themes Impact Widgets And Widget Areas?

Instead of widgets, a block theme relies on blocks. This means that you can place blocks anywhere on your site where you might have previously wanted to display widgets.

How Do Block Themes Impact The Theme Customizer?

The WordPress Customizer is not available in block themes unless you are using a plugin or theme that requires it to be activated. This is because you can make the same changes you might make with the Customizer with blocks.

For example, you can use blocks for the site title, tagline, and site logo. You can also select colors for your website in the Styles setting by going to Administration > Appearance > Editor.

How To Find Block Themes

There are many free block themes available in the WordPress Theme Directory.

To filter out block themes in the WordPress Theme Directory, click on the Feature Filter and select Full Site Editing:

With these options selected, click on the Apply Filters button.

This will return a gallery displaying all of the WordPress Theme Directory’s available block themes. Click on a theme thumbnail to learn more about a specific theme.

As Full Site Editing evolves, you will find more and more WordPress block themes available.

Learn where to find WordPress Themes.

What Options Are Available With Block Themes? What options are available with block themes?

After activating a block theme, more tools and features will be available to you including the following:

• Site Editor: This editor allows you to edit all parts of your site, navigate between templates, and more.
• Styles: This feature allows you to fully customize your site, including individual blocks, with different colors, typography, layouts, and more.
• Templates: This lets you edit, create, and manage templates used by a page or post.
• Template parts: This is a way to organize and display groups of blocks as part of a block template. It’s mostly used for site structures like Headers and Footers.
• Theme blocks: These include the Navigation Block, Query Loop block, and more.

The above options allow you to fully customize and create the desired look and feel for your site without the need to switch themes as often.

When Should You Use A Block Theme? When should I use a block theme?

Block themes were introduced in WordPress 5.9. There are various reasons to use a block theme. These include exploring new design possibilities with the block editor, having full control over all parts of the website, etc.

As Full Site Editing continues to evolve, expect more and more WordPress themes to incorporate block theme design standards.

WordPress Block Themes – FAQs

Here are frequently asked questions about WordPress Block Themes:

What are WordPress Block Themes?

WordPress Block Themes are WordPress themes that are designed to work seamlessly with the block editor, providing users with extensive customization options and flexibility in building their websites using blocks.

How do WordPress Block Themes differ from traditional themes?

WordPress Block Themes focus on utilizing the block editor for content creation and customization, offering users a more intuitive and visual approach to building websites. Unlike traditional themes, Block Themes often provide advanced block-based layouts and styling options.

Can I use third-party block plugins with WordPress Block Themes?

Yes, you can use third-party block plugins with WordPress Block Themes to extend the functionality and design options of your website. Many block plugins are compatible with Block Themes, allowing for further customization and enhancement.

Are WordPress Block Themes compatible with older versions of WordPress?

WordPress Block Themes are specifically built to leverage the features of the block editor, which is available in WordPress versions 5.0 and above. Therefore, Block Themes may not function optimally on older WordPress versions that do not support the block editor.

Do WordPress Block Themes support responsive design?

Yes, most WordPress Block Themes are designed with responsive layouts, ensuring that websites built with these themes display correctly and adapt to various screen sizes and devices, providing an optimal viewing experience for users.

Can I customize the styling of WordPress Block Themes?

Yes, you can customize the styling of WordPress Block Themes using the built-in customization options provided by the theme, such as color schemes, typography settings, and layout options. Additionally, you can use custom CSS to further tailor the appearance of your website.

Are there specific plugins recommended for use with WordPress Block Themes?

While there are many plugins available, some popular ones that complement WordPress Block Themes include block libraries, advanced block editors, and design tools that enhance the block editing experience and offer additional features for creating dynamic content.

Additional Resources

As stated earlier, Editing and/or customizing block themes and theme templates requires basic web design skills. If your site uses a block theme and you need help editing or customizing it, ask your website developer, or refer to the external resources listed below for more information:

• Template Editor – Allows block editor users to edit and create templates used in pages or posts.
• Template Part Block – An advanced block that can be used with a block theme or a theme that supports template editing. These often come with your theme and are used to organize and display your site structure. You can only use them while creating and editing templates to manage blocks in areas repeated across the website. This block is best used to create areas like your site header and site footer. When you change blocks inside a template part, the editor updates the blocks on every block template that includes the template part.
• WordPress Course – Simple Site Design With Full Site Editing – This course reviews the interconnected features of full site editing (FSE) in WordPress and how these are used to create site designs without using code.

Congratulations! Hopefully, now you have a better understanding of block themes – what they are and how they are used.

***

Updated: July 5th, 2024