We're six months into me using Gutenberg daily
I can't tell you how much of a fan I am of Gutenberg these days. It's crazy, as I keep finding things I really enjoy. Today I want to tell you about reusable blocks in WordPress because it's so cool.
WordPress writes about it, but it's more valuable to show you.
In yesterday's post, I told you about a quiz plugin. I wrote text and I included some images. But today I wanted to create a specific way to showcase a product. (I called it a product profile.)
If you go back and look at that post, you'll now see what I mean. But here's an image, in case you don't want to click away. I think it looks pretty sharp. That's now in the post because of the work I did today.
What is a reusable block in WordPress?
When I say “reusable block,” what do I mean? The truth is that it doesn't have to be just one block. In my case, as you see in that image, it's several blocks put together.
But I saved it. The one I saved looked like this.
Remember that I use GenerateBlocks Pro – which includes four blocks. There's a container, a grid, a header, and a button. In this design, I'm using all four.
I created a container. Then I put a two-column grid inside it. Then, on the left, I added another container inside it to change the background color and manage the margins.
On the right side, I added a header, then the regular paragraph block, and the table block that comes with WordPress. After that, I added the button.
When I was all done, I saved it as a reusable block. I called it a “generic product profile.”
That way I have it available to me as any other block and I can drop it into any post I want.
How do reusable blocks work?
If you ever used Beaver Builder, you recall that you could create regular templates and global templates. Global templates could be used anywhere in your site, but if you changed it in once place, you change it everywhere.
That's how a reusable block works too.
So now you may be wondering why I would save a generic version as a reusable block. The moment I change it to make it more specific, it would mess up others, right?
Yes, if that's how I used it.
Here's the cool thing with reusable blocks in WordPress
Once I saved the generic product profile, I can drop it into any post I want (like yesterday's post). Then, I can click the three little dots and get a menu item that says, “convert to regular blocks.”
That will turn it into normal blocks and unlink it from the global version.
But that's not where I stopped. It's actually where the fun starts.
Because now I can go into my saved set of blocks and change the text. I can swap out the link in the button, change the logo, and update all the text. That turns it into a specific product profile.
And do you know what I can do then?
I can save it as a specific product profile. In yesterday's case, it was for SQB. But the more I do it, the more I'll have a series of these, all saved up.
And the more I write about some of the same products, the faster it will be to drop in specific reusable blocks. And there will not only be consistency, but they'll look good.
Adding any of them becomes as easy as adding any other Gutenberg block. There's a third tab that shows up, called Reusable, and everything I've created (both the generic and the specific ones) are there.
I did cheat a tiny bit
Before I leave you with the impression that I didn't have to do anything else to make it look like this, I should admit that I did add a tiny bit of CSS to make this work the way I wanted it to.
Using the normal table block, I couldn't get the underline on the bottom of each row, so I solved that with CSS.
And while I could change the color of the text with native Gutenberg, I struggled to change the list icons without a tiny bit of CSS.
But it wasn't a ton, as you'll see here.
.con-checklist li {
list-style-type:none;
margin: 0 10px 20px 20px;
line-height: 20px;
color: #c61e2f;
}
.pro-checklist li {
list-style-type:none;
margin: 0 10px 20px 20px;
line-height: 20px;
color: #259e31;
}
.con-checklist li:before {
content:"||!prliignore9||D7";
margin: 0 20px 0 -30px;
}
.pro-checklist li:before {
content:"14";
margin: 0 20px 0 -35px;
}
.product-profile td {
border-bottom-width: 1px;
border-bottom-color: #111111;
}Like I said, not a ton. But it did make it look a lot better.
So let me simply end by saying if you haven't embraced Gutenberg yet, you really should check it out.