What's new with WordPress 6.6? WordPress 6.6? (r)
-sidebar-toc> -language-notice>
WordPress 6.6 "Dorsey" has come available. The latest version focuses on refining and enhancing several features introduced in previous versions. But, a lot of new features make the basic one step forward on the 3rd phase in WordPress development.
An total of 299 tickets for Core Track are included in WordPress 6.6, along with 392 improvements, 462 bug fixes and 46 accessibility improvements to blocks in the Editor.
However, pattern overrides aren't the only great additions to the upcoming WordPress release. So, let's begin on our quest to explore the most exciting updates and features coming with WordPress 6.6.
Patterns that are synchronized overrides
There are two types of patterns for block:
- Synced block patterns
- Normal (not not synced) block patterns
The patterns that are synchronized have overrides in the middle between the two extremes. With the Block Bindings API, you can create blocks that maintain the same pattern structure across your site and alter in accordance with the customizations made to the style and structure of your pattern through the editor on your website. However, you can alter the information of the pattern for one instance, without impacting other instances of the same pattern on the site.
Find out more about how Pattern overrides function.
In the beginning, you'll need an synchronized pattern. It is possible to create it by hand in the post editor, or search for previously synced patterns within the Site Editor's patterns section.
Step 2. Step 2: Go through the My patterns section, and locate the new pattern you have synced. Then open it up in the website editor, and then select the blocks that you want to modify individually.
Navigate to the block settings sidebar and scroll down into the Advanced section. Here, you'll find a button, to enable Overrides.
When you click the button, you will be prompted to add a name and set the kind of pattern.
Step 3.: Repeat the same procedure for each block that you'd like to change. Once you're done, make an entirely new page or post and add your personal pattern.
Step 4 Modify the content of the blocks in order to bypass and save the post. Then, you can check the results at the top of the page.
You're finished. You can add any number of these patterns on your website and every new one shows the same original content but it is now ready for modification.
Let's look at the code of these patterns. Return to the Patterns area of the Editor for Sites. Select My Patterns and then add your own pattern. Then, open the Options menu and select Code Editor to view the patterns' code.
In the example we have chosen, the code should look as follows:
"level": 1, "metadata...
The block delimiter is where you will notice the metadata.bindings property. This makes the Heading block editable. The __default binding instructs WordPress to connect all supported attributes to a specific source, which is "core/pattern-overrides".
This same principle is applicable to every block you have to editable. See, for example, this block: Button Block:
Here, you won't see the blocks in any way, just a reference to the block pattern and the properties of each block that are set to editable.
Again, you can incorporate any block patterns anywhere on your site, and these patterns will match the exact structure and style that you created within the Site Editor.
Modifying the style and structure of patterns by modifying overrides Site editor
In the next step, you are able to alter the contents of editable blocks individually, keeping the structure the same.
A pattern with overrides on the front site
Since pattern overrides are an implementation of the Block Bindings API, we are able to override only blocks that support including Heading, Paragraph Image And Buttons.
You are able to override URL, Alt the Title image attributes
It is possible to delve deeper into pattern overrides in this WordPress TV video and this blog post by Nick Diego.
Pattern overrides can be open to improvements in the future and modifications. The discussion is continuing over on GitHub here and on this site.
Change custom field values using connected blocks
WordPress 6.5 added custom field types as a data source ( core/post-meta) for block attributes, allowing users to link fields with custom values. WordPress 6.6 introduces the latest enhancements for this feature, including the ability to edit custom field values directly from the connected block.
register_post_meta(
'post',
'book_title',
array(
'show_in_rest' => true,
'type' => 'string',
'single' => true,
'sanitize_callback' => 'sanitize_text_field'
)
);
After that, you can create the new page or post and then add a custom field with the same name. Select one of the supported blocks (i.e., a Block for Heading) to the canvas, change to the Code editor, and modify this block according to the below example:
Save the page/post and verify the outcome. Then, you are able to modify the content of the Heading right within the block. The value of the custom field should reflect your changes.
Edit a custom field from the connected block in WordPress 6.6
Additionally, a brand new panel now provides info regarding the block attributes that are connected to custom fields, displaying the block attributes linked to custom fields.
Image attributes using block bindings within WordPress 6.6
The feature is accompanied by similar functions:
Custom field values from a query loop.
If several blocks are linked by the custom field, they all share the same custom field's value and are updated in sync it.
Users can edit custom fields only in posts they're permitted to.
Last note: As we stated earlier, blocks which support this API have been relegated to blocks that support Block Bindings API are still only available for the following types of blocks:
Block
Attributes
Image
URL, alt, title
Heading
content
Paragraph
content
Button
URL, text, linkTarget, rel
Data Views enhancements
WordPress 6.6 introduces new layouts for the management pages. Management of templates was removed and incorporated into the section for patterns and the Site Editor's Patterns menu was reorganized into two sections that have the templates on top as well as the patterns underneath.
The new Patterns menu within WordPress 6.6
For pages, a new panel is available that displays a listing of pages. It also lets you look at any page by just a single button.
Pages that preview in WordPress 6.6
There are also new layout options in the View Options menu. (The icon is located in the upper right hand corner.)
View of patterns with view options in WordPress 6.5
View of patterns with view options in WordPress 6.6
In addition to these major changes, Data Views are modified by minor improvements improving the interface and making it more user-friendly and useful, such as a new bulk edit feature as well as the ability to display a badge that appears on the front page or the Posts page.
The badge indicates the Frontpage in WordPress 6.6
WordPress 6.6 makes Data Views one step further however, we're in the early stages of. The future are likely to see an extensibility API which will enable developers to act directly on views. To get a deeper look at the future of Data Views, check Data Views Update - June 2024 written by Anne McCarthy.
Additional improvements made to Block Editor
WordPress 6.6 brings 8 Gutenberg releases to the core - starting at 17.8 to 18.5 and includes many enhancements in the user interface, the React library as well as the Block API, and much more. Here are just a few:
A new publish flow
In 6.6, the post/page settings sidebar is now cleaner and is now lighter and more uniform. In this version, the unification process between editors of the site and post makes a step forward, and both editors are now using the the same publishing process.
Sidebar for page settings on the sidebar of page settings in WordPress 6.5 against. 6.6
The experience of publishing has been made uniform with a fresh status and visibility panel lets you alter the status of your post or page in a more convenient place.
The settings for status and visibility within WordPress 6.6
The other changes impact the Excerpt and Featured images controls. They moved to the top of the bar and also an improved Actions menu at the top right-hand corner.
Exerpt control and featured image inside the Post editor
View every block
Previous versions of WordPress When you clicked on one of the blocks in the block inserter, it showed only the block you could add to the block you selected. If, for instance, you had an Column selected, you could only view the Column block within the block inserter because it could only be added to the Column block to a Column.
In WordPress 6.5 If you select an Column block The block inserter shows a Column block.
Starting with WordPress 6.6, the block inserter will show two types of blocks. These include blocks that which you could add to the block that you are interested in as well as blocks that you can place beneath the block you want to add.
In WordPress 6.6 when you choose a Column block and then click on the Block Inserter, it displays two types of blocks
A keyboard shortcut to group blocks
Now, you can organize a set of blocks using the combination of + G on MacOS or Ctrl + G on Windows.
Block patterns are used in Classic themes
Beginning with the WordPress 6.6 Classic themes are now able to use the same interface for pattern management as block themes. Therefore, if you choose to use classic themes on your WordPress site, you'll enjoy the same rich experience with pattern management that block themes have. block themes.
These images show the patterns screen of WordPress 6.5 and the pattern administrator section of WordPress 6.6.
The patterns screen is available in WordPress 6.5 with the Twenty One classic theme
Pattern management in WordPress 6.6 using the Twenty One classic theme
It is now possible to edit, duplicate, rename, export as JSON, and delete patterns like you are used to doing with block themes.
Actions that mimic the pattern within WordPress 6.6 with the Twenty Twenty-One theme
It is possible to perform bulk actions using individual patterns or by clicking the bulk edit button. Sorting and filtering functions are also accessible.
Bulk actions on patterns within WordPress 6.6 by using the Twenty One classic theme
You can also create patterns like you create them in block designs. Simply click the "Add a new pattern button located in the upper right hand corner. You'll be asked to complete the form with pattern details.
Create a brand new design using the Classic theme to WordPress 6.6
After that, you are able to create or modify your design in the Site editor like you normally do.
Editing patterns in the Site editor, using the help of a Classic theme in WordPress 6.6
The update provides classic theme users more capability, opens up new possibilities and improves editing easier across classic and block themes.
Innovative tools and features available for designers and theme creators.
WordPress 6.6 brings so many impressive features and improvements for web designers as well as theme developers which is why we're happy to share the ones that we loved the most. Designers are more empowered when it comes to designing their websites with section styles, website-wide background images as well as a new shadow editor, and a grid layout variant. Plus, additional tools offer more flexibility to theme authors. Let's dive in.
Theme.json v.3
To summarize:
If you have defaultFontSizes or defaultSpacingSizes set in true The default font sizes and spacing sizes can be seen in the editor, and themes cannot design presets with default names. defaultFontSizes defaultFontSizes set at true by default.
With defaultFontSizes and defaultSpacingSizes setting to false The default size of fonts and spacing aren't visible in the editor, and themes may use default Slugs.
See the developer note to get a fuller overview of Theme.json version 3.
CSS particularity in WordPress 6.6
When WordPress 6.6 is released, 6.6, CSS specificity changes to make it easy to alter basic styles, while also providing accessibility to general styles.
Prior to 6.6 in the past, it was difficult to modify core styles as theme designers had to elaborate complex CSS rules to achieve desired outcomes. In 6.6, Core Block Styles and Global Styles (theme.json) have been modified. Core Block Styles and Global Styles ( theme.json) have been modified by wrapping the selector inside the :root:where (...) to reduce the specificity of core style to the range 0-1-0 and to make it more uniform and compatible with the new sections styles.
As an example, the .wp-block-image.is-style-rounded img has been updated to :root :where(.wp-block-image.is-style-rounded img).
Block builders who choose to use global styles are encouraged to modify their designs to make them adjustable using the Styles Interface in a predictable manner. If you own an individual block that has the following styles:
.wp-block-custom-block
padding: 0;
The code should be wrapped around "root: where():
:root :where(.wp-block-custom-block)
padding: 0;
This would allow users to bypass block padding by using the Global Styles interface.
Theme developers are asked to adopt the same approach so that block styles can be configurable through the Global Styles interface.
Check out the dev note for a deeper overview of CSS specialization within WordPress 6.6.
Section styles
WordPress 6.6 allows you to customize individual areas of pages or posts without needing to apply the same style to multiple blocks at a time. That means that you could select a number of blocks as well as child blocks and apply a different style across the whole selection.
This is made possible by the expansion of block style variations that are now able to style inner blocks and elements and make use of the smaller styling specificity for Global Styles.
Block style variations can be defined and controlled by using Global Styles only if you have registered them using one of the following techniques:
Utilizing theme.json partials within the theme's /styles directory
Utilizing using the register_block_style function
Defining block style variations under styles.blocks.variations in your theme.json
Let's dive in.
Defining block style variations by using theme.json partials
As with theme style variations blocks style variations may have their individual theme.json partial under the styles directory of your theme.
The difference between the two types of variations is that the block style variations come with a brand new top-level blockTypes property. This is a non-empty array of blocks that support the block style variant. Additionally, a brand new property called a slug property has been introduced "to ensure consistency among the many sources that could determine the different styles of block and to decouple the slug and the title property." property title property."
The dev note provides the following example of theme.json partial:
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"title": "Variation A",
"slug": "variation-a",
"blockTypes": [ "core/group", "core/columns", "core/media-text" ],
"styles":
"color":
"background": "#eed8d3",
"text": "#201819"
,
"elements":
"heading":
"color":
"text": "#201819"
,
"blocks":
"core/group":
"color":
"background": "#825f58",
"text": "#eed8d3"
,
"elements":
"heading":
"color":
"text": "#eed8d3"
Determining the block style variation programmatically by using register_block_style
Registering block style using the register_block_style function provides a second way to register block style variations. You can use it in the theme's functions.php this way:
register_block_style(
array( 'core/group', 'core/columns' ),
array(
'name' => 'light',
'label' => __( 'Light' ),
'style_data' => array(
'color' => array(
'background' => '#973C20',
'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 that you want to use, the Styles panel of the block sidebar will display a button that matches the section style you have registered.
A variation of the section style in WordPress 6.6
The article provides a greater review and more instances of Section Style variations within styling sections, nested elements, and more with Block Style Variations in WordPress 6.6 by Justin Tadlock as part of the dev note by Aaron Robertshaw, and in Block Styles: Extend block style variations Pull request.
Block style definition using Theme styles.
While it's currently feasible to utilize this theme.json styles.variations property, this option can only be used temporarily and is likely to be abandoned soon. For more detailed information about go to this part of the developer's note.
Type and color presets
You can now alter the color palette as well as font families of your theme through the Global Styles interface by choosing one of the pre-sets.
If the theme you are using supports pre-sets for typography or color these are available as colors along with Typography settings within Global Styles.
The following images show two palettes of colors offered by Twenty Twenty-Four.
Light color palette in Twenty Twenty-Four
Dark color palette in Twenty Twenty-Four.
In order to add this feature to your themes, it is necessary to design style variations that only include the use of typography and colors. The styles thus defined are then extracted and utilized for creating presets.
On this feature, see this feature the Core Editor Enhancement Update your design and create individual designs with different colors, typography...
Background images for the entire site
From WordPress 6.6 onwards, you are able to create website-wide background images in theme.json and the Site Editor.
A site-wide image is an aspect of the background image property set on the body element at the web level. The image appears on every website page.
In the theme.json, to identify a website-wide background image it is possible to use backgroundImage.url under the styles.background property:
"styles":
"background":
"backgroundImage":
"url": "https://example.com/bg.png"
In the above example, we set an absolute path to the image. However, you can also define backgrounds using paths that are relative to the root theme in by this method.
"styles":
"background":
"backgroundImage":
"url": "file:./assets/bg.png"
You can then employ the following image props:
backgroundPosition
backgroundSize
backgroundRepeat
If you're not a theme developer and you want to use site-wide background images through the Styles panel of the Site editor. In WordPress 6.6, you'll find the proper controls in Styles > Layout.
The Background Image panel of Style settings.
This is the first iteration of background images. If you want to know more about how it works along with its shortcomings, as well as what's to come, refer to the dev note Images that are site-wide for WordPress 6.6.
Grid layout variations
The latest layout variant of the block Group allows the user to show elements in the group in a grid.
You could try it out by adding a Group block onto the editor's canvas. Then, select the Grid design in the block settings panel.
The layout grid in WordPress 6.6
Grid layout is available in two types:
Auto generates the grid rows and cols in the background automatically
Manual allows you to define the columns you wish to include in the grid.
Include content into grid elements and adjust them with the help of handles. It is also possible to adjust the minimum column size or the columns' number based upon the type of grid selected.
Margins that are negative
You can now set negative margins for all blocks supporting margin controls. Prior to the release of WordPress 6.6 the feature was only accessible within theme.json, while now it's easy to apply negative margins on elements in order to create an effect of overlapping.
Note that, as of WordPress 6.6 it is recommended to manually include the negative value as illustrated in the following image.
Setting negative margins to a Buttons block within WordPress 6.6
Custom shadows
In WordPress 6.6, you can make and modify custom shadows in the Global Styles interface. To create your custom shadows go to the Site Editor and select Shadows from the Global Styles menu. Here, you will find the custom Panel. When you click on the + button, a brand new element opens up to the controls that allow you to alter the shadow you have created or change its name/delete.
Controls for shadows in WordPress 6.6
Custom aspect ratio presets
Now, theme developers can define custom aspect ratio presets by setting the settings.dimensions.aspectRatios option in theme.json.
Additional changes for developers
However, the changes for developers are not limited to themes. The additions and enhancements also affect the React library as well as the various APIs.
Options API: Turn off autoload on large options
Prior to WordPress 6.6 was launched, a vast variety of options load automatically on every page load. To avoid the default behaviour that was being used, developers were required to provide one of "yes"/true or "no"/false for the final parameter in add_option() or update_option() functions. However, as this parameter was not required and had a default value that was "yes", huge amounts of unneeded data were loaded onto each webpage, resulting in an adverse impact on website performance.
In order to prevent this, WordPress 6.6 introduces a few adjustments to options API: Options API:
To allow WordPress to decide if the option to be loaded on the currently page, the default value for the autoload parameter in Add_Option() and update_option() has been modified to "yes" to"null". The parameter can now be set to one of the following value:
true This option should be loaded on each page in order to prevent the need for an additional DB query.
False: never automatically load this option, thereby preventing data to load on every page.
null could be autoloaded, meaning that the value of autoload should be calculated in a dynamic manner. The default is that options load unless they contain large value.
The database values changed accordingly so that the autoload value for each choice will be one of the following options:
on is required to be loaded automatically for every webpage. This is done with the explicit real value.
off is not loaded automatically and is only available on a single administrator page. It's added with an explicit false value.
auto: use WP's default behavior of autoloading. When WP is 6.6, it should autoload however the process could be changed in the near future.
auto-on: should be autoloaded. It's dynamically set to the true value.
auto-off is not to be loaded auto-style. It's dynamically set as false.
Along with these changes, WordPress 6.6 includes a number of features and filters:
The wp_autoload_values_to_autoload() function returns all database values that should be autoloaded.
The wp_autoload_values_to_autoload filter allows to edit the list of options that should autoload.
The wp_default_autoload_value filter sets the value of an option where no explicit value has been set.
The wp_max_autoloaded_option_size filter modifies the threshold above which options will not autoload by default. The default value is 150000. (150kb)
This feature is especially beneficial on websites that have a lot of plugins. It is a worthy subject for plugin developers. For a more thorough overview, we recommend checking the custom aspect ratio settings.
Enhancements to the React library
Two major changes apply to the React library. The first, WordPress 6.6 incorporates React 18.3, which adds warnings for deprecations and other modifications to assist developers in preparing for React 19 once it becomes stable.
Developers can also use the new React JSX transform, which was first introduced with React 17.
Improvements to Block API Block API
WordPress 6.6 is also bringing a number of technical changes to Block API. Block API, including the following:
Universal Extensibility APIs
Improved active block variation detection
Social Links block changes in WordPress 6.6
Summary
In this post that we have covered a variety of amazing features and enhancements coming with WordPress 6.6 including block pattern overrides, to improvements for Data Views, new features that cater to theme designers, and the unification of editing experiences for users of the Site and Post editors. However, there's a lot more that we did not mention in the article including the rollbacks that auto-updates can use for.
If you want to dive further, don't miss a series of excellent resources from WordPress key contributors that we referred to during the testing process for WordPress 6.6. Of the numerous sources that we recommend, we would suggest WordPress 6.6 The Source of Truth by Anne McCarthy and The Learn WordPress online Workshops on Meetup and the WordPress Developer blog, the developer notes posted by the Make WordPress Core blog, and the regular updates by Birgit Pauli-Haack, who is the editor of Gutenberg Times, just to name a few.
It's now your turn to decide. Are you familiar with WordPress 6.6 capabilities yet? What features or changes did you like the most? Drop a comment below and join in the discussion.
Carlo Daniele
Carlo is an avid fan of front-end and web design development. He has been playing with WordPress since more than 20 years, also as a collaborator with Italian as well as European universities and educational institutions. He has published hundreds of posts and tutorials on WordPress and has published them on Italian and foreign websites and on printed magazines. He is via LinkedIn.
Website
Twitter