What's new with WordPress 6.6? WordPress 6.6? (r)

-sidebar-toc> -language-notice>

WordPress 6.6 "Dorsey" is now become available. The latest version focuses on refining and enhancing several features introduced in earlier versions. But, a lot of new features make the basic an improvement on the third stage of WordPress development.

An total in the range of 299 Core Track tickets is included in WordPress 6.6 as well as 392 enhancements including 462 bug fixes, and 46 accessibility improvements to blocks of the Editor.

However, pattern overrides aren't the only exciting additions to the forthcoming WordPress release. So, let's begin on our quest to explore the most intriguing updates and features coming with WordPress 6.6.

Overrides that are synced

There are two different types of block designs:

• Synced block patterns
• Normal (not not synced) block patterns

Patterns that are synchronized have overrides in the middle between the two extremes. Utilizing this API, known as the Block Bindings API, you can create blocks that preserve the exact pattern design across your site and change in line according to the modifications added to the style and design of your design using the editor on your website. You can however modify the details of the pattern for just one example, and not impact any other instances of the design on your site.

Find out more about how Pattern Overrides function.

In the beginning you'll require a synced pattern. It's possible to make your own patterns using the post editor or search for previously created patterns that were synced in the site editor's pattern section.

Step 2. Step 2: Explore the My patterns section and select the new pattern you have transferred. It is then opened in the website editor, and select those blocks that you would like to change each one by one.

Navigate to the block settings sidebar, and then scroll to the Advanced section. You'll see a button, to enable Overrides.

After you click on the button, it will be asked to enter an initial name as well as set the pattern's type.

Step 3.: Repeat the same procedure for each block you'd like to alter. Once you're done, make an entirely new page or post and add your personal pattern.

Step 4. Modify the contents of the blocks in order to remove and protect the post. After that, you will be able to look at the results on the top on the screen.

You're finished. It is possible to include any of these patterns on your website and every new one displays the same contents, however it's now available for modifications.

Let's take a look at the codes to see these types of patterns. Return to the Patterns area of the Editor to find Sites. Choose My Patterns and then add your personal pattern. After that, go to the Options menu and then select Code Editor to view the codes of the patterns.

In the case we've chosen, the code should look following:

 "level": 1, "metadata... 

This is where you will notice that you have the metadata.bindings property. It makes the head 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 that you can edit. See, for example, this particular block Block: Button Block:

In this case, there is no way to view the blocks directly, just a description of the block and the characteristics of the block edited. It is also possible to incorporate any block patterns anywhere within your site and they will have the exact style and structure which you have created in the Site Editor. Modifying the appearance and design of patterns through modifying Overrides for the Site editor subsequent step, you'll be capable of changing the content of editable blocks individually while keeping the overall structure same. Patterns with overrides are displayed in the front-page area patterns are an extension of Block Bindings API, Block Bindings API, we are able to override only blocks that support including Heading, Paragraph Image And Buttons. You are able to override URLs, Alt the Title image attributes. It is also possible to examine the patterns overrides by watching this WordPress TV video and this blog post by Nick Diego. Pattern overrides can be open to improvements in the future and changes. Discussions are ongoing on GitHub here and on this website. Change custom field values using connected blocks WordPress 6.5 included custom field types to be a data source ( core/post-meta) for block attributes that allow users to connect fields with custom values. WordPress 6.6 includes the latest improvements for this feature, including the ability to edit custom field values directly via 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. Choose one of the available blocks (i.e. the Block for Heading) onto the canvas, move back to Code editor, and edit this block according to the example below to save the page or post and check the results. Then, you are able to modify the content of the Heading right within the block. The value of the custom field should reflect your modifications. Editing a custom field in the associated block within WordPress 6.6 In addition an entirely new panel is now available with information about the attributes of blocks that are connected to custom fields. The panel displays the attributes associated with blocks linked to custom fields. Image attributes using block bindings inside WordPress 6.6 This feature comes coupled with similar features: Custom field values from a query loop. If several blocks are linked by the custom field, they're all linked to the custom field's value and update in sync with it. The custom field can be modified by the user only in posts they're permitted to. Last note: As we mentioned earlier Blocks that use this API have been relegated to blocks that can support Block Bindings API are still accessible only for Blocks that support the following categories such as Block Attributes image URL, alt title Heading content Paragraph Content Button URL text, linkTarget, rel Data Views improvements WordPress 6.6 introduces new layouts for the management pages. Management of templates was removed and was incorporated into the area that deals with patterns. The Site Editor's Patterns menu has been reorganized in two sections with the templates in the upper part and the patterns beneath. The new Patterns menu within WordPress 6.6 For pages has a brand new panel accessible that shows a list of pages. The panel also allows you to look at any page by only pressing a button. Pages that show in WordPress 6.6 Also, there are different layout options available in the View Options menu. (The icon can be found at the top right corner.) View of patterns using views within WordPress 6.5 View of patterns with view options View of patterns with view options in WordPress 6.6 Additionally to the major overhauls Data Views have been improved by minor tweaks to the interface and making them more accessible and helpful to users with features like a bulk edit function along with the option to show a badge which is displayed on the front page or the Posts page. The badge signifies that the frontpage is in WordPress 6.6. Frontpage for WordPress. WordPress 6.6 WordPress 6.6 makes Data Views one step further however, we're in the initial phases of. In the near future, we'll likely include an extensibility API, which can allow developers to work directly on the views. To take a closer understanding of what is to come for Data Views, check Data Views Update for June 2024 written by Anne McCarthy. The Block Editor WordPress 6.6 Brings 8 Gutenberg updates to the core - starting with 17.8 up to 18.5 with many improvements to the user interface, the React library, the Block API, and much more. Below are a few features: A fresh publishing flow in 6.6 The settings for the page and post sidebar is now cleaner and is now lighter and more uniform. This version also features the unification process between editors for the site and the post takes a leap up, as both editors now use the the same publishing process. The page settings are displayed on the sidebar for page settings within WordPress 6.5 against. 6.6 The experience of publishing is now uniform thanks to a fresh dashboard for visibility and status that permits you to alter the state of your post or page from a more convenient spot. The settings for status and visibility within WordPress 6.6 The other modifications affect The Excerpt and Featured Images control. They moved up to the top of the bar along with an enhanced Actions menu in the upper right corner. Control of Excerpts and the an image featured in the Post editor View every block Previous versions of WordPress when you clicked upon one block in Block Inserter it showed only the block that you could include to the block you chose. For instance, if you had an Column selected, you could only see the Column block inside the block inserter since it could only be put into the Column block in a Column. For WordPress 6.5 When you choose the Column block, the Block Inserter will show the Column block. From WordPress 6.6 The block inserter shows two types of blocks. These include blocks that which can be added to the block you are interested in and blocks are able to be placed beneath the block that you wish to include. In WordPress 6.6 when you select the Column block and then click on the block inserter it displays two different types of blocks. shortcut keyboard to group blocks. Now, you are able to group blocks by using + G on MacOS and Ctrl + G when using Windows. Block patterns are utilized in Classic themes beginning with WordPress 6.6 Classic themes are currently able to make use of the same pattern management interface management as block themes. If you opt to use classic themes on your WordPress site, you'll enjoy the same experience of pattern management that block themes have. Block themes. The images below show the pattern screen in WordPress 6.5 as well as the section for pattern administrators in WordPress 6.6. The screen for patterns is now available in WordPress 6.5 using the Twenty One classic theme. It is also available in WordPress 6.6 with twenty One classic theme. It's now feasible to edit duplicate, change names or export to JSON as well as delete patterns like you are accustomed to with blocks in WordPress. Actions that mimic the pattern are available in WordPress 6.6 with the Twenty Twenty-One theme. It's possible to perform large-scale actions by using patterns or by clicking on the button to edit bulk. Filtering and sorting options are available as well. You can perform bulk actions on patterns in WordPress 6.6 by using the Twenty One classic theme. You can design patterns similar to how you create them in block patterns. Just click on the "Add New Pattern" button on the right-hand upper corner. It will prompt you to fill in the form, including details of your pattern. Make a completely new design by importing the Classic theme to WordPress 6.6 Following that you can create or modify your design within the Site editor just as you normally do. Modifying patterns using the Site editor, using the aid of a Classic theme in WordPress 6.6 The update provides Classic theme users with more capabilities and opens new options and facilitates editing across classic and block themes. New tools and features are that are available to theme designers and creators. WordPress 6.6 provides a variety of amazing features and improvements for web designers, as well as theme developers which is why we're happy to share our favorites that we liked the most. Designers can be more confident in the design of their websites with section styles, website-wide background images, a new shadow editor, and grid layout variations. Plus, additional tools offer greater flexibility for theme creators. We'll take a look. Theme.json v.3 For more information, click here. If you've got defaultFontSizes or defaultSpacingSizes that are set to true, the default dimensions of fonts and spacing can be seen within the editor. This means that themes cannot design presets with default names. defaultFontSizes defaultFontSizes are set to true by default. With defaultFontSizes and defaultSpacingSizes setting set to false size of the font and spacing aren't visible in the editor. Also, themes could use default slugs. Read the developer's guideline to get a fuller overview of Theme.json version 3. CSS particularity in WordPress 6.6 After WordPress 6.6 releases, 6.6, CSS specificity changes to make it easy to modify basic style and also provide access to general styles. Before 6.6 before, the process was cumbersome to modify basic styles since theme developers needed to create complicated CSS rules in order to get the desirable outcomes. The new style is 6.6, Core Block Styles as well as Global Styles (theme.json) have been modified. Core Block Styles and Global Styles ( theme.json) are modified through wrapping the selector inside the  where:root (...) to reduce the range of style and make it more akin to the 0-1-0 range as well as to make it more uniform and in line with the latest 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 that choose to use global styles can alter their designs in order to make them adjustable using the Styles Interface in a predictable method. 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. The theme developers must follow the same method in order for block styles to be set through the Global Styles interface. Check out the dev note for a deeper overview of CSS specificization in WordPress 6.6. Section styles WordPress 6.6 lets you customize individual areas of pages or posts, without having to apply the same style across multiple blocks at a time. It allows you to choose any number of blocks as well as children blocks, and then apply different styles across the entire selection. This is made possible by the development of styles for blocks that allow you to design internal blocks and components and make use of the smaller stylistic specificity that is available 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. Definition of block style variations making use of theme.json partials, similar to theme style variations blocks style variations may have their own theme.json portion in the style directory in your theme. The distinction between these two kinds of styles is that the block style variations are accompanied by a high-level blockTypes property. This property is a non-empty list of blocks which support the block style variant. Also, a brand-new property known as a slug was added "to ensure consistency among all the sources used to determine the different designs of block, and to decouple the slug and the title property." Title property of the 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. The section style is a variation in WordPress 6.6. style is available in WordPress 6.6 The post provides a greater review and more instances of Section Style variations within styling sections, nested elements and much more. Block Style Variations in WordPress 6.6 written by Justin Tadlock as part of the development note written by Aaron Robertshaw, and in Block Styles Extension of block style variations The pull request. Block style definition using Theme styles. Although it is currently possible to use the theme.json styles.variations property but this feature will only last for a few days and will likely be discarded soon. For more detailed information about the subject, check out this section of the developer's note. Type and color presets You can change the colors and font families of your theme via The Global Styles interface by choosing one of the presets. If the theme you're employing supports presets for typography or color, these can be found as color options, along with Typesettings within Global Styles. The following images show two palettes of colors offered by Twenty Twenty-Four. The light color palette is available in Twenty Twenty-Four Dark color palette in Twenty Twenty-Four. To add these features to your themes, it is necessary to design styles that are limited to using typography and colours. The style variations that are defined are then extracted and utilized to create presets. On this feature, see The Core Editor Enhancement Update your design and create individual designs using various styles, colors, and typography... Background pictures for the entire site Beginning with WordPress 6.6 to 6.6 You can make website-wide background images using theme.json as well as the Site Editor. Site-wide images are one of the aspects of background image properties that are set up on the body element on the internet level. The image is displayed in every page of a website. 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. But, it is also possible to create backgrounds with path names that relate to the root theme in using this technique. "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. Within WordPress 6.6 there are the correct controls within Styles > > Layout. The Background Image Panel of Style Settings. This is the first iteration of background images. If you'd like to learn more about how it works along with its shortcomings, and more to come, refer to the development note. The images can be used across the entire site for WordPress 6.6. Grid layout variations The most current design variant for the block Group allows the user to show elements in the group as grids. It is possible to test it by adding a Group block onto the editor's canvas. After that, choose the Grid design within the block's block settings. Grid layout is available in WordPress 6.6 Grid layout is offered in two forms: Auto generates the grid rows and cols within the background. Manual lets you specify the columns you wish to add in the grid. Incorporate content into grid elements and alter them with the help of handles. You can also adjust the minimum column size or the column's number depending on the kind of grid you choose. Margins that have a negative value are now able to set negative margins for any block that supports margin controls. Prior to the introduction of WordPress 6.6 the feature was only accessible in theme.json but it's now easy to set negative margins on elements for creating the appearance of overlap. Note that, as of WordPress 6.6 it's suggested to manually include the negative margin as shown in the image below. Set negative margins as the Buttons block within WordPress 6.6 Custom shadows In WordPress 6.6, you can create and edit custom shadows using the Global Styles interface. For creating your own custom shadows, visit the Site Editor and choose Shadows on the Global Styles menu. Here, you will see the Custom Panel. If you press the plus button, a new component opens to control panel that lets you modify the shadow you've made, or alter the name of it or remove it. 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. Additionally, developers will be able to benefit from the changes. However it is important to note that the new changes for developers aren't limited to theme. The additions and enhancements also alter the React library and the APIs. Options API: Disable autoload for large choices Prior to when the time WordPress 6.6 launch, a vast variety of options would load on every load of the page. To avoid the default behaviour which was in use, developers were required to provide the option of "yes"/true or "no"/false for the final option in the add_option() as well as update_option() functions. But, since this parameter was not required and had a default value of "yes", massive amounts of unnecessary data were loaded on each page which had a negative impact on website performance. To prevent this from happening, WordPress 6.6 introduces a few adjustments to options API. Options API: Allows WordPress to determine if it wants the option to be loaded for the page currently being loaded is the default value of the autoload parameter of the Add_Option() or update_option() is changed to "yes" to"null". The parameter now can be set to one of the following options which is: true. This parameter should be loaded on each page to avoid the requirement for an additional DB query. False: Never ever load this option automatically, thereby preventing data to load for each page. Null can be loaded automatically, meaning that the value of autoload must be determined using a dynamic method. It is the default that choices load unless they contain large value. The values in the database were modified to ensure that the value of autoload of each option is at least one of these options that must be loaded automatically for every page. This happens using the specific value. off does not load in a way and it is available in a single administrator's page. It's added by adding an explicitly false number. auto: take advantage of WordPress' default autoloading behavior. If WP is 6.6 the system should load automatically but this process may change within the next few months. auto-on should be loaded automatically. It is set dynamically to the actual value. Auto-off cannot be loaded auto-style. It is set dynamically 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 setting is 150000. (150kb) This function is particularly beneficial for websites that have a lot of plugins. This is an important topic for developers of plugins. For more in-depth information it is recommended to check the custom aspect ratio settings. React library enhancements React library Two major adjustments are available to React 6.6. Two major changes are made to the React library. First, WordPress 6.6 integrates React 18.3 that includes warnings about deprecations as well as other modifications to assist developers in making preparations to prepare for React 19 once it becomes stable. Developers can also use the brand new React JSX transform, which first came out with React 17. Enhancements to Block API Block API WordPress 6.6 is also bringing several technical enhancements in the Block API. Block API, including these: Universal Extensibility APIs Enhanced active block variation detection Social Links Block changes are now available in WordPress 6.6 Summary In this post that we have described a number of incredible new features and improvements that are coming to WordPress 6.6 including block pattern overrides, to improvements for Data Views, new features that cater to theme designers, and the unification of editing experience that users can access through the Site as well as Post editors. However, there's a lot more that we did not include in our article such as auto-update rollbacks which they can utilize to. If you're looking to explore deeper, you should not miss the wealth of resources that are provided by WordPress important contributors we used in the testing process for WordPress 6.6. From the many sources we recommend, we would recommend WordPress 6.6 the Source of Truth by Anne McCarthy as well as The Learn WordPress online Workshops on Meetup and The WordPress Developer blog, the Developer notes published by The Make WordPress Core blog, as well as the frequent updates from Birgit Pauli-Haack who is the editor of Gutenberg Times, just to give a handful of. It's now your turn to decide. Are you aware of WordPress 6.6 capabilities yet? What features or changes do you enjoy the most? Drop a comment below and get involved in the discussion. Carlo Daniele Carlo is an enthusiastic fan of front-end as well as the development of web designs. He's been using WordPress for more than twenty years. He also works as a collaborator with Italian and European colleges and universities. He has posted many tutorials and articles in WordPress and has posted them on Italian and foreign websites and in magazines that are printed. He is via LinkedIn. Website Twitter

This post was posted on here