What’s New in WordPress Version 5.4 – Block Editor (part 2)
Video Transcript
In this, the third of three classes on what’s new in WordPress, 5.4 we’re going to cover the additions and changes to the blocks. So let’s go and get started now.
We left off in the last class on what’s new in the block editor of WordPress 5.4 by showing how things have changed in the way that you add new blocks to your editor window. That’s where we’re going to begin in this class. And in doing so I’m going to show you one of the two new blocks that were added in version 5.4 the social icons block. So let’s go ahead and click on the circle plus sign here to add our block and you can add this block just as you would any other block by going through the various categories looking for that particular block or using the search for block box appear in the top.
But since I’ve been playing around with this, it’s right here in the most used category. So go ahead and click on social icon to add it. And there we are now of the 30 to 40 icons that are currently available in this block. They pulled out six of their most popular ones or ones that they think are most popular anyway. And all of these with the exception of the WordPress icon are just placeholders. You can see other a little bit lighter in color than the WordPress icon as because these currently do not have any URLs in there, but WordPress icon does. We just click on that. You can see that it’s got a URL in there, they click on Facebook, it does not. But if we enter say a dummy URL just for the sake of this class, you can see how it’s gotten a little bit darker.
And by the way, these are not share icons. These are follow icons. So the URL you put in here is the URL to your Facebook profile or your Facebook page. And whenever you do that over here on the right sidebar for that particular icon, be sure to add a description for that label like it says here. Briefly describe the link in order to help those that use screen readers. So something like follow Joe blow on Facebook or whatever your name is, or whatever your business is.
Likewise with the Twitter icon, put in your Twitter URL, adjust the Twitter label and so on. Now let’s say you don’t want one of these icons, or maybe you don’t have an Instagram account or a wordpress.com account. You want to get rid of this. Well, WordPress is a little bit odd in that if you delete this as it is in that primary first position, it’ll look like you deleted the entire block.
You didn’t. It’s just that you can’t see the other icons until they have URLs assigned to them. So first you want to select this and move it at least one position to the right, and you do that by, once you have it selected, come on up here to that particular blocks toolbar and hit the right arrow. Boom. Now then with this selected in the more options or the three vertical dots, click on that and then click on remove block.
Let’s go ahead and remove WordPress and boom, it’s gone. Now if you want to remove the entire block, just click inside the block, just not on any icons. So you’ve got the border around the entire block. Then come on back up here and kind of repeat the process. Go to go to the more options, three vertical dots icon. Now, then click on remove block and it’ll do just set, it’ll remove the entire block.
Well, let’s say you want to add an icon, click on the ad block icon, sorry for the confusion there, and here’s those 30 or 40 different icons you can select from. You can add an RSS feed. Remember these are things that when clicked on, it will take that site visitor to your RSS feed, to your get hub account to your Google account. So that’s the social icons block.
And again, don’t forget the available styles that you can see here in the sidebar that you will only see in the sidebar whenever you have the entire block selected. Because if you have an individual block selected, you’re not going to see that. It’s only going to be referencing that individual icon. So don’t forget you’ve got different settings depending upon what you have selected within that individual block. Okay, so just be aware of that. Now then the second new block that was added is the buttons block.
Now you might be thinking, wait a minute, there’s always been a button block. Yes, well that was for the singular button. This is the buttons block.
In other words with this one you can add multiple buttons to the same block. That’s what that little add button icons for. And just like with the social icons block, if you want to get rid of these, because maybe really I only need one button in there and with it’s selected, c’mon appear to the more options icon. Click on remove block and it will get rid of that one button. And like with the social icons block, if he had the entire block selected, in other words, you got to border around the entire block, not just the individual button. And if you come on back up here to the more options icon and click on remove block, you’re going to get rid of the entire buttons block.
So those are the two brand new blocks that are added. Technically there’s another one, but it’s an embed block and is for tick tock. Now. then as far as the changes in the existing blocks, there’s a lot of them, so I’ll try to get to all of them in this class. First off, you have the ability to add a gradient background color to a couple of different blocks. The buttons for one and the cover blocks or the other. They may be adding this option for other color based blocks in the future, but for now we’re looking at gradient being available in the cover and the buttons block.
Now on the cover block we scroll down a bit here. You can see right here for the overlay we’ve got solid or a gradient. Let’s come on back up here to the buttons because any block that has text available, whether it’s the buttons block, a paragraph block, the median text block, any block that you can have text in, you can not only change the color of the text, but also the color of individual words within that text string.
So for example, when the buttons block, if you want to change the color of the text in that block over here in the sidebar, under color options, we’ve got the ability to change the text color and again, without selecting anything, you can just click on this and it changes the color of all the text in there. But if you want to change the color of a single word or a couple of words, select it and then the toolbar, you’ve got this dropdown button up here.
That’s where you’ve got additional options for more rich text controls. Click on that. You can do inline code inline image, which basically replaces the selected text with an image strike through or text color. There you go. Pretty cool. And the same thing holds true for any block that you have text in there, like right here, the change color for individual text is not in the sidebar.
Under color settings, that’s for the entire string of text. The individual words that’s going to be available up here in the toolbar, the media and text block. Again, changing individual words you’ve got to select it first and in the toolbar you got the drop down arrow text color. Now another thing that has changed is speaking of media and text block. Now you can add a clickable link to the image or the media within that media and text block just by selecting that image in the toolbar.
Click on insert link, add your URL, click on the apply icon or hit enter, and then another change is within the table. Go ahead and click here, you have the ability to add a caption below the table and in the latest post block we click on this. You can see that we are in the latest post block. You now have the ability to add the feature image if there was one added to that particular post.
So if we toggle this on featured image setting, if there was not a featured image in that post, say for example you’ve got five or six posts listed in here and if you only have the featured image added to one of those five or six posts and only one featured image is going to show up. This is not give you the option of adding a featured image that’s done on the individual post, but if there is a featured image on that post within this block, you can make some adjustments on the size here and we already covered the cover block but on the group and columns block, let me go ahead and select a group block here by coming up to the block navigation, clicking on groups. So we’ve got the entire group block selected and all the nested blocks within it under color settings. Now we can adjust text color as well as background color in the prior version. Let me see if I can find one here. Yup.
Under group we only had the option for the background color, nothing to do with the text color, not anymore. Now we can adjust both text and background color and that’s not just with a group blog but also with the columns block.
Again, text and background color for the columns block and in the prior version, under columns, there was no color option at and last, but by all means not least in the gallery block, you can now select the size of the images from the dropdown. Over here, let’s go ahead and select the gallery block, and this is the dropdown Where you can select from thumbnail, medium, or full sized images. Well, that’s going to bring us to the end of this class on the additions and changes to the blocks within WordPress version 5.4 thanks for checking it out and you have a great day.