Justin Tadlock
Ten years ago, a potential WordPress theme buyer might stumble upon a site like ThemeForest. The themes on the site would primarily tout the hundreds of shortcodes they included. These shortcodes would allow the user to build anything they wanted with simple BBCode-like brackets around some tag or another.
The practice was not limited to ThemeForest. Nearly every theme development company at the time — and they were sprouting up by the dozens a decade ago — needed to compete in the same arena. Despite all their faults (never mind that no user could reasonably remember hundreds of them), shortcodes topped the list of features.
Today, the landscape is much different. In part powered by page builders like Elementor and Beaver Builder, themes are more apt to offer pre-built design options. Gone are the days when users must painstakingly fill their pages with shortcode soup manually. At the click of a button, their theme will automate the design of their homepage for them. The user merely needs to fill in the content. At the click of another button, the user gets a contact or services page. A restaurant owner might get a fully-laid out food menu. A new online shop owner can get a full set of pre-built WooCommerce products by importing their theme’s demo content.
Customizability is the name of the game. This has not really changed over the years, but the methods for getting there have.
When perusing commercial theme shops today, the common thread is the multitude of demos. These demos showcase the various layouts the user can have if they just fork over the $50 or $60 for access. There are themes with over 500 demos.
Some themes market hundreds of templates or dozens of pre-built, one-click website designs. At the end of the day, it is all about making the user’s site look a certain way without the hassle of hours of work.
The problem with traditional theming is that all of these themes are built with non-standard solutions. This is no fault of the theme authors. They had to build or use third-party systems where WordPress had failed. Elementor has standardized this to some degree — many commercial theme shops fully support it, often as the default experience. However, it still only represents a fraction of the market and is not a part of the core platform.
WordPress is still catching up to the dream that the premium marketplace has already been capitalizing on.
However, WordPress can do this better in the long term and level the playing field for many other theme developers. We are on the verge of true one-click solutions from the core platform. It will be a tough run for the next year, but the theme shops that adopt the block system the soonest stand the most to gain.
If you have ever installed themes that offered dozens of header designs, the experience has likely been hit or miss. Most such themes require users to go through dozens of options fields in the customizer or — yikes! — a custom-built options page that looks nothing like the WordPress interface. While there are simpler solutions that some theme authors have created, WordPress has never had a built-in way of allowing users to do this.
Enter template parts made out of blocks.
Themes Team rep Carolina Nymark showcased just how simple this is with the upcoming site editor. Her Armando theme offers three custom header templates.
The system is far from ready. There are missing features that we will likely not see for a while. For example, there’s currently no way to categorize or otherwise group all the header templates just yet. Users can just as easily replace the header with a footer template.
However, this is an important step forward. The theme author did not write any complicated PHP or JavaScript. There was no need to build a custom options panel or fields. No third-party system was warranted. The developer created the templates, and they became instantly available through the site-editing interface. The theme author’s responsibility went back to simply designing. The user has access through a standardized interface.
If theme authors want to offer hundreds of switchable templates, they can. If they want to add two or three while upselling the others, they can do that too.
Now, expand upon this idea with other types of templates. These can be a footer, sidebar, homepage, or any template. The commercial applications are endless. Theme authors can offer commercial themes or upsells with far less work than ever before.
The possibilities do not end with templates. Block patterns are another viable feature to commercialize. As shown with the Genesis Blocks plugin, its “layout selector” offers various patterns to quickly insert into the post content.
Genesis Blocks even offers collections of these patterns that share a similar design aesthetic. In other words, these are essentially pattern categories.
This is an easy path forward for theme authors who are looking to upsell. Build one or two categories of patterns. Periodically bring in new groups of patterns for users who want a fresh look without changing themes.
Gutenberg Hub already provides hundreds of templates and patterns, filling a void that is currently missing from the theme ecosystem. The site offers convenient solutions, but something is missing: they are not tied into the theme’s design. Forward-thinking theme authors should already be building competing solutions that offer all the same templates and patterns that match their themes.
A year or two ago, there was some rumbling about the block editor leading to the death of WordPress theming. Traditional theming will trickle into nonexistence in the coming years. Of course, there will be pockets of holdouts, but the future is about one-click solutions. And, WordPress is setting the stage for all users to have this ability at their fingertips. The theme shops that recognize this the soonest will profit from it the most. Everyone else will be fighting for the scraps they leave behind.
It is not time to abandon traditional theming or forgo page-builder support. However, it is time for themers to begin rolling out block patterns and to start outlining, testing, and building block-based themes.
I’ve spent the better part of today experimenting with full site editing. I’ve worked through Carolina Nymark’s fullsiteediting.com course, which I recommend to everyone who’s interested in this subject.
Clearly “fse” has come a long way since I first looked at it earlier this year. I like the idea of block-patterns as design bases, global designs, and sure, let end users play around with the blocks on their pages. Most won’t want to do it anyway – but patterns instead of shortcodes, sure, that’s a better solution.
That said – at the end of the day of perusing the fse course, after swapping template parts in-and-out, I still wasn’t able to position the website-title block next to the website-subtitle-block with the distance I wanted (within a columns block). I wasn’t able to place a menu on top of a cover block and position it properly. Basically, I wasn’t able to do a lot of the things that I wanted to do. And many of those need to be done in a lot of themes.
Just as in Gutenberg “for posts and pages”, basic positioning of elements is, in my experience, just not working as at least I expect it to work out of the box. I don’t like Elementor, but it’s working intuitively in a way Gutenberg still does not. In Elementor, it’s possible to properly position elements within sections using CSS values in option fields in ways that are hard to find in Gutenberg, although some additional controls have recently been addd and some more are provided by plugins. That may not be too much of a problem for most posts and pages while displayed within a theme, albeit annoying, for sure, but for fse it is really debilitating if this is not provided in the core.
In general, I find it difficult to understand which parts of the fse theme are now supposed to be styled completely through their blocks and which parts will still require additional styling from the theme’s stylesheet, or what the expected interaction between those elements will be?
I mean, take the positioning of the search field and button in the screen shot of the template parts above. I’d say they need to be pushed down a couple of pixels to sit right in the black bar. Would this have to be done through custom classes added to the block and added to the front end through theme.css? Or should this be done in the editor? I would expect this to be possible in the site editor for an fse theme, but currently at least, it isn’t.
I understand that fse is the way WordPress as a platform is going quickly, at least philosophically. Practically it will take a lot longer. While I try to keep up with what’s going on, I can’t see myself recommending an fse based theme to any client anytime soon.
You’re right that many clients now expect sites to be up and running faster than before, and part of that expecatation is the kind of visual templates for various systems you refer to. But so far, fse isn’t really a way to cater to that expectation.
It will be interesting to follow the development this year, and hopefully, some of my questions will be answered and some of my problems will be solevd along the way. But today, sadly, I can’t say that I share your enthusiasm.
Dear author, it’s not only about design. People reach to themes (in my case avada on over 500 sites) because of speed tweaks, forms, events, hubspot integration.
Those things also fall squarely under design. For example, imagine a theme that creates custom templates or patterns that automatically add in the blocks for your favorite form or event plugins. Just plug and play.
I agree that for people whose idea of “site building” is slapping prefab shortcodes and widgets into stacks, or, worse, trying to wrangle ACF repeater fields, that Gutenberg is probably a dream come true!
It’s still silly prefab widgets with a hack for widgets that hold other widgets. And don’t get me wrong, Gutenberg blocks are VERY nice widgets.
But it’s still exhausting for those of us who work with professional designers that have to follow branding and company-wide style guides.
It’ll sure be nice when someone designs a block pattern or block template that lets us actually do our own layouts instead of finding and depending on someone else’s pattern that does what we want. Without us having to fire up a full SASS/SCSS stack to fiddle it ourselves.
Currently even the worst, most bloated shortcode-based page builders do that. And modern ones let us do it effortlessly.
I really don’t like depending on builders for layout and design. I’d infinitely prefer to have one single block wrangler that will let me do it.
I get that the core developers don’t understand why anyone would want to do this. They still think in terms of stacking fancy widgets and thats fine. Yay better widgets! But it’s like wondering why anyone would want PhotoShop or a camera when there’s already so many clip art and stock photo vendors.
I really am waiting eagerly to switch to blocks. But I need to be able to handle decisive layout if I want to continue working with my established clients and their designers.
It’ll sure be nice when someone designs a block pattern or block template that lets us actually do our own layouts instead of finding and depending on someone else’s pattern that does what we want. Without us having to fire up a full SASS/SCSS stack to fiddle it ourselves.
Have you looked at GenerateBlocks? Either combined with Justins Block Pattern builder or Genesis Custom Blocks? There exist a lot of tools for Gutenberg that positions itself somewhere between “from scratch” and “prefab”.
Enter your email address to subscribe to this blog and receive notifications of new posts by email.
WordPress Tavern is a website about all things WordPress. We cover news and events, write plugin and theme reviews, and talk about key issues within the WordPress ecosystem…
© All Rights Reserved. Powered by WordPress, hosted by Pressable
source
