Exploring WordPress 6.6

WordPress 6.6 has arrived, introducing a range of new features and enhancements designed to improve your website management experience. Discover the latest updates and see how they can benefit your site.

Learning outcomes

1. Data view improvements
2. Streamlined publish flows
3. Grid layout support
4. Negative margins
5. Synced pattern overrides
6. Shuffle patterns
7. Site background images
8. Edit or create shadows
9. Rollbacks for plugin auto-updates

Transcript

Introduction

Hi, and welcome to Learn WordPress. Let’s explore some of the new additions and enhancements that have been released with WordPress 6.6.

Data view improvements

Firstly let’s discuss some of the new data view improvements. When we open the Site Editor and click on Pages we will notice a new layout was built for pages. You can now see all of your pages and a preview of any selected page before you edit via a new side-by-side layout. When you click on templates, you will now see that all your templates are displayed in grid view by default. When you click on the Options icon, you can still change the display to Table or List, and when you change it to List, you can see all your templates and a preview on the right. When we move to patterns, we will notice the template parts section has moved to the top left in the side view and patterns below that. You will immediately see all your patterns, and then you can filter and select Sync Status to view your custom synced or non-synced patterns.

Publish flows

In 6.6, we will also see a redesigned published flow. Key information is displayed in a clear, minimalistic, and condensed way at the top right. The Set Featured Image has moved to the top, and you can access and update the settings with a single click. Secondly, when you create a new page or post from the dashboard or in the Post Editor, it will look the same as when you are in the Site Editor, creating a single coherent experience across editors.

Grid layout support

Another great new feature is grid layout support. The Grid block is a new variation of the Group block and allows you to display elements within a group as a grid. I have gone ahead and added the Grid block as well as some dummy content. Auto is selected by default. Auto generates the grid rows and columns automatically using the minimum column width. When you change the value of the column width all the columns will automatically update. Let’s change the unit of measurement to pixels and then update the column width to 300 pixels and then 200. It is also worth mentioning that it is responsive and maintains this width on a smaller device such as a tablet or mobile phone.

You also have the option to select Manual, which allows you to specify the exact number of columns you are after. I will go ahead and select Auto again and then select one of the grid children in the List View. Then, I will open up my sidebar settings and scroll down to column span and row span, which allows you to span a single column across multiple columns or a single row across multiple rows. So if I type in 3 below column span, this Group block will span across three columns, or I can change the row span to 2, and then this Group block will span across two rows. But you can also achieve this by visually dragging and resizing your column or row.

Negative margins

Next let’s discuss adding negative margins. You can now add negative margins directly in the Editor for all blocks that support margin controls. When you set negative margins, you can easily create overlapping designs. Let’s look at two examples. In this example, I am going to change the left margin of the Heading block to minus 180 pixels. In the second example, I will change the top margin of the Paragraph block to minus 100 pixels. As you can see negative margins allow for various design possibilities.

Synced pattern overrides

Another exciting new feature to look out for is called synced pattern overrides. As a reminder, a synced pattern is a reusable block that updates across all instances when edited. You can now add the ability to customize content in synced patterns while keeping stylistic control. So here’s how they work. You can create a pattern centrally and then use it across multiple pages on your site. You can customize the content of these patterns individually where they have been used, but if you want to update the design, you need to do that on the original pattern. Once you make a central design change, it will update everywhere the pattern has been added.

Let’s see this in action. In this example I’ve created a synced team member pattern and to enable the override feature I need to select the relevant block and the first block we are going to select is the Heading block and then we go to Advanced in our sidebar settings and Enable Overrides. Name it appropriately, in this case, Team Member Name, and then click on Enable. Then we can move on to the next block, which is the Image block, enable overrides, and then add a descriptive name. Then, we can follow the same process for all the other blocks within the pattern. At this stage, we can only override the Heading, Paragraph, Image, and Buttons blocks.

Now you will see on the right I’ve added the pattern on a different page and updated the content without affecting the original pattern. If I change the background color of the original pattern, the change will automatically apply to every instance of the pattern across my site. By refreshing the page, you’ll see the design update everywhere the pattern is used. Let’s look at another example by updating the Buttons block and changing the background color to black and the text to white. Once again, after saving, we can refresh the page on the right, and we will see that the design has been updated everywhere the pattern has been added. Something else to mention is that you can also add a new block to your central design, in this case, the Separator block, and once added, it will filter through to every instance where it’s been used.

Shuffle patterns

Did you know you can also now shuffle some patterns in one click? To make it easier to swap between similar patterns, a shuffle button has been added when a pattern is inserted and has categories defined with a single top-level block, such as a Group block. In this example, let’s select a pattern from the About category. Then, we can click on the shuffle button in the block tool bar to view and select another pattern that meets our requirements.

Site background images

In 6.6, background images have been extended to the Site Editor within Styles. To add a background image, open Styles, go to Layout, click on Add Background Image at the bottom, and select an image from your Media Library. Once added, the image can be displayed as a cover or contain backgrounds. Or the background can be set to repeat.

Edit or create shadows

You now also have the ability to customize existing shadows or create custom shadows. When you open up Styles, you can go to Shadows below Colors, and when you select one of your existing shadows, you can click on Drop shadow and then adjust it accordingly. Or you can go to Custom, click on the plus icon, and create a custom shadow. Of course, depending on the block, shadows can be added below Styles when you make your way to Border and Shadows, and then you can select an existing or custom shadow.

Rollbacks for plugin auto-updates

Lastly, let’s quickly discuss plugin auto-updates. You can now enjoy the convenience of plugin auto-updates with the safety of rollbacks if anything goes wrong.

Conclusion

Happy creating and enjoy exploring and using WordPress 6.6.