Full-Site Editing Is Not the End of Artistic WordPress Themes

These plain canvas-like themes have until now been a choice for those who prefer it (those who like to design their own thing), but this article makes it sound like these types of themes should be the only choice in the future of WP.

This is worrisome to me as a non-designer who looks for themes specifically based on things like attractive button styles.

FSE sounds bad for people like me, who aren’t artistic, can’t coordinate colors, and want themes to do the artistic stuff.

This was the response by a Tavern reader named Isabel on the recent coverage of the Q theme, an experimental project for the upcoming full-site editing (FSE) feature of WordPress. More specifically, she was worried about a thought that Ari Stathopoulos, the theme designer, had made asking that theme authors not get too opinionated with their default styles for things like buttons and so on. His view seemed to lean more toward creating open and customizable themes. However, it is not the only valid opinion on what themes should look like.

This is not much different than what we have experienced over the previous decade or more. Some theme authors build open canvasses for users to customize. Other theme authors build intricately-designed layouts with unique textures, shapes, and forms.

This is not going to change when FSE lands in core WordPress. Themes are merely the expression of the designer’s vision for what a site could look like, and not all theme authors think about design in the same ways.

The Q theme is meant as a starting point or testbed for FSE. There will be many open-canvas themes. These types of themes are already wildly popular, particularly when used in conjunction with a page builder. Astra has over a million installs. Hello Elementor has surpassed 400,000. GeneratePress has over 300,000. There is big money in this segment of the theme market. FSE will undoubtedly help to increase the competition.

However, that is not all that themers are giving us. The recently-released PhotoFocus theme by Catch Themes is on the upward trend, inching its way into the popular themes list on WordPress.org. And, there are hundreds of other options that go beyond the plain ol’ open, black-text-on-white-background themes built for customization by the end-user.

I simply do not see the current trends shifting too much. Yes, those trends already lean heavily toward open-canvas themes. FSE will allow developers to build those types of themes for core WordPress instead of page builders much more easily.

However, this is also an opportunity for those who want to experiment with more artistry to do so.

Stathopoulos did say:

It’s tempting to add extremely opinionated styles, for buttons for example, but more and more things get added every day to the editor like a border-radius setting for buttons.

But, we must put that into the context of his followup remarks:

Theme authors should avoid the trap of designing an FSE theme having in mind what the editor currently does. Instead, theme authors should strive to build something having in mind a vision of what the editor will eventually become.

He is not saying that every theme needs to be plain and boring. He is not saying that theme authors should be reluctant to put a unique spin on the Button block, for example. He is saying that theme authors need to evaluate how they approach design based on what block options are available for end-users.

Buttons are a good example of this. With the border-radius option that allows end-users to control rounded corners for buttons, he means that theme authors should not overwrite border-radius styles in their CSS. Users should have the option to control it if they want. He is also talking about using the eventual Global Styles system to set up defaults. If theme authors want rounded buttons by default, they should use the system that WordPress provides rather than writing the CSS. He wants theme authors to be aware of the current block options and styles while preparing for new options in the future.

This upcoming era of theming changes how theme authors work with the system. It does not mean they cannot branch out in terms of design.

Here’s where the block editor project makes things more interesting for those users who want things like “attractive button styles” but lack some of the artistic skills expected from the theme’s designer. The block system is set up for unlimited variations on what themes can provide to end-users.

Sticking with the Button block example, users can already see two block styles named Fill and Outline in WordPress as shown in the following screenshot.

Block style variations in the editor.
Using the Outline block style.

Theme authors can add all sorts of style variations today, and some have already done so. Block styles offer a lot of variety, and WordPress allows users to further customize these if they wish to do so.

WordPress also offers two different block patterns that utilize the Buttons block. They are basic two and three-button layouts. However, theme authors can use the Patterns API to create any number of layout options using buttons.

Testing button-related block patterns in the WordPress editor.
Inserting the “two buttons” block pattern into the editor.

Stathopoulos’s comments on not being too opinionated should also be taken in the context of the upcoming Global Styles system, which is currently being tested in the Gutenberg plugin. This system allows theme authors to set up global, default options for everything. They can also drill down and set up default options for individual blocks. For example, a theme author can set a default background gradient, rounded corners, and any other options available for the Button block. These default options can span the width of the spectrum, from a simple and understated square button to a rounded button with a vibrant gradient background and a drop-shadow. The more block options that WordPress’s editor offers in the future, the more flexible theme authors can be with their designs.

Screenshot of the global style system in the upcoming site editor.
Experimental, per-block global styles in the site editor (feature not finished).

Isabel’s concern is valid. It is tough to keep up with all the changes happening and those that are on the feature list of the future. The Gutenberg project moves fast, and when we write about features or experimental themes, it is easy to overlook some of those questions that the average user might have.

To put some users’ minds at ease, future WordPress themes will undoubtedly offer a breadth of artistic designs that are suitable for all sorts of websites. Designers and non-designers alike should look forward to the months and years ahead.

4

4 responses to “Full-Site Editing Is Not the End of Artistic WordPress Themes”

  1. If I had counted the number of hours spent on the buttons and search block in Twenty Twenty-One, it would probably be as many hours as I have spent on some complete themes.

    It is not supposed to be this difficult 🙃

    But there are so many different settings to test and design for.

  2. Artistic themes are a joy to me. It’s like going into your closet and having your outfit already picked out for you. It’s enough having to keep up with the changes in Gutenberg and then to have to piece together a theme could be even more frustrating. I appreciate your addressing this topic and am breathing a sigh of relief.

  3. Thank you for the article Justin!

    I agree that artistic themes are important, and it’s what themes should do.
    However, in its current form, Gutenberg & Full-Site-Editing are evolving extremely fast. An FSE theme could add opinionated styles for buttons, write 100 lines of CSS to add just the right shadows, border-radii etc, only to see their awesomely-styled buttons become the cause of bugs in a future release of the editor. At some point, the buttons get a border-radius control, then they might get a shadows control, or even hover/active-state controls. If/when extra controls get added, themes will be able to simply define their value in the theme’s theme.json file and styles will be auto-generated. Users will be able to tweak these values from global-styles in the site-editor.
    So if a theme adds a bunch of styles now, while FSE is fluid/unstable, they run the risk of spending tens of hours on something that will eventually be doable with a single line in a JSON file – not to mention the opinionated styles will probably conflict with the future auto-generated styles from the editor.
    For example a theme can now add customizer controls so that users select font-families. Writing that customizer control will basically be dozens of wasted hours to write the control, JS, applying the resulting CSS, loading webfonts etc… this will all be part of global-styles out of the box eventually.
    And that is why I previously said “Theme authors should avoid the trap of designing an FSE theme having in mind what the editor currently does. Instead, theme authors should strive to build something having in mind a vision of what the editor will eventually become.”

    Until some APIs and implementations solidify, FSE is a constant learning experience and we shouldn’t rush to build the next big theme… not before the foundation is stable.

  4. This is a late reply, though it’s one that’s been stuck in my mind since reading this post. I am doing my best to follow guidance and best practices, but I continually get stuck on one thing: What about sites that need to implement strict look and feel standards?

    For example, what about an artistic theme with sharp angles that shouldn’t have rounded buttons? This isn’t just about theme author preference, as many sites have brand guides or other visual standards that may mean certain editor features or settings should never be used. To stick with rounded buttons, what about a brand that has a precise rounded corner for all buttons?

    It seems like blocks should be the perfect way to build a site with preset visual components, but the user-facing settings and controls that often can’t be disabled (drop cap and border radius being two good examples) give every content editor the ability to easily break component guidelines.

    (Block Styles and Block Variations are awesome features for enabling easier/better ways of cohesively rolling providing alternate styles that exist within a set of visual guidelines. For instance, Default Button and Rounded Button.)

    With Global Styles, will theme authors be able to globally set styles and disable user-facing settings to override those styles? Without that ability, I have a hard time seeing how theme authors building sites that implement brand standards have any choice but to constantly fight off and attempt to disable the editor in order to implement a consistent look and feel for their site. At least that’s been my experience over the past two years and by far my biggest frustration with the block editor. I hope this can be useful feedback and food for thought.

Newsletter

Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.