Gutenberg Design System Demystified

A post in a popular Facebook group for WordPress developers recently talked about there was a feeling that design control and designs systems were becoming more confusing in the Gutenberg-era. The author went on to talk about block styles, theme.json, editor styles, and how it seemed difficult to find a single source of truth or maintain consistency, especially if a range of plugins and possibly a second page builder was also being used on the site.

To designers, to marketers, to the concept of branding… design systems are very important. It’s a way of creating consistency, enforcing a brand image, and done right, it can vastly improve quality and efficiency when creating websites and UX’s. Almost all major brands have some form of design system, and many smaller companies rely on inheriting these approach, such as Google Material design, Bootstrap from Twitter.

The concept of what is a design system shifts a little when we talk about WordPress. First we’re very focused on the web specifically, not thinking about highway road signs and other formats. Secondly we’re actually talking more about “application of a design system” than the creation of it. The creation of a design system and it’s specific brand elements and design choices, this will likely still be done in a design-focused tool like Figma or one of Adobe’s 291 design software options.

Let’s preface this exploration of Gutenberg and block theme design systems by saying that we appreciate many are reluctant to fully adopt Gutenberg as a layout tool. Even developers and site owners that use Gutenberg daily for content editing, don’t always see it as ready for primetime use as a layout and page builder. As a result, there is the possible added complication of running a page builder like Elementor on one part of a site, then trying to use some features of Gutenberg global styling on another part of the site. That will obviously come with some added complications, and simply a lot more time and energy. We’re not advocating to suddenly shift, but in this exploration we encourage you examine the completeness of the design approach using block themes, and ask yourself if you really need to continue using a secondary page builder other than Gutenberg.

Custom Themes Versus 3rd Party Themes

This may spark some controversy and certainly won’t be great for those who make and sell themes, but in this author’s opinion, every WordPress site should have a custom theme. The block theme approach dramatically lowers the bar to creating themes, and unless you are simply happy to use a base theme exactly as it is, in most cases you’d be better off with a custom theme. Even before block themes, most highly profitable WordPress sites have always used custom built themes. The problem is the cost of that development was out of range for many smaller businesses and certainly not worth the costs for people running a hobby business or a personal blog.

We’re certainly not saying the theme industry is dead. Theme makers will shift, and millions of sites will continue to use classic themes. In fact the same realities will be found in the next era as the last, while lots of sites will use 3rd party themes, businesses that use custom themes will tend to win in the marketplace especially in competitors sectors where design and marketing matter more, such as real estate, finance, marketing services.

The exact numbers are difficult to assess, but we might suggest that building a block theme is as much as 5-10 times faster and lower cost than building a similar classic theme. The technical knowledge bar is also so low that even a person who doesn’t consider themselves a developer, could learn the skills required in as little as a few hours. A basic custom theme can be built in anywhere from 2-4 hours. Of course, that doesn’t mean we won’t labor for 20-hours or eventually over 100-hours, because the nature of development is iterative. If the site is big and there are continuously new features, updating the theme might be done week after week for years. That however is okay, because you’ll only do this if there is a constant business reason, and this continued investment is actually profitable.

Goodbye Child Themes

In the classic themes model child themes were incredibly important because the standard approach was to use a 3rd party theme, but then add a child theme so that custom templates could be created and unique styles added. Using child themes was the “right way” as opposed to hacking the base theme, which would then make that theme impossible to update, or require some very hacky updating of custom code after each theme update. Sadly millions of sites have that problem because they hired incompetent developers who broke that rule.

Today in the block era, yes you will probably still see child themes used. And not just for sites that are running classic themes, but there will also be base block themes and child themes. However, smart people won’t do this because it’s going to be a really expensive and foolish mistake. The complexity of theming with classic themes made using child themes worthwhile because you didn’t want to have to invest into the base theme. Today, it will be simpler to just build a base theme. Of course theme sellers will try to tout the amazing and unique benefits of their themes to get you to use them, and then propose child themes are the way to customize them. Instead just find what you like about any base theme, and focus on reproducing the essential elements in your own custom block theme. That way you have a stable foundation, you know your theme, it will be a more holistic approach that will help you optimize your site and simply future development, which significantly saves cost. An important concept to remember about dev costs, it is complexity, confusion that create a time sink or a technical debt. Try whenever you can to choose the simpler path, it pays off in both the mid-term and long-term, even if it involves some sacrifice in the short-term.

Similar Posts