On today’s episode, we are going to talk about the hidden block features in WordPress 5.0 or maybe we should call it the secret manual, the hidden features that are in WordPress. We’re gonna talk about them today right here on Your Website Engineer Podcast, Episode No. 425.

Hello and welcome to another episode of Your Website Engineer Podcast. My name is Dustin Hartzler. I’m excited to be with you today here in the start of polar vortex here in Dayton, Ohio. Yes, we’re gonna get into the temperatures that are down below zero. And so everybody’s kind of in this panic like, oh, I don’t wanna leave the house. And schools are canceled already for tomorrow and whatnot. So, I am thankful that I don’t have to go anywhere for work. I can stay at home all day if I choose and I do not have to subject myself to these bitter cold temperatures that are below zero, freezing here at Fahrenheit.

So, that’s what’s going on here. There’s not a lot of news happening in the WordPress space. I do wanna highlight; one thing that’s always my favorite time of year, towards the beginning of the year, is that new season of WordPress events, that new season of WordCamps. And these happen all over the world. I just popped open the schedule from WordCamp Central. And it’s usually – when we talk about WordPress and we talk about different things, it feels like we’re always spoiled here in the United States, that there are always so many events that are happening in the United States.

For example, maybe there’s 40 events in the United States and then 15 globally that’s outside the United States. Well, that’s not the case with WordCamps, especially in 2019. I took a look here; it’s over at WordCamp.org. And if you go to the schedule page, then you will see the dozens and dozens of WordCamps that are happening all over the world. And there’s only a small fraction of those that are in the United States and all of the rest of them are located all around the world.

On the left-hand side, you can see all the ones that are scheduled and they are ready to go. And on the right-hand side, you can see all of the ones that are upcoming; they are planned, but they don’t have an official date yet. And usually to get an official date, you have to have a venue secured and then you can start launching that process. In the midst of this, I do wanna say that WordCamp Dayton is happening in just a few weeks. It’s about four weeks out. It is March 1st and 2nd. And so, if you are in the Dayton area, or the Ohio area, or any of the states that touch and surround Ohio, I’m grateful to meet you and come hang out and learn all about WordPress in a two-day event.

And so that’s what I wanna talk about here when it comes to news. Also, always head on over to Meetup.com if you wanna just find local meet-ups that happen regularly and there’s one in Dayton. There’s several around the State of Ohio and then all the different states have WordPress events and you can see if there’s anything close to you. And even though it is cold outside and you don’t wanna go outside; you wanna just stay at home so you’re not subjected to that cold weather here in North America in these winter months.

It’s always good to go out and just spend some time with other WordPress people and spend some time just getting to know people in the community. And you never know what you might learn, or what you might be able to teach somebody else, or what problem you may solve, or what client that you might run into, or what client that you might acquire, how much money you could make. You never know what could happen at these live events. So, that’s what I wanna share in the news section today.

When it comes to the plugin of the week, I found a cool one. And this one kind of struck my eye because it’s WooCommerce related, but it’s called Product Code for WooCommerce. And I wasn’t exactly sure what this meant and so I went ahead and I looked at the plugin. It’s a very new plugin. It doesn’t have a lot of active installs, but this is just a great example of how somebody had a need and wanted to fill that.

In WooCommerce, each individual product has its own unique identifier. In this case, it’s the SKU. I’m not sure exactly what it stands for, but it is a specified number or combination of numbers and letters. And WooCommerce takes that as okay, that’s the ID number for this product. And so, you can’t have multiple products that have the same SKU. And so that’s the only real unique identifier that’s built into WooCommerce.

Well, Product Code is a plugin that you add. And you could add different pieces of information, if you like, to your WordPress or to your WooCommerce product itself. So, instead of just having a SKU number, maybe you want a UPC code, so a barcode. Or maybe you want some additional other metric that you wanna track inside of your website. So, that’s what Product Code does. It adds an extra field on the dashboard side of things. And then you can fill in that information and it’s just the product code is there. It’s part of the inventory section and then you can put numbers, or letters, or whatever the case may be. And it just works really well.

So, that’s Product Code for WooCommerce. You can find it in the show notes for Episode No. 425 or, as always, you can find it on the WordPress repository by searching for Product Code.

All right. Today I wanna wrap up this series on Gutenberg. We’ve been talking about Gutenberg since the beginning of the year. We’ve talked a little bit about what the differences are, that was Episode 421, between Gutenberg and the classic editor. Then we talked about reusable blocks and how we can create that content repeatedly, how we can make it easy to create blog posts or pages with that repeated content or those reusable blocks. We talked about the different ways or the different plugins; that you can add more blocks and what kind of blocks can be added to WordPress. They come with a standard set, but if you wanna add more, you can add plugins to add more blocks to your site.

And then we talked about converting existing posts to Gutenberg; how we do that, all the pain and the process that it takes to convert those over from one format to another. And then today we’re gonna talk about the hidden features, or some of those things that we really haven’t talked about, or maybe some of the features that have moved a little bit, that I just wanted to highlight and make sure that you’re fully aware as you’re getting into this new routine. You’ve probably stumbled upon these with Gutenberg, but I just wanted to make sure. There’s no gotchas when you’re looking like I wonder how to do this and I wonder where this feature is. And we’ll talk about some of those things as we go.

So, let’s go ahead and dive right in. We’ve talked about Gutenberg until we’re blue in the face, but we’re gonna wrap up this series this month. But we’re gonna first talk about some of those hidden features, like I said, today.

Now, the first one is permalinks. That permalinks structure used to always be right there out in the open in the old WordPress dashboard. So, right underneath the title, you could see the permalink. Then if you needed to edit it, you could do that as well. But with Gutenberg, or with the WordPress block editor, the permalink is now in the document panel of the sidebar. So, if you’re looking for that, it’s no longer under the title. They’ve kind of hidden it.

You click on either the title or you click off your editor, so you’re not highlighting any windows, and then on the right-hand side, there’s a document window. And so, from over there, that gives you the ability to change or modify that permalink if it’s not something that you like. Basically, it’s still gonna default like normal to whatever the page title is that you’ve created with dashes in between, but you can go ahead and search that over there on the document side. It’s over there on the right. On the right-hand side, you can see the publish information, the visibility, the status; all that kind of stuff is over there on the right-hand side under the document block.

I talked about this in past shows, but the new slash command – so if you’re building out your post or your page and you want a new heading, normally you do slash, and then type heading, and then you can start doing that. Or if you wanted to do any of the other blocks, if you wanted to get them without having to click on your menu and use your mouse, you can use this slash command. But you don’t necessarily just have to use the slash command; you can use some other keyboard shortcuts.

So, the slash command, that’s the command to insert a new block, but once you’ve entered down and you’ve started a new block, then you can do a greater than sign and that is going to start a quote. If you do pound, pound, or pound, pound, pound, it’s going to start a heading and it’s going to change it to that block automatically. To start an ordered list, you put a one and then a period, or just the number one, and that will start an ordered list, so one, two, three, four, five. If you wanted to do an unordered list, you start with a dash and then it’s automatically gonna start creating a list for you.

If you use the backtick, those are the ones above the tab key on your keyboard. If you use that at the beginning and the end, it’s gonna format as code. And so you don’t necessarily have to do the blocks or trigger the blocks, but you can use these commands to get going quicker than using the slash commands. There’s a keyboard shortcut on the Mac; command option T, and that will insert a block before selected blocks and then command option Y will do a block after the selected blocks. So, if you’re in a block itself and you want to add one before or after, you can use those keyboard shortcuts. There’s probably equivalents for a Windows computer; very, very similar.

Let’s see what else you can do within keyboard shortcuts. If you wanted to switch between the visual editor and the code editor, that’s command option shift M. That’s a whole handful of keyboard combinations, but you can do that. And a lot of these keyboard combinations; they will show you as you’re navigating around the menu. Next to the code editor, it shows you command option shift M and so then you kind of learn those keyboard shortcuts.

If you do command K, that’s going to convert the selected text into a link. This one’s super handy, so if you wanted to create a hyperlink for something, you highlight it, hit command K, and then you can paste in what the hyperlink is. That’s super, super handy. And then if you wanna get rid of that link, you can do control option S and that removes the link. I’ve committed that one to memory because that one’s just really difficult and I normally just click on it and then remove the image.

Other keyboard shortcuts that you can do; you can actually pull up this whole list if you go into your Gutenberg editor and go to the upper right-hand corner and there’s three dots going top to bottom. And then towards the bottom, under Tools, there’s Keyboard Shortcuts. But you can find keyboard shortcuts to save your changes, which is command S. You can undo your last changes, you can redo your changes, you can show or hide the Settings sidebar, you can navigate to the next part of the editor or previous part of the editor. Those are two different keyboard shortcuts. And again, like I said, you can switch between the visual editor and the code editor.

There are all sorts of keyboard shortcuts that make it interesting to learn and fun to learn. I guess for me, I really enjoy learning these different things. But it makes it really handy to move around your post without taking your hands off the keyboard.

The next thing that’s really cool that I didn’t know about until I was exploring around a little bit is something called the top toolbar. It was called the unified toolbar, but it’s now called the top toolbar. And it gets a little cumbersome as you’re navigating from block to block to block. Whenever you’re in a block, it pulls up what’s called the toolbar. There’s a hovering section that pulls up the toolbar that you can do some light edits to the text that you’ve just created. But it’s on every single one.

And so, if you want to check this box, it is called the top toolbar and it just hovers at the top of the page always. And it’s really kinda cool. It feels like the editor bar is kinda locked. It feels a little bit more like the old style of editor because it’s always there. But you can edit that or you can turn the top toolbar on by using those three dots as well on the upper right-hand corner and that’s in the editor Settings menu.

There’s a mode called spotlight mode and this is a process that allows the editor to gray out the canvas except for the block you’re editing. It delays any visual cues about separating blocks while in writing mode and making it less distracting. So, if it really bothers you every time you hit enter it creates a new block, this will go ahead and make it a little bit more visually appealing. As you’re typing, you won’t see those. It makes it much less distracting. And so, it makes blocks a little bit harder to discover, but you can switch this off by returning to the feature mode. So, that’s in spotlight mode and that’s in the Settings as well.

Then there’s full-screen mode. Ever since WordPress had 3.8, there’s been this full-screen mode where you can turn it on and then you can have all the stuff kinda move off to the sides and you can just focus on editing. And you can get to that in that upper three boxes as well. If you remove or if you use the full-screen mode with the top toolbar, it almost looks like you’re typing on a blank document with just the toolbar across the top. It looks pretty cool.

There’s also a setting in there that you can enable or disable, depending on which you like. And it is called the two-step publishing process. There’s also something that you can disable or enable, depending on the way that you wanna publish, and this is the two-step publishing. And so, this is if you want to have an extra confirmation screen. So, when you click publish and then it’s gonna say are you ready to publish? Double check your settings before publishing. Then you have the ability to just change your visibility, or publish immediately, or when you want this to be scheduled.

And then if you have Jetpack and Publicize turned on, then you can modify that post as well and say oh, well, this is the text that I want to send out on a Tweet, or post on Facebook, or whatnot. And so, you can turn this on or off, depending on if you sometimes get trigger happy and you hit the publish button before you’ve really set Publicize up, or before you scheduled it, or whatnot. This gives you the ability to kinda slow down and make sure that you are ready to publish that content.

One of the favorite features of Matt Mullenweg’s, and one of his hidden features that is built in, is the parser tool. It will allow for copy and pasting of content from various tools. So, you can paste in from Google Docs, Apple Pages, Microsoft Word, Microsoft Word Outline, Evernote Markdown, Legacy WordPress, and the web. And almost all of those, when you copy and paste those in, they will keep the formatting, the headings, the list, the images, the separators, and the tables.

And so what makes that really nice is you can work in these other tools. If you’d rather work in Google Docs or you’re collaborating with a few people, you write it all on Google Docs. You get it all formatted, you get it all ready, you copy it, and you paste it into WordPress and it just works. And that’s one of the cool things about this new editor. There’s no more of the extra oh, I wrote this in Word and so there’s thousands of lines of hidden code just making it kind of styled improperly. And so that’s really nice and that works everywhere. So, those are some of the places where you can paste in content.

How to align an image; this one’s a little bit quirky. It took me a little while to figure this one out. But before, if you wanted to add an image, maybe a right-justified image around some text, you would first put your cursor in the left-hand box, the very left of the paragraph. And then you click add image. And then, add image to the right, you would right align it and then it would show up at the top of that paragraph.

Well, in the Gutenberg editor, the block editor, what you have to do is you have to actually add the image below. And so this is kinda weird how it works. But you type up your paragraph; you’re like, oh, I want an image over on the right-hand side of this. So, what you do is you add the image below the paragraph. You right justify it and then you merge them together. It’s a really different way and a different approach, but it works really well and it’s really cool.

Just some other trivia tidbits about the Gutenberg editor. There’s no way right now to format multiple text blocks. So, if you wanna highlight a few paragraphs and make them bold or italics, that doesn’t work yet unless you’re using the classic blocks, so it’s one block at a time. There’s a GitHub issue that they’re working on. They’re trying to figure out what that looks like, to do multiple blocks. And so there may be something coming in the future for that.

If you’re in a post, they’re now locked for other users. And so, if you are working on a document and somebody else tries to edit that same document, they are going to be locked out. So, that’s good and that’s kind of the standard way of WordPress. Title is not a block and so it behaves like a block, but it looks like a block, but it’s not. It basically just holds a lot of weight. It’s backwards compatible with the WordPress Classic editor. It holds a place of value for WordPress and category pages for RSS feeds and many little things. And so, Gutenberg, or the block editor, does not modify the way the post title works.

And then there have been a lot of opinionated comments; is there too much whitespace, is there not enough whitespace? And it really just depends. It’s all against personal preference. I know that when Gmail rolled out their new updates and it looks a little bit different; there was more whitespace, I didn’t like it. But with Gutenberg, when there’s more whitespace, I ended up liking it. And so it’s just one of those personal preference things. If there’s too much whitespace, there’s one way to get around that. If there is too much whitespace, maybe you wanna stretch out your content just a little bit wider. There is a way that you can copy and paste or add a little bit of CSS code to make the max width a little wider. And then that gets rid of some of the white on the sides. And I’ll put that in the show notes so you know exactly how to do that.

Another kind of hiccup or a gotcha with the new editor is that Grammarly doesn’t work. So, Grammarly is a tool that scans through your text and makes sure that your spelling is accurate and your grammar and punctuation is looking good. And if you’re using Grammarly inside of your WordPress site, it considers each block a separate text block. And so, if you have a 25-block post, then you have 25 separate text boxes that Grammarly is trying to check. And it’s kind of an issue or a pain if you’re trying to use that. So, it’s probably not the best to use Grammarly.

And lastly, when I was trying to post for the first time, I always have a featured image and it was just a little hard to find the featured images, the categories. Those are all on the right-hand side, under the publish button, but they’re all compressed and they’re all collapsed. And so, it makes it look neat and tidy, so you’re not seeing a huge, long list of categories, or an area for your featured post, or whatever, but everything’s just kinda tucked up in there and you have to expand to see exactly what features you’re needing. So, if you’re looking for something or your feature is missing, head on over to that right sidebar and look in those panels because there’s gonna be a lot of information that’s just kinda moved from one place to another. I believe enabling comments and things that used to be at the bottom below posts, those are now kinda stored over in that section, and so you wanna look for that as well.

Those are a few of the things and the changes that I’ve noticed and I’ve seen by using Gutenberg these last four months. I’m still trying to figure out a perfect workflow I love. I’m creating workflows, but right now, as I’m copying and pasting Markdown text into Gutenberg, that is a complete nightmare and does not work very well at all. And so, I’m just trying to figure out okay, how do I write my show notes, and prepare for them each week, and make it easy to copy and paste into Gutenberg? What does that look like? How can I best make that transition easier?

Because right now, it’s like, oh, I write all the show notes in Markdown and then I paste them in there. And then I spend another 20 minutes trying to just make all my blocks work well. And I don’t have time for that. So, it’s all about kind of working through the experience, seeing how it works now, and then adapting and making workflows that work just a little bit better, make you a little bit more efficient with this new editor.

So, that wraps up this series on Gutenberg. Next month, we’ll talk about something else and we’ll completely get away from this brand new editor. And we’ll talk about some other aspect of WordPress that we haven’t covered in a while. So, that’s what I want to share with you this week. Take care and stay warm if you are in the polar vortex zone. That’s all I’ve got for you this week. Take care and we’ll talk again soon. Bye-bye.