On today’s episode, we’re going to continue to talk about the new editor in WordPress 5.0, and today we’ll talk about creating reusable blocks right here on Your Website Engineer podcast episode No. 422.

Hello and welcome to another episode of Your Website Engineer podcast. My name is Dustin Hartzler and I’m excited to start off this brand-new year. It is the first Tuesday, I guess it’s the second Tuesday, but the first Tuesday that I’m at work, and the first full working week of 2019. I’m just excited to be back. It looks like I’m getting back into the swing of things, getting back into a daily routine, and just getting back into WordPress in general.

If you’ve been listening for the last month or so, December was crazy. I was in four different states, we moved into a new house and tried to unpack a bunch of boxes and I literally had no time for WordPress for the most part. I was looking today when I was updating my WordPress site into WordPress 5.0, I hadn’t even got that far yet, and it had been 54 days since I had made any updates to yourwebsiteengineer.com. That means I haven’t updated any plug-ins or done really any changes in 54 days. I’m a little embarrassed to say that, but then also December was a huge time just to spend time with family and just kind of immerse myself into getting a bunch of things done that were outside the WordPress space.

This month I’m dedicated to learning more about Gutenberg, this new editor we have in WordPress 5.0 and we’re going to dive right in today. First, I’ve got two announcements and a plug-in to share with you.

The first announcement is introducing the “Anything is Possible” list. WordPress.com released on a blog post on January 3rd about “Anything is Possible” and it goes through and it talks about – it’s got the 14 inspiring sites from 2019 with “Anything is Possible”. There’s NappStar, there’s It Gets Better Project, Orange Street News, The Sewchialists.

There’s about a handful, half a dozen or so that have come with images or come with videos of what the project is all about. Ideas Beyond Borders, Rebrand Cities, this is a good one that I participated in last year about this time. It is a major obstacle that Hajj Flemings has noticed that small businesses in American communities, they just don’t have websites. So, Rebrand Cities works to bridge the gap by bringing small businesses online and there’s a bunch of initiatives all around the world. They started in Detroit and now they’re moving across the world.

Just stories like that are highlighted there, there’s a link in the show notes for episode 422, if you want to see these and read about some of the projects and what’s going on, it is just a neat post. There have been tons of feedback and tons of traction with these posts, and people sharing them all over the world, what you can do with WordPress. These are specifically sites that are on WordPress.com, but you can imagine what can be done with WordPress in general. That is the first piece of news I want to share with you.

The other thing is if you head over to Jetpack.com, that’s the Jetpack blog, and select the blog tab across the top. They’ve been running some blog posts recently that have different – they’re just blog posts for setting up the perfect type of website. The first one that was written on January 9th is how to create the perfect barbershop website with WordPress and Jetpack. Then the next one was let Jetpack support you in creating your school website. It gives some ideas of how to create a calendar and do different things. It talks about how to generate more leads in 2019 with Jetpack’s new form block.

It just has a lot of not really to-do’s, but it’s a great way to go in and read some articles and figure out, okay, this is how you can do this, kind of like step-by-step tutorials, all how to use Jetpack features. There’s one here in the next one from December 29th, there’s three website design considerations for tattoo shop owners. It’s kind of neat, I haven’t seen that done on Jetpack. Usually their news page or their blog post page is all about here’s the update; here are the new features types of things. It looks like they’ve really put hands down on doing a lot of content here to start the brand-new year. That is over at jetpack.com/blog or you can find the link in the show notes for episode 422.

Then the last thing that I want to share with you today is a plug-in called Dynamic Recipient for Content Form 7. It’s kind of a mouthful of a plug-in and it’s a real basic plug-in, but it does one thing really cool. It allows you to dynamically set recipients of mail using a filter. Basically, what this is, if you’ve ever used Contact Form 7, it’s one of the most basic, most downloaded plug-ins in the WordPress repository for forms.

How it works is you specify in them, when you’re building the form out, maybe you want to ask for the name, email address, contact phone number, all that information in your message. And then a part of the setting up of the process you say, “I want to send this email message to this email address,” and then anywhere you embed that form it’s going to automatically send that – the context form submission is going to go to that email address.

Well with this plug-in, Dynamic Recipient for Contact Form 7, it gives you the ability to go in and set on a page-by-page basis, or if there is a drop-down menu of select different departments, you can really go in and you can dynamically move those messages or send those messages to the right place. It’s great for if you have a form on your contact form that’s like, “Do you want to talk to technical support, or sales, or billing?” And then those will route those emails in the right direction.

So, if you’re using Contact Form 7 and you need that dynamic ability, I would recommend checking out this one. It’s a pretty basic plug-in, but it’s got more than 1,000 active installs, and so that’s a pretty significant amount when it comes to a WordPress plug-in. Check that out in the show notes for episode 422 or as always you can find it in the repository under Dynamic Recipient for Contact Form 7.

Alright, today we want to talk all about creating reusable blocks, and this is probably my most favorite thing about WordPress 5.0. I probably say that every week, “This is the most favorite thing that I have,” but it’s cool. I got around doing this years ago by creating my own custom short codes. If you ever look at a blog post that comes out with a new podcast episode for yourwebsiteengineer.com, they all look similar. I’ve got announcements at the top, and then I’ve got is there a plug-in for that section, then I’ve got the main show notes and whatnot, and then at the bottom, I have a thank you page that talks about the affiliate links and thank you for using affiliate links and whatnot.

How I do this on a regular basis is I created a text expander snippet. If you’re not familiar with text expander, I type in some very – a short key word. Mine, for example, is sshow, and that’s going to expand out and it’s going to put announcements with a markdown, it’s going to say ##announcements so that gets me my H2 tag, then it enters down a little bit and then it says, “Is there a plug-in for that?” as my title, and then I have a short code called e-book, which gets me the couple paragraphs that says, “With more than 50,000 plug-ins in the WordPress repository it’s hard to find the perfect one. Each week, I will highlight an interesting plug-in from the repository.”

I see that I spelled from, I spelled it form, and so I can see that I need to go in and change that. What I did is when I put it in as a short code, I wanted to be able to go in and like, “Oh, now we’re up to 54,000 plug-ins.” I can go in and edit the short code and since the short code is edited, then it’s going to update everywhere across my site. That was kind of the idea behind it, and that’s kind of the idea beyond these reusable blocks inside of the WordPress block editor. If I wanted to go in, I could do it right from the dashboard.

Let’s talk about how to do it, and we’ll talk about how you can edit those, and those edits disperse across your entire site, which is cool. Now I’m contemplating, do I go back and do a find and replace for the e-book and then just replace that with my reusable block? Again, that’s going to take forever because I have 422 posts. Do I do a find and replace in the database and do that? Then when I change that and make sure that it’s all like that, I don’t know, I’ll have to think about it and see all the functionality and see all the functionality that is inside the reusable block.

That’s one of the great things about this new editor. I’ve kind of described it and it really solves that problem of, “Hey, I want to use this content over and over again.” Maybe if you want people to follow you on social media, and you want to put those at the end of each article, you might want to have the same thing on every single page.

Maybe you want to have a call to action button on your WordPress posts and pages, or maybe you put something right in the middle like, “Sign up for my email newsletter,” and you want to put that right in the middle of your content, you could do that. Maybe you want to save and reuse tables within your WordPress site or add feedback forms or add affiliate banners or anything. Anything that would be repeating on a page-by-page basis or maybe every fourth page basis or whatever. That would be a good candidate for creating a reusable block in WordPress.

So, let’s talk how to do this. First, all Gutenberg blocks are individual content elements in the WordPress Editor and they can be saved individually as a reusable block. It’s also important to know that when you’re creating this, you can have usually in the Gutenberg editor, the WordPress block editor, when you type a paragraph or you type one sentence and then you hit enter, that’s going to create a new block. If you want to have multiple lines in the same block, if you hold shift down, if you do shift, enter, enter, that will put a space or a line between the two paragraphs. That’s just a side tip.

You first need to create a new post or create a new page or edit an existing one. This is how we get started with creating this reusable block. Then on the post edit screen you click on add a new block and then you can choose the block type. If you wanted to have for example a block quote that’s around, or just a regular paragraph, you would select which one is the closest, maybe it’s a list. You would select that type of block first, and then you can save that.

Let’s just talk through creating a paragraph block, maybe we’ll do a social call to action or something. After you add the block, you add the content you want to use. You can use the styling and formatting options on the block tool, so maybe you want something like, “Did you find this article useful? Let us know by leaving a comment on Facebook or Twitter.” Maybe that’s what we want and we have a link for Facebook and we have a link for Twitter, and we want that to stand out so we can edit that block and have a background color of green or a background color of orange, or we can have a drop cap or we can have a font size bigger or smaller or different fonts, whatever.

When you’re done editing, once you have it exactly the way you like, there are three little dots at the top of the formatting bar, where you can right or left justify, you’ve got bold and italics and links and all that kind of stuff. There’s the three vertical dot menu, if you click on that one of the bottom options right before the remove block is the add to reusable block. What you do is you click on that and it’s going to ask for a name. If this is a social call to action button, we’ll call it, “Social call to action.” Then you click the save button, and your block is saved in the database with all its settings.

If you want to go to another post, another page, it’s already there, you just go ahead and create a new – you get ready for a new block. It’s located underneath the reusable tab and so if you click on the plus sign with the circle around it, it’s going to show you layout elements and widgets and all the most recent ones, but then the very bottom is reusable. It will have an icon for the social call to action if that’s what you called it, or Twitter followers or whatever you called it, whatever you typed in the box, that’s what it’s going to say in the reusable block section. You can mouse over, and you can get a quick preview of what it looks like, and then you can click on the block to insert it into the post. It’s going to appear just like it did in the previous post and when you’re editing it’s going to show like that right in the post editor.

Say you get this in the right place and you’re ready to go but you’re like, “I want to edit this just a little bit more for this particular post.” What happens then? Then you have to click on those three dots again and then go convert to regular block. Once it’s converted to a regular block it’s going to keep the styles and formatting as it was but then you can change it and modify it and it won’t be affected if you ever change the reusable block template, if you will.

For example, this would be a good idea if you wanted to say, “Read my latest blog post,” or, “The book I’m reading today.” Something that’s going to change on a post-to-post basis, you can create that reusable block and then on each page you can pull it up and use the formatting, convert it to a regular block and then put whatever text in there that you like. That’s how you create – if you need one that needs a little adjustment, and it’s a little bit different than the rest of them.

Now if you want to manage all the rest of your reusable blocks, this is pretty easy to do as well. When you start to add a new reusable block, and then at the bottom it says, “Manage all reusable blocks.” To do this, you click on the plus with the circle around it, again, like you’re adding a new content block. Then you scroll all the way to the bottom and grab the reusable one. Right underneath that is where it says, “Manage all reusable blocks.” Clicking on that will bring you to block management and from there you can edit or delete or export and import your blocks.

And so you can go and get all those all set up exactly the same. It looks just like the post editor or the pages editor and you can go in if you have a typo or something you want to change, you can go ahead and do it there. If you want to make a change or an edit inside the post itself, like maybe you’ve added a reusable block and you’re like, “Oh, I see a typo, I put from instead of form.” You can go ahead and do that right there from the post editor, you click on the edit button, you can change it, and then you click save all within the block itself and then that’s going to change it sitewide everywhere that Gutenberg block or that block editor block is displayed it’s going to update, which is really nice. It’s really cool.

Then the other feature that’s just way awesome when it comes to this new block editor is that reusable blocks can be used on other sites, so if you have a site that’s very similar or you want to tweak them or you’ve set up websites for five different businesses but they’re very similar or they have the same template or whatnot, you can create all the blocks in one. You can export them on a block-by-block basis, so if we want to do this social call to action button in the block editor screen, you can hover over the export as JSON file and you download that and then you can go to another site. Go to the same area, the WordPress site admin area, go to the block screen management and click on import from JSON button.

This will show you a file upload box, and you can upload those files, and then you can use those. All those changes are saved to the database and you can start using on a new site. I think it’s cool and it’s going to save a lot of workflow and headaches. For me to update my short code, which I’ve added, I have to go into my custom functions folder, I’ve got to upload it or save it, I have to save the version to get, I have to upload to my server, and it’s kind of a pain. That’s if I remember to do that. That’s another additional step.

When I have it saved as a reusable block right inside of WordPress, I just edit it there, hit okay and I’m done. The other really cool part that works well is when I have email blasts that go out, I believe I have email sent out through Jetpack, and Jetpack is the one that sends out all the automated email. So, when I hit publish, Jetpack will send out emails to people that have subscribed, it always has the e-book short code show up, because the email parser doesn’t expand the short code. It just says, “Short code,” and spits it out, and so that doesn’t look very good in email messages. I’m excited to try this and see what it looks like.

That way when I’m ready to update and there’s more than 52,000 plug-ins or whatever that number is, I know that the 50,000 that I have now is outdated and needs to be updated more, but that’s something that I need to work on and figure out if I can do a bulk replace and what does that look like, converting some of these old pages all the way over to the new version. That’s a project that I’ll probably get to months later, whatnot, but starting with episode 422, I’m going to create the entire post inside of Gutenberg and work through that process and create reusable blocks for both the “Is there a plug-in for that?” section with the e-book and with the “Thank you,” with the affiliate links and whatnot at the bottom of each page.

Then I’ll continue to use those and see what that looks like and work through that and just see. It’s all about exploring right now. Remember, when you start with Gutenberg or start with this new block editor, everything in the past, everything that you’ve already created is not going to be affected. It only starts with changes starting today or whenever you updated to the latest version.

I’m excited just to try it and see if it makes life easier, or does it makes life easier? Is it harder? How can I improve my text expander snippets, so they work better? Maybe I’ll create the block and then I’ll copy all the block code into text expander, so it automatically expands and then when I copy and paste it into Gutenberg it’s going to auto expand. I don’t know. I’ll just have to play with it and see what that looks like and see how this new experience works inside of Gutenberg.

I’m excited to continue to learn about Gutenberg and the new block editor this month and I’ll continue to bring more episodes this month talking about the new things you can do with WordPress 5.0. Don’t worry if you’re still using the classic editor inside of WordPress 5.0, there are plenty of things and plenty of time to upgrade and spend some time learning about how it works before you dive in and turn off the classic editor plug-in. I’ll continue to update you in the coming weeks about what changes I’ve been making and how my life has improved with this new block editor. Until next week, take care and we’ll talk again soon. Bye-bye.

Male Speaker: For more great WordPress information, head on over to yourwebsiteengineer.com.

P.S., if you have any cool things that you’ve learned, or you think is awesome about Gutenberg, let me know. Send them over to dustin@yourwebsiteengineer.com, and we’ll talk about them on an upcoming show. Take care, bye-bye.