Exploring WordPress 6.4

In this tutorial, we will take a closer look at some of the new features that have landed with WordPress 6.4. WordPress 6.4 will also ship with a new Twenty Twenty-Four default theme that will showcase the latest capabilities of block themes.

Learning outcomes

1. Using the lightbox functionality.
2. Identifying improvements to the Group block.
3. Highlighting image and gallery thumbnails in the List View.
4. Exploring advancements to the Command Palette
5. Creating categories for patterns and enhanced filtering
6. Keeping alignment settings in synced patterns
7. Importing/exporting patterns as JSON files
8. Adding buttons to the Navigation block
9. Enabling enhanced pagination in the Query Loop block
10. Using writing flow improvements and the ‘nofollow’ setting when adding links

Comprehension questions

1. How can you set the lightbox functionality globally?
2. What are the benefits of using the ‘nofollow’ setting when adding links?

Extra resource

Tutorial: Twenty Twenty-Four Theme

Transcript

Introduction

Hi, and welcome to Learn WordPress. In this session, we are going to explore some of the new features that have landed with WordPress 6.4.

Learning outcomes

We are going to cover the following features: The Lightbox functionality of the Image block, improvements to the Group block, image and gallery thumbnails in the list view, advancements to the Command Palette, categories for patterns and enhanced filtering, the alignment settings in synced patterns, importing and exporting patterns as JSON files, adding patterns to the Navigation block, enhanced pagination in the Query Loop block and finally writing for improvements as well as using the ‘nofollow’ setting when adding links. Let’s jump straight into it.

Lightbox functionality

Number one, enabling the Lightbox functionality. With a simple setting turned on, your images can now have added Lightbox functionality, meaning when clicked on, they take over the full screen for easier and more immersive viewing. At the moment when I click on an image, nothing happens. The individual image does not open up, but let’s see how we can change that. You can set the Lightbox functionality globally or for individual images. To select it for an individual image, merely select the image, and then in your sidebar settings, enable Expand on click, and let’s select it for another image as well.

To set it globally, let’s make our way to the Site Editor, click on Styles, open up the Style Book, and then we can select media and then the Image block. Now we can enable Expand on click from here and that means all your images will expand when clicked on. You don’t have to enable this setting for images one by one.

Let’s see this in action on the front end. When we select an image now, it will of course expand and I can just press Escape or click outside of the image. This is all possible thanks to the Lightbox functionality.

Improvements to the Group block

Next, let’s talk about some exciting improvements to the Group block. You can now rename Group blocks, making it easier to distinguish between different parts of your content. It improves organization within the Site Editor. Let’s see how it’s done. Select a Group block, click on the three vertical dots, and then select Rename. In this case, I’m going to call it ‘Specialist call to action.’ Then, I will select a second Group block and follow the same process. This Group block I will call ‘Services.’ And then one more, and this one, of course, I will call ‘Prices.’ If we scroll up, we will be able to see each section named accordingly in our list view.

Another new improvement is that you can now add a background image to the Group block. Make sure you select the parent block in the list view and then open up Styles. Below background, you will see the option to select a background image. I will go ahead and add an image from my media library. And there you have it.

Image and gallery thumbnails in the list view

Next, when working with images in your content, it’s now easy to see at a glance where each image is directly in your list view. In this example, we can see the gallery and image thumbnails in the list view for quick skimming. This new feature also allows you to quickly find your way to a piece of content, a gallery, or a specific image.

Command palette advancements

Next, let’s discuss some advancements to the Command Palette. The Command Palette was introduced with 6.3 and allows you to quickly navigate to different areas of your site and execute commands, for example, to create a new page. There are some new commands that have been introduced with 6.4, for example, opening up your list view, exiting the code editor, hiding or showing breadcrumbs, etc. You can also now perform block-specific actions seamlessly, for example, grouping, duplicating, or adding before and after.

Let’s perform some of these new commands in the Site Editor. In this example, I am editing my About page, so to open up the Command Palette, I can click on the title bar or I can use the shortcut Command + K on Mac or Control + K on Windows. Now we can start executing some of the commands. From here, I can open up the list view, I can hide or show breadcrumbs for the page, open up the code editor, and if I select a block, I can perform block-specific actions. For example, adding a block after or before or even duplicating the block. Additionally, the Command Palette also allows you to transform a block, to different types of blocks. In this case, you have all these options to choose from.

Categories for patterns and enhanced filtering

Now, let’s shift our direction to categories for patterns and enhanced filtering. You can now add categories to patterns. So to do that, let’s make our way to the Patterns area in our Site Editor and then click on the Inserter to create a new pattern.

In this case, I am going to create a Contact info pattern. When I click on Categories, we will be able to select one of the categories provided by our theme, or you can create a custom category. In this case, I am going to select one of the existing categories called Contact. Once selected, you can decide if you want this pattern to be synced or non-synced. I am going to go ahead with a synced pattern and click on Create. Then you can create the pattern and you can edit your pattern’s categories in the sidebar settings. You can remove a category, add more, etc. When we return to the patterns area, we will notice that our custom pattern is available below My patterns, but also below the Contact category which we’ve added. When we make our way to one of our pages and insert a pattern, we will see that categories help us to organize our patterns, but also to quickly find the pattern we are after.

A more advanced filtering option is also now available, allowing you to sort by theme-created patterns versus user-created patterns, along with synced or non-synced patterns.

Keeping alignment settings in synced patterns

Number six, keep alignment settings in synced patterns. Say goodbye to alignment issues when creating a custom synced pattern. WordPress 6.4 ensures that all alignment settings in synced patterns are preserved. So let’s say, for example, I want to turn this design into a synced pattern. You will notice it’s already full-width, and now I can go ahead and create a synced pattern. I’ll make sure it’s synced, name it appropriately, and in this case, I will call it a ‘Four column call to action’ and I’ll add the category ‘Full-width’ and then click Create. Now we can see that the alignment settings for this pattern have been preserved. Let’s go ahead and add this pattern to a new page, and I will use the slash command. When inserted, we can see the alignment settings are intact.

Importing/exporting patterns as JSON files

The last thing related to patterns is that you can now import and export patterns as JSON files. From the Site Editor, make a way to the patterns area, and in this case, I will open up My patterns. When you click on the three vertical dots, you will be able to export this pattern as a JSON file. To import, click on the plus icon next to Patterns, and then below Create template part, you will see you can Import pattern from JSON.

Adding buttons to the Navigation block

Another great new feature is that you can now add buttons to the Navigation block. Let’s see how this works. Let’s go ahead and edit our navigation menu in our home template. So the first thing you’ll have to do is make sure that you select the Navigation block, and then we can click on the plus icon to add a new block. I’m going to add a book now call to action button. To do that, I’m going to type ‘Book now’ and then create a draft page, as this is the page I want folks to go to when they make the booking. Once I’ve done that, I will transform this block to a Buttons block. Once transformed, I can edit. I will open up Styles and then remove some of the padding of the block. Then I’ll also change the background color and make the text bold. At the bottom, we will see that this button is linked to the page that we created and we can also select to open in a new tab. Now, I can go ahead and save the changes I’ve made.

Enhanced pagination in the Query Loop block

The enhanced pagination in the Query Loop block is another important feature to highlight. At the moment, when you switch between two pages of the Query Loop block, the entire page refreshes. But 6.4 has a solution. Let’s see how we can change this. You merely have to select the Query Loop block, and then in your settings sidebar, scroll down, and then below Sticky posts, you will notice it says Enhanced pagination. Let’s go ahead and enable this feature, and then after updating, we can preview this page in a new tab. And when we go to the next page, the page does not reload.

Writing flow improvements and the ‘nofollow’ setting when adding links

To end off, let’s look at some writing flow improvements, as well as using the ‘nofollow’ setting when adding links. First up, is deselecting blocks using the escape key. If you have multiple blocks selected, you can merely click Escape on your keyboard to view content.

Next, you can use the keyboard shortcut command shift and D on Mac or control shift and D on Windows to duplicate single or multiple blocks. So if you select a block, you can select the shortcut, and then it will duplicate, or you can select multiple blocks and repeat the keyboard shortcut.

Next, let’s talk about the Verse block. In the past, it has always been difficult finding your way out of the Verse block, or adding a new paragraph. But now you can press enter three times, and a new paragraph will be added.

Lastly, let’s touch on using the ‘nofollow’ setting for links. Normally when you add a link to your site, you tell search engines that the other website is trustworthy and relevant. However, sometimes you can’t vouch for a site and you don’t want it to negatively influence your SEO rankings. Well, then you can select the ‘nofollow’ setting. Setting a link as ‘nofollow’ is like telling search engines, hey, don’t follow this link too closely I’m not vouching for it, it’s just there, but I don’t endorse it. So if you select a link and click on the pencil, below advanced, you will be able to select mark as no follow and therefore protect your SEO.

Conclusion

Enjoy exploring WordPress 6.4 and visit Learn WordPress for more tutorials and training material.