DEV Community

Cover image for Top Resources to Learn About WordPress Block Theme for Developers
WP Meta Box Plugin
WP Meta Box Plugin

Posted on • Originally published at metabox.io

Top Resources to Learn About WordPress Block Theme for Developers

As we mentioned in the article about Full Site Editing and others in this series before, block themes (or block-based themes) and the Full Site Editing (FSE) feature are changing the way we build WordPress sites. 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.

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.

Building a Block Theme vs. a Traditional Theme

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.

The page template of TT1 block theme.

You can see the comment wrapper <!-- ... /--> with the inside attributes. It's the blocks of the theme. The template files of this block theme are built completely from these blocks. Therefore, block themes are faster, lighter, and more performative than traditional themes. You can see more details in the comparison between page builders and Gutenberg here.

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 theme.json 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.

News About Block Themes

Gutenbergtimes.com

Gutenberg Times is the Gutenberg-focused news website

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&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.

WPTavern

WP Tavern is a WordPress news site that is followed by a lot of developers.

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:

     
  • Automattic Releases Quadrat, a Block-Based Podcasting WordPress Theme. (We have a review of Quadrat block theme in our blog here)
  •  
  • The WordPress.org Block Pattern Directory Is Now Live
  •  
  • Full Page Patterns Are Still the Missing Piece of Block WordPress Theme Development
  •  
  • Theme Creation Will Be Easier, But We Are Not There Yet Block Patterns Will Change Everything, Part 2: Headers and Footers
  •  
  • Block Patterns Will Change Everything
  •  
  • You can find all the WordPress theme-related content in WP Tavern here.

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.

Make.wordpress.org

Make.wordpress.org updates the information about WordPress in general and Gutenberg editor, block themes

It would be a pity to skip the make.wordpress.org 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 Roadmap page. It annually updates the information about WordPress in general and Gutenberg editor, block themes in particular. There are also quarterly or monthly, weekly,... updates in Make WordPress.

As for block-based themes, Make WordPress has its own chat group called Block-Based Themes Chat 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 here.

Documentation to Learn About Block Themes

There is no need to spend too much time looking for resources to learn about block themes when you have wordpress.org. There is a guide to block editor, including a detailed guide on block themes here.

wordpress.org provides a lot of information in WordPress.

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.

Github

WordPress developers are already so familiar with Github. The repository for the Gutenberg projects 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:

Courses and Tutorials For Block Themes

Wpdevelopment.courses

WP Development Courses shares knowledge and tutorials to make and develop a block theme.

The WP Development Courses 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:

     
  • Section 1: Building a Basic Blog Theme
  •  
  • Section 2: Template Parts
  •  
  • Section 3: Navigation Menus
  •  
  • Section 4: Templates
  •  
  • Section 5: Styling Blocks & Templates

Fullsiteediting.com

Fullsiteediting.com bring Full Site Editing courses for both developers and site editors

If you follow the Yoast team, you will know Carolina Nymark. This web developer is the woman behind Fullsiteediting.com. 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 theme.json.

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

Themeshaper.com

themeshaper.com provides in-depth information about block themes.

As the site of Automattic theme's team members, themeshaper.com 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:

     
  • Getting Started with Block Themes: Patterns
  •  
  • Getting Started with Block Themes: Global Styles
  •  
  • Getting Started with Block Themes: Templates
  •  
  • Getting Started with Block Themes

You can find all articles about block themes on themeshaper.com 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.

Sample Block Themes to Experience

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

     
  • Blockbase by Automattic và các child theme: + Mayland (Blocks) + Seetled (Blocks) + Quadrat
  •  
  • TT1 Block - the block-based version of Twenty Twenty one
  •  
  • Armando by Carolina Nymark
  •  
  • Block-Based Bosco by Frank Klein
  •  
  • Naledi và Clove by Anariel Design
  •  
  • Hansen by uxl

block themes on WordPress repository

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 here.

Final Words

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.

Top comments (0)