Exploring WordPress 6.5

In this lesson, we will explore some new features that have landed with WordPress 6.5. The first major release of 2024, WordPress 6.5 “Regina”, is named after dynamic jazz violinist Regina Carter, renowned for her musical mastery and experimental stylings.

Learning outcomes

1. Improvements to the Cover block 
2. Renaming blocks and improved drag and drop functionality in the List View
3. Adding Box shadow support for more blocks
4. New powerful views and filtering options for pages, patterns, templates, and template parts in the Site Editor
5. Robust revisions in the Site Editor
6. Using the Font Library 
7. General UX improvements

Comprehension questions

1. How can you integrate Google Fonts into your website without using code?

Transcript

Improvements to the Cover block

Hi, and welcome to Learn WordPress. Let’s explore WordPress 6.5. First up, let’s talk about the improvements to the Cover block. Aspect ratio has been added to the Cover block, and you can control this option globally for all Cover blocks or set the control for each individual one. Let’s see how it works and the benefits of mobile viewing. As you can see, I have added two Cover blocks. If I select the top Cover block and open Styles, we can scroll down and see the new option, namely the Aspect ratio. for this example, I’m not going to change the aspect ratio; we will keep it original.

But for the second example, I’m going to change the aspect ratio so that we can compare. So you can change it to, for example, Classic, which is 3×2, or for this example, I’ll change it to Standard. And once we hit Save, we can preview this page on mobile, and now you will see that the image of the top Cover block has been cropped by default. However, the image of the bottom cover block maintains the proportion of the aspect ratio set. So, if you don’t want an image to be cropped or if you want all your Cover block images to look the same regardless of the dimensions of an image, you can use the aspect ratio feature.

Another new feature of the Cover block is that an overlay color will automatically be applied based on the image. When I added this image, an overlay was automatically applied, and when we replaced it, a different overlay was added. Of course, you can change or modify the overlay opacity or color.

Renaming blocks and improved drag-and-drop functionality

Next, let’s talk about renaming blocks and the improved drag-and-drop functionality in the List View. In 6.4, we were able to rename the Group block, but now, with 6.5, we can rename any block. So, to do that, let’s open up the List View. Select the relevant block, in this case, the first block, which is a Group block. Click on the three vertical dots and then scroll down to Rename. And now, we can use a descriptive name for this block. And now we can do this for any other block. So let’s select the Columns block, for example. Click on the three vertical dots to see the Rename option. And the same applies for the Cover block or any other block you’ve added. I am also very excited about the improved drag-and-drop functionality. When you drag and drop a block now, you don’t have the blue line anymore, and you can see the block’s name and where it will be placed. I think you will agree that this has been a much-needed update.

Box shadow functionality

Next, it is also worth mentioning that the box shadow functionality has been added to more blocks, such as the Buttons block, Columns block, and Image block. So when you select the Buttons block, for example, you can open up the styles tab. Scroll down to the bottom, and you will see the border and shadow. Click on the three vertical dots and then select Shadow. Click on Drop shadow and then select between the various options available. Now we can do exactly the same for the Image block. So, I will select the image and follow the same process as before. For the image, I will select a deep shadow. And as you can see, we have added two different types of shadows to our blocks.

New powerful views and filtering options for pages, patterns, templates, and template parts in the Site Editor

When we turn our attention to the Site Editor, we will see new powerful views for pages, patterns, templates, and template parts, allowing you to customize what you see. Let’s start by looking at patterns and template parts. So, the first thing we’ll see when we open our patterns tab is a new look and feel. At the top, you will see a smaller search block and a refreshed look for filtering between synced and non-synced patterns. Something else to highlight is that you can now easily make a theme pattern of your own by clicking on the three vertical dots and selecting Duplicate.

6.5 also allows you to rename or delete a category. So, when you select a category and click on the three vertical dots at the top right, you can rename or delete it. Please note that when you delete a category, the patterns within the category will not be deleted. They will be added to the uncategorized category for the time being. When we make our way to template parts, for example, our header template parts, we will see that they are structured similarly. When you click on View More, you will have more filtering options. Then we can make our way to manage all template parts, and here you can add filters. when you click More Options, you can change the layout from table to grid. This will allow you to view all your template parts in a grid view. This visual representation of your template parts will be helpful for many and works exactly the same for pages and templates. So, if we go to templates and click on Manage all templates, we can do the same thing. You will be able to view and filter your templates in grid view. As mentioned, it works exactly the same for pages.

Robust revisions in the Site Editor

Next style revisions in the Site Editor have also undergone an upgrade. If we go to Styles and click on Revisions, we will see more granular timestamps and a short summary of changes made. So, for example, when you click on a revision, you will see a preview of the previously saved style on the left and a summary of the changes made below the timestamp. Remember, you can revert back to any previous style by clicking on Apply. The other great feature is that you can also view revisions in the Style Book. As you will see, you can use revisions in the Style Book to get a different angle and see changes that are not visible on the template you want.

Using the Font Library 

One of the main features that have landed with 6.5 is the addition of the Font Library. When you go to typography and click Manage fonts, you will first see all the fonts that come with your theme and their variants. This is where you can install, remove, and activate fonts across your entire site. You will notice that Google Fonts is automatically included when clicking Install Fonts. You merely have to click on Allow access to Google fonts. When you make your way to upload, you can manually upload fonts from your computer.

General UI improvements

Next, as you may know, the lightbox feature allows an image to take over the screen once selected. It is important to note that in 6.5, this feature has moved from the settings sidebar to the content toolbar alongside link settings. Select Expand on click to activate the lightbox functionality. Remember, you can also do this globally in the Site Editor. Lastly, I wanted to point out another UI improvement. Templates are now better organized between theme templates, custom templates, and templates that plugins have added.

Conclusion

Enjoy exploring and using 6.5 and all the updates and new features.