Thank you for attending my talk at the Page Builder Summit! 💕
Follow-up from the Page Builder Summit October 18 – 22, 2021 and the presentation: “Customizing WordPress Block Editor for Client Projects” by Birgit Pauli-Haack
Transcript
Birgit Pauli-Haack: Well, hello everybody. Thank you all for inviting me to the Page Builder Summit. I’m honored to be here, and I can only hope that today’s topic will be valuable to you.
My talk is about how you as an agency or freelancer can start adopting working with the block editor and provide your customers, content creators, a true what you see is what you get experience.
I know we have been promised true vis-a-vig for the last 25 years. We have come closer and closer every five years. The tools and modern software development have really advanced. And I talk to many site owners, freelancers and consultants in the WebPress community, and there have been plenty of sites that still rely on the classic editor for a myriad of reasons. And 80% of our customer sites are still on the classic editor. So don’t feel bad, but it’s also always good to figure out what would I do if a customer would come and want to start using the block editor.
So should you consider migrating your building block enable site? You don’t need to know it all. You can start introducing only some features of the block editor without having to know ReactJS or even build a block. There are quite a few levels of expertise that I will show you where you don’t need any of the React or modern JavaScript to be successful.
So I call them levels of expertise. So level one is style and control. Level two is create block patterns. Level three is adding block styles and variations. And then level four is creating custom blocks with ACF or other tools like genesis blocks or lazy blocks plugin. And then level five is create native customs, static or dynamic blocks.
So this talk was inspired by a conversation that I had with Victoria Ramirez on the Gutenberg Times YouTube channel about a year ago. And I modified it a little bit with adding a few things. And I have for all five levels I show you examples and resources, so you can kind of jump in wherever you think it’s possible for you. But I will also go a bit deeper into level one and level two, to give you a head start.
We won’t have time for the rest. But I’ll share the resources because quite a few developers have gone the path before you, and they share very generously what they learned and what they found. So let’s dive in.
So out of a box we heard in 2018 that any theme works with a block editor. And that is mostly still true today. Mid-2019 two client project managers within a few months of each other came to me and said, “Let’s just enable the block editor and see what happens our contact readers will figure it out. And we’ll just ask you to restrict the color selections to our brand colors.”
And you might know that there is actually a custom color option and one client wanted it to be removed and the other said, “Well, let’s see if it’s a problem first.” So those are the two different approaches. But they all said, okay, let’s just kind of keep the theme, adopt some brand colors and see where the block editor takes us.
So the first step that we did was to, is the theme actually the theme block editor compatible. And for that, we developed a test that’s not rocket science. We create a page with all the blocks and see how they look. And then we evaluate the amount of styling that is needed. And we share our test site as code in the gist that’s kind of linked in the slides. There are also linked to the instructions if you need more of them. And yeah, just so the bit.ly/pagebuilder1021 is actually the link to the slide deck if you want to follow along or use other links that I share.
So with this, we tested our theme. The theme just looks something like this. Yeah. With some blocks in there. And also some additional attributes. But I’m going to show you how that looked in just a normal theme. First, I just tested it in the starter theme underscore. And so that’s graded by automatic and has been a starter theme for many, many classic themes in this space. And I’m click you on that video and it gives you… So it’s a sample test and we scroll through.
We have added the test page and then we scroll through and see how things work or how things don’t work. And for this one, it seems fairly well adoptable. So if you, as freelancers have used underscore and didn’t change a whole lot, except the styling of course, and added a few things you should be fine with the block editor out of the box.
Well, I also tested it with the Naked WordPress starter theme by Josh Beckman. It’s a little bit dated, but it has a few more opinionated stylings already. So when we click on the same video again, you see, okay, the page looks a little bit different but in essence, and we see there are some line height issues that we would need to change. There are also some justification issues. But nothing really that is earth shattering or that would take a lot of time to fix. Well the drop caps there, you could disable that if you wanted to. And that even though the table with the stripes came through.
So that was easy. Well, let’s test one more. I had a client recently, he approached us because their are mobile ranking is very, very bad. So I tested the theme and that’s a theme from 2007. That’s 14 years old. And I just created a page with my blocks and you see it has some line height issues here but we can take care of that. Even the quote comes through with the background image, the buttons have round the corners and the columns look nice. We have a few distance issues there. They’re not as generous with white spaces, other themes are. But nothing earth shattering even there. So that should get you started and make your clients and yourself feel much better about using the block editor on an existing site and not have to do too many adjustments.
So if you want to add a custom color palette then you would need to do two things depending on which version of WordPress you are on. So having a color palette, that means the colors that are in the side bar of the block editor for maybe a paragraph block or the background image and the text color that’s where your custom palette would go.
So depending on which version on WordPress you are. For WordPress 5.7 or older, 5.6, 5.5, you had a two step there. One is to put in the functions, PHP, add the theme support for editor color palette, and add an array of your colors with the name, the slug and the hexadecimal representation of the color. And then you will need to go to your style sheet and add for each color two more classes like has black color and has black background color.
So you had three places to when you want to change your color, for instance here to modify. Starting with WebPress 5.8 or higher there’s… You probably heard that the theme json file was introduced and there was actually introduced for themes that prepare for full-site editing. But guess what? The theme json works also for classic themes. And you could use all the advantages of that for your classic themes when you start out and have it all in one configuration file. So there, you only would need to put in the json file, the settings and then the color, and then the palette with names, slogan, the color and hexadecimal, but you would not need to do the updates in your style sheet because the block editor is styling that out of the box. So you only need to set the palette and then the rest will be handled automatically.
Now, there was this one little thing where you have colors for background and text color. You also have these custom color link that opens up a little window where your user could change any color or add any color that is in that color picker. If you want your, or the customer decides to adhere just to the brand colors. You can remove that either by theme support and disable underscore custom, underscore colors. Or in the theme json you have the settings and then the color and the set the custom to false. So these are few for the custom colors.
Let’s look at the text fonts. You could also do a custom font sizes. Right now the topography selection for paragraph has font sizes with small, medium, large, huge. And in the theme json you can set the pixel sizes for that, but with the custom font size the content creator could change. If you don’t want that, if you want to disable that you just use in the theme json typography, and then custom font size and set that to false.
So that’s kind of a glimpse into how you can just change the configuration of the block editor, add custom colors, add custom font sizes to it and add some styling. And you are golden there. You haven’t touched any JavaScript, maybe just a little bit your functions PHP. But that wouldn’t be the first time that you tweak the theme with through functions and filters in the functions PHP.
The next level I want to discuss with you is our block patterns. They are a complete game changer for Gutenberg now that they’re introduced. They help content creators to use a set combination of core blocks and reproduce a wanted design and section over and over. That could be testimonials or a price list or a header pattern. So you could check out the pattern directory at wordpress.org/pattern.
So sometimes I get the question because some of the early users of the block editor were very taken by the concept of reusable blocks and have used reusable blocks actually like block pattern, because there was nothing available with that. But block patterns are the opposite of reusable blocks. So reusable block is you will use on various places the identical block including the content and you could use it on every page or on 15 blog posts. And when you change the content, it changes every single instance of the block. And so you only have to change it once.
Now, block pattern is, as I said, the collection of core blocks that you can add to your candles and then adjust to your needs. But the previous instances of the black pattern stay the same. So just because you modify a black pattern, now the tenth, you will not change previous instances of that. The block pattern directory is right now in version one, one where you can copy paste of patterns from the directory into your editor. Soon there is also a way to submit that’s designers submit patterns to the directory. Right now they are 84 that are with a design team together and outside designers of course. But they tested also how to translate them and how it all functions.
So version two is coming soon. I just wanted to show you a few more examples of the block patterns that you find in the directory, because it also shows what you can do with them. So the next one. This is a team page kind of pattern, where you have your team member with a profile picture, the name, and the title. And underneath if you want a group of social links and that is repeated in a three-column layout. That’s just beautiful and depending on how the images are that you use for the profile, you can switch out every part of that once you put it into your block editor. Then also a testimonial is there with a little picture there, the testimonial and then the name of the person who said it. And then there is another beautiful header pattern. So check it out. It’s wordpress.org/pattern.
The next part is that you could actually create custom block patterns if you have sections in your new website or an existing website that needs to have the same layout over and over. We have that on our website that called impact stories. We have media and text pattern, one with a picture on the left and the other one with the picture on the right. And then we have a header, a paragraph, and a smaller citation, which organization that is. But there were also some attributes with the media text where we said okay, adopt the size of the picture, apply that background and apply it completely and have these kind of spaces left and right around the text. You can register a category and then register a block pattern that fits into the category. You don’t have to have a certain category. But you see it’s only a four attributes kind of array. It’s in PHP so it goes into your function, PHP.
You need a title, you need a description, the category is optional, and then the content. And when you see the content it’s not quite displayed here well. But you see it starts with a block comment with the attributes in the curly brackets. And that is so you can… And when you grab a pattern from the directory and click the copy and paste that into here, then it would be a new register block pattern for your site. It’s quite interesting to do that.
So there are also plugins available for content creators to create custom patterns without using code. So Marcus Kazmierczak created one just recently called templates, which allows you to actually store your block pattern as a custom post type and then bring it in into your block editor. Jean Baptist Audras also added a block pattern featured to his reusable block, extended plugin, and in EditorsKit by Extendify, that was first built by Jeffrey Carandang and then taken over by Extendify a few months ago. There is a huge selection of patterns and page layouts that you can use.
And if you don’t have enough creative inspiration, there are also quite a few themes now that offer a great selection of block pattern. I think Anders Noren tweeted the other day and said, “When is it enough to ship the theme after 40 block patterns?” So his full-site editing so you can’t just install it as a classic theme. But if you put it up on a test site and add the Gutenberg plugin to it, you can test his theme Tove. That’s the new one. And Ellen Bauer from Elma Studio also has a new theme, it’s called Aino. And Carolina Nymark and the Theme team build the Twenty Twenty One theme also as a block-based theme. And they also have quite a few block patterns that you want to consult and see how they work. So you can replicate something for your clients there.
Here is the resource list for block patterns. There’s a big resource list on the Gutenberg Times. Then there is developer handbook docs on… Sorry, the developer handbook on patterns. And then Justin Tadlock on WPTavern has a post on block patterns will change everything. And so that concludes our level two of… And see how far you already have come without touching any code but still create custom designs for your clients.
And then on level three. Get to a little bit into more code. The level three is add block styles and variations. Adding block styles means there’s a few you more choices in the sidebar for a block, and can also be selected as a default style and variations show up a bit more elaborate in creation and can be found in core for instance for the social icons block or layout elements for different buttons that’s from one of the tutorials out there.
And with the documented block filters you can also add custom attribution and additional functionality that how plugins extend the core blocks. So here are a few more block styles that I found in the wild. Here are two for columns where there’s a style not to use any gutters or horizontal separators. And this is a style for the for list block here with check marks and then block styles for an image where you can… The rounded is coming with core but then one plugin also had the bottom wave and the top wave for the images.
To dive in a little bit deeper into block variations. So they’re more elaborate rather than just styling. There’s also additional functionality in there. Like for the block variations for the core columns, you see for instance a two-column variation. A two column with a 50/50 split and a two column with a 30/70 split either way left or right. And then a three-column split with the same size or 25, 50. Those are variation that come in with the block into your site.
Here is an example from one of the tutorials where they had a one block that has some additional information about a portfolio. Like a page intro where they identify the client and the role of the organization with the freelancer on that particular project. And so they don’t have to design it every time when they add that to a block. They just can use their block variations for that. And you see in that little box here, that’s also coming through the inserter of the block here.
So on the next slide, I have a few articles that dive deeper in those topics. As I said, we don’t have enough time here. But you will be able to kind of follow along on those. Yeah. With add custom size, a White Pixel is a great site to visit about Gutenberg blocks and development. Then there is the dev note when the block variations API was introduced into WordPress, then how to use block variation WordPress at the CSS-Trick site, extending Gutenberg blocks with custom attributes and controls by Jeffrey Carandang. And then the reference guide and a crash course on WebPress filters. So that should get you all started and successful on block styles, variation, and block filters. And that concludes the level three.
The next level is… Okay. So we needed to add data to it, like in a ACF and advanced custom fields or other plugins. We also not only manage content, but also data. If you think you need custom blocks and you’re not comfortable with ReactJS and modern JavaScript. These three plugins help you out in building custom blocks.
Nowadays, there’s also the parts framework, which just came out with version 2.8 with a block integration. There’s also a tool set that helps you create blocks. But the Advanced Custom Fields Pro, Genesis Custom Blocks, prior to that, it was called Block Lab, and the Lazy Blocks. I wrote an intro kind of comparison article for the WPTavern quite a while ago by might still get you started, or at least thinking of how to select which plugin to select and to work with it. If you are already a customer of Advanced Custom Fields, get the pro version and so you get also the building of the custom blocks.
And then level five is creating custom blocks with ReactJS. There’s plenty of getting started information available. The official scaffolding script create block creates everything that you need for a plugin with a single block and Ali Alaa and has a course on Udemy on Gutenberg blocks for WordPress and react developers.
There is certainly also a build block series. Marcus Kazimierczak also has a short series. I think it’s seven steps or seven block posts. A White Pixel also has a tutorial series to create Gutenberg blocks to follow along. And then the Udemy block.
And we’re coming right about to the end of the talk. I just wanted to point out there is a Gutenberg Times live Q&A happening on October 28th at 1600 UTC. That’s noon Eastern US. We call it case study for converting classic widgets to blocks for BuddyPress. So we will have a discussion with the team members of BuddyPress Mathieu Viet, David Cavins, and Varun Dubey will tell us how they transformed in very fast succession dozens of classic widgets in two blocks for the WordPress 5.8 release. They also will be there to answer your questions. Link is in the slide of course.
So that’s all I have for you today. You can certainly stay in touch with me on the WordPress Slack or on Twitter with BPH. My DMs are open, or you can reach me via email at [email protected].
Check out our YouTube channel, youtube.com/gutenbergtimes where we posted all our previous live Q&A over the last two years. And then every Saturday I send out a weekend edition of hand curated links from the community and from the Gutenberg development team. So you can keep up with Gutenberg. The slides, as I said, are available under https:/bit.ly.ay/pagebuilder1028. And that’s it. Thank you very much. And I’ll see you around the internet and in the community. Bye-bye.
