Posted on

#36 – Sean Blakeley on Transitioning a Large Agency Over to Gutenberg

On the podcast today we have Sean Blakeley.

Sean works for a large agency called American Eagle, a platform agnostic organisation working with enterprise clients on a wide variety of projects.

After years of experiments with different approaches and collaborations between designers and developers, their team has begun to rely heavily on block patterns, and they’ve found it is greatly increasing their productivity. It’s fair to say that block patterns have revolutionised the team’s approach to the entire design process.

In case you’ve not explored block patterns, they are collections of blocks which can be built by anyone. With thoughtful design, these blocks can be repurposed across pages and even different websites. Build once, deploy everywhere.

We talk about how and why Sean’s team decided to jump in early with block patterns. When they did, this was a somewhat risky strategy. There was no guarantee that patterns would begin to be widely adopted, but this strategy is now starting to bear fruit. It’s allowing their team to work with their clients in new and unexpected ways.

Clients are now working more closely with the American Eagle team in what Sean describes as less ‘impress us’ and more ‘collaborate with us’. It’s fostering a closer relationship with clients which encourages them to use the block editor and patterns and have some ownership in the process.

It’s an interesting episode, and if you’re curious about how you can start to use blocks and patterns with your clients, there’s sure to be something here for you.

Typically, when we record the podcast, there’s not a lot of background noise, but that’s not always the case with these WordCamp Europe interviews. We were competing against crowds and the air-conditioning. Whilst the podcasts are more than listenable, I hope that you understand that the vagaries of the real world were at play.

Useful links.

Block Patterns Directory

Create a new pattern

Openverse

Transcript

[00:00:00] Nathan Wrigley: Welcome to the Jukebox podcast from WP Tavern. My name is Nathan Wrigley. Jukebox is a podcast which is dedicated to all things WordPress. The people, the events, the plugins, the blocks, the themes, and in this case, the adoption of block patterns.

If you’d like to subscribe to the podcast, you can do that by searching for WP Tavern in your podcast, player of choice, or by going to WPTavern.com forward slash feed forward slash podcast. And you can copy and paste that URL into most podcast players. If there’s anything you’d like us to feature on the podcast, I’d love to hear from you, and hopefully get you or your idea featured on the show. Head to WPTavern.com forward slash contact forward slash jukebox. And use the contact form there.

So on the podcast today, we have Sean Blakeley. Sean works for a large agency called American Eagle. A platform agnostic organization working with enterprise clients on a wide variety of projects. After years of experiments with different approaches and collaborations between designers and developers, their team has begun to rely heavily on block patterns. And they found it’s greatly increasing their productivity. It’s fair to say that block patterns have revolutionized the team’s approach to the entire design process.

If you’ve not explored block patterns, they’re collections of blocks, which can be built by anyone. With thoughtful design, these blocks can be repurposed across pages and even different websites. Build once deploy everywhere.

We talk about how and why Sean’s team decided to jump in early with block patterns. When they did, this was a somewhat risky strategy. There was no guarantee that patterns would begin to be widely adopted. But this strategy is now starting to bear fruit. It’s allowing their team to work with their clients in new and unexpected ways.

Clients and are working more closely with the American Eagle team, in what Sean describes as, less impress us and more collaborate with us. It’s fostering a closer relationship with clients, which encourages them to use the block editor and patterns and have some ownership in the process.

It’s an interesting episode. And if you’re curious about how you can start to use blocks and patterns with your clients, there’s sure to be something here for you.

Typically when we record the podcast, there’s not a lot of background noise, but that’s not always the case with these WordCamp Europeans have use. We were competing against crowds and the air conditioning. And whilst the podcasts are more than listenable, I hope that you understand that the vagaries of the real world we’re at play.

If you’re interested in finding out more, you can find all the links in the show notes by heading over to WPTavern.com forward slash podcast. And you’ll find all of the other episodes there as well.

And so without further delay, I bring you. Sean Blakeley.

I am joined on the podcast today by Sean Blakeley. How are you doing Sean?

[00:03:48] Sean Blakeley: I’m doing very well. Thank you, Nathan.

[00:03:49] Nathan Wrigley: Sean and I have just been chatting for a few minutes and I think we’re going to be good friends.

[00:03:53] Sean Blakeley: I think you’re right.

[00:03:54] Nathan Wrigley: So you’re at WordCamp Europe. We’re currently sitting in the basement having a chat, but you did a presentation, which you are now very relieved to have done. It’s behind you now. What was it about?

[00:04:05] Sean Blakeley: I mean, it was a wonderful, it’s a wonderful feeling to have been the post talk feeling. Uh, it was about block patterns. The block pattern revolution. I was talking about how we’re using block patterns in our creative process. How we are evolving and adapting our creative process. Bringing together the designers and the developers, and we’re finding that block patterns is opening up all sorts of opportunities. Explore and adapt the collaborative space between designers and developers. So, I was really talking about those exciting opportunities that we see today.

[00:04:38] Nathan Wrigley: You’re working at the helm, maybe the helm’s the wrong word, but you’re near the helm of a very large agency. So I guess making that transition to block patterns was, is a big deal. You got a lot riding on that. Tell us a little bit about the company that you work for.

[00:04:54] Sean Blakeley: So I work for a company called American Eagle. American Eagle are 700 strong. It’s a large organization. It’s platform agnostic. Obviously there are dedicated teams to a number of sort of key platforms, including Sitecore and Sitefinity, but also of course WordPress. And that’s how it’s really reached that scale. What it tends to focus on is those big enterprise engagements and it, it’s able to address those kind of cross platform, those big digital transformation pieces, those big integrations.

And so you’re quite right that, you know, as we talk about transitions in organizations of that size, it can very challenging. But because we are, as we are building the WordPress enterprise team, we’re able to explore some of these different technologies and keep pushing at the boundaries of what we’re doing.

We have this incredible opportunity to keep exploring. Exploring WordPress at scale, and I’m sure we’ll talk in a minute about the sort of headness and composable kind of paradigm, but it enables us to keep exploring, to keep pushing these boundaries, and block patterns increasingly feel like they’re part of that journey and are beginning to become an important part of that journey.

[00:06:07] Nathan Wrigley: I would imagine that if we asked a typical WordPress user, how do you build your website? I think there’s gonna be a significant proportion who, maybe do it the old fashioned way, but I feel that’s dwindling. Template files and all that.

And then there’ll be a proportion of people probably still I’m guessing the majority who are using page builders, the commercial page builders. There does seem to be, especially very recently, by that, I mean maybe in the last six months, it does feel like there’s a lot more chatter about blocks and patterns and almost like, okay, this is a thing now. The time has come, we’re gonna shift over in that direction.

But, what would you say are the key benefits? The things that you identified in your business which made you say, oh, actually this is worthwhile now. We’ll stop doing it the way we used to do it, and we’re gonna start doing it with blocks. What were the key metrics that you judged that worthwhile against?

[00:06:52] Sean Blakeley: So, the commercial metrics is a kind of separate piece. And we’ll come back to that, because it is an interesting question. But from a technical or an implementation sort of perspective, it always felt jarring when we were bringing software, proprietary software, be it a page builder or some other service into the WordPress platform.

It always felt like we were introducing something that we would either have to be pulling out of WordPress at a later date, or we’re then tying our clients to this particular tool that we had chosen, or, or maybe us as an agency, you know, we preferred a particular page builder. And so that’s the one that our clients got because that was our preferred approach. And that always felt jarring.

It felt like there wasn’t, you know, we weren’t developing for the longevity. That we were slightly tunnel vision and, and narrow focused in terms of our needs as the agency, And so it always felt like we should be coming as close to core as we can. Moving our dependency to WordPress itself, rather than this sort of separate proprietary software. And it’s been a challenging journey at times as we’ve, we were early adopters for Gutenberg and, you know, we felt some of the pain that, that all of us, or many of us in the community have felt. Some of the challenges around creating custom blocks back in the day.

But it was very clear that this felt like the right journey, and it was the right journey to go on. And as we thought about, and talked to our clients about their experience, and their experience for creating content, That goal to move from shortcodes and the abstraction of dropdowns and filling in an input box. And then that leap of faith, as you hope something has changed on the front of your website, and it’s gonna work in the way that you hoped it would.

Well, that WYSIWYG experience has been something that we’ve been asked for for years, and of course that’s where the page builder space came from. But to be able to fulfill that in a drag and drop within the WordPress editor itself is, it’s a great thing to be able to provide our clients with that experience, that true WYSIWYG experience. And so the goals are so clear as we’re on this journey together.

And so, and we’ll come back to that final point around the commercial decision in terms of investing our, our efforts as a technical team. I mean, it was very clear that this is, this is the longevity. This is where we are empowering our clients to own their UI, their UI components. They can start to build out some of their own UI components as well as custom blocks that we might build. And there isn’t a dependency. If they wanna move to, you know, they wanna change their implementations. They can keep WordPress exactly the same.

And that, that notion of switching a theme, and a theme should be easy to change. Your styling, you know, re styling, making small design changes should be relatively easy. Yeah, that’s becoming true within the Gutenberg paradigm. That we can offer that longevity of, of architecture of platform. And that they can iterate in terms of a design on top of that.

So that’s been a hugely empowering journey, that incidentally that we’re, we’re still on. But we’re thoroughly enjoying the journey and it’s, you know, every step that we take can be daunting at times. But, we’ve found the value in each and every of those steps that we’ve been on so far as the community, working with Gutenberg.

[00:10:03] Nathan Wrigley: So at the point where you made the decision to hop on, presumably you’ve not just said, okay, everything from now on will be based upon Gutenberg. Maybe some clients are embedded in something in the WordPress space, like a proprietary page builder. Maybe you’re gonna carry that on, maybe not, I don’t know. But there must have been a lot of retraining, process changes, every which way for your staff. Just talk us through what that was, because obviously if you’re working within your company and building websites, you want to know, what’s the education piece? How am I gonna learn all of this stuff? What’s my company gonna provide for me to make sure that I’m skilled? Was there a lot of that, that had to be put into place?

[00:10:39] Sean Blakeley: There was a huge amount. There’s a kind of duality here that the first challenge was to enable developers to feel confident within React. And so feeling confident within a modern JavaScript framework. And we found that that was a hugely valuable first step to sort of, you know, allow them to ease them into familiarity with React.

Once we did that, we then moved into Gutenberg specifically and sort of eased our developers into Gutenberg. And we did it some ways from the interface. So getting familiarity with the interface, but of course, things, and we’re talking maybe two or three years ago now, things were moving so quickly that actually, it was, it was often easier to actually go from the backend forward.

And so look at, the anatomy of a block. How a block fits together and, we had some really curious developers and developers that were often looking under the bonnet and seeing how these things were constructed and it added to that sense, less of intimidation and more of awe that we’re on a journey together. And actually, you know, we can be part of this dialogue.

We can be part of this journey and, exploring the how we can evolve our processes. And I think that early, understanding the value that Gutenberg, this journey was gonna provide. Even when we were hesitant to put it into production, but it always felt like this was the direction we wanted to go in. We wanted to provide that extraordinary editorial, content creation experience. And then of course, you know, the value that we can give to end users as well.

[00:12:14] Nathan Wrigley: I’m imagining that if you had clients that were on the classic editor, There’s just no downside to that. One thing is nothing like the other, so a big boost. But I’m wondering about the clients who may be, were on those page builders. How are they coping, regardless of all that, how are they coping with the UI? Because even though it is a WYSIWYG, it’s kind of got some quirk still hasn’t it?

The UI is a bit funky in places and things don’t quite match up on the back as they do in the front. I’m just wondering how your clients and, you’re a big agency, there must be a lot of feedback coming in. How are they adopting it? Are they welcoming of it?

[00:12:48] Sean Blakeley: Yes, so they are in…

[00:12:50] Nathan Wrigley: That sounded like aqualified yes.

[00:12:52] Sean Blakeley: Well, it is a qualified yes. There is hesitation there at times, because as you’re quite right to point out, there are some rough edges in the implementation. We try and make sure that we are very transparent. That this is an exciting yet evolving part of the WordPress ecosystem. You know, don’t consider this as fully finished. It’s still evolving and adapting. But what we’re increasingly doing is focusing on a opt in approach.

So, the dashboard of blocks can be very intimidating. You know, there is a huge list, particularly if you include the embed options as well. That’s a huge list. If you happen to be running plugins on your site that are also introducing blocks, you can be talking about many dozens in that interface and you, and I might know the difference with a, a media and text block, but our clients aren’t going to know that unless we take them on that journey, unless we educate them.

So what we find ourselves doing increasingly is, is white listing blocks. So actually removing, and, and increasingly this is, this is often a principle in enterprise when you’re working with large scale projects that, it’s actually putting the guardrails in place, you know. It’s, it’s having your brand library or implementation, maybe your UI components. But you are limiting the ability of the editorial team to kind of work within those guidelines, that framework. And that’s how we treat Gutenberg, is that we provide those atomic building blocks, you know, those core blocks, and maybe a few custom blocks as well. We then put limitations in.

So those are your design system, essentially. Those are the UI, the library of UI components that our clients can use. And that’s really attractive then, because becomes very clear what the tools are that they can use to tell their stories, to tell their narratives to their users.

And it’s not this self serve mentality where you are kind of building from the atoms and trying to build everything from scratch. Actually they’re, they’re sort of pre-baked for you, and you are just going down and, and selecting the ones that you want.

[00:14:53] Nathan Wrigley: In WordPress 6.0, we’ve got, maybe it’s not the most fleshed out of block locking features, but does something, it puts a padlock icon there anyway, and you can unlock it. That feels like that would be a, a nice direction to go in as well. That particular feature, you know, the client can access this bit, but not that bit. And they can edit this bit, which our team have built. And if they don’t like the text, they can just go in and do it themselves. And it’s kind of empowering people to edit their own stuff, but not edit this piece.

[00:15:18] Sean Blakeley: We absolutely love this feature. And interestingly, we’re actually on a huge project at the moment, a huge headless project. And we were looking at our own custom solution for doing exactly this. So what we’re doing is, we’re bringing in quarter of a million programmatically generated pages, that we’re injecting into Gutenberg blocks.

So we’re kind of generating these Gutenberg blocks. We’re creating these slot in between the blocks to enable them to insert custom content. But essentially we’re programmatically generating that content. And then we’re locking down certain aspects. It’s almost like a, it’s a programmatically generated templated page, if you like, which is locked. And then they can add in between these sort of sections or indeed update some of the images. And there are certain areas that we allow them to update and some not so. And so that feature of locking blocks has been already incredibly valuable for us.

And exactly, as you say, it chimes with that notion of guidelines, of having a brand language. Of having that visual rhythm, your design system, and then you are working within those confines of your visual language.

[00:16:33] Nathan Wrigley: The reason I was talking about it being fairly basic is it can be unlocked by anybody. Doesn’t matter who you are, you just click the button and you’ve unlocked it, but, maybe in the future there’ll be a more granular permissions model that, it doesn’t matter how many times you click the button, you’re not unlocking it. That will be nice, you know, so the editor can edit this, and the subscriber could edit this, and the administrator can obviously edit everything. That was a much needed feature, I think.

[00:16:54] Sean Blakeley: And I think you’re right. And incidentally, as we talk about maybe block patterns forming that kind of notion of templates that maybe you and I are gonna create a custom post type. And as we click into that custom post type, we’ve got these pre-baked templates that we can select from and using block patterns to do that.

You’re exactly right that actually we can even allow editors to edit those templates, but we do have the challenge of permissions. And so we need to think about who has that meta level, almost like the super admin we could think of in terms of multisite. You know, who has that top level, that they can edit the template? And then who are the editorial level can just edit implementations of reflections of that.

[00:17:34] Nathan Wrigley: Really interesting. So let’s get into the whole block pattern thing. I would be staggered if anybody listening to this, hadn’t heard of them at least. But nevertheless, there’s probably some who haven’t. So let’s just address that. Tell us about block patterns. What are they? They’re in use, I think more and more. As each day goes by, there’s gonna be more and more use of them. But just tell us what they are briefly.

[00:17:54] Sean Blakeley: In the simplest terms, block patterns are a contain for blocks. They’re a kind of vessel, that contain these, whichever blocks you want to allow to be within this pattern. But that’s deceptively simple. And what I talk about, the analogy that I like to use is that there are a finite number of musical notes, and so whatever your piece of music, your chosen interest is, be it Pixie’s Debasser, or Mozart or Beethoven, they’re still utilizing that finite number of notes. And yet they can create truly extraordinary, original compositions from those finite number of notes.

And I think for us Gutenberg are our notes, and the patterns are our favorite songs. Are those extraordinary compositions that we can create.

[00:18:42] Nathan Wrigley: Here’s an interesting thought. If you have a Spotify account, there’s more songs than you can ever listen to. Block patterns, so in the same way, we’ve got plugins 50,000, 60,000, whatever the number is. There’s loads of plugins. If you want a form plugin, go and pick out of the 40 over there.

Is there gonna be overload? If everybody’s got hundreds and thousands and possibly millions in the future, of patterns. The impediment to creating patterns is so low. The impediment to creating a plugin is quite high. So it’s contained at roughly 50,000. But if block patterns are gonna be really, really easy to create, which they are, especially with things like the pattern creator tool. Then the library, the way that we download these is, presumably at some point gonna be deluged. Your clients may be faced with this atrophy of, I have no idea where to begin. There are 748,000 in there. And I do not even know where to start.

[00:19:33] Sean Blakeley: I think you’re quite right. That sort of paralysis, choice paralysis will undoubtedly be an issue that we need to deal with, but less like limiting the ability of people to create these block patterns. And really what we need to do is, is have a way of rating those block patterns or seeing those patterns, the popularity of those patterns. The one that seemed to be solving problems that maybe are achieving conversions in a greater way in your particular sector or your area.

And it’s, it’s having that validation. I think right now are in the, the wild west of we’re just so excited, and as you say, the friction is so low for creating block patterns. But that in and of itself, isn’t the goal. You know, and that’s not where we want to be. Where we want to be is creating truly original and amazing patterns that we can then validate against the use cases for our clients. The way that they want to introduce them into their sites. But yes, we will have a huge number of block patterns very soon.

[00:20:34] Nathan Wrigley: There is some editorial on the back of that. It’s not like you submit a block pattern and it’s just immediately in the library. There will be a team there looking and inspecting, and hopefully if your block pattern, I can’t remember what the exact reasons for dismissal were, but it was things along the lines of, if it’s not really using more than one block, if it’s not doing something innovative, for example, something along those lines. But given all of that, there could be this problem of just too many things to pick from.

[00:20:58] Sean Blakeley: I think you’re absolutely right. And then, trying to decide which patterns solve which problems and which to use. That choice paralysis will undoubtedly be an issue that as a community, we then need to start thinking about what’s the value, what’s the added value that block patterns are bringing and find a way of communicating that. Both to us as technologists, but also to our clients.

[00:21:18] Nathan Wrigley: One of the interesting ancillary bits of block patterns or blocks or WordPress in general. I don’t know if you’ve followed this thing, but the Openverse. The idea that you can submit block patterns that have all of the images already in, they’re probably placeholders. You probably won’t end up using them, but I do find that’s quite an interesting piece. For the first time you’ll be able to download these block patterns and you can actually stick with it. You can use that thing forever and a day, and there’ll be no license that you are treading on.

It’s totally usable. And I think that’s really interesting. I’ve actually been taking tons of photos this week with the intention of, as soon as I get home and I’ve got a reliable internet, it’s just to stick them onto Openverse, then people can see pictures of Porto for free.

[00:22:02] Sean Blakeley: Beautiful. Definitely, and I think it then raises an interesting question about reusable blocks and how block patterns interact with reusable blocks. And if we have these that you can really just drop in and they’re instantly displaying those images or instantly sort of showing that you really, you don’t change, you just drop those in. Whether that’s more the direction that reusable blocks will go in. Those kind of global blocks. So global entities that we use repeatedly. Or whether block patterns will actually evolve into a version of that. That rather than just being templates, UI components that we reuse, maybe they will evolve into something equally like an opportunity to be global. So, there’s definitely areas to explore there.

[00:22:45] Nathan Wrigley: When you agreed to have a podcast with me, it sounds subtle, but when I was thinking about it, the more I thought about it, the more I thought, actually, this is fairly seismic. You said that your design process in your agency, as a result of using patterns and the block editor had moved away, I’ll quote, you said it has moved the expectation, and I’m guessing we’re talking about the clients expectation.

It’s moved the expectation from impress us, to collaborate with us. And I think that’s really interesting because that is a big change. But it sounds like a really subtle one on the face of it. But so you are now it’s almost like do it, it’s not DIY, it’s more like do it with us.

[00:23:23] Sean Blakeley: It’s a profound change. You’re absolutely right .From being a passive consumer of that process.

[00:23:32] Nathan Wrigley: Taking it off the shelf, the website’s off the shelf. There it is. It’s a commodity.

[00:23:37] Sean Blakeley: Exactly that, but also, when we’ve struggled through a design process and we present that design and we’ve often got that big gamble moment when it’s sort of Tada, and hoping fingers cross the client likes the designs that we’ve created.

That’s what we’re trying to address is, want to move away from these big gamble moments. These big, almost waterfall by designers. We’re doing big design stages and then big build processes. And so Bringing the clients in closer. Often I feel that we solve thousands of micro problems in the course of the design process and the course of the development process, but we kind of hide that away.

We’re not very good at being communicative and transparent about all of those problems that we’ve solved on that journey. And as we try and bring clients in closer, we want them to own the outcomes. We want them to be on that journey of, here’s some problems, like framing the problem and, and helping them to go on that journey of, okay, there’s some compromises here and there’s some reasoning here that maybe we need to be more mindful of.

And so when they’ve been part of that process, when they reach the outcomes, when we present that design, it’s no longer a Tada moment where there’s surprise, actually they become champions of that design because they have a sense of ownership. That they’ve bought into it, because they’ve been part of that ideation session and part of those sessions.

And so, they go into their organizations and they defend those designs. They can answer any questions about what’s the reasoning behind this? Or, or why is this like this? Well, well they know, they’ve been part of those processes.

Now, that’s when it works beautifully, and I’m not gonna pretend for one moment that we’ve found the unicorn, that we can all rest happy in our beds, that we’ve solved design and development, project builds. But with the right client and that right collaboration spirit, we are seeing huge value from this approach to design and development.

[00:25:37] Nathan Wrigley: I’m really curious as to what that actually looks like on the ground. In other words, presumably there was a transition over to this during the pandemic. Was this, like okay, we’re gonna screen share on Zoom, and we’re gonna show you what we’re doing and you are gonna interrupt us and tell us what you want us to do. Is it literally that? That they are contributing as they watch you do things and learning the process? Or is there more kind of instructional things that you are sending out to them and they approve one as opposed to the other? I’m just curious what the process really, really looks like.

[00:26:09] Sean Blakeley: So there’s no one size fits all. We tend to kind of move with the needs of the client and some clients are more collaborative than others. It sort of bubbled up to two approaches. So one might be that we are providing more regular feedback and regular check-ins. It’s worth mentioning because it’s, often designers work in sort of isolation and they, they don’t like to show their workings out. They don’t like to show the rough edges. They want to show something that’s beautiful that they’ve, worked very hard to create.

So it’s often quite hard to get them to actually be more transparent in terms of that process. In terms of their building up of ideas and their iterative, internal iterative approach. And so we’re increasingly encouraging that. And sometimes that might be the collaboration is that they’re seeing things much earlier.

But, with the right type of client, we can go much deeper. And so what we do is, and I think Nathan, you were kind of alluding to, this is actually we create collaboration sessions. We jump on zoom or equivalent, and we get the designers, we get the developers there, we open up Codepen or something similar.

And really we start like through the conduit, we kind of play what Dan Mall calls the kind of hot potato process where, you know, maybe the designer is center stage for a moment as we are looking at some typography and maybe some color elements, maybe we’ve already got a palette established from the guidelines from a brand existing brand guidelines.

And then the developer using Tailwind, or again, something similar, you know, there’s that friction to getting something on the screen is very low. We can start to explore and collaborate together. And, and this is where the client’s opinion can start to come in, you know? Well, well, what do you think about the use of, this color in, in this formation. Or, what do you feel about the interplay of these different elements?

And so what we’ve found is that trying to do that at the meta level, trying to do that in a kind more old fashioned template driven design. That’s really challenging. Because that, that doesn’t really work until you see the whole, and the interplay of all of those components. It’s, it’s hard to kind of break it down.

If you are truly component driven. Well then you can break off, let’s work on the hero component. And what’s incredibly valuable about these sessions is the client can tell you instantly that, oh no, we can’t do that because the marketing team must have a dot, dot dot. Or actually we sell a bit of, we get some, a revenue stream from one of those. It has to be a carousel because we get a revenue stream from one of their slides.

Now that minutiae insight is very hard to unfold in a discovery and definition process. That complexity emerges over time. But if you are in that space, if you are collaborating in real time, you get those insights. You get the business objective insights, coming right into the design and development process.

[00:28:58] Nathan Wrigley: How do you feel about, I’m pretty sure that I know that you don’t use any of these, but just as a sort of short circuit. How do you feel about these pattern libraries, which have popped up in the last year or so. Where you can go and you can discover template libraries and block pattern libraries. And so these are not the free open source ones that you can get through WordPress, but the proprietary ones.

Have you embedded and explored any of those and decided to use them. A minute ago, you were talking about the fact that you were free of all of that with Gutenberg. And I just wondered if you’d strayed into any of that or had any thoughts.

[00:29:32] Sean Blakeley: So I felt a for a long time that I don’t like to bring proprietary software into WordPress. As we should all be very mindful of creating dependencies. And that was always true of page builders. It was always a concern that we’re creating a dependency, a future dependency for our clients, you know, whatever our choice of page builder may have been.

And so the exact principle, the same principle applies here, that we are really creating a dependency. And exactly, as you say, Nathan, this is a young and evolving and adapting area, and maybe we back the wrong horse. You know, maybe the one that we choose is the one that just deprecates into GitHub.

And then we’ve suddenly got this dependency in one or two of our sites that we have to maintain. And, you know, the support desk need to learn this particular implementation. So, you know, it’s always interesting to explore. It’s always interesting to see what the community are creating both in terms of commercial offerings as well as open source.

But I’m very mindful that we are, it’s an infinite game. We’re not looking for those quick shortcuts in terms of implementing something today. And then we are thinking about that partnership with our clients, that life cycle of a platform, you know, of a, a true solution to their needs.

And that almost invariably means trying to stay as close to core as we can. We’re trying to reduce dependencies. We’re trying to reduce any sort of proprietary dependencies. With those sort of parameters in mind, it’s not really been part of our journey and I don’t, as yet, you know, we haven’t seen something that has bubbled up that has, has seemingly been so good that we feel like it’s worthy, worth taking in that compromise.

[00:31:12] Nathan Wrigley: Sean Blakeley, thank you for joining me on the podcast.

[00:31:16] Sean Blakeley: Thank you.

Posted on

#22 – Daniel Schutzsmith on How He’s Prepared His Team To Use the Block Editor

On the podcast today we have Daniel Schutzsmith.

Daniel is the Website and Digital Project Manager for Pinellas County Government, where he creates websites to help the public get the information they need.

We start off the conversation by talking about the future of themes in WordPress. Since WordPress 5.9 websites have been able to use block based themes. These allow you to do more with your website without having to touch the code. You can add headers, footers, and create your website navigation.

The principle is that more and more functionality is going to be moved into blocks and, given that much of this functionality was the domain of themes, do we now need a multitude of block based themes? Would it be optimal to have one ‘base’ theme built into Core? A theme which you can build on top of, and everyone is familiar with.

His team is quite large and when the Block Editor came around in WordPress 5.0 he, like many others, needed to decide whether to jump on board or stay with what they were familiar with.

They began using the Block Editor, and on the podcast today we talk about how that decision went.

We talk about how they managed educating their team in the new workflows, and how they created videos and tutorials to assist them as the problems arose.
Daniel is very excited about the future of WordPress, especially about the utility of block patterns and the new Pattern Creator, but he’s also excited about the future of the internet in general, and so, towards the end of the podcast we get into a conversation about how he thinks that automation is going play a key role in future website and web application builds.

Useful links.

Daniel’s website

Does WordPress Need 1,000s of Block Themes in the Era of Full Site Editing?

Transcript

[00:00:00] Nathan Wrigley: Welcome to the juke box podcast from WP Tavern. My name is Nathan Wrigley. Jukebox is a podcast which is dedicated to all things WordPress, the people, the events, the plugins, the blocks, the themes, and in this case, the block editor. If you’d like to subscribe to the podcast, you can do that by searching for WP Tavern in your podcast, player of choice, or by going to WP tavern.com forward slash feed forward slash podcast. And you can copy that URL into most podcast players.

If you have a topic that you’d like us to feature on the podcast, well then I’m very keen to hear from you and hopefully get you, or your idea featured on the show. Head over to WP tavern.com forward slash contact forward slash jukebox. And you can use the contact form there.

So on the podcast today, we have Daniel Schutzsmith. Daniel is the website and digital project manager for Pinellas county government, where he creates websites to help the public, get the information they need.

We start off the conversation by talking about the future of themes in WordPress. Since WordPress 5.9 websites have been able to use block-based themes. These allow you to do more with your website without having to touch the code. You can add headers footers and create your website navigation. The principle is that more and more functionality is going to be moved into blocks. And, given that much of this functionality was the domain of themes, do we now need a multitude of block-based themes? Would it be optimal to have one base theme built into Core? A theme which you can build on top of, and everyone is familiar with.

His team is quite large. And when the block editor came around in WordPress 5.0, he, like many others, needed to decide whether to jump on board or stay with what they were familiar with.

They began using the block editor and on the podcast today, we talk about how that decision went. We talk about how they managed, educating their team in the new workflows and how they created videos and tutorials to assist them as the problems arose.

Daniel is very excited about the future of WordPress, especially about the utility of block patterns and the new pattern creator. But he’s also excited about the future of the internet in general. And so towards the end of the podcast, we get into a conversation about how he thinks that automation is going to play a key role in future website and web application builds.

If you’re interested in finding out more, you can find all the links in the show notes by heading over to WP tavern.com forward slash podcast, where you’ll find all of the other episodes.

And so without further delay, I bring you Daniel. Schutzsmith.

I am joined on the podcast today by Daniel Schutzsmith. Hello Daniel.

[00:03:28] Daniel Schutzsmith: Hello. Great to be here. Thank you.

[00:03:30] Nathan Wrigley: Yeah. Thank you for joining us on the WP Tavern Jukebox podcast. We’re here today to talk about your approach to website development with WordPress and your ideas about what’s happened in the recent past and possibly what’s going to happen in the future. In order to paint some picture, give it some context, would you just spend a few minutes telling us about yourself, how you’ve come to be on a WordPress podcast, how you use WordPress, and all of that stuff.

[00:03:57] Daniel Schutzsmith: Yeah, for sure. People may have seen me making the rounds in the past few months at different places to talk it about WordPress. So I’ve been using WordPress since probably about 2007, I believe. Before that I was using Drupal, and for most of that part has been in the agency world. So making websites for clients. Going from a design to making a build, to training a client on how to use that.

About 2018, I believe I started to get more involved into the WordPress community. Started out as a WordCamp organizer for WordCamp NYC, and then ended up doing work at Miami, which was a last WordCamp right before Covid hit, and also was on the WordCamp US team for 2020, which ended up getting canceled.

After that, you know, since COVID hit, I was like, I got to get involved somehow, some other way and do something interesting. So I started creating a WP live streams directory. So it’s just WP live streams directory dot com. It really just shows live streams like your WP Builds every week and shares the different upcoming streams that people can do from their home, while we’re all home, in the spirit of time.

And from there it quickly morphed into, you know, I wanted to do my own thing for a little bit, so I did WP Talks as well with my co-host Winstina Hughes. We’re still doing that. We have an episode coming up in the middle of April and also another episode at the end of April.

And for that we focus on more the human side of WordPress but it’s held on Twitter spaces. So it’s a live, live event and people sign in, listen to us on Saturday mornings. And then my day job, just so you know, I actually do get paid to do these things as well. Some, I’m a web development and design manager for Pinellas county government in beautiful Tampa, Florida on the Gulf coast.

[00:05:33] Nathan Wrigley: Thank you so much. That’s brilliant. Now we know all about you, Daniel. The reason that I reached out to you, or you reached out to me, I can’t remember how we exactly hooked up, but it was all to do with a post on the WP Tavern. And I will link to it in the show notes, but the post was all about the need as it was seen, to have lots and lots of block-based themes. You may or may not know dear listener that in the future, if you wish to interact with certain parts of WordPress. So for example, you wish to use full site editing, you are going to have to use a block based theme. And you had an opinion on that. Would you just like to share your opinion and give us the details about all the numbers that were being bandied around and so on?

[00:06:16] Daniel Schutzsmith: Yeah. So, I happened to be at the the State of the Word in New York City, this past December where Matt Mullenweg was talking about, you know, full site editing and that future of it, which actually I’m very excited about. But one of the things that stuck out was he was mentioning about just having, thousands of themes basically built around full site editing.

Core things that I’ve come to understand though, is it feels more like we could really do with just kind of a, dozen good themes or maybe even less, that we really start as our starter themes and then build on from there. Meaning that a lot of the things that we would usually put in a theme, like the user patterns, the styles, all kinds of things like that are actually separated out a little bit more and a little bit differently.

And so it makes me think, if we’re going for thousands of themes, what is that? What is that reason as a purely for the styles? Because a lot of the patterns, as you know the pattern directory is now completely open and anyone can submit a new pattern to there. Those things are taken care of.

We don’t need a theme necessarily for that, unless it’s something really unique. But in that case, I’d say, put it in a plugin. If you’re doing a really interesting type of block or something and then put it in a plugin and put it out there. That was my challenge a little bit, and that got picked up on the Tavern and Justin Tadlock was talking about it, and my response to Brian Gardner, cause he was looking at creating another theme, he created Frost WP, which is a full setting theme. It’s absolutely terrific. So it’s just, thinking of it in those terms.

[00:07:34] Nathan Wrigley: Yeah. So the idea is that the functionality that may have been tied into your theme in the past, all of that is going to be available inside of blocks. And therefore, if you can have all of that functionality inside of blocks, what’s the need for, let’s say a thousand, two thousand. I believe the number that Matt was shooting for was five thousand.

What’s the point in having those, if all of the functionality can be brought to bear by simply clicking on a block? It’s interesting. Would your pitch for that be, why don’t we just have one base theme. I believe, I think it was Rich Tabor who a little while ago, 2019, I believe it was mooted this idea that in a block-based world with full site editing and block themes, why don’t we just have one theme, the theme which ships with core and everything else could be built on top of that. Does that seem to you to be optimal?

[00:08:29] Daniel Schutzsmith: Yeah. I mean, that’s exactly the way I’m going. So even when you look at the 2022 theme. That could be the base theme for a lot of these things. We’ve already seen this happening, just a lot of people haven’t realized. 2020, 2021 those themes had a whole other plugin that someone created called Twentig. It’s T W E N T I G. But Twentig basically increased the capabilities of those themes to make them like a starter framework in a way. And that’s very much where I see Frost WP and I, you know, and like some of these other types of themes out there that kind of were you know, out first. Guteen is another good one as well that just came out. Those all really are the base theme to work with, and then you just put the styles around that.

The thing that’s missing though, from an agency’s perspective and also just a larger, I think a larger branding perspective is that, a lot of times when I’m coming up with a design with a client, there’s a design system, right?

At my current job at Pinellas county government, we’re doing a website redesign right now. We start with the design system first. We start with figuring out the digital branding behind all that. What a button looks like, what a piece of content looks like. And the way we modeled it was after the core blocks. We knew that going into it, that we would override some of the CSS to make it look a certain way. The way we wanted it to. All of the different full site editing themes though so far, I haven’t seen really providing us, their information on what those styles are, what those things are that we can override.

And so, once someone does that, and I was mentioning this to Rich in one of his Twitter threads. Once someone does that’s the game changer. Really truly is. Because folks like Elementor know this, they have the design kits, and they have this whole site settings to be able to override, the topography and the colors and everything everywhere.

And that’s loosely inside of what’s going on in full site editing. And I’m sure that’s where people are thinking they’re taking it, with the theme dot json concept. But right now, it’s not there. So it’ll be interesting to see where it goes. And if it does become a core thing or it becomes something that someone creates.

[00:10:23] Nathan Wrigley: Do you think? I know it’s a fairly bland question, but do you think that right now, we are recording this in April, 2022. Do you think that right now non-technical users of WordPress would be able to benefit from the block editor? Or do you still feel there’s a lot of work to be done if they were going to try and do some of this full site editing stuff, navigation, and so on?

[00:10:47] Daniel Schutzsmith: So at my full-time job we’ve been doing this reason like I mentioned, and so we have a lot of editors, almost a hundred people in there, editing thousands of pages and custom posts that we’ve created. For that, they’re using the block editor for the most part. There’s only a few custom post types where we kept to just the classic editor feel to it, just had certain fields in there.

But they’re using the block editor. And so, the reoccurring things that come up as people just get a little bit uneasy and unfamiliar of it at first, but once they start using it, once they’ve done two or three pages, I’ve actually seen them being able to pick it up and do it fine. Where, it expands or where it contracts more, is that as people get used to it, I’ve noticed they get into a comfort zone, so they don’t necessarily explore the other blocks that are available in there.

So they have like their, certain way of doing things or there’s certain set of blocks that they’ll just reuse over and over again. A good example is, you could do an image on a left side with the two column image on the left side, text on the right, and so you have a column image and text, but you could also do the same thing with the media block.

So people just don’t realize that. And so it’s that education, I think, that needs to happen a lot of times. And there are terrific tutorials out there, especially the learn program from WordPress Core. But I think getting the people to those learning pieces is really going to be the thing that any agency or anyone working with an end user in the administration side is going to have to really press on.

The other thing I was going to mention was full site editing. No, it’s not ready for non-technical users. It’s just not there.

[00:12:18] Nathan Wrigley: Okay. Yeah. Interesting. The thing that I think about the block editor is that just as you said, you very quickly become used to its quirks. So there are certain actions that you might perform and it leads to certain consequences, and those consequences might not actually be output onto the front end of the site, or there might be, or there might be some quirk in the padding that you see on the backend, it looks as though that purple background is larger than it actually is, and you’ve just become familiar that once you’ve saved it, it’s still going to look like that on the backend. But on the front end, it won’t look like that, there’ll be a slight difference.

But then there’s all sorts of quirks, like if you hit the return key, you end up with a blank paragraph underneath that didn’t belong there. And in this endevour to offer a tool, which is what you see is what you get like the proprietary page builders, like you mentioned Elementor a minute ago, we could list a whole bunch of others. It does feel as if there is still some work to be done.

There’s work to be done on the UI and the UX so that we have this expectation that what you see is what you get is achieved. And I feel that that’s the direction that the project should be going, and that it literally looks the same on the back as it does on the front. Would you agree with that? Is that a desirable outcome or is that not something we want?

[00:13:35] Daniel Schutzsmith: I think ultimately it would be a desirable outcome. It’s a separation of concerns. Elementor for example, like you’re saying it’s a WYSIWYG, it’s what you see is what you get. It’s, one-to-one pretty much of what’s going to be on the front end.

When I first heard full site editing, that’s actually what I thought the term meant. So I didn’t think it meant being able to add headers and footers and being able to override templates, because to me that was like, that’s just the theme thing, it’s not that difficult at that time. In a PHP based theme.

So that’s really what I thought it was. And when it was, I was surprised because the one-to-one is more what I would see a lot of folks would want. If you look at other competitors like Webflow or Squarespace, things like that, again, WYSIWYG one-to-one, it’s something that people are getting used to. So when we pull them from someplace like a Webflow and bring them in and use the block editor, it’s a little bit of a jarring experience because, they’re going backwards in time. I don’t think it’s a bad thing necessarily, it’s just, it would be good to know if that direction will end up going that way or not.

What’s really interesting though, is Matt Mullenweg actually mentioned yesterday and jokingly a few folks with me were mentioning it on Twitter as well, that we, a lot of us had started on Frontpage or Dreamweaver or something like that, in the early 00’s.

We were doing all this types of stuff back then. That was WYSIWYG that was us putting things around the page and seeing where it would go. And now we’re returning to that again. So it’s a whole industry of millions of dollars behind this to get back to where we actually started out. And everyone kind of poo-pooed for a dozen or maybe even 15 years, to come back to it again.

[00:15:10] Nathan Wrigley: It’s interesting that you singled out full site editing as the piece which at the moment is the least ready for general public’s use, and I guess that’s the road that we’re on right now. We’re trying to figure out what that bit of the puzzle looks like, and how it can be made so that it’s not too complex that nobody wants to use it.

And when to say nobody, I’m specifically thinking about non-technical users. I’m thinking about things like the navigation block, which whilst totally usable is perhaps a little bit of overwhelm the first time you use it and so on. But I think that with six coming down the pipeline fairly soon, hopefully some of these things will change and hopefully, people will be drawn to using it and they’ll find it relatively easy.

One of the most exciting things for me in adoption is something that you mentioned a minute ago, which was block patterns. And I can see that being the full piece, the entire website, more or less being built off just patterns, which are in the library. So let’s just get into that. Are you pretty confident? Do you like the idea of block patterns?

[00:16:14] Daniel Schutzsmith: Yeah. I love that concept. I loved it when we have the, just even the reusable blocks and things like that as well. Anything that’s going to lend itself closer to the concept of a design system inside of WordPress, I think is going to be a win. I can’t stress enough that you could even just be a small pizza shop in your town, but if you have some remnants of a design system to work with, it makes it so much easier to kind of know, what things are gonna look like in that website. And so it could just be simple as figuring out fonts, colors, and a few different content layouts, basically, and those are your black patterns. That’s what those content layouts are. The closer we get to that, I think the more of an advantage WordPress will have over other types of systems like that.

[00:16:55] Nathan Wrigley: The size of the ecosystem means that there’s going to be a lot of eyeballs on that in the near future, building those things, and by good coincidence, the pattern creator tool launched earlier in the week, and now it’s available for everybody to test out and see if they can come up with their own patterns.

And again, the barrier there has been hopefully stripped away, and whilst there’ll be a learning curve to using that tool, and probably it will iterate over time, hopefully people without the technical expertise, without the knowledge necessarily of things like CSS and what have you, who can click things and drag things and move things, will be able to start building up their own little repository of blocks, which they wish to use over and over again.

[00:17:36] Daniel Schutzsmith: This is also a great feature we’ve seen in other successful page builders before. Elementor does it with their design kit. We’ve seen Divi do this as well. There’s even, there’s a whole ecosystem that’s created, I think it was called pager cloud or page cloud, something like that, where you could put any of these page builders on the worldwide web basically, and use them again on another site. It’s this repeatable process, I think that’s really important that we’re going to see the, you know, as agencies and even just as developers we kind of latch to.

[00:18:03] Nathan Wrigley: Yeah, we had a podcast, not that long ago, all about the block protocol, which we won’t particularly get into now, but the idea that the blocks within WordPress would become interoperable with blocks outside of WordPress. So it may be that your CRM has a block which you can consume data from and put it into your WordPress website, and at the minute you need probably some sort of complicated plugin and API integration, and that might be stripped away. So the complexity there, the things that are going to be possible, hopefully will compel people to use it and make it much more usable over time.

You mentioned that you, at your place of work, you’ve got this large workforce and they’re interacting with these things over time. I’m intrigued to know how straightforward it was for them to move to the block editor. For example, did you just say, okay, from tomorrow, we’re going to do it, or did you have to come up with some learning materials for them and administer things in such a way that they were able to slowly drift into it. What did you do around that?

[00:19:03] Daniel Schutzsmith: So the folks that are doing this, they’re mostly liaisons from various departments across the organization. Pinellas county government, I believe is a couple thousand employees all together. Like we’re relatively large for a county in Florida. The folks that are working with us is like one or two people that are from each department.

And so for them, these aren’t folks that are usually doing web design, these are not folks that are usually doing, a lot of editing except for maybe in Microsoft Word. So for that, we needed to really do some training. So we actually did some live webinars. So I did, I think it was two or three.

And then we also recorded it. And those trainings we put right into, as videos, right into the WordPress dashboard. So I created a whole thing in WP admin, and that’s a whole help section for them. So they have the videos back there they can refer to any time. And then we also took it a step further, and I love doing this. I love making things as simple as possible for people to work with. In that help section that I created, we also had put in little videos that were about 30 seconds to, some of the things that were a late, maybe around five minutes, on how to work with different pieces of content and how to work with the block editor in unique ways that we had created for us, for our organization.

So that really also opened the eyes for people to understand how to create a specific type of executive order, or how to add an event with the events calendar. Things like that. And then we also had plenty of documentation back to the actual Learn WordPress core website as well.

And that’s, that’s really helped over time. That’s really what it’s been. We do have, I do have a counterpart that works with me as well, and she focuses primarily on the content side. And so she’ll get questions from folks on how to do specific things. But a lot of it too is them understanding those materials and being able to go back to there.

[00:20:42] Nathan Wrigley: I’m really interested in the system here, because it sounds like you took this move to the block editor really seriously. You’ve created video content and you’ve got a dedicated space for it in the dashboard. What was the cue? How did you decide, okay, we need to make content around this. Did you just decide, we’ll just do content for every conceivable thing at the beginning.

Or did you say, okay, we’ll wait until we’re fighting fires and then we’ll make a video or we’ll create a piece of content around the problems that are actually being witnessed?

[00:21:12] Daniel Schutzsmith: Yeah. Me, myself, I’m a professor by nature, a teacher by nature. So I taught at school visual arts at NYU in New York city for several years. And I can already see the frustration people are going to have. Cause when I was going in and playing around with a black editor on my own projects and especially, one of the first things we had to do before the website redesign is we actually made a Covid 19 website.

When I got to Pinellas County Government, I got there two or three weeks before Covid started. And so I’m meeting my coworkers, and then a few weeks later we’re all working from home and we have to scramble and make a brand new website super quickly.

So we used WordPress as the way to do that super quick, very fast. I knew I could get it up and get it running very quick with a minimal team, and also just minimal time to work with. But that was also our litmus test to see really, if we’re working with a block editor, will it hold up? Will it be something that we can actually work well with?

So I had a little bit of, you know, a test environment already with all of our, they’re called public information officers, so PIOs. So it’s basically the public relations people in the government. And so they are the ones that are helping me run the Covid-19 website. So I could see from them the frustrations they were already having.

And so when we went to do the redesign, I knew right away what videos we would want to do, but also I knew based on the new things that we were creating, the new features we were creating inside of there, that I’d want to be able to show them that as well. And so that’s where, a lot of those come from. You’re right, as things pop up, as things change, as we see little fires or something’s getting too confusing for folks, that’s where we make another video and put it in there.

I think altogether we have, it’s the least over a dozen videos might be a little bit more. Basic things like how to use the block editor in the first place or how to turn things on and off are all dealt with in that, those two webinars I did. So those are also on there. But the little, the short ones are more, more focused on specific tasks they might be doing in there, like adding a new page or adding a specific type of custom block that we’ve created.

[00:22:59] Nathan Wrigley: I do like the idea of putting into the dashboard. That just seems really sensible. It’s just right there. Isn’t it. It’s not like they need an external URL. They don’t have to go to a different website where your knowledge base might be. It’s just right on hand. That’s really ingenious. Have there been any breaking changes over the past, let’s say two years or so, that you’ve noticed where the things which were once true broke when WordPress updated, maybe there’s been a modification to a block or something, and then that has stalled you once more. My experience was that the things which worked two years ago still work, but it may not be on the scale that you’re dealing with.

[00:23:37] Daniel Schutzsmith: For the most part, I do remember there was one thing, Nathan, but I can’t remember what specifically it was. I just remember the emotion. I remember the, oh Lord, this is not going to be a good emotion that came up, and the heat on the back of your neck, But I remember it was something other people had similar issues and we found a workaround real quickly and fixed it.

I don’t remember what it was. It was something, it definitely had something to do with the custom block we had created, and the way it was put together. But for the most part, no the upgrades have been fine, even the fact that now FSE is already built into Core, it hasn’t messed with our theme at all, which is not a full site editing.

[00:24:09] Nathan Wrigley: No so long as you don’t put yourself a full site editing theme in the website, then you can carry on as normal. And I imagine that will be the case for a long time to come. Did you rely on any external sources of knowledge? Obviously you’ve created your own content. I’m just curious to know whether or not you were also directing people to tutorials elsewhere. Some of the initiatives that wordpress.org are doing. The learn initiative and so on. I don’t know if any of that got used and whether it was useful.

[00:24:37] Daniel Schutzsmith: Yeah. Learn.wordpress.org, that’s really the main one that we have external links to and some of the specific tutorials on how to use the block editor. I didn’t have people go through like the workshops there or the lesson plans or anything like that. I think that’d be kind of an overkill overkill for this group, but definitely for developers I work with, when they want to know, especially for full site editing and they want to know, what it’s about, what things are coming, how it works.

That’s where I’ve been pointing people. It’s just, take a look at learn dot WordPress.org, because really, they have their pulse, they have the thumb on the pulse of what’s happening with all that and how it’s changing so rapidly.

[00:25:08] Nathan Wrigley: Now that you’ve got this experience of shifting a team of people over, do you try in any way to disseminate that knowledge to other people? I mean, obviously here you are on a podcast. You’re attempting to do it in this way, but I was curious if you took that any further and were linking up with other people, organizations maybe nearby or far away, remotely or close to home to enable them to assist them in this process should they wish to do it.

[00:25:31] Daniel Schutzsmith: Yeah, not yet. So usually the way I operate and I’ve done this model a few times, I’ve done a similar thing with non-profits, tech and WordPress websites over there and I’ll do the same thing in the government spaces. Usually I’ll go through the motions and I’ll try these things out myself, do a little case study, and then from there probably do a little tour of speaking or sharing or putting it out on different trade publications. For this, I’ve been going more towards Twitter and towards the WordPress communities and talking about it. So it’s been really cool to kind of, have that conversation with folks so far.

[00:26:01] Nathan Wrigley: One of the things which I find curious is that in the more recent past, if we go back, let’s say a decade or more, it was fairly difficult to use WordPress. And I don’t mean that in the sense that it was really difficult. I just mean it was a difficult job for a non-technical person. You had to be relatively prepared. You had to probably get out some reading materials and learn a bit of PHP and CSS and HTML and all of that. The last five, ten years have seen a real shift away from that. Obviously the block editor is trying to emulate that shift in the industry to more, what you see is what you get tools. I wonder if we’re going to lose something in our community.

I wonder if there’s going to be a real stark divide between the people who code, which may be smaller as a proportion of the user base of WordPress, and then the rest of us who are just building things and never dabbling in the code. And I wonder if it will have an impact on our wonderful community?

[00:26:54] Daniel Schutzsmith: Yeah. So I see two things. I do see no code as the future. I’ve thought that for a long time even more than a dozen years or so. When Webflow was starting up, I actually reached out to Vlad. This was about 2000 and oh, I think 2011, maybe something like that. And I said to him, you know, this would be great for WordPress.

Like we should do this over there because we need to really make it easier to work with WordPress stuff. And he decided he just wanted to do his own thing. And that’s how, Webflow became Webflow, with it’s own ecosystem. I think that future is where we’re going with WordPress gosh, I hope so.

But the one thing I want people to realize is I don’t think it’s going to be a separation of factions between like developers and builders. The problem, I think that happens a lot of times as we put ourselves in those spaces. And we say like, well, I’m a developer and this is going to take away a job from me or it’s going to make life more difficult.

I am a developer and I’m actually very excited about that because if I can make tools that way, or if I could take the thinking I already have about web development about using HTML and CSS, PHP, and JavaScript and bring it into that environment. I already have an advantage of that thinking of that way of thinking.

And when these building tools surface, it just makes it much, much easier to kind of work with. What also kind of interests me is the core tenant of WordPress. The core tenant of WordPress is about democratizing publishing. What better way to democratize publishing than to actually go into more no code of solutions to that.

I don’t see us not needing WordPress developers. The one thing I am a little bit confused at, for full site editing though, is how we do the more complex things. So it seems because of the way false editing works, there’s no PHP in it. It’s really HTML and json basically, and CSS. Where we put in the logic that we would usually put in the theme. The things we would usually do on a functions dot PHP file or the things that we would usually throw in to kind of override different PHP things. With templating, how are we doing in this FSE environment?

And people have kind of hinted to that and explain, you know, and, and, surely things like the query block help with that, but they don’t go far enough. There’s a large disconnect between the work that we do, on a larger sites with customizations on agency types of projects that just can’t be done in FSE yet because those limitations are there.

I’m really interested to see where that goes as well. I don’t think they’re going to completely ignore it. I don’t think they can. That’s part of the problem. You have to find ways to make it more custom and capable to make those changes. But it’s going to take some definite, changing of thinking for a lot of us on how we would work with things, for sure.

[00:29:25] Nathan Wrigley: What’s keeping you excited in this industry these days. Keeping it to WordPress, what are the things which are actually causing you be optimistic about the future. And making you pause for thought and think that’s something I want to be getting involved in.

[00:29:39] Daniel Schutzsmith: Yeah, a large part of me, I know people have been concerned, I’ve been concerned too with, you know, the direction WordPress goes, and for the community, as far as some of the things that are happening in Core. Full site editing, all those types of things. I get that change is difficult, but I also really am excited about that and kind of embraced it. The things I’m getting even more excited about are the areas that not a lot of us have touched on yet, which are automation, which you see a lot in the no-code space. So for instance, you’ll see people moving data around from like Airtable to Bubble to a Webflow. It hasn’t happened as much or earliest isn’t talked about as much inside of WordPress.

And so there are great tools out there, like Uncanny Automator, Zapier that can do these types of things. But I don’t think people realize that we have that capability. Joe Casabona has been talking about it a lot lately in the past year with his creators course, and that whole concept of automating all of this stuff, making it so that you literally don’t have to keep copying and pasting things from your WordPress site until whatever data sheet you’re using or whatever you’re doing. All that stuff to me is really important to the future of where we’re going. Combine that though with Bertha.ai, which I think you’ve played around with before. Is that right? Nathan? Yeah. So Bertha.ai, very similar to Jasper, which used to be called Jarvis.

It’s a artificial intelligence basically to help you write content. Created by Andrew Palmer and Vito Peleg. The thing that excites me about that is not so much that again, it’s not going to replace editors. It’s not going to replace people writing content. It’s actually going to help them do it better and do it faster. That’s the way I see a lot of this stuff. For web development in Visual Studio Code there was this thing that came up from Github that actually allows us to just start typing in a few pieces of code. And it’ll actually complete the whole thing for us. All with artificial intelligence, same concept.

Those types of things to me, rather than being afraid of them or walking away from them, I’m really looking to embrace them and see how we can use them to speed things up. If I can, like the sites I’ve created so far WP live streams directory, WP developer’s toolbox. This past weekend I made a thing called tiny press.email, which is purely just, three links, once a week that I sent out about WordPress design and development. Putting those things together, if I can do those in a few hours or a day, like that’s huge. If we can come up with concepts and just build them out super quick, that to me changes the game. So it changes the game for what we do, for us being entrepreneurs, for us working with clients, really changes the game. It makes everything speed up and be able to come to fruition much quicker.

[00:32:09] Nathan Wrigley: I remember the moment when I was at a WordCamp, it was in WordCamp London, and there was a talk by, I believe it was somebody working for Adobe and they were talking about the future of building websites, not necessarily WordPress, but just websites in general. And just the idea that you would be able to talk to the website and instruct it in the way you wished it to change. So it might be okay, make that the box on the left red. And can we have rounded corners of about five pixels? Let’s try that. Oh no, make it 10. And can we make the picture of a dog now a cat? These were the examples that were coming out of his mouth and this is what he is working on.

And just thinking, gosh, that just seems like something out of Star Trek, frankly. And yet this is the direction that we’re heading in, and it always feels to me, like we now think we’ve got a mature internet, but if you think about it, we’re still, we’re not even at the toddler stage of the internet really yet, are we?

There’s so much, which is going to happen in the days weeks to come. You think about the way that technology has been put into your back pocket in the last 10 years, that’s all it’s taken for mass computing power to be available in everybody’s hand. Imagine what we’ll be seeing in another 10 years. I like the excitement that you’ve got around that. That’s really interesting.

[00:33:26] Daniel Schutzsmith: The thing I was gonna mention too, you mentioned Adobe there. They actually are a great example of this as well because the gentleman you talked to might have actually been from the Adobe marketing program there. Adobe has its own CMS and its own marketing suite, which most people don’t know about.

Most people know Adobe have Photoshop and Illustrator and all that stuff. But the marketing suite is enterprise level and basically the way it works is it watches you and changes the website based on your interaction with that brand, either in their app, on the website in actual environments, like going to a store.

So it sees all the times that you’re basically interacting with that and will change what actually shows up on a homepage or change what shows up on a product page to cater to you. And so most people don’t realize that they have this capability already. I’ve seen maybe one or two plugins out there that did something similar with WordPress, but no one really took off.

I think they actually even shuttered at the time. But to me that’s another market where creating this whole environment that makes websites, respond to how you interact with them is also a huge thing that, it’s just wide open for the picking with AI.

[00:34:30] Nathan Wrigley: The best that I’ve seen in that regard are plugins, which can modify dynamically based upon certain conditions. So it may be that you’ve come from a particular website. And so it then displays, I don’t know, some additional messaging based upon where you’ve come from, or it may be that you’re in a particular geographical location, but that’s very much based on hard data. Whereas what you’re describing is, really kind of a bit fuzzy around the edges isn’t it? It’s things which at the minute are in the realm of humans. A human can detect that your eyes are dwelling on this part of the page. So there must be some interest about that thing. Really fascinating.

I’m going to ask you two questions and they’re basically the same question, but they might have different outcomes. I don’t know. So we spent the podcast talking about how you and your team have moved to the block editor and how you found that. Personally, if you were to build a blog tomorrow, just a blog where you are putting content, images, videos, text, and all that. Would you use the block editor to do that?

And then, if you were doing a site the very same day, but it was much more complicated in design, would you be using the block editor for that? Or would you still be going and using a page builder?

[00:35:45] Daniel Schutzsmith: So if I’m just building a basic site, I’m just trying to put things together. Lately I’ve been really excited using either the 2021 theme or 2022. But I’m not sold on FSE yet. So the full site editing experience is a little bit more difficult to work with. So, ironically I’ve been using 2021 theme for my latest projects like tiny press email. Purely because it’s quick, and I use that with that Twentig plugin. So basically it increases the capabilities, what you can do with it. And you basically run it like an Astra theme or like a Hello theme, but using the block editor. And that to me has actually been a really great quick process to be able to use and reiterate on these sites that, aren’t overly saturated with a lot of different, interesting CSS.

If I’m doing something that’s a more complicated design and we’re talking about a lot of things would be more like outside of a grid layout. If we’re offsetting things, stuff like that. I tend to go ahead and actually do kind of a more traditional theme around that.

Depending really on who the end user is and who the who’s going to be kind of working on that. Usually I’ll go to Understrap theme or something like that, or the other one’s Picostrap, to use the bootstrap framework and do something more, more interesting from there.

I’m not a big proponent of bootstrap. The only reason I use it is because there’s so many developers that I can throw into something that’s been built with bootstrap, for CSS and JavaScript that know how to work with it. So that’s really the end reason.

[00:37:03] Nathan Wrigley: Yeah, it’s interesting that even amongst people who’ve been using it for a large amount of time, as soon as the level of difficulty ramps up, the reliance on old trusted techniques still kicks back in doesn’t? We haven’t quite got across that bridge, but I feel that with WordPress six and maybe looking towards WordPress seven, which is still a long way off, I know, that we may be getting closer to the point where that decision is more and more straightforward to make.

[00:37:29] Daniel Schutzsmith: The larger thing for me is the reason that we can’t do more complex things inside the block editor really has to do with the version control. Because if I’m overriding CSS. If I do it in WordPress right now, I don’t have version control around the custom CSS I throw in. I can’t go back and see what I had done before. Whereas if I do that with code and I do that, putting it inside of Git version control, or something like that, I can you know, go back in time and get back to old stuff that we’ve done and see that progression. That’s another million dollar idea.

If someone builds in a better version control system into some of the coding aspects of what’s inside of WordPress, I think that would also get developers to really take off in there. I just think that the future of WordPress to me is, it’s looking very bright and I know sometimes we might feel a little grim, especially coming out of the pandemic and especially with so many things happening in the world.

But I’m really hoping that what we see kind of in the next, few years here really just kind of changes the way that, we realized that we’re pressed as a very professional system and we’re just growing up. If we follow along and if we tread our own path, and I think we’re all gonna come out okay.

[00:38:29] Nathan Wrigley: Daniel Schutz Smith. Thank you for joining us on the podcast today. I really appreciate it.

[00:38:34] Daniel Schutzsmith: Yeah, thank you.

Posted on

Block Pattern Modal Explorer Coming to WordPress 5.9

It has been a long year since Paal Joachim Romdahl’s proposed an alternative block pattern experience. In November 2020, he opened a ticket on the Gutenberg GitHub repository to explore an overlay-based approach to viewing, searching, and inserting patterns into the content canvas. Late last week, a pull request for the long-awaited feature landed in the Gutenberg plugin.

A year ago, patterns were a new concept for the average WordPress user. WordPress 5.5 introduced them to the world, and we were only a month out from the next major release. I had hoped we could plug the new overlay in as soon as possible, but sometimes an idea needs time or the right people working on it to give it that necessary push.

The first iteration of the pattern explorer will likely be a baseline experience that can be built upon in the future. Currently, users can search via the modal or filter by category (includes featured patterns in the list).

Block pattern explorer as viewed from a popup overlay. It features a left sidebar of categories and a right section with two columns of various block patterns.
Pattern explorer modal.

In the long term, the explorer should offer more features. An earlier mockup of it showed user favorites by connecting with a WordPress.org account. This sat alongside featured and newest-pattern lists. The mockup also had a separate section for template part patterns, such as header, footer, and sidebar. With the WordPress 5.9 feature freeze coming on November 9, those extras will likely need to wait until a future release.

To access the explorer overlay, users will need to click the “Explore” button when viewing patterns in the inserter. It then pops up a full-screen overlay for navigating them.

Highlighting an "Explore" button in the block inserter for WordPress. It sets next to a select dropdown field.
“Explore” button next to the pattern category dropdown.

This type of pattern navigation experience has already become a necessity. The narrow inserter has not held up well against themes that ship a lot of patterns, such as the 40+ bundled with Tove. The problem will only grow exponentially worse as the pattern directory is opened to more submissions and other themes inevitably add dozens upon dozens of their own.

The experience is much nicer now. However, it still has a few wrinkles that need to be ironed out. Several patterns have scrollbars of their own within the explorer. As Anne McCarthy noted in the ticket, it makes the “experience very janky.”

Block pattern explorer modal. In the right section, two of the patterns have scrollbars in their previews.
Patterns with scrollbars.

In my tests, the patterns butted against the explorer sidebar on the left. Fixing this should not take much work.

More than once, I also ran into the dreaded “Aw, Snap!” browser error message after viewing the explorer’s patterns. The error code: out of memory. This happened when running a clean install alongside the Twenty Twenty-Two WordPress theme. I can only hope it is a non-issue when WordPress 5.9 rolls around and is live on production sites.

Eventually, I want to see a quicker method for accessing this pattern modal. I am leaning toward a dedicated button in the toolbar for pulling up the overlay. Right now, it takes three mouse clicks to open it. First, users must click the “+” inserter button. Then, they must switch to the Patterns tab before hitting the Explore button. That is a lot of work for something that should be a first-class feature.

A keyboard shortcut would also be a welcome access point. I could live with that compromise if the development team is not yet ready to stick another item at the top level of the UI.

Overall, I am happy with this upcoming feature. I may even try my hand at building some new ones. Those I had been tinkering with in my custom theme had become so unwieldy that testing them was a headache. This will open things up and should make it a lot more enjoyable to use.

Gutenberg plugin users should see this land in version 11.9 later this week. It is also currently available in the trunk branch of WordPress.

Posted on

The WordPress.org Block Pattern Directory Is Now Live

Yesterday, the WordPress pattern directory went live to the world as the development team behind it put the finishing touches on the project. It will work similarly to the theme and plugin directories in time. Along with WordPress 5.8, users can browse and use block patterns directly from the post editor.

Officially, the pattern directory shipped as part of the WordPress 5.8 release. The Tavern did not include this in its coverage yesterday because it was still listed as an “in-progress” project until several hours later. The team was still wrapping up several issues yesterday for the initial launch.

Homepage for the WordPress.org pattern directory, showcasing the latest pattern submissions in a grid.
Pattern directory homepage.

The current patterns in the directory are a curated list of designs from over 20 volunteers. The team called upon the community in early June, and it answered. To date, there are over 70 patterns across six categories to choose from:

  • Buttons
  • Columns
  • Gallery
  • Header
  • Images
  • Text

Thus far, translations are complete for 12 languages. Others are at varying completion percentages, but there are dozens more that are incomplete. This would be an easy entry point for anyone who wants to give something back to the WordPress project.

I had a hand in building the About Me Cards and Team Social Cards patterns, but I cannot take all the credit. Kjell Reigstad and Mel Choyce-Dwan took my initial ideas and ran with them. It was a rewarding experience just peaking a bit into how other designers work. I only wish I could have put in more time during the initial submission window.

About Me Columns (left) and Team Social Cards (right) patterns

I look forward to submitting more patterns when submissions are open to everyone, the project’s next phase.

“Work is now beginning on the next milestone, which will enable patterns to be submitted by anyone, similar to the Theme and Plugin Directories,” wrote Kelly Choyce-Dwan in the announcement.

I am excited to see where the overall community can take the directory. Submissions have been limited and held to a specific aesthetic that will not be universally appealing. It may be hard for some users to look beyond centuries-old artwork, flowers, and the current fling with offset columns to see how a specific layout would work for their site. For others, it is perfect.

Even I struggle with this. I can see the structure beneath the default images and text, but I am not inspired to use most of the patterns because they simply do not fit my personal style. When selecting one, I want to feel like the designer was building something just for me. I suspect that will play a part in winning over more users and bringing some holdouts over to the block system.

Patterns shown in a grid that use columns or gallery-style layouts.
Gallery-categorized patterns.

One limitation of the pattern directory is the imagery. Now that services like Unsplash, Pexels, and Pixabay have put limitations on their licensing, it can be tough to find photos and artwork that meet the guidelines for submissions to WordPress.org. However, that could open up a bit with the potential integration of Openverse, formerly the Creative Commons search engine. Making it easier for pattern designers to find the perfect images to build out their visions would improve the overall quality.

What will eventually make the pattern directory a worthwhile venture is when the best designers from the WordPress ecosystem step up and begin competing. I eagerly await a breadth of authors putting their own stylistic spin on submissions.

Posted on

Open Invitation To Contribute to the WordPress Block Pattern Directory

The upcoming block pattern directory is launching alongside WordPress 5.8 in July. The goal is to make several high-quality designs available for users right off the bat. However, the official submission process will not open until the directory launches. In this chicken-and-egg scenario, the Design team is asking for early contributors to submit their pattern candidates via GitHub.

“The project needs a collection of high-quality, diverse, community-designed patterns to populate it with during development,” wrote Kjell Reigstad in the announcement post. “These patterns will set the tone for quality in the repository and will make the directory useful for folks upon its launch.”

Alongside Reigstad, Beatriz Fialho and Mel Choyce-Dwan have already added several block patterns. They are available through the Gutenberg plugin now.

A sampling of six block patterns currently available.
Several of the current block patterns.

The trio has also submitted the majority of the 18 current potential patterns. While they have produced solid work thus far, the directory needs a more diverse set of designs from the community to launch with a bang.

Creating a pattern requires no coding skills. It is possible directly via the block editor. Just design, copy, and submit. The team already has a GitHub template in place for submitting patterns. Be sure to use CC0 (public domain) images if they are a part of your creation.

A block pattern in the WordPress editor, showing the "more options" dropdown with the "copy" button highlighted.
Copying a pattern from the WordPress editor.

I have somewhere between 40 and 50 patterns lying around. You could say that I have been doing a bit of dabbling in the art of block-pattern design in my free time. Many of these patterns rely on custom block styles, so they are not suitable for the directory. However, I have several that are general enough for submission.

As always, I try to pay it forward when possible. Therefore, I cleaned a couple of patterns today using the Twenty Twenty-One theme and submitted them for inclusion.

The first was a three-column section of “about me” or “connect with me” boxes. This has been one of my favorites to play around with.

Three boxes with about, contact, and follow sections.
About me boxes.

It is not on par with my original design, but I like how it turned out. If you have read any of my past posts on blocks and patterns, I will sound like a broken record. However, I must say it for those who did not hear the message the first 100 times. The main limiting factor for block patterns is the lack of spacing options on almost all blocks.

Blocks like Group and Column have padding controls, which are a nice feature. However, vertical margin options are must-haves for the directory to be as successful with its goals as it intends to be.

A prime example is in my first pattern. My original mockup closes the gap between the heading and subheading. In my submission, I tightened the space by setting the line height, but I needed an option for zeroing out the vertical margin.

If you compare it to the original idea built with some features not yet available, you can see how much improved the overall layout’s spacing is.

About me boxes with tighter spacing between text.
Original about me boxes with tighter margin control.

I ran into the same issue with my second pattern, Team Social Cards, between the Image and Separator blocks. The gap there has more to do with Twenty Twenty-One’s inconsistent spacing.

I may revisit the giraffe photo, but it is growing on me. It is fun. Plus, end-users are meant to actually replace it.

I will probably submit one or two more during this early phase, and I will definitely contribute more once the pattern directory is officially open. For now, I want to see our talented design community giving a little something back to the WordPress project. This is such an easy way to contribute that has no coding requirement — just a little time.

Posted on

You Might Not Need That Block

As I was perusing the WordPress plugin directory this morning, I noticed a new block plugin, which is always one of the highlights of my week. It was a simple pricing block. Of course, I installed it and began playing around with its features. It was a version-1.0 product, so I was not going to fault it for not exceeding any expectations I might have had.

I have little doubt the plugin will meet many users’ needs. However, it did not bring much to the table that users could not already do with stock WordPress. And, as the block system continues to mature with more block options, end-users will gain more design control over every aspect of the existing core blocks.

This is not a knock at this particular plugin. I see less and less need for many third-party blocks the more I browse and test them. With WordPress’s base blocks and a decent theme, many custom solutions are possible via patterns.

To test the plugin’s block, I added it to a Columns block and duplicated it a couple of times to create pricing columns.

Pricing Block from a plugin inserted into columns.

The structure of an individual pricing block is straightforward. It contains the equivalent of the following core blocks:

  • Group
  • Heading
  • Heading/Paragraph
  • Heading/Paragraph
  • Paragraph
  • Button(s)
  • Separator
  • List

Since I had the structure, I tried recreating it while using the Twenty Twenty-One theme. I kept everything nearly the same other than a couple of font sizes and colors.

Pricing columns pattern as shown from the Twenty Twenty-One theme.

The result was not particularly impressive, but it was mostly on par with what the plugin was doing. The biggest letdown with Twenty Twenty-One is that there are no vertical spacing controls to tighten up some of the text. This is more of a limitation of WordPress than the theme. Plus, margin and padding controls are coming.

Aside from one-click insertion into the content canvas, the benefits the Pricing Block plugin brings are rounded borders, box shadows, and list icons. However, these items would fit more into a site’s design if they were controlled by the theme.

Knowing that the Eksell theme solved the vertical alignment issue with a custom block style, I decided to try it. Again, I mostly stuck with the same structure.

Pricing columns using the Eksell WordPress theme in the block editor.

Much better. However, Eksell is such a beautifully designed theme that it will upgrade the appearance of nearly anything. It almost isn’t fair.

Kicking things up a notch, I gave the pattern an overhaul. I moved some things around, changed a few colors, and tried to have a little fun with it.

Alternate design of pricing columns with the Eksell theme. Added heading background.

The noteworthy thing here is that I had far more control over the placement and design — within the current WordPress limitations. This was not possible with the plugin’s block.

There are more robust pricing blocks. This is not a comparison of all the available options out there. However, many blocks share these problems. Often, what they need to do is take advantage of WordPress’s “inner blocks” system and nest core blocks, which provides access to existing design options.

Wanting to take this experiment just a bit further, I activated a development version of the Gutenberg plugin and a block-based theme I have been tinkering with. With the right tools in hand, I had control over spacing, borders, typography, and far more — features that users will have in the coming months.

Custom pricing columns with a custom-built WordPress theme and full-site editing.

I like it, but I would also like to see professional designers take over from here. I want to see various pricing columns/tables available as patterns in themes and in the upcoming block directory.

The next level of pricing columns would be integrating with plugins like WooCommerce, Easy Digital Downloads, and other eCommerce solutions. For example, users could insert a product’s price or buy-now button into a pre-built pattern inserted into the editor canvas. That way, the data stays updated.

However, this is not specifically about pricing columns. It is about the blocks ecosystem altogether. Nearly every time I see a testimonial block, for example, I just see it as another pattern that could be registered.

For end-users, the quick solution will often be to activate an extra plugin. This requires more resources in the editor and, usually, the front end. It also ties them to another third-party tool, one which they may not necessarily need.

Ultimately, most webpage sections can be broken down to the individual blocks that exist in WordPress. They simply need to be arranged in a specific order and grouped together. Our community of theme authors can start providing these solutions by doing the legwork of this grouping and register them as patterns.

The most useful blocks do something that WordPress is incapable of doing alone or adding elements that do not exist.

Posted on

It Is Time for WordPress Theme Authors To Step Up Their Block Pattern Game

Going through my routine this week, I skimmed the latest WordPress theme releases and found a new project that supported the block editor. It even shipped a few custom patterns. While the design was nothing extraordinary, it was a solid theme overall. However, after spending the better part of today writing about it, I did not think I could move forward with the story. Something was bugging me.

It was the same thing I have felt with several others as of late. There were too many missed opportunities. The theme had the foundation, the underlying potential, to be more than it was.

The theme had a commercial “pro” version that users could purchase. However, nearly every pro feature relied on old-school tactics of upselling extra theme options. The one exception was a block-related feature that will be free as part of the Global Styles component likely to ship with WordPress later this year.

Where were the custom block styles? Where could a user snag some unique patterns? Extra nav menus, sidebars, color settings, and typography options are becoming less and less of a value-add for end-users. It is probably safe money right now, and I can understand the comfort of not taking too many chances.

Theme authors need to start shifting gears. Upsells need to come in the form of features that will not be available from stock WordPress. Right now, that means building unique block patterns and styles.

Exploring Pattern Ideas

In the last month, I have been tinkering with custom patterns. While I was in the design and development business for over a decade, what I was able to accomplish with the block editor alone — using no custom code — and a well-rounded block-ready theme is merely scratching the surface. We have far better talent in the WordPress community, and I want to see their artistry unleashed.

It all started with the WP Tavern Jukebox podcast — you should check out episodes #1 and #2 if you have not heard them already. Nathan Wrigley, the new host, pushed me enough to put my design-and-dev cap back on to implement some features that he needed. Over the years, I have not worked much with podcasting or any type of audio. This was new territory for me. Ultimately, the podcast inspired me to think about audio patterns.

What is possible with WordPress’s editor today?

I scoured the web for various layouts, looking for modern audio presentations. Numerous concepts were impossible for an end-user to implement from the editor alone. They would need extensive custom block styles from the themes themselves. And, there were several designs that I simply did not think could be done at all, but these typically had plugin-territory elements.

However, I did find ideas that I could run with and make my own. I started with a simple audio file from The Martian soundtrack — I had re-watched the movie the night before and was on a David Bowie kick.

Block pattern with thumbnail on left and info, audio embed, and social icons on the right.
Soundtrack single audio pattern.

It was simple. Just add Group, Columns, Image, Paragraph, Heading, Audio, and Social Icons blocks. I was happy with the result, and some of my Twitter followers responded positively.

Inspired by the support, I created an alternative layout. It was even simpler by adding Cover, Paragraph, Heading, Audio, and Social Icons blocks.

Audio embed pattern nested in a Cover block.

Based on the original pattern, I built one that used a SoundCloud embed instead of the Audio block. I also created another with some alterations that catered more toward podcasters.

SoundCloud audio and podcasting patterns.

As I dived deeper into this project, the more capable I became at creating layouts. I began to understand what some of the limitations were and piecing everything together around them.

One of the most problematic areas with the editor is that it does not hand over enough spacing control. Therefore, I had to make liberal use of the Spacer block, something I prefer not to use because it relies on pixel units and puts an extra <div> into the markup. To build some patterns, I had to become a little less of a purist and just use the available tools.

That change in mindset opened some more possibilities. I built a couple more audio-related block patterns. They were, again, simple layouts, but I wanted to make them stand out visually with imagery that end-users could add. The goal is to give users one-click access to pre-designed sections, starting points where people can showcase their own creativity.

DJ and musician block patterns.

The next step was to start thinking beyond audio patterns. There is so much more others can do in that space. I wanted to venture out a bit more.

I have since built several other patterns like the following news-type article header that I would love to use on the Tavern in the future:

Pattern with a Cover block, post title on the left, and data points on the right.
News or data-driven article header pattern.

I could share more concepts, but this seems like an ideal place to stop. The goal is not to showcase my portfolio of patterns. It is to inspire our theme design community in hopes that they build something far better. I also wanted to show how easy it was to pop out a few patterns. Instead of hours of development time, many ideas were cut down to mere minutes. That is the power the block system provides today.

When I wrote about the block system creating commercial opportunities for theme authors in January, it was a theoretical post. This is a follow-up that puts it into a little more practice (without the actual selling, of course).

Imagine, as a theme company, you are building a freemium theme for musicians. You might want to include a few base patterns for users to choose from. However, there is an endless number of alternatives you could offer as part of a pro package.

I am sure there is already a theme author/company out there right now with a multi-purpose theme concept in mind that will eventually have hundreds of patterns. I can only hope that they have a solid categorization system or offer separate packages or imports.

The block pattern directory is slated to land alongside WordPress 5.8. At first, it will primarily be core patterns. However, others will be encouraged to contribute over time. This is a welcome feature for the platform, but it will never match every theme design perfectly. Each theme has its own design nuances. Each has different methods of solving problems.

The best patterns will come from theme authors themselves, especially when combined with custom block styles, packaged and marketed as part of their theme’s experience. Developers can wait until the entire market catches up or jump ahead of the game.

Posted on

First Look at Initial Designs for WordPress’ Block Pattern Directory

WordPress contributors began discussing the possibility of a block pattern directory in October 2020, an idea that garnered enthusiastic support. The directory would offer a place to browse user-submitted patterns, as well as one-click installation of patterns from the block inserter inside the editor.

Interface designer Shaun Andrews published the initial designs for the pattern directory yesterday. Patterns will be displayed in a masonry-style grid that can be sorted by category, which works well for pattern thumbnails of varying heights. Users can search the directory and sort by featured, newest, and most popular.

Masonry grid

The idea is that a user will be able to copy a single pattern to their clipboard while visiting the directory and paste it directly into the block editor. Users will also be able to “favorite” patterns from the directory and access them inside the editor.

Copy pattern flow

One of the most exciting aspects of the plan is that anyone will be able to create and submit a pattern without having a lot of technical knowledge. Andrews shared a quick landing page mockup to explain what patterns are and how to submit one. Prospective pattern authors would be able to create a pattern on WordPress.org using a hosted instance of the block editor with a few tweaks specific to describing and categorizing the pattern.

Users who submit patterns will have a new “My Patterns” screen listing all of their patterns, ones they have favorited, information about how many people have favorited their submitted patterns, and status updates for patterns still in review.

“This is a big opportunity for designers to contribute to the overall WordPress ecosystem without having to know how to code a plugin or a theme,” Andrews said. It opens up a new avenue of design contribution that would not have been possible with the same scale of distribution in the days of the previous editor.

There are still many unanswered questions, such as how “featured” patterns would be chosen, how drafts work, if the patterns can only include core blocks, how users will browse and manage favorite patterns in the editor, who approves the patterns, how pattern authors can edit existing patterns, and more. If you want to help out on the project, check out the Pattern Directory repository on GitHub. The work is broken down into smaller projects in the issues.

Posted on

Proposal to Create an Expanded View or Overlay for the Block Patterns Inserter

The “version 1.0” launch of block patterns in WordPress 5.5 was overall successful. However, it was easy to overlook the problems while waiting for this feature to land after months of anticipation. Now that we have had a couple of months of seeing the block pattern system baked into core WordPress, it is time to address issues that are becoming more evident.

As much as I love block patterns as a feature, I cannot say the same for the user interface and overall experience. The pattern category dropdown added in Gutenberg 9.1 was a marked improvement over the endless list of patterns. However, it did not go far enough in presenting them in a user-friendly way.

WordPress has long had a habit of sticking too much into a tiny panel — many theme authors never felt like the customizer panel offered enough space, for example. The same seems to be the case for the block editor’s inserter panel. It is good enough for allowing end-users to pick and choose blocks. However, patterns are much larger than the smaller block icons. When users start scrolling through dozens of patterns at a time in the coming months and years, it will become a usability nightmare.

Paal Joachim Romdahl is proposing an alternative. His idea is to add an “expander” icon/button that would allow users to view more patterns at once via an overlay. At least this would be the case for larger screen sizes, such as desktop users.

“Viewing a lot of patterns in the small inserter panel does not work too well,” he wrote in the GitHub ticket. “It gets tiring needing to scroll one pattern at a time. Having a larger view will help the user to compare multiple patterns at once.”

Preview of how the current pattern overlay proposal would work.
Current pattern overlay proposal.

Romdahl has also created a Figma prototype for people to test what the system would look like in a live demo. The UI is not polished, but it looks like a promising start.

He created the proposal after reading the Tavern’s recent coverage of WordPress.com’s launch of over 100 block patterns. Some of the pattern categories are easy to work through and find the right layout. Others, such as the Text and Call to Action categories, may have 20 or more patterns to scroll through.

Quotation block pattern in the WordPress.com editor.
Inserting a block pattern on WordPress.com.

If WordPress creates an official block pattern directory, which is currently under consideration, adding new patterns could be as simple as clicking a button. It would be an easy way to rack up dozens of patterns in moments, particularly if a user is trying out various layouts and does not uninstall unused patterns afterward.

Not many users are exposed to the hundreds of patterns WordPress.com’s users have access to. We should move forward with this proposal before they are.

An overlay for inserting patterns and templates is not a new concept. It is common in the WordPress development community. Plugin and theme developers solved this problem ages ago.

The Redux plugin handles hundreds of templates with an overlay:

Opening the template library from the Redux WordPress plugin.
Viewing templates from the Redux library.

The Layout block from the Genesis Blocks plugin is essentially just a custom pattern inserter with a much nicer UI than WordPress:

Using the Layout block from the Genesis blocks plugin, showing an overlay.
Overlay created by the Layout block from Genesis Blocks.

Mikael Korpela added similar thoughts to a ticket related to the next steps for the inserter. He proposed a full-screen experience for browsing patterns.

“The patterns sidebar is great if you just want to keep it open while you modify your page, but it’s harder for browsing because of limited space, especially when you’ve registered a lot of patterns,” he wrote in the ticket.

He shared an image of how Sections on Squarespace are handled:

Squarespace section inserter.
Selecting a Section on the Squarespace website.

An overlay might also help drive the pattern directory proposal. It would be easy enough at that point to create a new tab in the overlay interface, hook into the WordPress.org API, and allow users to browse through installable patterns — no need to leave the comfort of the block editor.

Another common feature that many of these types of systems share is a way to save patterns as favorites. This makes them easy to locate in the future. Paul Lacey makes the same argument in episode #136 of the WP Builds Weekly WordPress News podcast. He wants his clients to have easy access to their most-used block patterns. This would be a nice bonus to help clean up the block patterns user experience.

Posted on

WordPress Contributors Discuss Launching an Official Block Pattern Directory

Block patterns were one of the most exciting and transformative features introduced in WordPress. 5.5, giving users a giant head start on building pages by allowing them to insert sets of pre-designed blocks. Core now includes a handful of default patterns available in the block inserter but contributors are exploring the idea of expanding this small selection into a full-blown pattern directory.

Alex Shiels opened a discussion on make.wordpress.org to get feedback on how it might be implemented. He suggested that the pattern directory would be similar to the block directory, minus the need to install plugins in the background. Community-contributed patterns could be searched and added via one-click installation from the block inserter.

Shiels asked for feedback on several questions, such as how block patterns could be represented in search results and how previews could accurately reflect how a pattern might appear with different themes. One of the most important considerations he raised: Should the Block Pattern Directory be limited to patterns using only core blocks?

If patterns can only contain core blocks, that leaves it to third-party markets to provide patterns that include blocks from plugins. It seems more likely that block plugin developers would opt to ship their own selection of patterns inside their plugins, instead of contributing to the pattern directory. Having it open to all blocks hosted in the directory would encourage a more diverse range of patterns. Patterns requiring a non-core block might include a prompt to download it.

The WordPress community has already created many different unofficial pattern libraries, although the terminology can be confusing. Gutenberg Hub’s template library may be one of the most prominent. It provides section patterns and full page templates that users can browse and then copy the code to paste into their own sites. Jeffrey Carandang’s “Share-a-Block” site also offers a selection of patterns to download.

WordPress.com has just launched its own pattern library today with more than 100 patterns pre-designed patterns available. Automattic plans to add more patterns based on user feedback and requests. This new free library will make site building easier for millions of users and also creates a strong incentive for using the block editor.

Wpcom pattern library

Patterns leverage all the best things about the new editor. Inserting a pattern is easier than wrangling shortcodes or wading through theme options to try to get the right combination to reproduce the demo. Patterns are more approachable than page builders and don’t require learning a new interface.

As the momentum around block patterns increases, I think we will see more commercial theme and block plugin creators using patterns to showcase their products and provide starter packs. It is the best way to help users understand the wide range of possibilities that the block editor enables.

Having an official directory of community-contributed patterns could be an interesting way for creators to cross-promote their free blocks and designs, while opening up a whole new world of design options for self-hosted WordPress users. How many times have you been shopping around for just the right WordPress theme and found that you like certain sections and layouts offered in several different themes? Patterns give you the ability to cherry pick different sections to create your own unique layout for each page/post, without having to wrestle with the limitations of your theme.

The ability to browse and access community-contributed patterns directly within the editing interface may have a long list of technical challenges to solve, but it would undoubtedly put more design power into users’ hands.

Not everyone can take a blank canvas and artfully combine blocks to produce sophisticated designs. Putting patterns at users’ fingertips would make site building more of a delight, especially for users who are new to the block editor. It might also allow users to save their favorite patterns for future use, in the same way you can save your favorite themes and plugins.

The discussion on WordPress.org is just getting underway. A few of the original contributors on the idea have created a GitHub repository to track and explore some of the more technical considerations of launching an official block patterns directory. If you have ideas to contribute on how this could be implemented or want to share other considerations, make sure to comment on the post.

Posted on

Past Twenty* WordPress Themes To Get New Block Patterns

Mel Choyce-Dwan, the Default Theme Design Lead for WordPress 5.6, kick-started 10 tickets around two months ago that would bring new features to the old default WordPress themes. The proposal is to add unique block patterns, a feature added to WordPress 5.5, to all of the previous 10 Twenty* themes. It is a lofty goal that could breathe some new life into old work from the previous decade.

Currently, only the last four themes are marked for an update by the time WordPress 5.6 lands. Previous themes are on the list to receive their block patterns in a future release. For developers and designers interested in getting involved, the following is a list of the Trac tickets for each theme:

If you are wondering where Twenty Eighteen is in that list, that theme does not actually exist. It is the one missing year the WordPress community has had since the one-default-theme-per-year era began with Twenty Ten. It is easy to forget that we did not get a new theme for the 2017-2018 season. With all that has happened in the world this year, we should count ourselves fortunate to see a new default theme land for WordPress this December. WordPress updates and its upcoming default theme are at least one consistency that we have had in an otherwise chaotic time.

More than anything, it is nice to see some work going toward older themes — not just in terms of bug fixes but feature updates. The older defaults are still a part of the face of WordPress. Twenty Twenty and Twenty Seventeen each have over one million active installs. Twenty Nineteen has over half a million. The other default themes also have significant user bases in the hundreds of thousands — still some of the most-used themes in the directory. We owe it to those themes’ users to keep them fresh, at least as long as they maintain such levels of popularity.

This is where the massive theme development community could pitch in. Do some testing of the existing patches. Write some code for missing patterns or introduce new ideas. This is the sort of low-hanging fruit that almost anyone could take some time to help with.

First Look at the New Patterns

None of the proposed patterns have landed in trunk, the development version of WordPress, yet. However, several people have created mockups or added patches that could be committed soon.

One of my favorite patterns to emerge thus far is from Beatriz Fialho for the Twenty Nineteen theme. Fialho has created many of the pattern designs proposed thus far, but this one, in particular, stands out the most. It is a simple two-column, two-row pattern with a circular image, heading, and paragraph for each section. Its simplicity fits in well with the more elegant, business-friendly look of the Twenty Nineteen theme.

Two-column, two-row services pattern for the Twenty Nineteen WordPress theme.
Services pattern for Twenty Nineteen.

It is also fitting that Twenty Nineteen get a nice refresh with new patterns because it was the default theme to launch with the block editor. Ideally, it would continually be updated to showcase block-related features.

While many people will focus on some of the more recent default themes, perhaps the most interesting one is a bit more dated. Twenty Thirteen was meant to showcase the new post formats feature in WordPress 3.6. According to Joen Asmussen, the theme’s primary designer, the original idea was for users to compose a ribbon of alternating colors as each post varied its colors.

“The alternating ribbon of colors did not really come to pass because post formats were simply not used enough to create an interesting ribbon,” he wrote in the Twenty Thirteen ticket. “However, perhaps for block patterns, we have an opportunity to revisit those alternating ribbons of colors. In other words, I’d love to see those warm bold colors used in big swathes that take up the whole pattern background.”

Patterns designed to match post formats.

This could be a fun update for end-users who are still using that feature that shall not be named post formats.

There is a lot to like about many of the pattern mockups so far. I look forward to seeing what lands along with WordPress 5.6 and in future updates.

Establishing Pattern Category Standard

With the more recent Twenty Twenty-One theme’s block patterns and the new patterns being added to some of the older default themes, it looks like a specific pattern category naming scheme is starting to become a standard. Of the patches thus far, each is creating a new pattern category named after the theme itself.

This makes sense. Allowing users to find all of their theme’s patterns in one location means that they can differentiate between them and those from core or other plugins. Third-party theme authors should follow suit and stick with this convention for the same reason.

Developers can also define multiple categories for a single pattern. This allows theme authors to create a category that houses all of their patterns in one location. However, they can also split them into more appropriate context-specific categories for discoverability.

Posted on

Addressing the Theme Design Problem With Gutenberg’s New Block-Based Widgets System

I could hardly sleep last night. Once in a blue moon, I have an idea I want to try out. While my day job as a writer means I spend far less time breaking sites through the rigorous trials and errors of building plugins and themes, some problems bug me with WordPress, the sort that keeps me from dozing into restful and peaceful dreams.

Last week, Gutenberg 8.9 dropped the experimental flag from its block-based widgets system. Overall, it was a solid first outing for a feature that should land in WordPress 5.6 this December. However, the largest problem centered on how theme authors would be able to style widgets in traditional fashion. Because actual widgets are being phased out and replaced with blocks, theme authors will no longer have access to the standard widget and widget title classes. This is problematic because there is no predictable way to style all widgets of a particular sidebar to look the same.

The classic example is of the boxed widget design. Many themes, such as the popular Colibri, employ such a design for their sidebars as shown in the following screenshot.

Screenshot of the Colibri WordPress theme with a boxed widget design.
Boxed widget design in right sidebar of Colibri theme.

In its current state, there is no reliable way for theme authors to create such a sidebar design via the block-based widgets system. Because there is no way to exert any sort of control over the structure of whatever content users will drop into a sidebar, it would be easy to look at this situation and think that theme designers are losing control.

Based on a recent GitHub ticket and a related Slack discussion from earlier this week, it does not appear that the Gutenberg development team intends to create parity between the old and new widgets systems, at least as far as theme design is concerned.

It bears repeating. I am a fervent supporter of handing over this type of ultimate control to the user. However, we need to balance that with helping them to make smart choices.

Theme authors must begin thinking about how this impacts the work they do and come up with creative solutions for sidebars, widgets, and other areas that will be affected by full-site editing in the future.

A Potential Solution

That thing that kept me up last night was an idea of combining block patterns, one of my favorite features, with widgets. The trouble was that the block-based widgets system does not currently support block patterns. And, until a quick discussion with Mark Uraine, one of Gutenberg’s designers, on a GitHub ticket, the idea did not seem to even be on the table.

For theme authors, the traditional sidebar and widget system of the past was nothing more than a pattern. WordPress provided theme devs with the ability to set a wrapping HTML element for the entire widget and the widget title. It was a rigid and inflexible system, but it was a reliable standard.

Block-based widgets are the complete opposite. They are essentially a free-for-all where users can drop arbitrary content into a “block area.”

What happens when we combine the structure of patterns with the flexibility of blocks inside of sidebars?

That was the idea that got me out of bed and behind the computer screen early this morning after my restless night. It was such a simple concept. Theme authors could provide a “widget” pattern to their end-users. This would provide users with a choice between what the theme author thinks best and forging their own path — the best of both worlds.

Example of using patterns for block-based widgets.
Simple example of recreating a boxed “widget” pattern.

And, here is where the beauty of the block system really comes in. Theme authors can create any number of patterns. This provides even more options for users.

Regardless of whether the Gutenberg plugin currently supports patterns for the block-based widget system, the idea was simple to test. In a sidebar on the new widgets screen, I merely needed to add a new Group block with the widget class. Then, I added an H3 Heading block with the widget__title class. Those classes may even be unnecessary in the context of patterns unless theme authors want to directly target them. Outside of the custom classes, I added a simple background to the Group block and changed the text color of the Heading. I also inserted an empty paragraph where the user’s custom content would go.

Afterward, it was a simple matter of testing it with various blocks.

Using a block pattern to encapsulate a widget.
Faux block pattern in the widgets block editor.

I would love to know what theme authors and the Gutenberg team think of the idea. I think it has some merit while soothing some of the transitional pains between traditional widgets and block-based widgets.

The biggest issue I see is the discoverability aspect. Will end-users know these “widget/block patterns” exist if theme authors went this route?

Posted on

Exploring the First Block Patterns to Land in the WordPress Theme Directory

For months, I have eagerly awaited the official release of WordPress 5.5, an update that promised to put the long-awaited block patterns system into the hands of theme designers. I may sound like a broken record at this point, but patterns have the potential to revolutionize WordPress theme development, even more so than the upcoming full-site editing.

The feature should drastically change how developers create WordPress themes. If used to its full potential, theme authors can rid themselves of dozens of theme options and drop most of their page templates. They can focus less on programming and more on designing, which is what themes are really all about.

To understand why patterns are so revolutionary, you must understand the underlying issue that it solves for theme authors and, ultimately, end-users. Throughout all of WordPress’s theming history, there has been a single overarching issue that has caused untold numbers of issues. This is an issue that has been the root cause of multiple guidelines added to the WordPress.org theme review system.

This single issue can almost exclusively trace its roots back to the big question: how can theme authors build custom homepages and easily allow end-users to recreate them?

Whether it is a slider or columns of info boxes or a call-to-action section, WordPress has never truly provided a solution that theme authors could rely on. To be fair, many developers have built creative and unique systems around the limitations of the platform. However, those systems were specific to a single theme or a set of themes from a single company. There was no standard. There was nothing that would guide theme designers to simply design whatever interesting thing they had in their minds and allow users to simply fill in the content.

While I say that the homepage of the site is the underlying issue here, the problem is really extended to any page on the site. The homepage design is a bit like the theme author’s signature. It allows designers to showcase their talents and draw users in. And for over a decade, theme authors have tried a thousand different methods just to get this one page right.

Patterns are so much more. The system does not require that theme authors become PHP ninjas to piece together beautiful designs. It does not limit users to a theme options panel for building their homepage — they can build out any page on their site with the patterns their themes offer.

The big thing is that it renders the “how do I build a custom homepage” question moot. Theme authors never need to think about that question again, at least not in the way that they have in previous years. Theming is moving away from building designs on a page level and toward designing individual blocks and sections (patterns). The focus is much more atomic, which provides users with more flexibility and freedom.

Because I could not wait for weeks or months longer to see what theme authors built within this system, I wanted to take a peek at what the current themes in the official theme directory were doing. There was not a lot to look at, but at least some theme authors are willing to be the pioneers in this new era of theming.

Currently, the Block Editor Patterns feature filter for the directory is not working. Technically, theme authors are not allowed to add the block-patterns tag to their themes, but there is a patch available which should fix the issue soon.

Patterns So Far

Right now, the theme directory only has three themes with block patterns. It is not much to go on, but it is interesting to see what theme authors are building so far.

UXL Themes recently updated its Cordero theme with several blocks. One of the things I like about how Cordero added its patterns is that it created a custom “Cordero” block pattern category. Patterns can exist in multiple categories, but having all of the theme’s custom patterns consolidated to a single group made discovering them much easier. This is a practice that I would like to see more of going forward.

Cordero’s patterns are primarily geared toward the typical business layout. It includes a couple of hero-type patterns, some features/services boxes, and pricing tables.

Cordero theme block patterns.

The Inclusive theme by Themes Team representative Carolina Nymark has several patterns (it is also a solid theme if you’re in the market for a good accessibility-ready option). The most interesting patterns of this theme are its two-column patterns with sidebars. Nymark has essentially created the “body” of a page with patterns. One adds a sidebar on the left and the other pattern adds it to the right. Both patterns have a main column for adding custom content. The sidebar column is decorated with widget-type blocks by default.

Sidebar and content columns pattern included with the Inclusive WordPress theme.
Inclusive theme pattern with sidebar and content columns.

What makes these patterns unique is that they are almost like a stepping stone toward full-site editing — all that they are missing is a header and footer. Admittedly, I was unprepared for this sort of pattern and expected patterns to be used for smaller sections, but I am a fan of the experimentation in the Inclusive theme.

Nymark has two of the current three themes with block patterns in the directory. Her Deejay theme adds a single pattern, which allows the user to create a DJ profile section on their site. It combines columns, social icons, the latest posts list, a video embed, and more.

DJ profile block pattern included with the Deejay theme.
Deejay theme profile pattern.

Overall, I like the early exploration of this new feature. It is never easy being the first to try things out, so I applaud the theme authors for paving the way. We’re only a week into the WordPress 5.5 release, but I am excited to see more.

How Well Do Patterns Transfer Between Themes?

One of the promises of the block system is that it allows users to switch between themes and maintain their content. The idea is that each theme will style all the blocks in such a way that the front end output does not look broken.

While there is merely a small sample size of three themes, I did hit some content styling issues when switching between them.

Generally, the more complex a pattern and whether the pattern employs custom classes decides how well it would transfer from theme to theme. Images could present an interesting problem too if the user decides to not replace a pattern’s image with its own. Because the image would exist in the theme folder, if the theme is deactivated and uninstalled, it would no longer exist.

Posted on

Convert Reusable Blocks to Block Patterns with 1-Click

Now that WordPress 5.5 has shipped, block patterns are available in core for all users. If you have previously been relying on reusable blocks but prefer the flexibility of block patterns, you may want to convert these.

WordPress core developer Jean-Baptiste Audras has made this possible in the latest update of his Reusable Blocks Extended plugin. He posted a video demo of how the plugin converts reusable blocks to block patterns with one click.

What’s the difference between reusable blocks and block patterns?

Why might you want to convert your reusable blocks to block patterns? For users who are new to the concept, there are a few distinctions between these similar features.

Reusable blocks were designed to be a time-saving feature that allows users to save a block or group of blocks for use on other posts or pages. They can be edited but they have a certain distinction in that they are intended to look the same in all places they are used. Any changes made to a reusable block will apply to all instances of the block wherever it is used.

If a user wanted to make changes to a reusable block specific to one page, the process would involve clicking on the block’s properties and selecting “convert to regular block,” which would ensure that all edits would appear only on that specific instance of the block. It’s unlikely that most users would know how to do this without help, so this is one of the drawbacks of reusable blocks.

Block patterns are predefined block layouts that are designed to be changed. Once a pattern is inserted into the content, users can customize with their own text, images, alignments, colors, additional blocks, etc. The options are limitless and any changes made are not saved back to the original pattern. Block patterns provide a flexible starting point that gives users an idea of how blocks can be combined to make attractive layouts.

User-Created Patterns Are Coming Soon to the Block Pattern Builder Plugin

At the moment, users can create their own reusable blocks but not their own block patterns. Patterns have to be registered with code in order to appear in the pattern library. This is another reason that Audras’ one-click conversion is quite useful for users who are limited to capabilities offered in the editor’s current UI.

The ability to create block patterns inside the editor should be a feature in core. It would enable non-technical users to share their designs and creations in a more flexible format than reusable blocks provide. Until this feature is added to core – and it isn’t a guarantee- there is a plugin for that.

Justin Tadlock’s Block Pattern Builder plugin, which is available on WordPress.org, will soon be merging a pull request that adds the option to create block patterns inside the editor. It will work in a similar way to the process of adding reusable blocks. Now that block patterns are available in WordPress 5.5, this feature will be more useful to a wide range of users.

Audras’ Reusable Blocks Extended plugin, like many other amazing utilities for the editor, might be difficult to find unless you already know exactly what to search. Many times users are not even aware of the possibility of converting reusable blocks to patterns. This might also make a useful core feature but doesn’t seem likely to be a high priority at the moment. In the meantime, watch for more plugins to start extending block patterns to do interesting things now that they are available in core WordPress.

Posted on

WordPress 5.5 “Eckstine” Introduces Block Directory, Block Patterns, and Automatic Updates for Themes and Plugins

WordPress 5.5 “Eckstine” landed today, named for American jazz singer Billy Eckstine. This release introduces major improvements for the block editor and the security of WordPress. It was made possible by the contributions of 805 volunteers (with 38% of them being new contributors.) The 5.5 update is a testament to the stability of WordPress during uncertain times, as well as its unstoppable, distributed contributor base, who continue to get things done despite the pandemic’s unique challenges.

WordPress continues refining the editing experience with more than 1,500 updates from 10 releases of the Gutenberg plugin included in 5.5. (The plugin is where all the magic is tested prior to landing in WordPress releases, and features are periodically rolled in.) Some of the most notable changes include inline image editing, device previews, and smoother block movement with better drag-and-drop, block movers, block selection, and block relocation.

Block Patterns are making their debut in WordPress 5.5, with a handful of default patterns already available in the block inserter. This new feature helps users build pages faster by allowing them to instantly place sets of blocks that are already artfully arranged. We have written extensively about why block patterns will change everything and it will be exciting to see what developers do with them now that the feature is in core.

Block Directory Enables Block Discovery and Installation Inside the Editor

WordPress recently launched a block directory for single-block plugins and users can now search for and install blocks directly inside the editor. Selected blocks are downloaded seamlessly in the background and automatically activated and placed in the content. The advantage is that users don’t have to break their workflows in order to install new functionality. Blocks installed via the editor can also be uninstalled from the plugins page in the admin.

Search for and Install Blocks from the Block Directory

Block patterns, combined with the new block directory, will make page building much faster inside the editor by enabling users to quickly spin up layouts and add blocks on the fly.

WordPress Security Takes a Giant Leap with Automatic Updates for Themes and Plugins

Version 5.5 introduces a new UI for enabling auto-updates for themes and plugins. This is an exciting new era for WordPress that brings a higher level of website security while requiring less effort from users. Those who choose to get on the automatic updates train will no longer have to log into their sites and be greeted with a slew of nagging update notices. These updates will happen the same day they are available, so users don’t have to check in as often and sites are better protected from plugin and theme vulnerabilities getting exploited.

WordPress uses wp-cron to fetch updates for plugins and themes twice per day. The feature ships turned off by default in WordPress 5.5, so users will need to visit the theme and plugin pages in the admin to enable automatic updates. The bulk actions menu dropdown now has options for enabling or disabling auto-updates on all plugins, but users can always enable the updates for select plugins if they have any concerns.

Other notable updates in WordPress 5.5 include the following:

  • XML Sitemaps: WordPress now includes extensible core sitemaps, and many users will no longer need a plugin for this functionality. This basic implementation was completed in a way that will not impact performance or cause conflicts with other plugins that add sitemaps.
  • Lazy Loading Images: WordPress images will now wait to load until users scroll them into view, speeding up performance, especially on mobile.
  • Improved Accessibility: Metaboxes can now be moved with the keyboard, assistive devices can see status messages in the image editor, copying links in media screens and modal dialogs can now be done with a click of a button, and more.
  • Update Themes and Plugins by Uploading ZIP files: – Users can now update plugins and themes manually by uploading a ZIP file, an improvement for scenarios where one does not have server access.
  • Final Dashicon Library Update: The Dashicons project has been discontinued in favor of the new Icon Component. This last update to the library adds 39 block editor icons and 26 other icons.

For a more technical breakdown of some of the changes under the hood, check out the developer notes and the 5.5 field guide.