Tech Breakout Summit/2021: Between a Block & a Hard Place
Have you shied away from using custom blocks for your WordPress sites because they seem too complex? Let’s debunk that rumor.
In this session, you’ll learn how to leverage Genesis Custom Blocks to build your own blocks from scratch that look and behave exactly how you want.
In this session, WP Engine Product Marketing Manager Rob Stinson discusses:
- A high-level view of the future of WordPress theme-building, Full Site Editing, and custom block collections.
- Live-coding custom blocks for WordPress and a step-by-step guide on how to get started
For two and a half years, you could create a post or a page with the block editor, and everything within that content area was managed by the block editor. With Full Site Editing, it’s breaking out of those lines. It’s now the block editor, and now becomes responsible for the entire site.
WP Engine Product Marketing Manager Rob Stinson
Full text transcript
ROB STINSON: Good day, everyone. Welcome to this session of WP Engine Summit/2021. I hope you’ve been enjoying the event so far. And thanks so much for joining me. I hope you get a lot out of what we’re about to cover today.
This session is called Between a Block and a Hard Place. This is about mastering modern WordPress, which is absolutely all about the block editor and the blocks that we use within it. My name is Rob Stinson, I’m one of the product marketing managers at WP Engine. I work very, very closely with the product teams around the stuff that we are building for the block editor.
So we’re going to cover three major things today. We’re going to have a bit of a high-level look at the future of WordPress theming. We’re then going to have a look at custom collections, which is very much closely aligned with block patterns, which is something that is beginning to arrive within WordPress Core.
And we’re going to look at custom blocks. And custom blocks, we are going to be doing some live coding, which is always sort of intimidating. I don’t know if you know when someone’s watching you type and you, all of a sudden you can’t spell anymore. Well, I’m going to be live coding, so it’s like that times 10. So we’ll see how it goes, hey?
All right, but from the top, let’s have a little look at the future of WordPress theming. Where we’ve come from, look, if you’ve been in an agency or freelancer for any sort of, at least a few years, and you’ve ever been involved in a custom implementation on WordPress, typically you start with a base theme. You might have underscores of just something that you then hack away at and build out a theme. Or you might have a parent them like Genesis Framework is a great example or the Storefront theme from the WooCommerce crew.
Anything basically can be a parent theme. And you start there. That would give you a great foundation to build upon. Then you have your child theme, which is where you would implement some unique global design patterns relevant to your project. You’d set up a few things. You might add a few more templates for various page templates, or archive templates, or whatever based on whatever your project was covering.
And of course, you’ve got your WordPress plugins, which give you functionality, integrations, and stuff like that. Pretty simple, very familiar. That’s where we’ve come from. But we’re going somewhere else. The future looks a little bit different in the WordPress context.
I know we’ve had the block editor for 2 and 1/2 years now, which is crazy this has gone stupid fast. But there are changes, there is a phase that is rolling out right now within WordPress, which is introducing Full Site Editing and a few other things, which really do change things, change the way we do things moving forward. So where we are going looks a little bit more like this. We would have a base Full Site Editing theme.
Now a Full Site Editing theme is not just a drop-in for the typical theme. It’s actually far simpler and more lightweight than a traditional theme. We also have block patterns, which is conceptually a more product, I suppose speaking a new thing. This is where we probably do a little bit more of our global design patterns and stuff like that, and setting up pages, various templates.
Then we have custom blocks, which allows us to do really unique things, really specific designs, and specific functionality, and integrations. And then of course plugins will always play an important role within WordPress, and they give us functional integrations.
So it’s not just everything’s changed and everything is going out the window, but there is change. There is definitely change. So from the top, we got Full Site Editing happening right now. So this is from the last release some features are starting to move into Core.
It is all up there and like anyone who doesn’t know what it is or they’re not going to all of a sudden have Full Site Editing on their website, and not know what to do with it. But developers like ourselves are building out themes, setting up sites can start to hook into that Full Site Editing functionality.
What it basically is, in a nutshell, is that for two and a half years, you could create a post or a page with the block editor, and everything within that content area was managed by the block editor. With Full Site Editing, it’s breaking out of those lines. It’s now the block editor and now becomes responsible for the entire site.
So your header, your footer, sidebars, that traditional widget experience that we had in WordPress for a very long time. But even global styles across the full site. For those themes, our file structure is changing. And then the role and type of code we write within our themes is changing.
Many of us would be familiar with that big diagram, that template hierarchy. I remember the project that I found that, and it was just like, oh, this is amazing. This is the greatest resource ever. It just helped me just make sense of so much. The template hierarchy is still relevant, but it needs changes and it probably simplifies a lot within Full Site Editing because where we template our pages are actually moving largely into that WordPress experience rather than just within the code.
Block patterns, in a massive way, I mentioned like these replace page templates. Block patterns are sort of premade content chunks. Could be a hero block, or it could be a contact form section or an about team section, or it actually could be the entire page. Any group of blocks that belong together and are all being starred to work together can be packaged up and saved, and then distributed as a block pattern.
Interestingly enough, I would suggest and I know others would as well that this is a new product category within the WordPress ecosystem. For years we’ve had themes and plugins. Well, most of all, that’s what we have, themes and plugins, but now we have block patterns. And there is a block pattern directory on WordPress.org that’s just getting started and I’m very interested to see how that evolves and grows. I wouldn’t be surprised, but very rapidly over the coming year.
Then we have the custom blocks. And I like to think when off the shelf doesn’t do the job. We have some great blocks in WordPress Corps, great plugins that give us extra blocks like the Genesis blocks plugin is fantastic. I know there’s others in the market as well.
But you could be working with a designer and they’ve crafted this incredible team section on a page that is just on brand and the shadows are perfect, and the border radiuses, and the way it all sort of wraps together on different screen sizes is really, really particular. And that’s, you get to roll with the custom block.
You can’t get that sort of fine-tuned control with off-the-shelf. And that’s what custom blocks are made for. When you need something to behave or function in a really particular way is when you need to be building out a custom block. You know what? Change isn’t easy.
Look, these things sound really interesting and exciting. But if you’ve been in the industry, the web industry in general, but if you’ve been working within WordPress as a freelancer agency, or web team, whatever for some time, you’ll have certain ways you do things. And those ways are probably fantastic, and they work for you really well.
But if you’re wanting to look forward and look at where WordPress is going, and you want to embrace the block editor, we do need a change. But it doesn’t necessarily mean that change is easy. But I would like to think that I can make it a little bit easier for you now.
So number 2, we are going to look a little bit deeper at block patterns, but more specifically, at collections and custom collections. OK, so first of all, what is a collection? A collection is something in Genesis.
So we have the Genesis blocks plugin, which is awesome, it adds a whole bunch of really cool superpowers as far as the block editor goes. But one of the things it gives you, it gives you a library of collections. And these collections are collections of block patterns.
So they are chunks of content. Like I said, could be a hero section, or a services section, or about section, or an incomplete page, the whole home page, landing page, whatever of blocks that are predesigned, and fine-tuned. And starter content has been dropped in.
So a content creator can come along, drop some content, some patterns onto a page that are perfectly on-brand that are all styled, and they just need to go through and tweak the content. Within Genesis, there’s an improved discovery experience is one way of putting it. So basically, it’s not just the native block patterns experience, but we have enhanced that so that you can better manage your block patterns, and discover them, and save them, and favorite them, and things like that.
And ultimately, discover and explore all the patterns that are within all of these collections, and easily find them and drop them onto a page so you can get editing them. So this image that I have here on the right is actually a custom collection that I built for a tutorial about a month ago. It’s called LUX.
It’s a small collection. It’s just a single page, like a home page. I think it was six separate patterns within the whole home page. There was a hero section, there was an about section, there was an our services section. There was a testimonial section.
And anyway, it was pretty cool. And it was all predesigned, like chisel the colors and we found some cool images and stuff like that. But what it meant is that I was able to build a really good-looking, on-brand block first boilerplate page. So someone who would work for this LUX business that I made up, if they need to create a new landing page or new piece of content, they could just easily work with these block patterns that were within this LUX custom collection that I made.
They can either add the hero section, and they could change the title. They could delete the button. If they didn’t need the button, they could change the image or whatever. And so imagine that for your clients. And the content themes that you’re enabling being able to work with these fantastic design templates.
They’re not super locked down like perhaps they could be in the block. Sorry, maybe the old page template way, but they’re not just blank canvas either. These things have been crafted, they’re on-brand, they’re ready to drop into a page and tweak to be whatever they need to be for that landing page.
It’s interesting if you think about what block patterns are, or what they are replacing in a large value moving forward. The role of a child theme I think will change in Full Site Editing world of WordPress. You might have had a Storefront theme from WooCommerce. And there are stacks of really good child themes in the market for that.
They give variations of design, and features, and stuff like that. In a massive way, block patterns are handling a lot of that. So it’s going to be interesting to see how block patterns and within Genesis, a collection which wraps, gives you a whole package of different block patterns. How that is going to emerge, and obviously, we’re leaning into that in a massive way. We’re really excited about where it’s going, and we see these as, like I said, a new product category that people are going to start building out and distributing in the WordPress ecosystem.
So, how can you build out a custom collection? Now, this is a 30-minute session on its own. So I’m going to skim over the top. But that I’m going to refer you to a tutorial that I put together if you want to go deeper. So what you do first before you write any code is you jump into the block editor and you build out your pages.
Like I created a hero section, then a services section, and then a testimonial section, and whatever all the are. And I use the block editor to fine-tune the styling and everything like that. With this particularly on the LUX one, I was able to also use the blocks within the Genesis blocks plugin which gave me some richer controls and styling options, especially around the columns block that it comes with. I think it’s called Advanced Columns, which is pretty cool.
And then once you basically built out and styled your whole page and all of the block patterns within it, you then move into a little bit of coding. You then export it and you start to build out a small plugin basically to handle and package up your custom collection. So it’s pretty simple really.
You have to start with a bit of scaffold plugin, which has some basic files in their, standard WordPress plugin files. And there’s a few folders. We have a startup plugin for that available. You registered the collection, then you also register its layouts and sections which are the block patterns.
And then basically, you then have to, once you’ve exported the blobs of HTML from the block editor and drop that into the plugin, you can just activate the plugin. And as long as the Genesis blocks plugin is also active because of course, there is a dependency to be able to get all the cool features of what a collection is, that’s it. It’s really, really quite simple.
Of course, we skimmed over that there. But if you want to learn a little bit more about how to do all that, just go to the studiopress.blog, it’s one of the more recent ones. But it’s called the Ultimate Guide to Building Custom Collections in Genesis Blocks.
Just to maybe just give you a very quick look at what this looks like in practice, that particular collection that I made, if I go here in WordPress. The plugin that I built for that collection is installed and active on this site. If I go over here find the layouts block which is the interface that we have within Genesis blocks for exploring and looking at all collections.
Look at collections, there’s a whole bunch here. All of these come with the Genesis blocks plugin, or Genesis block pro plugin. But this is the one that I made, the custom one, LUX collections. I click on that. Can see these different page sections. About and process, testimonials, or whatever.
Or here’s the complete page. One click, and everything is dropped straight onto the page, because everything is blocks and everything is styled within the context of blocks, I can very, very easily jump around and make this do what I need to do as far as whatever this page needs to do. All right, number 3.
The third part of this session—Custom Blocks. We are going to look at specifically building custom blocks with a plugin called Genesis Custom Blocks. It is a WordPress plugin that gives us an admin interface. When I say admin, I mean within the WordPress admin. And a really simple templating system for building custom Gutenberg blocks.
Like I said earlier, custom blocks would allow us to do stuff that looks and functions exactly as we need. So an off-the-shelf doesn’t cut it. It’s important to note here that the Genesis Custom Blocks plugin also like the Genesis blocks plugin, which is where collections live, neither of these two plugins are dependent on the genesis framework at all. They belong to the same product suite, I suppose.
But if Genesis Custom Blocks was the only plugin you had installed, you’d be fine. You can still do everything that I’m covering here today. It is available on the wordpress.org repo. And it’s not just some lightweight starter, get a teaser plugin. It is very, very feature-rich what we have in there, which is awesome.
In fact, everything that I show you today is in fact using the free one. There is a provision of the plugin which you can get via the Genesis Pro subscription that gives you a cool, a bunch of extra features. But if you just want to check this out first, go check out the free one on wordpress.org.
The general idea is that either you start in the WordPress admin where you add your custom block. You configure it with a few things. You add fields to it, think of it like you adding fields to a form. And then you publish it, you save it. And then you jump in and start to write some code.
Mind you, very, very simple code for your block templates. Now if you are remotely comfortable with HTML and CSS, if you’ve dropped there a line of code into a functions file and a theme before, look, that’s all you need. It is very, very simple stuff.
That’s the whole purpose of this plugin to lower that barrier to entry to building custom blocks. And then that’s it. That’s it, once your templates done, you can add and use your custom block in any page or post in WordPress which is cool.
Who’s this for? WordPress developers. I do say that this plugin is a developer tool. Like if you solo freelancer through a large corporate web teams use this plugin to build custom blocks. You could be junior. Like I said, you could just be getting started in the world of writing code within WordPress, and you could comfortably use this plugin.
But also, I know a whole bunch of really senior engineers on some pretty interesting agency teams that use this plugin just because of the efficiencies that it gives them. And the value that it provides is it does simplify upskilling development around the block. And it’s at the start of this session, I said look, change isn’t always easy so let’s make it easier, that’s what this plugin does.
It does in general speed up block production. It simplifies iteration as well. Once a block’s in the wild and it’s on production, and you want to tweak some stuff, it is easy to iterate with this plugin. And it simplifies integration as well with third party plugins and apps and stuff.
The other thing about custom blocks in general, but also what I’m going to show you, is an all options versus decisions thing. We’ve all seen or even been on the recipient end of having a page or even WordPress passed to us from maybe a page build or something like that, and just there being a sense of “overwhelmerment,” being overwhelmed, I think is the word, with just the amount of options there are.
There is styling controls for everything like drop shadows, and border radiuses, and widths, and borders, and basically replicating what you can do in CSS into a UI in some cases. And for an end user, content creator, that is intimidating. But then also for the developer responsible for handing that over, we have implemented something according to a really specific design, and it needs to function in a certain way that we don’t necessarily need to have every single option passed through to the end user.
That is one of the cool things about custom blocks. We can remove some of that. We can make decisions about what needs to just belong in the templates, and then what should be passed through to the end user. Anyway, look, enough talk.
Let’s actually build a custom block. It is time for some live coding. All right, I have here WordPress install I’m running locally on local, another cool development you should check out. I have a few plugins installed, but actually only have two.
I do have Gutenberg, actually, you know what? I don’t need that. Let’s deactivate it. So the only plugin that I have active is Genesis Custom Blocks. I told you it didn’t have any dependencies.
The theme that I’m running is a child theme of Storefront. When it says it’s a child theme, it is very, very lightweight and there’s no crazy things. I spun this up myself, so there’s not much going on. Excuse me.
It’s a child theme of that WooCommerce Storefront theme. All right, so custom blocks, Genesis Custom Blocks is installed and active. There’s a few here that I have played around with previously, but we are going to create a brand new custom block.
We’ve been working with a design team and they’ve built up—I can’t, see? I told you. You start typing in front of people and you can’t spell. I still can’t spell. And work with a designer, and they crafted this wonderful page. It’s for the team.
And they’ve designed this section or the component on the page for each individual teammate. And there’s just some interesting shadows and border-radius. There’s a bit of margin overlap going on. And so look, off-the-shelf doesn’t cut it. We need to build a custom block.
So we are going to have a custom block for it. And we’re going to add a field. So like I said, it’s like you’re adding fields to a form. Now, first all, name, for the person’s name. It is a field type text, and we have a whole bunch of different field types.
Going to have this one as text. And we’re just going to make that 50% with if that’s OK. That’s just helps start things nicely for the form when the end user interacts with it. So name, next one is going to be role. There we go, typing. This one is also going to be text, and we’ll go 50%.
Next one is going to be Twitter handle, which is cool. That’s whatever, 50% as well. And then the final one is just for their photo of the best face. And this one, we’ve had three text fields, let’s do something different. Of course, let’s have an image field.
Let’s just have it like that. So let’s hit publish. OK, so we’ve hit publish. And we get this little prompt at the top there, and it’s telling us that the plugin is looking for the relevant block template files. And it’s saying, hey, look I know your current theme is active theme, this Storefront chart.
And looking for this particular folder, blocks. We’re looking for this particular file called Block Teammate.php. So what we’re going to do, jump over to VS code, which is a great text editor, or code editor.
And you see here, here is my child theme. Now I added this directory or this folder called Blocks. There’s those other three custom blocks that I’ve made previously. But we’re going to create a new one here for this block we’re making right now.
Now its important that out the name of our folder matches the slug of the block. Within that, we are going to go just block.php. So that is the PHP template file. We’re also going to have a CSS file as well.
So block CSS for our styling. Now if I just refresh that, yeah, we lose that problem because now it has found the relevant templates. In our PHP file, let’s stub out some stuff.
We’re going to have a wrapping div for this. And I’m going to be class. And I’m just going to go GCB prefix of the GCB. You don’t have to, classes can be whatever you want. And I’m going to teammate—GCB is Genesis Custom Blocks. Teammates block.
I’m going to go an image tag for our photo of the teammate. I’ll have another div here, I think. Page 4 should be about right. That’s where the person’s name will be. That will be for their role, and then this will be for their Twitter handle.
So that would just say, follow me on Twitter. OK, so we’ve stub that out with HTML, and there you go. We’ve actually only got eight lines of code which is nice.
What we can do now is we’re going to work with a couple of functions that the plugin gives us. And what this function does, it’s called Block Field is it fetches the content that the end-user, the content creator, inputs into the custom block when they add it to a page. So open and close PHP tag, block. Once again, can’t type.
Block field, within that, we are going to put the field slug. So oops, well we want the photo one, don’t we? So we want the photo just there. And that’s going to return the URL for that image. And that’s why it will work within the source—excuse me, while it will work within the source attribute.
Let’s now grab that same thing there, and I’m going to drop it in for our name, role, and this is actually going to be— because we want them to follow them on Twitter—Twitter.com/ think that would be the handle, so we’ll drop that into there. So for their name, might be photo, it’ll be name. And for their role, it will be role, once again, matching the slugs of the fields.
And here will be Twitter handle. Let’s save that. Let’s go create a new page. Add new block, teammates, would you look at that? There’s our fields.
Rob Stinson, good guy, is the Admiral. Admiral. My Twitter handle is rob_stino, and let’s get the media library. There I am. Yep, I did click it. And OK, you can see when I click on the block, I get the form.
When I click away, I get a preview of how it looks. Now we’re getting the content in here. There’s the photo. There’s the H4 for my name. There is the paragraph for my role, and there’s the follow me on Twitter.
But let’s just quickly just check us on the front end because we want to make sure it looks good on the front end. That looks good. Actually, know what I’m going to do. I am going to change the—there we go. Actually, no, that’s just—click everything over on the front end.
OK, all right, it’s the content there doesn’t look great. So we need some CSS for our block. Now I’m not going to write this from scratch because no one really wants to watch me write CSS. But we’ve got a little bit.
There’s that class that I added at the top. So I’m just going to grab that, paste that in there. CSS I wrote earlier. Let’s have a look.
OK, giving us some basic styling. We’ve got a little bit of border-radius, some negative margin here. We’ve got this sort of wrapping div. Centered our text, which is cool. Obviously, this is massive.
So what we are going to do is, first of all, let’s give our page a title. And go columns and go three. Then let’s move this up there, duplicate it. Duplicate it, actually, you can see there when we put it in the columns here the 50% width fields looks a little bit funky. So you’d probably just switch that out to being full width, that’s probably a bit better.
And it’s all within the block editor. You can see what it is. And if you click on it, you get the form interface to update the content and change it, everything like that. And then over on the front end again, it’s looking good. So that’s it.
I mean, we flew through that really in the space of less than 10 minutes I think. I was able to walk you through how to our template file, what eight lines of HTML with a sprinkling of PHP through it. 13 lines of CSS, that’s the only code that we had to write. And everything else was in the block editor.
Super simple, and then we have this custom block that we can use within the block editor on any page or any post. And we can change the photos, and the titles, and everything like that super easily. So look, it’s as simple as that. And honestly, you can do some really interesting things.
You would have seen—oh let me jump back to here—I did have these three other plugins as well. But look, these integrate or interact I should say with WooCommerce in interesting ways. They check to see if the user is logged in and whether they made previous purchases.
These plugin reviews block users WP Query, which is awesome. WP Query is a total superpower when it comes to writing PHP and WordPress. It’s awesome, that allows us to use WP Query within our block templates and things like that.
So it is a pretty cool and very powerful plugin, which makes building custom blocks, as you’ve seen, super, super simple. So that was Genesis Custom Blocks. Genesis Custom Blocks is just one plugin of a number within the Genesis product suite.
And if you want to find out more about everything that’s going on with Genesis, head over to this URL, wpengine.com/genesis. Look, thank you so much for your time. I’m hanging around in the chat. If you have any questions, please hit me up.
If you have any questions after the event, hunt me down on Twitter or wherever I am. And please, I would love to help. I hope you learned something. Have a great rest of the Summit, cheers.
