Hi and welcome to Learn WordPress. Let's explore some of the new additions and
enhancements that have landed with WordPress 6.6. 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 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. In 6.6 we will also see a redesigned published flow. Key
information is displayed in a clear minimalistic and condensed way top right.
The Set Featured Image has moved to the top and you can access and update the
settings in 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. 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.
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 create overlapping designs with ease. 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. So as you can see negative
margins allow for various design possibilities. 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.
And 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 and 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. Now 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. And once again after saving
we can refresh the page on the right and we will see that the design has
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. 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 and then we can click on the shuffle button in the block tool
bar to view and select another pattern that meets our requirements.
In 6.6 background images have been extended to the Site Editor within
Styles. To add a background image open Styles go to Layout and then click on
Add Background Image at the bottom and then you can select an image from your
Media Library. Once added the image can be displayed as cover or contain
backgrounds. Or the background can be set to repeat. 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 and click on the plus icon and create a custom shadow and
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. Lastly let's quickly talk about plugin auto-updates. You can now enjoy
the convenience of plugin auto-updates with the safety of rollbacks if anything
goes wrong. Happy creating and enjoy exploring and using WordPress 6.6.