476 – A Look at the Block Editor in 2020
Is there a plugin for that?
With more than 50,000 plugins in the WordPress repository, it’s hard to find the perfect one. Each week, I will highlight an interesting plugin form the repository.
For more great plugins, download my 50 Most Useful Plugins eBook.
Visitor force login page allows you to easily hide your WordPress site from public viewing by requiring visitors.
A Look at the Block Editor in 2020
Here are all the blocks that come standard with WordPress 5.3.
- Most Used (the nine most recent blocks)
- Common Blocks (paragraph, list, heading, etc)
- Formatting (table, code, classic, etc)
- Layout Elements (line break, extra space, columns, etc)
- Widgets (shortcode, archives, latest comments, etc)
- Embeds (embeds for YoutTube, Facebook, etc)
- Reusable (your created reusable blocks)
Thank you to those who use my affiliate links. As you know I make a small commission when someone uses my link and I want to say thank you to the following people. For all my recommended resources, go to my Resources Page
Full TranscriptBusiness Transcription is provided by GMR Transcription.
On today's episode, we are going to talk about all the blocks that are in the WordPress Block Editor in 2020, right here on Your Website Engineer Podcast, Episode number 476.
Hello and welcome to another episode of Your Website Engineer podcast. My name is Dustin Hartzler, and today, like I said, we are going to be talking about the Block Editor and what's new and what's kind of built in there in 2020. I'm a big fan of the Block Editor and I just love all the features that are in there, and I'm going to try to convert each and every one of you to switch from the Classic Editor to the Block Editor, with this podcast. Not really, but that's kind of the goal behind showing you some of the cool new features that are there, that's built into WordPress 5.0 and 5.1 and 5.2 and 5.3. And so, that's what I want to share with you today.
I do have three announcements and a plugin to share. The first announcement is all about Cory Miller is now a half partner, a 50% partner and co-owner of Post Status. Post Status, if you're not sure or aware of what this is, it is a club that was started in January of 2015, and it is made by Brian Krogsgard. And he has a podcast over there but it's basically a community of WordPress folks. There's a private Slack channel, there's private email newsletters, there's a regular newsletter that you can sign up for. But basically, Cory Miller, he was the one that founded iThemes and then BackupBuddy and all those things.
Well, that got merged and acquired just a few years ago by Liquid Web, and then he spent some time there and then he stepped away and started his entrepreneurial journey, and now he is partners with Brian and they are joining forces, I guess, to bring you more WordPress community stuff. And Cory Miller is just a great guy. I met him at WordCamp Dayton a few years back where he was one of our keynote speakers. And he just, a phenomenal guy, loves the WordPress community, loves WordPress itself. And this, I think, is just great news all around. And so, I'm excited to see what happens, some of the potential changes in the WordPress community, and just a little bit there.
There's a link to the article over on poststatus.com/cory, and it has a little bit of information there. There's a short video and there's a conversation, or a podcast, and a video Q and A with Cory, just kind of talking all about what's going to happen and what's going to come into that. So, if you're interested in finding out more and seeing a little bit more about Cory Miller, I recommend checking out the link in the show notes for Episode number 476.
Another thing that came on my radar this past week or so was all about Flywheel. And if you've been a long-time listener to the show, then you know that Flywheel is one of my favorite hosting companies to recommend. And they now have a Tiny plan. And the Tiny plan is $13 per month and it includes two months free. It's billed at $150 per year, but it's basically for one WordPress site that gets 5,000 monthly views, five gigs of disk space and 20 gigs of bandwidth. And so, I think that's a phenomenal option. $13 a month, that's fractions of what it costs. Well, their starter plan, I guess, is at $25 per month and it kind of goes up from there. But if you want really great hosting for just a little bit more than the standard shared hosting, then I recommend checking out Flywheel. There's a link in the show notes for that as well, or you can just head on over to flywheel.com and you're going to find out more information there. So, that's exciting.
And then the third thing is another exciting thing, and it kind of goes along with the theme of the show, but the Block Editor is now supported on the WordPress and native apps. So, the Block Editor now is on mobile devices and so there is all kinds of– So, we'll talk about the Block Editor and what that is, but now you'll be able to use these blocks and use them in the mobile WordPress app, which is really cool. And so, I'm excited to start using that more for the Dustin blog site that I have, and just posting videos and posting images and stuff of my family. And it is going to be neat to see what you can do now with the Block Editor, since I'm a huge fan of it on the computer side. I think it's great that now we can test it out on our phones. And so, that is both Android and iOS. So, those are the three announcements today.
And then is there a plugin for that section? There is one called Visitor force login page. And this will allow you to easily hide your WordPress site from public viewing by requiring visitors to log in first. It's as simple as flipping a switch and then you can make your website private until it's ready to share publicly, or keep it private for members only. This works with WordPress on Multisite and it has a specific page redirect visitors back to a URL if they tried to visit without the login. It's a new plugin on the WordPress repository. There's a link in the show notes for it, or you can search for Visitor force login page, right from the WordPress repository.
All right, today, we are going to talk, like I said, all about the WordPress Block Editor. And I spent some time this week just playing with the Block Editor, just trying to figure out what I'm going to talk about on the show and just talk about what new features or new things or things that we should explore in 2020. And the Block Editor is one that comes up because there's so many people that either really like the Block Editor or they don't like the Block Editor. There's always controversy about these new things. But I absolutely like the Block Editor. I think it's so cool. There's tons of blocks that are built in and I'm going to go through kind of the different sections and we're going to talk about them just a little bit, and it'll just help you learn and know what's there and what is easily added to WordPress without adding any additional plugins. It's also helpful to know that there are other plugins out there that add certain blocks, and so I'm not going to list them here, but there's a bunch of them that you can install.
So, like for example, WooCommerce. When you install WooCommerce, that adds some blocks. And so, for example, it adds the block so you can add reviews, you can show a featured category, you can see featured products, you can handpick products out, you can see newest products, on sale products, products by attributes, top-rated products, reviews by products. And so, WooCommerce is just a great example of a plugin that's giving you the ability to add things to a poster page that before we would have had to use short codes for. And I think that's really the best thing about the blocks. You can use these blocks, or the blocks are there, so you do not need to use short codes for every piece of content that you want to put on your site. And you can rearrange them and you can– It's really, really cool.
So, let's talk about the blocks and how to get to them and whatnot. So, if you've got WordPress installed, or if you are using the Block Editor, you've turned off the old editor and the Classic Editor plugin, then you can go ahead and you can bring up the Block Editor by basically pressing the slash key, and that's the slash next to the question mark. And then you can start typing what type of block that you want. But if you don't know what type of block you want, there's a plus and then a circle on the left-hand side of a post. That will turn out and open up a box that has all of these in. And so, at the top, there's a section where you can search for the blocks. So, you could type in, if you know what you're looking for, you can start typing and you can find it and narrow it down.
But if you don't know, there's one, two, three, four, five, six, seven-ish different columns or different sub-categories that you can expand by clicking the arrow or clicking on it and you can expand it. So, for example, the first one, the top one on the list, is the most used. And this one is expanded by default because these are the ones that you've used the most. And so, for example, there's paragraph, or list, or any of the ones that you've used recently will show up in this list. And it is the top nine blocks that you use.
Now under that you see the common blocks. And the common blocks are things like paragraph, and list, cover image, like a big cover image, image, heading, gallery, quote, audio, file and video. So, if you need any of those things, you've got the ability to put those into a post or page. I think the default is just paragraphs. So, it's going to automatically, every time you hit enter, it's going to create a new block. And those new blocks will be in a paragraph. You can change to a heading, and then when you go to the next line then it's going to change it back to paragraph. It's pretty intuitive and it works really, really well. And so, that is the first one. Those are what's considered the common blocks.
Then there's the formatting blocks and so those ones will be the code block. There's a classic block. There is a custom HTML block. There's preformatted. There's pullquotes. There is a table block, and there's a verse block. And so, the table one is really nice. You click on that one. It asks you how many columns you want. If you want two columns by two rows, you create the table and then, boom, all of a sudden you've got those four boxes all set up and all already for you to go. If you choose, let's see, some of the other ones here. If you choose the classic block, that's basically going to give you the classic block editor or the Classic Editor, if you will. It's a box where you can type multiple lines, and you can add all of those and they'll all be in the Block Editor, and you can highlight and add the bold tags and whatnot.
Even if you don't like the Block Editor, you can use it, or have it enabled, and then use the classic block inside of WordPress to get the same look and feel as the classic block as you're used to. It's got all the formatting at the top. It looks just like it. So, that is under the formatting tab. You would think the formatting blocks would be things like formatting the text, colors and whatnot. But no, these are like the whole block. So, if you wanted to create the table, or have code, or a custom HTML, maybe you're dropping in from a website, says here, paste this code in. That's what you would use these blocks, the format in blocks.
Then there's layout elements. So, if you wanted to add a button or a column or group some items together, or a media text, a more link. So, if you wanted to create like a line break and say more, and continue reading afterwards, you do that. There's a page break, there's a separator, and there's a spacer. So, all of these give you visuals to lay out your page as you like. So, if you wanted to have text in three different columns or two columns or seven columns, you can do that with the columns one. If you wanted to have media on one side and text on the other, you can do that. If you needed to have a horizontal rule as a separator, you can do that. Or if you just need some white space, you can use the spacer. So, those are all the layout elements.
And then we've got widgets, so these are some widgets that you can add to a sidebar or a widget area, but these are also widgets that you can add right into a post, and that's where the short code one is hiding. So, if you do have a short code that you use regularly, maybe the plugin hasn't updated the blocks yet. Then what you would do is you would go in and you would use the short code block, and then you would paste in the short code and then it would work just as it would if you were just pasting in the short code.
You have archives, you can add a calendar and the calendar will show you like a calendar with the past post and whatnot. You can do categories, latest comments, latest posts, RSS search and tag clouds. So, if you need any of those things inside of a poster page, then that's what you would use. You would use the widgets area and get those elements out of there.
And then we've got the embeds, and I'm not going to read all of these because the list is very, very long, but if you wanted to embed something from WordPress or YouTube or Facebook or Twitter or any other embeddable thing, a Vimeo daily motion, meetup.com Kickstarter, Reddit, Reverb Nation, Slide Share, Ted tumbler, Amazon Kindle, WordPress TV, Video Press, speaker deck, all of those things, they're all built into the embed section. And the cool part about the embeds as you add one of those embeds, then it is a playable video. Like if you add a YouTube video as an YouTube embed, you can play the video right from the wordpress.com or the WordPress admin dashboard side of things.
Remember in the past like [inaudible] [00:11:26] use the short code and then you'd have to save it and then you'd have to preview it in order to see if the video actually played. Now you can do that all right from the dashboard and you can make sure that you've embedded the correct video and it's working properly right there on the dashboard side of things. So, that is the embed section and those are all built in.
And then the last one, and again, like I said, there was more in my example here that I'm looking at, I've got Woo Commerce blocks next and other plugins have different blocks as well. But if you don't have any of those plugins, if you just have a basic install of WordPress, all of those are built in. And then there's also the last one on the list is called re-usable and these are cool because you can create blocks for yourself that you use regularly. And so, I just personally, I have two reusable blocks on the show notes pages for your website engineer podcast. The first one is the, is there a plugin for that section? You know, it says all of the texts at the top about there's X amount of plugins and sign up for my ebook and things like that. So, that I put as a reusable block so that I can have the same text on every page. And if I'm ambitious and I want to update how many plugins are in the WordPress repository, I can update it once and then it's going to update it everywhere that that is on the site.
And then the other one that I have is a thank you block at the end and that says thank you. It's got that as a heading. And then it gives you some texts about any links that you click on, maybe affiliate links. I appreciate you using affiliate links on my site or just a small little disclaimer like that. And so, I use those and those automatically appear. And the best part is when you use them, like I said, and you update them in one place, it updates everywhere, which is pretty awesome.
And so, to create a usable block, what you do is you just create a block, you add your text; you add everything that you want. And then above the block there's three vertical dots. And if you hover over it says more options. And then if you click on that, it says add to reusable blocks. And then you can name the reusable block, whatever you want. You can group blocks together and then make them a reusable block and it's really handy in case you have areas or pages or posts or whatever that has the same content over and over again.
Maybe you want to have at the bottom of every poster, you want to have a section for all your social icons or share this or buttons or whatever, sign up for this or listen to my latest podcasts or whatever. If you want to have that on every single page, you could create that as a reusable block and then you would just add it to the bottom of every post and page. And then if it ever needs to change, if you ever need to update that or change, it's going to change site-wide, which is pretty handy.
And so, those are the things that I want to share about the blocks. Each block themselves, like when you customize it and make changes to it or add things to a block. Then on the left hand side or on the right hand side, excuse me, it has the ability to, then you can customize the block. So, if you have a regular block, depending on which type of block you're using, it gives you options to the right for block setting. So, if you just have a normal paragraph tag, maybe you have some text and it's just a paragraph, then you can go ahead over to the block.
You can make the font size, you can change it. Maybe you want the font size to be a little bit bigger. Maybe you want to do a drop cap. So, the first letter is really big. Maybe you want to change; you can change the text size for all the fonts. You can change the colors. So, maybe you want a different background color for that specific section and a text color that's a different color so you can see it a little bit. And then they have the ability to add advanced CSS classes. So, if you wanted to have something specific, if you want to target one specific block, you can create a class for that specific block and then you can customize it in that way.
So, the blocks are incredible new change. And if you haven't tried it, it's 2020 and if you haven't tried the new block editor, which came out at the end of 2018, December of 2018 I recommend this week, spend a little bit of time, spin up a test site, install WordPress, a 5.3 and put nothing on there. And then just turn on the block editor, which is on by default, just leave it on and then try creating a poster or a page and see what kind of flexibility and what kind of extra things that you can do with that that you couldn't do with a tiny MC editor. So, that's what I want to share with you this week. Take care and we'll talk again next week. Bye-bye.