On today's episode we're are going to talk all about how to test Gutenberg and get ready for WordPress 5.0, which is coming in just a couple weeks, right here on your Website Engineer podcast Episode No. 413.

Hello and welcome to another episode of Your Website Engineer podcast. My name is Dustin Hartzler and today we're talking all things Gutenberg. We're talking about how we can test Gutenberg, how we can install it, and how we can start getting ready, and getting our sites ready for WordPress 5.0. I've got a couple announcements to share with you, a plug-in of the week, and then we'll dive right into the content. The first announcement came out yesterday, October 30th or yesterday as I'm recording, and a Beta 2 of WordPress 5.0 is now available. It's still a development software so don't recommend using this on your live version of your sites, but you probably want to set up a test version to try out this new version. It's interesting that WordPress 5.0 is actually WordPress 4.9.8 plus Gutenberg. So, there are not a lot of feature changes other than the fact that Gutenberg has rolled into WordPress core. The scheduled release is still set for November 19th, so we're talking about three-ish weeks away until we're ready to go and there have been some changes since Beta 1 that came out last week. They're updated to a latest version of the block editor from the Gutenberg plug-in, they've got some international liaison support, so that's good.

And they also have in 2019, that the new theme that's coming out with WordPress 5.0 in 2019 they've had a widgets have been added to the footer, navigation submetals have been implemented for mobile devices, and customizer options have been added for changing theme colors, features, and filters. And then there's a lot of changes with the REST API 7.3 for PHP has been compatibility has been improved as well. And so, we've got WordPress 5.0 Beta 2 ready, and ready to start debugging and try to figure out if it's going to work on your new site.

The other piece of news that I have is from WP Tavern and it is Upcase development learning platform is now free. It's a subscription learning platform for developers is now free and open to the public. It includes topics like workshops, videos, flashcards, and coding exercises. It was built by Thoughtbot, a design and development consult agency. And it is just a – it's a platform that people can go, and you can learn different things like how to write clean code or use Git, or Ruby on Rails or testing your iOS. I'm always interested in these different learning platforms, these eLearning platforms so I thought I'd point out Upcase. So, if you're interested in learning more about JavaScript or some sort of tool that you've never used before, I recommend checking out Upcase by Thoughtbot and the link is in the show notes for Episode No. 413.

Now since it is a Gutenberg episode I thought I'd come up with a plug-in of the week that is a Gutenberg plug-in and this one is called a FAQ block. And it is a block for Gutenberg, with it you can easily create frequently asked questions on your page, on your website very easily. You just add the block for each question and you're done. It's got full CSS, there's no JavaScript and it is fully CSS based and it's easy to customize for your theme. And so, you basically can create these FAQs that you can rearrange on your screen and it makes it really easy to come up with a page. It also has the ability to collapse and so you can have all the FAQs on one page and they can all be collapsed and then you could open them up and people can read the answers to the questions. So, it's a cool plug-in, it is something that just came out. It's on the WordPress repository and so if you're interested in a FAQ block when you are testing Gutenberg, then I recommend checking out this. You can search a FAQ block on the WordPress repository or find the link for it in the show notes for Episode No. 413.

All right today let's talk about testing Gutenberg and how to use Gutenberg, and the things of Gutenberg. There's a lot coming on and we're gonna be talking about Gutenberg for I believe months on months on end. Even though that it's no longer kinda gonna have the Gutenberg name, I believe that they're gonna go – it's gonna be codename Gutenberg but I believe it's going to be known as just the front-end developer, the block editor if you will. And it's the visual editor, it's gonna be the new way that we can form posts and pages and write content for our custom post-types and whatnot. And so, let's go ahead and just kind of dive in, we'll talk a little bit about what Gutenberg is. Just so you get familiar with what the terms are and then we'll talk a little bit about how to install in, get it ready, and how to test something in Gutenberg.

So, the current WordPress visual editor hasn't changed in many years and it's stayed pretty much the same since the inception of WordPress. It hasn't changed a lot but I think that's where we're kind of at the point in the WordPress space and with competing with Medium and some of these other platforms that make it a little easier for people to create the content that they really want, an update or a refresh to the browser, a refresh to the editor is a big thing. It needs to happen. And so, one of the tackles or the projects that was set out, just – I mean, it was more than a year ago. They started to tackle was how do we redesign and how do we build this new editor. And that's what Gutenberg is, it's trying to conquer that tough problem of how to make it easier to format and build out posts and pages to make it easy, without a lot of – to make it more intuitive and make it easier and make it fun to continue to write blog posts on your website. It's named after Johannes Gutenberg who invested the printing press with movable type, more than 500 years ago.

The current visual editor requires a lot of utilization of short code and HTML just to make things work kind of well. If you came up with a sketch, if a designer gave you a sketch of what a page should look like, it would take a lot of kind of shoehorning things in and creating these short codes, and then writing some HTML and maybe embedding some of the things and it was just a lot of work to make it exactly what you want it to be. The goal with Gutenberg is to make it easier, especially those first starting with WordPress. They are embracing the technology of what they're calling "little blocks" to hope to add advanced layout options. And so, the developers have been working really hard on this. I mean, it has been going on for like I said, months. It's been at least 18 months from some of the original tweets that I've seen. One of the other really cool things about Gutenberg is that there have been more than a quarter million websites running Gutenberg and doing some testing and so, it's been one of the most highly activated, active community when it comes to figuring out and testing, and working with this Gutenberg plug-in.

So, there's two different ways that you can get going with Gutenberg plug-in. You can go to the WordPress repository and search for Gutenberg. And you can find a version of the plug-in there. Or as I said earlier, now WordPress 5.0 Beta 2 is now available so you can go ahead and you actually can install that by going and installing a there's called a WordPress Beta plug-in – there'll be a link in the show notes for this as well – and you can install the "bleeding edge nightlies" they call it. And so, it will have the latest version and so, that'll have WordPress 5.0 Beta 2.whatever and it'll continue to just keep updating every single day and so you'll have Gutenberg baked right in. Now after you install Gutenberg and I guess it depends on which version you install, if you install the Gutenberg plug-in, it's going to be a little different than if installed the WordPress version, but essentially what happens is now the link that you would click on or the edit link underneath a poster page, now will take you to the Gutenberg editor instead of the old classic editor where you have the visual and the HTML version. Now it's gonna take you to the Gutenberg version. If you don't want this, if you want the option to do a regular editor, then you'll have to install the plug-in called Classic Editor and that brings back the old, tiny MCE editor that we've grown to know and love. And so, those are a couple ways to get started. So, if you – do you have a website? I highly recommend just cloning it and creating a copy of it maybe on your computer with DesktopServer or a local by Flywheel, or if you have a staging site by WP Engine or SiteGround to whatever you're hosting company is you can create a clone and then probably the easiest way is just to install the Gutenberg plug-in. And that's gonna be easiest way to get you up to running and checking on something that are going on with Gutenberg.

Over the past week I've been working through yourwebsiteengineer.com and I've got it on my – my test site is on the local, it's locally available on my computer and I've been just playing around with seeing what it looks like. I went ahead and installed the Gutenberg plug-in. I felt that that was a little easier for my development set up. I didn't want to fully go to WordPress 5.0 quite yet. And so, what I did was I installed it and then I went to the post section and I took a look and I do see all of the things that I'm talking about. The new editor, it gives me the ability to go to the Classic Editor because I've installed the plug-in, and you can see if I click on the title of the post or the edit button right under that from the 'All Posts' menu, I can get to the Gutenberg editor. Now, the thing is if you've been following me over the last couple weeks, I did redo my entire site and move all of my podcast episodes from the normal post area to the podcast area, and so with that since that is in a custom post site, it didn't automatically show up Gutenberg. There is a line of code that you have to add inside your custom post type when you're defining it. And it basically says the argument is 'show_in_rest' and you have to set that to 'true'. I'm not exactly sure what that means or how that works, but I ended up having to set that parameter to be able to see Gutenberg in my custom post type. So, that's really nice.

And so, as I click on and open up one of these, I can see – the big thing that I see is it looks different. It looks a lot cleaner. It looks really cool actually. I think the cool part about Gutenberg is that it is really fast and that's something that's – I don’t know – as technology moves on it just feels like things are getting faster, and faster, and its all about JavaScript and it's all about how JavaScript works that makes it feel so much faster and I think that's a really good thing. I do notice that all of the setting and parameters, and all the stuff, a lot of the stuff that was in the right-side bar on WordPress, an older version of WordPress but the Classic Editor is still on the right-hand side. But what I noticed is the editor area is really clean and in BASIC, but it is kind of shrunken. There's a lot of border on both sides and I don't know if that's just the way that my screen looks or if its – it's still showing that I'm using Classic and that's maybe because it's just put everything into one big block instead of having it into multiple blocks because I haven't had the chance to convert.

So, basically if you turn Gutenberg on for the very first time it's going to give you a classic block and it's going to put all of your content in this classic block. And so, it's just gonna be in one block. As going forward, each new section of your website is going to have a block itself. So, if you type a heading that's gonna be a block. If you type a ordered list or a list of bullets, that's gonna be a block. And the cool part about Gutenberg with all of these blocks, it seems unintuitive to have like every single thing in another block, like if you have a four-paragraph blog post, each blog post is going to be in a different block. But the cool part is you can drag them, and you can rearrange those blocks really easily. Or maybe you want to turn on into a block quote or make one paragraph different than all the rest, and that's the flexibility and the benefit of using Gutenberg, you have those options. So, let's go ahead and just talk through a few more options or a few more things and kind of visualize this in your head as you're listening.

So, you open up a new post or open up an old post with Gutenberg now. And you have on the very left, of course, is the WordPress menu and then in the middle, the big middle column is your editor. This is where the block editor is. This is where you're gonna design your posts and pages. And then on the right side, it's got all of the settings. So, you've got document setting, you've got block settings, you've got – it shows where your revisions are, so you can access those. It's got the categories, the tags, the featured image, the excerpts, and the sharing. And so, all of that stuff – most of that was already on the right-hand side, the only thing that moved there from before is the excerpt that used to not be on the right-hand side. That used to be down at the bottom, but that now is on the right-hand side. And so, as I'm looking at this when I have nothing selected, it gives me the ability in the document settings, and it basically has the status and visibility.

So, it says that it's a public post and it tells me the date that the post was published. And the cool part about about this is if you want to change the date or if you want to set a date in the future, it actually has a calendar to click on. Who would've thought that? For years we've just been adjusting the date and you have to go look up, okay, what date is that? Now you click on the date and you can pick the time, and you can pick the date just by selecting on the calendar, which is really nice. And as soon as you change anything you'll see the 'save draft' button kind of flash at the top. So, every time that you do something inside of Gutenberg it is automatically saving for you, which is really nice. And it saves a lot. And so, you don't have to worry about ever losing your content.

On the right-hand side that categories tags, featured images, all that stuff is kind of hidden by a down arrow. You click on the down arrow and it expands. And so, that's a really nice way to keep things nice and tight and I believe if you open some of them up, you'll be able to – everything you come to a new post or a new page, like if you keep the categories section open, it will stay open on the next time that you open a new post, when you create a new post. And so, that's what that looks like on the right-hand side. Now, there's also these block settings and so, it's all still on this right-hand panel, but you have to select a block first. And so, if you select a block, if there are options they'll be there. So, let's go ahead and I'm just kind of playing around here as I'm live recording here and I'm gonna add a new block. You click on the plus arrow. There's a plus with a circle around it and then you can look for blocks.

And so, I see one for Ninja Forms. I've got Ninja Forms installed on my site. I can have a paragraph block, an image block, a heading block, a gallery block, a list block, quote block, audio and cover block. So, those are the most used ones that they're said, but there are tons of common blocks like if you wanted to a – let's see what else is in there – there's formatting ones, there's layouts, there's widgets if you wanted to add a widgets. I see that there – I have Yost installed and so Yost has a few blocks that are built in that you can use. There's Embed so if I wanted to use an Embed from YouTube, I can go ahead and do that. Let's go ahead and do that. I'm just gonna an embed form YouTube and then you add the YouTube URL. And so, basically you just paste in a URL and it will automatically show up inside of your – in your post. So, you go ahead, and you paste in the URL, you click 'embed', it's going to embed, and you can watch the video right there in your WordPress dashboard, which is really cool.

The other neat thing is you can just start typing and if you do a slash, if you do a backslash, and then you can start typing and maybe you say a 'backslash', and then you say 'paragraph' or is it 'text'. You can do media and text. And so, then you can go ahead, and you can drag-in media files or you can add content or whatnot. And then, on the block side it shows now okay, so, a paragraph, you can have a drop cap, so you can have a big letter and then the rest of your text is small. You can set the color setting, which is nice, like on a – that's on a per page or per post basis or even a per block basis, you can set the colors. This was one of the things that really frustrated me to try to explain to folks when they're using WordPress, like how do I change a color, how do a change the font. Like, you can do that now on a per block basis, which is really nice. You've got advanced features in these and you can call, or you can set an additional CSS class. So, if you had a special CSS class that you wanted for certain things, you could set them in the content area itself and then you can automatically – then the CSS would automatically work for that block or that post or whatnot. So, it's really nice.

I'm still trying to figure out what to do or how to convert a classic block into a Gutenberg block and does that make sense to do it for all 400 and some posts? Or do I just do that from when 5.0 comes out and moving forward? I'll probably just kind of work currently. So, when WordPress 5.0 comes out then I'll just start with next – the first post will be Gutenberg-ified, I guess and then kind of work backwards if I really feel the need to work backwards. You know, it really depends on if I want to do some advanced customization. You know, maybe in the 'is there a plug-in for that' section. Do I want to have that kind of as a block that you can set? And within Gutenberg you can save blocks as drafts and then you can just pull those down and say, "Oh, there's a plug-in for that." I want to use that section in my show and then you can – I don’t know, it's going to be interesting to see what it looks like, but in general what you do is you type in the name of your post and then you can hit tab or enter and that will move you down into the editor section. And then from there you can just start adding the content and the copy.

So, if I created a brand-new post I would say, I would type in like '413 testing all things Gutenberg' so 413 testing Gutenberg and then I can hit tab, and then it's going to create a paragraph block for me. So, it's automatically going to create a paragraph. And my first thing that I always put in is announcements. If I want to do announcements normally I have some markdown written so I do ## or the hashtag twice, and then I do announcements and as soon as I type the ##, it automatically disappears and gives me a block that is a heading block, which is really nice. So, I type announcements and then I hit enter and then it takes me back to a paragraph block and since I'm using – I usually use a ordered list or an unordered list. I use bullet points. I will use the dash and then that turns it into a bullet. So, I can say 'item one' and 'item two' and then okay, I'm done with that. After the last bullet I hit an extra enter and then I can type in, okay, I want 'is there a plug-in for that', I'll do ## and then it gives me the, I guess, the H2 tag again, which I use for all the headings inside. And then, 'is there a plug in for that' I type and then I hit enter and then it takes me back to the paragraph and then I keep pasting the contents. So, now I've just created blocks by hitting enter when I am done with whatever I'm doing. So, if you do a paragraph and you hit enter, that's going to create another block. So, every paragraph, every little chunk of text will be its own block.

That's gonna be the biggest thing that is the most confusing part about going to Gutenberg. I think the rest of it is pretty intuitive and you'll not feel like it’s a brand-new thing. I mean, it's going to be brand new, but it's not going to be this thing that's like, "Oh wow, I've never seen this before. I have no idea what's going on." It's going to be a little different the first couple times you use it, but the biggest sticking point is every time that you hit enter it's going to create a new block and I guess we just have to get used that. And I think it's just there only for the fact that that way we can make a different block a different color or if we wanted to me an entire block bold or if we wanted to make the font different to just make it stand out or whatever, we have that ability and we have that option to do within Gutenberg. So, that's a little bit about Gutenberg.

I do have a few things that I want to share when it comes to testing Gutenberg. There is a post out there on make.wordpress.org/test and the link is in the show notes for this, but there are some things that you can try, and it's made for testing to break things and see if it works. But I think it's a good exercise in trying to figure out how to do things. So, the first – it's got a list of 20 things that you can go and test. And so, the first one is move around in a long poster page using block navigation. What does that mean? How do you navigate block navigation? Do you use your arrow keys? Do you use command and arrow keys? What does that mean? Go and try and do that. Add a video background using a cover block and try different browsers. Add a table block and change the style to be striped using the settings block sidebar. And so, it's just basically saying, "Hey, test this." How do you do this? And it's just a good way; it's kind of a checklist for figuring out how to do certain things. Some of them, again, are more advanced and they're trying to break features inside of WordPress, but I think this would be a good exercise just to get handle on what's happening.

And the last thing I want to share is about a website called Frontenberg. It's kind of a funny name and I feel that there are a lot of people using the 'enberg' and they're adding to it. But Frontenberg is a way that you can play with Gutenberg without actually installing it. And so, I know that there was a link that I gave months ago on how to do this. But this is cool because it shows a normal post and then a custom post type with no content, and then it shows a book post type. So, if you had a book as a custom post type you can see what that looks like. And it's just a cool thing. It's got some links to Gutenberg and how to download it from the repository and whatnot. But this is a good exercise and you can go in it and start playing with it if you don't want to set up the hassle of creating a duplicate site and testing within your exact set up and configuration.

So, that is testing all things Gutenberg going in and playing with it and spending some time figuring out what your new workflows are gonna look like. You know, I think it it's good to at least play with it to figure out, okay, when I write my blog post on November 20th after I've updated to Gutenberg or updated to WordPress 5.0, these are the steps and these are the things that I need to be ready for so that I can create a post very, very quickly without having to spend hours just learning the interface to get ready for this. And I know that there's been some controversy about why are we launching this November 19th right before the holidays and Black Friday, Christmas and all that kind of stuff, and be assured that you don't have to update right away. Find a time that's going to make sense to update your site and be ready. You don't want to be updating right before your Black Friday sale and then your website goes down for some reason that's unrelated, but you've updated, and things are broken and so just think through that and make sure that you know when a good time is to update.

So, that's what I wanted to share, testing all things Gutenberg, today and in a few weeks, we’ll be testing it for real because it'll be on all of our websites as we get ready for WordPress 5.0. That's what I wanted to share this week and take care and we'll talk again soon. Bye-bye.