WordPress 6.6 Coming Soon: Highlights of New Features and Improvements

WordPress 6.6 Scheduled for release on July 16, 2024, it will optimize and enhance several features from previous releases, as well as introduce a number of new features to further advance Phase 3 of WordPress development. The new release includes 299 core tickets, 392 enhancements, 462 bug fixes, and 46 accessibility improvements for the block editor.

Here are the major new features and improvements in WordPress 6.6:

Simultaneous sample coverage

Block Binding API s first implementation was for concatenating block properties and custom fields. The first implementation of the WordPress 6.6 in which the second iteration unlocked the program called "Simultaneous sample coverage"Synchronized Sample Enhancements.

There are two types of block samples:

1. Synchronized Block Sample
2. Standard (unsynchronized) block samples

The main difference between these two sample types is how they affect the content on your website. When you change a synchronized sample, everything on the site that uses that sample is automatically updated, and like magic, all instances of the same sample become exactly the same. This is not the case with standard block samples, when you change one it only affects that one, the rest stays the same, very personalized.

Well, Synchronized Sample Overlay is like the superhero between the two. It utilizes a superpower called the Block Binding API that allows you to create a sample that maintains a uniform structure across your site, but is flexible at the same time. When you tweak the structure or style of this sample in the site editor, all instances that use it will be updated in sync, but magically, the content of each instance can still be modified independently without affecting the rest.

Now, let's see how to work this sample overlay magic!

First.

You will need a synchronization template. You can build it from scratch in the article editor or find an existing synchronization template in the "Templates" section of the site editor.

Step 1: Go to Templates and copy an existing template, such as the Hero template for the Twenty Twenty-Four default theme.

Add a name and set the copy as a synchronized sample.

Step 2: Navigate to "My Sample" section to find the new synchronization sample. Open it in the Site Editor and select all the blocks that need to be covered individually.

Go to block setupa side-bar (in software)and scroll down to theadvanced segment. There is one."Enable Override"Button.

click on a buttonAfter that, it will prompt theAdd NamefurthermoreSetting the sample typeThe

Step 3: Repeat the same process for each block to be rewritten. When finished, create anew articlemaybeweb pageAnd include your custom samples.

Step 4: Change the content of the block for rewriting and save the article. Finally.Checking results on the front endThe

This completes it. You can add as many of these samples as you like anywhere on your site, and each new instance will display the same original content, but can be customized.

Now, let's check the code for these samples. Navigate back to the site editor's "prototype"Section. Select "My Sample" and add your sample. Then, open the Options menu and select Code Editor to view the code for the sample.

For example, the code should look similar to the following:

<div class="wp-block-group">
    <!-- wp:heading {
        "textAlign":"center",
        "level":1,
        "metadata":{
            "bindings":{
                "__default":{
                    "source":"core/pattern-overrides"
                }
            },
        },
        "name":"Hero title"
    },"fontSize":"x-large"} -->
        <h1 class="wp-block-heading has-text-align-center has-x-large-font-size">Commitment to innovation and sustainable development</h1>
    <!-- /wp:heading -->
    ...
</div>

In the block separator, you'll notice that the metadata.bindings attribute. This makes the title block editable.__default Bindings instruct WordPress to connect all supported properties to a specific source, i.e."core/pattern-overrides"The

The same properties apply to all the blocks you need to edit. Take the button block as an example:

<div class="wp-block-buttons">
    <!-- wp:button {
        "metadata":{
            "bindings":{
                "__default":{
                    "source":"core/pattern-overrides"
                    }
                },
            "name":"Hero button"
            }
        } -->
    <!-- /wp:button -->
    <div class="wp-block-button">
        <a class="wp-block-button__link wp-element-button">About Us</a>
    </div>
    ...
</div>

Now, return to the article editor and switch to the code editor. The code should look similar to the following:

Here, you won't see a specific block, but rather a reference to the block sample, and a set of editable block properties.

Similarly, you can add any number of block samples anywhere on the site, which will maintain the same structure and design as when built in the site editor.

Edit the style and structure of the sample in the site editor and rewrite it.

After that, you can change the content of each editable block individually, while keeping the overall structure intact.

Editing custom field values from connected blocks

WordPress 6.5 introduced a new feature that allowed users to link custom field values as data sources (core/post-meta) to block attributes.WordPress 6.6 further enhances this feature and now allows users to edit these custom field values directly from the block.

You can try this out by registering a new set of custom fields from a plugin or theme's functions file, making sure to register the post metadata with the show_in_rest set to trueThe following is an example. Examples are shown below:

register_post_meta(
    'post',
    'book_title',
    array(
        'show_in_rest' => true,
        'type' => 'string',
        'single' => true, 'sanitize_callback' => 'sanitize_callback', array(
        'sanitize_callback' => 'sanitize_text_field'
    )
).

When you're done, create a new post or page and add a new custom field with the same name as the custom field you created earlier. Add a supported block (such as a title block) to the editor, then switch to the code editor and modify the block as follows:

<!-- wp:heading 
{
    "metadata":{
        "bindings":{
            "content":{
                "source":"core/post-meta",
                "args":{
                    "key":"book_title"
                }
            }
        }
    }
} -->
<h2 class="wp-block-heading"></h2>
<!-- /wp:heading -->

Save the post/page and check the results. Now you can edit the title content directly from the block and the custom field values should reflect your changes.

In addition, a new panel now provides information about the block attributes linked to a custom field, showing the block attributes linked to the custom field.

This feature also brings some related functionality:

• You can update custom field values from a query loop.
• If multiple blocks are connected to the same custom field, they will share the same custom field value and synchronize changes with it.
• Users can only edit custom fields in posts to which they have permissions.

Final note: As mentioned earlier, support for the Block Binding API is still limited at this time:

Data View Enhancements

Introduced in WordPress 6.5, the Data View is an improved user interface for managing content such as templates, samples, posts and media. This new interface will play an important role in phase 3 of the development roadmap, especially when it comes to collaboration. Therefore, we can expect future versions of WordPress to bring more enhancements such as assigning people to review posts or creating custom views to streamline workflow. In WordPress 6.6, the new interface is only available in the site editor, but will be extended to more administrative sections in the future.

WordPress 6.6 introduces a new admin page layout. The template section administration has been removed and integrated into the samples section, and the site editor's samples menu has been rearranged into two sections, with the template section at the top and the samples at the bottom.

For pages, a new panel provides a list of pages and allows a one-click preview of any page.

You'll also see new layout options in the View Options menu. (Icon in the upper right corner.)

In addition to these major changes, several minor enhancements have been made to the data view to improve the functionality and informativeness of the interface. Examples include the addition of a new bulk editing feature and the display of badges on the front-end page or on the article page.

WordPress 6.6 takes data views a step further, but we're still in the early stages. In the future, we'll see the introduction of an extended API that will allow developers to manipulate views directly. For a deeper dive into the future of data views, check out Anne McCarthy'sData View Update - June 2024".

Other improvements to the block editor

WordPress 6.6 integrates 8 Gutenberg releases into the core - from 17.8 to 18.5 - bringing a number of improvements in the interface, React libraries, block APIs, and more. Here are some of them:

• New release process
• View All Blocks
• Shortcut keys for grouping blocks

New release process

In version 6.6, the article/page settings sidebar has been simplified and optimized to be lighter and more consistent. This iteration takes the process of harmonization between the article editor and the site editor a step forward, with both editors now having the same publishing process.

Page Setup Sidebar Comparison in WordPress 6.5 vs. 6.6 The publishing experience has been standardized with a new Status & Visibility panel that allows you to set the status of your posts/pages in a more convenient location.

Other changes affect the Featured Image and Summary controls, which have been moved to the Improved Actions menu at the top of the sidebar and in the upper right corner.

View All Blocks

In previous versions of WordPress, when you selected a block, the block inserter would only show blocks that you were allowed to add to the selected block. For example, when selecting a column block, the block inserter would only show column blocks because you could only add columns.

Starting with WordPress 6.6, the block inserter displays two groups of blocks: blocks that can be added to the selected block and blocks that can be added below the selected block.

Shortcut keys for combining blocks

Now you can use the ⌘ + G shortcut on MacOS or Ctrl + G on Windows to group selected blocks together.

Block samples in classic themes

Starting with WordPress 6.6, Classic Themes support the same sample interface as Block Themes. Therefore, if you are using Classic Theme on your WordPress site, you will enjoy the same rich experience in the samples management as in Block Themes.

The following image compares the sample screens in WordPress 6.5 with the sample management section in WordPress 6.6.

Sample screens in WordPress 6.5 with Twenty Twenty-One Classic Theme

Sample Management in WordPress 6.6 with Twenty Twenty-One Classic Theme

Now you can edit, copy, rename, export to JSON and delete samples just like in the block theme.

Sample actions in WordPress 6.6 with Twenty Twenty-One Classic Theme

You can perform batch operations by selecting samples individually or by clicking the batch edit button. Sorting and filtering functions are also available.

Sample Batch Operations in WordPress 6.6 with Twenty Twenty-One Classic Theme

You can also create samples just like in the Block theme. Click the Add New Sample button in the upper right corner and you will be prompted to fill out the sample details form.

Adding New Samples with Classic Themes in WordPress 6.6

You can then build or edit your samples in the site editor as usual.

This update brings more features to Classic Theme users, unlocking new abilities that make the editing experience more consistent between Classic Themes and Block Themes.

New tools and features for designers and theme developers

WordPress 6.6 brings many great features and enhancements for designers and theme developers. Designers have more access to styling, including partial styling, site-wide background images, a new shadow editor, and grid layout changes. And more tools provide greater flexibility for theme authors. Let's take a look.

• Theme.json v.3
• CSS Specificity in WordPress 6.6
• Partial Style
• Color and typography presets
• Site-wide background image
• Grid layout changes
• negative margin
• Customized Shadows
• Customized Aspect Ratio Presets

Theme.json v.3

WordPress 6.6 introduced a new version of theme.json - version 3. The new version changes the way predefined properties are overridden. Now, to change the default values for font size or spacing size, you need to override the default values in the settings.typography maybe settings.spacing commander-in-chief (military) defaultFontSizes maybe defaultSpacingSizes set to falseThe

Summarized below:

• (coll.) fail (a student) defaultFontSizes maybe defaultSpacingSizes set to true When the default font size and spacing size are displayed in the editor, themes cannot create presets using the default identifiers. By default, thedefaultFontSizes set to trueThe
• (coll.) fail (a student) defaultFontSizes maybe defaultSpacingSizes set to false When the default font size and spacing size are not displayed in the editor, the theme can use the default identifiers.

Check out the developer notes for Theme.json version 3 A more comprehensive overview of the

CSS Specificity in WordPress 6.6

In WordPress 6.6, CSS specificity has changed and it is now easier to override core styles while supporting global styles.

Prior to 6.6, overriding core styles was often difficult and theme developers had to write complex CSS rules to achieve the desired effect. In 6.6, core block styles and global styles (theme.json) have been overridden by (...) wrapping existing selectors to reduce the specificity of the core styles to 0-1-0, making them uniform to support the new section styles.

For example, .wp-block-image.is-style-rounded img has been updated to (.wp-block-image.is-style-rounded img).

Block developers who choose to include global styles are encouraged to make the same changes to their styles in order to customize them in a predictable way through the Styles interface. So if you have a custom block with the following style:

wp-block-custom-block {
padding: 0;
}

You should wrap it in :root :where():

:root :where(.wp-block-custom-block) {
padding: 0;
}

You can refer to the developer notes for moreA Deeper Look at CSS Specificity in WordPress 6.6The

Partial Style

WordPress 6.6 allows you to style individual sections of a post or page without having to reapply the same style block by block. This means you can select multiple blocks and sub-blocks and assign one style variation to the entire selection.

This is made possible by the extension of block style changes, which now supports styling of inner blocks and elements and utilizes reduced style specificity for global styling.

You can define and manipulate block style changes through global styles only if you register the block style change through one of the following methods:

• Use the theme.json section in the theme's /styles directory
• utilization register_block_style function (math.)
• Define in your theme.json styles.blocks.variations

Defining block style changes using the theme.json section

Similar to theme style changes, block style changes can have their own theme.json section in the theme's /styles directory.

The difference between the two variations is that the block style variation has a new top-level blockTypes property, which is a non-empty array of block types that support block style changes. In addition, a new slug attribute to "provide consistency between the different sources that define block style changes and to separate slugs from translatable title attributes."

The developer notes provide the following example theme.json section:

{
"$schema": "https://schemas.wp.org/trunk/theme.json",.
"version": 3,
"title": "Variation A",


"styles": {
"color": {

"text": "#201819"
},
"elements": {
"heading": {
"color": {
"text": "#201819"
}
}
},
"blocks": {
"core/group": {
"color": {
"background": "#825f58", "text": "#eed8d3", {
"text": "#eed8d3"
},
"elements": {
"heading": {
"color": {
"text": "#eed8d3"
}
}
}
}
}
}
}

pass (a bill or inspection etc) register_block_style Programmatically define block style changes

register_block_style function provides a second way to register block style changes. You can register a block style change in the theme's functions.php Use it this way in the

register_block_style(
array( 'core/groups', 'core/columns' ),
array(
'name' => 'light', 'label' => __( 'Light' ), array(
'label' => __( 'light' ), array( 'name' => 'light', 'label' => __( 'light' ), array(
'style_data' => array(
'color' => array(

'text' => '#d2e3c8'.
),
'blocks' => array(
'core/group' => array(
'color' => array(
'background' => '#739072',
'text' => '#e3eedd'.
),
),
),
'elements' => array(
'link' => array(
'color' => array(
'text' => '#ead196'.
),
':hover' => array(
'color' => array(
'text' => '#ebd9b4', !
),
),
),
),
), ), ), ), ), ), ), ), ), )
)
);

Now, when you select a Group or Columns block, the Styles panel in the block's sidebar displays the registered partial style buttons.

For more detailed information and examples of some of the style changes, see Justin Tadlock's articleSetting up sections, nested elements and more with block style changes in WordPress 6.6Aaron Robertshaw'sDeveloper Notesas well asBlock Style Extensionsof the pull request.

Defining Block Style Changes Using Theme Style Changes

Although it is currently possible to use theme.json hit the nail on the head styles.variations attribute, but this approach is only temporary and will soon be deprecated. For a more detailed description, see the developer notes for therelevant partThe

Color and typography presets

Now, you can use the global style interfaceSelect an available presetto change the theme's color palette and font family.

If your current theme supports color and typography presets, they appear in the color and typography settings of the global style.

The following images show the two color palettes offered by Twenty Twenty-Four.

Twenty Twenty-Four's Light Color Palette

Twenty Twenty-Four's dark color palette

To add this feature to your theme, you need to create style variations that contain only colors and typography. The styles defined this way will be extracted and used to generate presets.

For this feature, see also theCore editor improvements: upgrade your designand theCreate individual typography and color variations...".

Site-wide background image

Starting with WordPress 6.6, you can add a new function to the theme.json and site editor to define site-wide background images.

A site-wide image is a background image attribute value that is set on the body element and appears on every page of the site.

exist theme.json To define the site-wide background image in the styles.background Attributes are used under the backgroundImage.url::

{
"styles": {
"background": {
"backgroundImage": {
"url": "https://example.com/bg.png"
}
}
}
}

In the above example, an absolute path to the image is set, but you can also define the background image using a path relative to the theme root directory, as shown below:

{
"styles": {
"background": {
"backgroundImage": {
"url": "file:. /assets/bg.png"
}
}
}
}

You can then use the following image properties:

• backgroundPosition
• backgroundSize
• backgroundRepeat

If you are not a theme developer, you can use the site-wide background image through the styles panel of the site editor. In WordPress 6.6, the appropriate controls will be found under Styles > Layout.

This is the first iteration of background images. For a more detailed look at how it works, its limitations, and future plans, see the developer's noteSite-wide Background Images in WordPress 6.6".

Grid layout changes

A new layout variation of the Group block allows you to display elements within a group as a grid.

You can try it out by adding a Group block to the Editor canvas and choosing a grid layout in the Block Settings panel.

There are two types of grid layouts:

• Auto: automatically generates grid rows and columns
• Manual: allows you to set the number of columns to be added to the grid

Add content to a grid element and resize it using the controls. You can also adjust the minimum column width or the number of columns according to the selected grid type.

negative margin

It is now possible to set negative margins for all blocks that support margin controls. Prior to WordPress 6.6, this feature was only available in theme.json, but now it's easy to apply negative margins to elements to create an overlapping effect.

Note that in WordPress 6.6, you need to add negative values manually, as shown below.

Setting Negative Margins for Button Blocks in WordPress 6.6

Customized Shadows

In WordPress 6.6, custom shadows can be created and edited in the Global Styles interface. To create a custom shadow, navigate to the site editor and select Shadow from the Global Styles menu. Here, find a customization panel. When you click the + button, a new element will appear giving you a set of controls to customize or rename/delete the shadow.

summarize

WordPress 6.6 comes with many new features and changes, from block mode overrides to data view enhancements, new features for theme developers, and a unified editing experience for site and post editors. But there's a lot more that hasn't been covered in this article, such asRollback feature for automatic updatesThe

For a more in-depth look at these changes, refer to a series of excellent resources from WordPress core contributors that were mentioned during our testing of WordPress 6.6. Among them, we recommend Anne McCarthy's bookWordPress 6.6 The Source of TruthThe "Meetup" on theLearn WordPress Online Seminar",WordPress Developer Blog, posted on the Make WordPress Core blogDevelopment Notesand Birgit Pauli-Haack in theGutenberg TimesRegular updates, etc. on the

Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!	Customer Service
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) E-mail: [email protected]
④ Working hours: Monday to Friday, 9:30-18:30, holidays off