Brent Jett

I had the pleasure of going to WordCamp US earlier this month in Nashville and hearing Matt speak at the State of the Word and talk about what comes next for WordPress. I also had several fun conversations with members of the community (we have the best community!!) and now that I’m back home, it’s left me thinking a lot about what I would imagine next for WordPress if it were up to me. We’re at such an interesting place in WordPress’ history. Blocks have arrived but we’re still waiting to see what they become and where they might be useful beyond the editor. The WordPress community as a whole is in a learning mode right now because there’s so much new functionality and code to familiarize ourselves with. Many things are in transition and up for debate.

One area that I’ve been thinking about for a long time is the relationship between themes and customization. I don’t think I’m alone in that. The advent of blocks calls into question the role of themes and how we’ll be creating websites with WordPress for the next decade. Phase 2, or the next big focus in WordPress is still a bit fuzzy as to what it’s going to look like. We know we want blocks inside nav menus and to bring widgets into conformance as well, but beyond that it’s not a clear picture yet. The customizer, meanwhile, is looking a little long in the tooth. It was born out of a different set of theming problems and it’s written with technologies that, while excellent in their own right, have largely been passed over for their newer, more modern alternatives. Even the way in which we structure programs has changed dramatically since customizer was first created.

What if WordPress had a new customization space?

It isn’t unusual for me to sit with a cup of coffee, dream about stuff, and draw. That’s what I’ve been doing here lately. I decided to try and use the visual vocabulary from Gutenberg (with plenty of creative license taken) and see if I could form a coherent thought on where I think customization could go. We know we want a new experience for dealing with navigation menus and widgets. We know there’s some notion of using blocks in layouts but what does that really mean? And then there’s the question of how do we rescue themes from their identity crisis and give them a fresh purpose in a component-driven world. 

Asking for one design to address all of these ideas is a tall order. But so is asking the customizer to do the same. The tension I’ve always felt in customizer is there’s no sense of tasks. You could argue that panels are meant to do that, but it still leaves me wanting more clarity, more of a sense of place. What am I doing right now and what controls or visuals do I need to do it? Am I choosing the layout for my blog? Am I setting up the typography for my site? I want a way to tailor those experiences more to the headspace that the user is in at that moment.

That’s what led to me to the notion of “Workspaces”.  The user should be able to switch between different perspectives of the same application with different tools and controls. Each workspace could present the site preview like customizer does now, or some other screen that’s more appropriate to the task. Each workspace could have its own set of panels that you can navigate between. One workspace might need the sidebar, another might not. One might highlight things inside the canvas that the user should notice. 

Before diving into more mockups and ideas I think it’s worth noting that my instinct with application design is to start with the ideal user experience and work backward to the technical constraints. This lets you kind of run fast and dream big, then worry about the realities later. There are a few different user scenarios that I think it’s good to keep in the back of our minds when talking about customization in WordPress:

• The experience a first-time user gets when they land in a new WordPress site.
• The experience a designer/creative has when they are trying to use WordPress to implement a specific site design.
• The experience an author has working on content (hey Gutenberg 👋🏻)
• The experience an advanced user has when managing, optimizing, and maintaining a site over the course of its lifespan.
• The experience a creative has in making a new theme to be published on the repo or shared.

 There are certainly more use cases than this, but these are the ones on my mind.

So What Could Workspaces Do For Us?

One of the things I think could be greatly improved upon is the user’s relationship to layout choices. Gutenberg introduces a way to register a block layout to be used as a starting point for pages and I think it’s only natural that this functionality will find its way into other places eventually. Wouldn’t it be great if themes never had to create a select control with “One Column” and “Two Column” options again? Could this new customization space:

• Offer the layout options from the theme in a more beautiful, intuitive way
• Offer choices of multiple header and footer parts and let the user decide when they get included

I’m always looking for more ways to be visual. I would love to be able to choose “Edit Header” and have the UI render all my options so I can really make an informed choice. This isn’t the simplest thing to do technically but we won’t worry about that right now.

Where Does Styling Go Next?

If there’s one quintessential thing that a customization space has to do well, it’s help you style your site. The customizer gave themes a way to surface design options that it could synthesize into html & css. But one thing customizer never did is give you a view of all the styling patterns that your theme supported. For that you’d have to read through the stylesheet and try to make sense of it. It’s now the responsibility of themes to also style the core blocks. 

I’ve heard lots of chatter over the years about design systems, living style guides, pattern libraries and in general I think these are all really good things when they can be explained visually. What if WordPress had a formal set of layout patterns for themes and blocks to use AND what if we also had a built-in test sheet to actually see that our theme is covering all the bases?

I personally would love to see WordPress take a more opinionated approach to styling and remove some of the burden from theme authors. Authors can always override things with their own styles but out of the box, you shouldn’t need to. Even better would be a library that the customization experience already understood and could offer options like spacing, base text size and of course, content width. These could be configurable through controls and the appropriate css would get generated.

In addition to the style controls, we could present one or more style guides to show the user what patterns are available (as blocks, or just html/css) and offer theme authors a consistent set of testing content without having to import a testing suite into the database and go look at a bunch of different pages. And oh by the way, the style guide could be built with blocks (just sayin’).

Most importantly, this offers a space to show what’s available in a theme. If it has color options, let’s show that. If it has created multiple block styles, let’s show those too! MOAR Visual!

Who’s Got Nice Assets?

Very closely related to styles is the topic of assets. Most of the themes I have written in my career have had to include some design assets in them. Also there are some kinds of image assets that we just can’t upload to the media library like SVG art and WebP images (for security reasons). What if we gave themes and plugins a way to declare what assets they have in them, and let the system present them where appropriate? These might include:

• Icons
• SVG art
• Color Palettes – we already have a form of this in Gutenberg
• Typeface options – both included font files and 3rd party services like Adobe Fonts (formerly Typekit) and the Google Font Library
• Appearances and Color Alternates – this bears further explaining, but what if we helped themes do things like dark and light appearances for their designs?

We want creatives making good design choices in their themes and then offer them to be used by everyone else, right? Why not give them a first class experience for showing off that work?

The asset library could be the culmination of any theme or plugins that have registered assets to be used by the system. Then in appropriate places, the system could offer those choices, like when styling for example:

I won’t go into too much detail about assets here; I’ll save that for a dedicated post, but I think giving themes and plugins a formal way to declare their design assets and then presenting those in the UI would go a long way to making WordPress feel like more of a vibrant, creative platform.

In The Beginning…

One area that we’ve never been able to tap into is the “5 minute install”. It kind of makes sense. There are no themes or plugins active at that point so even if there were hooks you wouldn’t be able to use them. But what if after install, or the first time a new user logs in they could be guided through a simple intro experience? What if themes could offer some options to take you through upon activation?

Before you ask, yes, I do have a “Use Without Theme” option in that first screen, and no, that is not possible in WordPress today. Should it be? In part 2 of this post I might talk about that a little. But more importantly we could offer some really nice walk-throughs for new users this way. 

How Might 3rd Parties Use Workspaces?

Possibly the most exciting area for me (not surprising, since I work for Beaver Builder) is opportunities for plugins and themes to create brand new experiences that weren’t possible before or were impractical. I think the notion of workspaces could open up a lot of good things here. Let’s take site optimization for example. 

We all know we need the boring bits: SEO, Tracking, Image Optimization, Redirects, etc… but where do you put that stuff? The admin makes sense for a lot of it, but what about when you need the context of the page view to really make sense of the options? How about an optimization workspace?

The idea here is a dedicated space to highlight issues that need to be resolved and give an expected place for things like tracking scripts and micro-formats. Core might even define the workspace and have a few checks of its own. I know there’s a project sometime this year to get the theme health check plugin into core. We could really use a place for that.
The benefit of putting these things in their own workspace is it’s a natural separation for user roles. The users that need access to styling and navigation probably aren’t the same ones that need to be looking at tracking and redirects. Workspaces provide a natural place to separate functionality by user role.

How do we get there?

If you’ve made it this far, you’ve probably already started thinking this is a pretty big idea and working on it would be a pretty big project, and you’re correct. An undertaking like this would have to be broken into pieces and accomplished over time. It also would require some changes under the hood to make these kinds of experiences possible, or at least more manageable. In the next post in this series I’m planning to dive into what kinds of things might need to change technically to make user experiences like these possible. Thanks for reading!

Keep Reading

In Part 2 of this series, I look at how themes might declare “block areas” for use in customization. https://brentjett.design/2018/12/28/block-areas-themes-customization-part-2/

Part 3 explores setting a more consistent foundation for theming and customization – https://brentjett.design/2019/01/01/a-solid-theme-foundation-customization-part-3/

Also if you’d like to see all these mockups in one place, I’m throwing them in Dropmark for now and will probably be adding some new ones along the way. https://brentjett.dropmark.com/617450