Top Resources to Learn About WordPress Block Theme for Developers
Tags: metabox, fse, wordpress, blockthemes
Published: 2021-11-02 08:06:35

As we mentioned in the article about <a href="https://metabox.io/full-site-editing-fse-p1-overview/">Full Site Editing</a> and others in <a href="https://metabox.io/series/full-site-editing/">this series</a> before, block themes (or block-based themes) and the Full Site Editing (FSE) feature are changing the way we <a href="https://gretathemes.com/create-a-website-wordpress/" rel="follow">build WordPress sites</a>. In each WordPress version, the block editor is updated with new features until it's completely integrated with the core. So users, developers, and theme makers surely need to prepare themselves and keep updated every day for this revolution. That's why finding resources to learn about block themes is important.

<!--more-->

We're going to show you the most prestigious, comprehensive, and accurate resources to learn about block themes in this article. But first, let's dig into how building block-based themes are different from traditional WordPress themes.

<h2>Building a Block Theme vs. a Traditional Theme</h2>

Unlike traditional themes, when switching to WordPress block themes, developers have to learn a totally different method.

First and foremost, developers have to use HTML files for templates instead of PHP files. For example, this is the page template of TT1 block theme.

<img class="aligncenter" src="https://i.imgur.com/fPgLamr.png" alt="The page template of TT1 block theme." width="1200" height="675" />

You can see the comment wrapper <code>&lt;!-- ... /--&gt;</code> with the inside <a href="https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/">attributes</a>. It's the blocks of the theme. The template files of this block theme are built completely from these blocks. Therefore, block themes are <strong>faster, lighter, and more performative</strong> than traditional themes. You can see more details in the comparison between page builders and Gutenberg <a href="https://metabox.io/gutenberg-vs-page-builders-comparison/">here</a>.

Secondly, in block-based themes, all the website settings are concentrated in one area named Global Styles instead of different areas like Customizer, Widget, Menu, ... Developers need to use <strong>theme.json</strong> file to set up the Global Styles, which can be the substitute feature of Customizer. Right now, the Global Styles feature is still under development and was partially integrated into WordPress 5.9.

Finally, with block themes, all the features to build your desired appearance are already built-in within the WordPress core. So users don't need to install a lot of 3rd-party plugins, extensions, and widgets like in the past. In that way, you won't need to care if you forget to update any plugin, or whether you deactivate them then your website will be affected or not, ...

Block themes will give users more power, especially for those who do not know much about code or don't want to use code. Through the drag-and-drop blocks, the user experience becomes much easier and more enjoyable.

If you want to learn more about block themes and building block themes, here are very useful resources on the Internet that we have collected, selected and of course, also learned a lot from.

<h2>News About Block Themes</h2>

<h3>Gutenbergtimes.com</h3>

<img class="aligncenter" src="https://i.imgur.com/3zZfhUW.png" alt="Gutenberg Times is the Gutenberg-focused news website" width="1200" height="675" />

As said by name, Gutenberg Times is the Gutenberg-focused news website. The one behind this site is a famous person - Birgit Pauli-Haack - a member of the Southwest Florida WordPress Meetup organizers and WordPress Global Community Team.

Since November 2020, she has been the representative of the Block Editor End User Documentation team with many contributions to the community.

Following closely the WordPress block editor project from the early days, Gutenberg Times provides multidimensional information from many different sources. This is a reputable address for those interested in block themes whenever they need to update news.

This Gutenberg-specific news channel provides information in a variety of formats. You can watch the Live Q&amp;A, where Birgit Pauli-Haack interacts online with developers, Automattic staff, and key people on Gutenberg-related projects. If you love podcasts, Gutenberg Times has a Gutenberg Changelog program. This podcast discusses the changes in the updated version of Gutenberg. In addition, you can also find many news, tutorials, and resources on block themes and full site editing that are always updated in time.

<h3>WPTavern</h3>

<img class="aligncenter" src="https://i.imgur.com/iSPAtiZ.png" alt="WP Tavern is a WordPress news site that is followed by a lot of developers." width="1200" height="675" />

WP Tavern is a WordPress news site that is followed by a lot of developers. WP Tavern's news section is updated constantly, about 6 articles a week. If you want to keep up with the wave of WordPress development in general and block themes in particular, this is an address that you need to visit every day.

What makes WP Tavern attractive is the updated information and the sharp views of writers. Under each article, you can see many comments from developers in the community. From there, you can even understand more about current views in the WordPress community.

Here are the valuable articles on block themes of WP Tavern we highly recommend:

<ul>

   <li>Automattic Releases Quadrat, a Block-Based Podcasting WordPress Theme. (We have a review of Quadrat block theme in our blog <a href="https://metabox.io/review-quadrat-wordpress-block-theme/">here</a>)</li>

   <li>The WordPress.org Block Pattern Directory Is Now Live</li>

   <li>Full Page Patterns Are Still the Missing Piece of Block WordPress Theme Development</li>

   <li>Theme Creation Will Be Easier, But We Are Not There Yet

Block Patterns Will Change Everything, Part 2: Headers and Footers</li>

   <li>Block Patterns Will Change Everything</li>

   <li>You can find all the WordPress theme-related content in WP Tavern <a href="https://wptavern.com/category/themes">here</a>.</li>

</ul>

WPTavern also has a Podcast channel as well as an Events section for upcoming events in the WordPress community. Perhaps, you can get a lot of information about block themes here next month.

<h3>Make.wordpress.org</h3>

<img class="aligncenter" src="https://i.imgur.com/DMTixun.png" alt="Make.wordpress.org updates the information about WordPress in general and Gutenberg editor, block themes" width="1200" height="675" />

It would be a pity to skip the <a href="https://docs.google.com/document/d/1iH-iuDxfH2UFDcCnPXIHEcvW5L2fSdS1Db52MZosEpE/edit#heading=h.s517r5qvca6w">make.wordpress.org</a> site. This is a place where anyone can contribute to WordPress by participating in discussions, helping with translations, spotting bugs, etc. Whether you are an expert in programming or just a newbie in WordPress, you are always welcome here.

For a general overview of WordPress projects, you can check out the <a href="https://wordpress.org/about/roadmap/">Roadmap</a> page. It annually updates the information about WordPress in general and Gutenberg editor, block themes in particular. There are also <a href="https://make.wordpress.org/updates/2020/04/30/quarterly-updates-q1-2020/">quarterly</a> or <a href="https://make.wordpress.org/core/tag/gutenberg-next/">monthly</a>, weekly,... updates in Make WordPress.

As for block-based themes, Make WordPress has its own chat group called <a href="https://make.wordpress.org/themes/tags/block-based-meeting/">Block-Based Themes Chat</a> on Slack for people to discuss. Here, you will find developers from all over the world discussing block themes at all times of the day. Furthermore, you can keep track of the weekly meeting notes in the group chat <a href="https://make.wordpress.org/themes/">here</a>.

<h2>Documentation to Learn About Block Themes</h2>

There is no need to spend too much time looking for resources to learn about block themes when you have <a href="http://wordpress.org">wordpress.org</a>. There is a guide to block editor, including a detailed guide on block themes <a href="https://developer.wordpress.org/block-editor/how-to-guides/themes/">here</a>.

<img class="aligncenter" src="https://i.imgur.com/t3HQbqH.png" alt="wordpress.org provides a lot of information in WordPress." width="1200" height="675" />

You will find the most accurate concepts of block themes and learn about them in an essential way. It's especially suitable for beginners to learn about block themes from scratch here. However, because the knowledge in this section is highly academic, you may find it a bit difficult at first. I think it would be better to combine learning with the other resources I mentioned above.

<h3>Github</h3>

WordPress developers are already so familiar with Github. <a href="https://github.com/WordPress/gutenberg">The repository for the Gutenberg projects</a> has pretty clear instructions in the README.md section so you can easily know how to use, develop, and contribute to the project.

In the Issues section, you can also find the following labels for real-time updates on the block theme:

<ul>

   <li><a href="https://github.com/WordPress/gutenberg/labels/%5BFeature%5D%20Full%20Site%20Editing">[Feature] Full Site Editing</a></li>

   <li><a href="https://github.com/WordPress/gutenberg/labels/%5BFeature%5D%20themes">[Feature] Themes</a></li>

   <li><a href="https://github.com/WordPress/gutenberg/labels/%5BFeature%5D%20Patterns">[Feature] Patterns</a></li>

   <li><a href="https://github.com/WordPress/gutenberg/labels/Global%20Styles">Global Styles</a></li>

</ul>

<h2>Courses and Tutorials For Block Themes</h2>

<h3>Wpdevelopment.courses</h3>

<img class="aligncenter" src="https://i.imgur.com/C2FTho7.png" alt="WP Development Courses shares knowledge and tutorials to make and develop a block theme." width="1200" height="675" />

The <a href="https://wpdevelopment.courses/">WP Development Courses</a> site was built by Fränk Klein, a programming engineer in Luxembourg. He has participated in many big projects and is the author of the Block-based Bosco theme. Bosco theme is one of the block themes developed at the very beginning of the Gutenberg project. This theme is popularly used by developers to test the new features of Full Site Editing.

On his website, Fränk shares many in-depth knowledge and tutorials on how to make and develop a block theme. Fränk also helps readers apply that knowledge directly to his Block-based Bosco as an effective and practical case study.

Besides, Fränk also has the course "Building Block-Based Themes" on his website. In this course, you'll get hands-on instruction on building block themes. You only need to buy this course once for $179. Whenever there is a new change from Gutenberg, you will be updated in this course as well. This price may be quite high for many people. But the course is promising to be worth your money because you can receive knowledge from a leading block theme expert.

The course consists of 5 sections:

<ul>

   <li>Section 1: Building a Basic Blog Theme</li>

   <li>Section 2: Template Parts</li>

   <li>Section 3: Navigation Menus</li>

   <li>Section 4: Templates</li>

   <li>Section 5: Styling Blocks &amp; Templates</li>

</ul>

<h3>Fullsiteediting.com</h3>

<img class="aligncenter" src="https://i.imgur.com/4vHKYGt.png" alt="Fullsiteediting.com bring Full Site Editing courses for both developers and site editors" width="1200" height="675" />

If you follow the Yoast team, you will know Carolina Nymark. This web developer is the woman behind <a href="https://fullsiteediting.com/">Fullsiteediting.com</a>. She is also a core WordPress contributor and has a passion for the development theme and the Gutenberg project.

On this site, Carolina has built Full Site Editing courses for both developers and site editors who don't have much experience. Currently, the number of documents and guides about block themes on the Internet is not many, so the sufficient course as Carolina is valuable.

In the course for developers, Carolina provides very detailed and easy-to-understand knowledge, including instructions on how to create an environment for theme development, explaining basic concepts like FSE, Block Grammar, Block Properties, Block styles, Block Variations, Block Patterns, ... At the end of the course, you will know how to write a basic block theme and how to work with templates, template parts, and <strong>theme.json</strong>.

Furthermore, fullsiteediting.com has many useful articles and referrals to other block themes development resources.

<h3>Themeshaper.com</h3>

<img class="aligncenter" src="https://i.imgur.com/etn6La8.png" alt="themeshaper.com provides in-depth information about block themes." width="1200" height="675" />

As the site of Automattic theme's team members, <a href="https://docs.google.com/document/d/1iH-iuDxfH2UFDcCnPXIHEcvW5L2fSdS1Db52MZosEpE/edit#heading=h.2tsyzd8qbnx7">themeshaper.com</a> is a reputable source of information worth checking out.

The articles in themeshaper.com are quite in-depth. They help you understand better the process of building a block theme from the insiders, from designing to forming a full-featured theme.

While the Gutenberg project is still under development, themeshaper.com has many specialized articles related to block themes such as:

<ul>

   <li>Getting Started with Block Themes: Patterns</li>

   <li>Getting Started with Block Themes: Global Styles</li>

   <li>Getting Started with Block Themes: Templates</li>

   <li>Getting Started with Block Themes</li>

</ul>

You can find all articles about block themes on <a href="https://themeshaper.com/tag/block-based-themes/">themeshaper.com</a> here.

In addition to the courses and tutorials listed above, there are many other resources on Google or Youtube that you can find. Please comment to let us know some additional resources that you think should be added to this list.

Well, there is another cool part, which is the block themes that you can download to experience and learn.

<h2>Sample Block Themes to Experience</h2>

Here are the block themes on WordPress repository that are used and experienced widely by developers:

<ul>

   <li>Blockbase by Automattic và các child theme:

+ Mayland (Blocks)

+ Seetled (Blocks)

+ Quadrat</li>

   <li>TT1 Block - the block-based version of Twenty Twenty one</li>

   <li>Armando by Carolina Nymark</li>

   <li>Block-Based Bosco by Frank Klein</li>

   <li>Naledi và Clove by Anariel Design</li>

   <li>Hansen by uxl</li>

</ul>

<img class="aligncenter" src="https://i.imgur.com/hqyuKdu.png" alt="block themes on WordPress repository" width="1200" height="675" />

Did you notice that there are two authors that we mentioned above, Carolina Nymark and Fränk Klein?

You can also download the trial versions of the block theme on Github <a href="https://github.com/WordPress/theme-experiments">here</a>.

<h2>Final Words</h2>

Full Site Editing and block themes are still under development and they can change rapidly. If you don't want to be outdated or left behind, you should learn about block themes and block editors from now on. The resources that I have compiled above can help you keep up with the changes and new trends of WordPress. Whether you want to develop block themes or just start to learn and explore them, follow us so that you won't miss the upcoming interesting articles.