Justin Tadlock
It was the early days of the Gutenberg project. Many on the Theme Review Team and those in design circles were trying to wrap their heads around this new concept called blocks. In particular, we wanted to know how it could be applied to theme development. There were many discussions on the pros and cons of the early editor. Overall, there was a bit of cautious excitement in the air, our optimism tempered by a buggy version of alpha-level software.
The block system could potentially solve one of the biggest hurdles of theme development: inserting default/demo content for a full page into the editor.
I cannot remember who initially explained the idea, but it was a lightbulb moment for many at the time. The general concept was pre-building a custom homepage or any page design that users could choose visually. It would all be done through a standardized block system, and we would no longer need to rely on piecemeal theme options, third-party plugins, or attempt to work around the review team’s “do not create content” guideline.
No one really knew how this would work in practice, but we understood the theory of how it would make the life of a theme developer much simpler.
In October 2019, Automattic developer Jorge Bernal opened a ticket titled Starter Page Templates. His team was working on a template selector for mobile apps, and the WordPress.com Editing Toolkit already had the feature. The goal was to bring it to the core platform, allowing third-party theme designs to build on top of it.
Because the term “template” is overused in the WordPress space, I will refer to these as “page patterns.” This naming convention was coined by Noah Allen, a software engineer for Automattic, in the ticket. It makes sense because we are actually talking about a page’s content rather than the wrapping template.
The Genesis Blocks plugin is one of the best ways to understand the page pattern concept. It has a Layouts button at the top of the editor that, when clicked, creates an overlay of designs to choose from.
These designs are split between sections and layouts. Sections are the same thing as patterns in core WordPress: small, reusable pieces of starter content. Layouts are full-page starting points for users to create various types of pages.
The StudioPress/Genesis team was not the first to market this concept. However, they have created a well-rounded user experience on top of the WordPress editor.
You will find similar experiences via GoDaddy’s onboarding process for its managed hosting service. The Redux Framework allows much the same, and Editor Plus offers templates and patterns from the Extendify library.
That initial excitement has waned a bit. It felt like that early promise was a dream that would never be a reality.
Theme authors, especially in the commercial space, have long offered home-brewed solutions for the one-click insertion of full-page content. Whether via a ThemeForest project or a popular theme on WordPress.org, there are endless examples of everyone solving the same problem. One might even argue that these custom inserters are so ingrained into theme agency systems that anything WordPress offers at this point will not appeal to those who have already brought their solutions to market. Where the core platform has failed to meet user demands, our development community has stepped up.
Some of you may be thinking that the current block patterns system works for this. Yes, and no. Theme authors could shoehorn full-page designs into it, but the user experience is lacking compared to third-party solutions. Patterns today are one of the best theming tools available, but they fall short of what is needed to see this thing through.
The foundation of this feature exists via the Patterns API. From the theme author’s perspective, they merely need a method for flagging a pattern as a full-page layout, separate from the others. However, the UI and UX flow need an overhaul. The flyout panel for the current inserter does not cut it, especially on large screens. A fullscreen overlay has become the de facto standard among other systems.
Users should also have another option between selecting from an existing page pattern or starting empty upon creation.
“I think this would be so useful to have in the core,” wrote Ana Segota of Anariel Design in a recent comment on the ticket. “I created 2 FSE themes so far and also our latest premium theme is made with block patterns and this is exactly what I thought and talked with few people about. It would be great when a user opens a new page, to chose design/page patterns however we called it and it starts editing it right away. Most of the users just want to add a page, choose a layout and start adding their content.”
Of course, this is not a revelation to the average theme author who works with end-users daily. Inserting or importing entire page designs into WordPress is one of the most common requests. WordPress is almost there with its current patterns system. We just need to take it to the next level.
Justin, as always, your insight is on point and highly prophetic. (At least in terms of what we are building with Frost.) It’s starting to feel like you are eavesdropping (not really) on our conversations because every time I see a new post like this, I’m like, “Exactly, which is why we are building what we are building.”
I can assure you that your coverage here on the Tavern regarding WordPress, blocks, patterns, layouts, theme.json, etc., is not falling on deaf ears. That’s a promise.
Hey Brian, just a heads up: the Frost website has a content box that says
“Aethestic Design” instead of “Aesthetic Design” and almost reads like Atheistic.
Also thanks for Genesis existing but it is one of the reasons I have a job today.
Thanks Victor, on the typo report (fixed) and being a Genesis member. Awesome to hear it’s one of the reason you have a job. Great stuff!
I like the terms “Page Layout” and “Page Sections” for these items.
The word “patterns” is continually confusing to most clients. I’ve found that users think of checkerboard patterns, tiled patterns, decorative patterns. Even after I tell them what patterns are, they forget by the following week.
Meanwhile “Layout” is more familiar term for most office workers, as it’s often heard when they are dealing with PDFs, Brochures, and such.
A Google search for “define: patterns” versus a search for “define: Layout” brings expected definitions and reinforces my point that Gutenberg page layout presets should be called “Page Layouts” to aid understanding and acceptance by general non-technical users.
I have to agree on the “Page Layouts” terminology. Patterns bring to mind…” sewing”. I’m seeing everything involving “layouts”, and sure, sections too if it’s a full-page layout. In a way, the method of using WordPress and blocks reminds me of laying out a page as it relates to desktop publishing–building pages. Yes, I’ve used QuarkXpress, PageMaker, and some InDesign :)
Shout out to good old QuarkXpress!!
I was a PageMaker/InDesign person, recently finding Affinity Publisher a great substitute with no subscription. (I dropped off the Adobe treadmill with CS4 to avoid the subscription model; glad to have a current & affordable alternative.)
Yes to the layout terminology, though I could probably accept “patterns” fairly easily.
I prefer sections and layouts too.
+1 to sections and layouts as well. I never really even considered it – but – yes – while patterns are easy for devs to understand a client definitely will think of tiles and checkers – to prevent this pointless explanation process – i hope we call it layouts and sections too.
As usual, I am an outlier; though I would probably be willing to start with a full-page design, I also would want to be able to adapt it.
That’s the idea. Full-page designs/layouts/patterns would just be a starting point. You, as the user, would just adapt it by adding your own content.
What about full “site templates”?
We tested prebuilt patterns, page layouts, and full site templates with Edupack users. Novice WordPress users were most comfortable with full site templates that gave them prebuilt websites, tuned to their use cases.
Site layouts were attractive to folks with some idea of the content they wanted on their websites, and the concept of any type of “pattern” was only understood by folks with some design experience.
Designing the editor to meet a user’s experience level would be a super great way to meet users with features that march their experience.
I guess the question is, who are the users? How much design experience do they have, how much do they want to know? I maintain sites for a few grassroots groups, self-selected based on interest and experience (very limited compared to probably anyone here, but some, and a print “desktop publishing” background from the 1990s). I am likely not a typical user, but I want customization options, not just frames into which to drop my materials, which are sure to vary to greater or lesser degree.
“Pattern” is just the current terminology in core. This is more of a content layout on a per-page basis.
I’m not a big fan of using templates for some of this because it can often mix the content layer and the site structure layer. It depends on the specific use case though.
If I remember well Twentig, the extension plugin for Twenty Twenty and Twenty Twenty One themes, offert also “strater kits”, ready made full page templates (or patterns).
We have page/post templates (both classic and block based).
We also have block patterns.
Would be great to have the functionality for a theme to optionally define a template and pattern combination.
For example the page layout of Template A with the content design of Pattern 2.
These two aspects of presentation are currently disconnected from one another.
That would be pretty sweet. I have an “open canvas” type of template that does not display the header and footer. Coupling a full-page pattern (or whatever they might be called) with that template by default would be awesome for landing pages. It’d be one less step for users.
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
