What's new What's new WordPress 6.7

-sidebar-toc>        -language-notice>

WordPress 6.7 is just around the corner It's the perfect time to review the new options, features, and improvements the new version has in store for us.

The version includes 87 core enhancements as well as feature requests and more than 200 corrections to bugs.

Eight Gutenberg versions, ranging from 18.6 to 19.3 and 19.3 are available in WordPress 6.7's core. Block editor gets 445 improvements and fixes for bugs, as well as 55 accessibility enhancements.

New powerful APIs for developers arrive at the heart of. Editor interface gets several updates and enhancements, which include tools previously accessible only using code. Enhancements to usability as well as new tools for design should speed up the process of designing.

There are many exciting new features and improvements that are coming to WordPress 6.7 We have picked those that we think are the most interesting for designers and for users. There is much to say, so dive right into the latest features.

Zoom out mode

WordPress 6.7 features a new Zoom Out mode which allows you to design and edit content focusing on patterns rather than specific blocks. This allows you to operate at a greater stage and gives you a complete overview of your page in construction.

The following images show how the new feature works. New Toggle Zoom Out button on the upper toolbar lets you switch the Zoom Out view to off and on, which allows users to work on the patterns, or even individual blocks in a variety of ways.

If Zoom Out mode is turned on, you can perform several actions on the selected pattern. The block toolbar provides controls to drag, Move up/down as well as Shuffle. The List view has hyperlinks to execute various actions, such as Edit, Duplicate, and Delete the pattern you have selected.

If you have Zoom Out activated Block inserter defaults to the tab for patterns. The List view is also reflective of the editing mode and displays patterns instead of blocks.

To see a fuller list of features and changes related to the Zoom out mode check our Zoom Out Mode Iteration Issue and Developer Notes for Zoom Out within WordPress 6.7.

Meta boxes in the Post editor

Prior to versions 6.7 the meta boxes blocked the post editor canvas from loading inside an frame. It was a reason why some benefits weren't available like the separation of theme and block CSS and editor UI and the precision of relative CSS units for media queries and viewport. This problem prevented the use of the similar CSS used in both the editor and front-end views.

Since WordPress 6.7 The editor's meta box and the content can be integrated into the editor's interface. Because of the new split-view that allows the Post editor's canvas is loaded within an iframe, regardless of whether your current page/post contains one or more meta boxes. According to the Dev Note:

This change ensures consistent WYSIWYG user experience across the Editor and front-end viewing. Furthermore, it makes meta boxes much more accessible than they were before. This allows visual references to every part of the content while working with the meta boxes, or the reverse.

The implementation makes use of flex to make the content view and metabox area scrollable.

This update brings a variety of modifications in Post editor interface. Post editor interface.

• The height of the Meta box is restricted to 50% in default to prevent it from being too big and taking up too much space.
• The area of the meta box is expandable or collapseable based on the viewport height.
• The state of the resized length and open/closed state are persistent in user preferences.

Check out the dev note for a greater description to developers.

Enhancements on the Block Bindings API

WordPress 6.7 brings us improved features and enhancements that are made possible through Block Bindings API Block Bindings API and a brand new default interface for managing the post meta source.

New Block Bindings for the UI

This version introduces a brand new interface for managing Block Bindings in the settings tab by using the post meta built-in block binding source. It can be found for Heading, Paragraph, Button, and Image blocks.

After you've registered your custom fields and chosen one of the supported blocks, a new attributes panel will show up within the block settings sidebar. If you are adding one or more custom post fields then the Attributes panel gets interactive. It allows you to connect the attributes of your block to your own custom fields.

It allows you to create bindings without manually adding the code to the Code Editor.

In default, only admins are able to modify and create bindings. Developers can override the default behavior using the block_editor_settings_all or map_meta_cap filters.

The Dev Note warns users about two issues in the newly introduced Attributes interface.

• Connecting attributes of blocks to sources that are custom isn't possible with this release. The enhancement will be available in a later release.
• Another issue is related to the types of custom fields which are listed in the attributes panel. At present, only fields of type string or rich text are supported. Again, we can anticipate a gradual support of different types of custom fields with coming versions.

Check out the Dev Note to learn about an intriguing use case of enhanced Block Bindings API with custom post templates.

New post meta label attribute

A new label attribute was added that allows plugin developers to add a custom label to post meta fields at registration. You can now use the following code to register your fields that you have created with labels:

register_post_meta( 'post', 'book_title', array( 'show_in_rest' => true, 'type' => 'string', 'single' => true, 'sanitize_callback' => 'sanitize_text_field', 'label' => __('Book title') ) );

If the label is set, it will be displayed in lieu of the meta-key in the UI for Block Bindings. This image illustrates the attributes panel with label labels that are custom-made:

Ability to edit block bindings

Along with the new Block Bindings interface, a new canUpdateBlockBindings editor setting can be used to determine whether the new interface is interactive for users. It defaults to the newly added edit_block_binding feature, which is changed to false for administrators and true for other users.

You can change the default behavior using the block_editor_settings_all filter.

New APIs and features for developers

WordPress 6.7 introduces new capabilities for developers who can use block bindings in the editor.

A brand new editor API allows the registration of custom sources by the server using bootstrapped value. It is possible to add external sources to the editor and display them in the UI by using the server APIs.    // Registers block binding sources. If ( ! function_exists( 'twentytwentyfive_register_block_bindings' ) ) : /** * Registers the copyright block binding source. * * @since Twenty Twenty-Five 1.0 * * @return void */ function twentytwentyfive_register_block_bindings()  register_block_bindings_source( 'twentytwentyfive/copyright', array( 'label' => _x( '© YEAR', 'Label for the copyright placeholder in the editor', 'twentytwentyfive' ), 'get_value_callback' => 'twentytwentyfive_copyright_binding', ) );  endif; // Registers block binding callback function for the copyright. If ( ! function_exists( 'twentytwentyfive_copyright_binding' ) ) : /** * Callback function for the copyright block binding source. * * @since Twenty twenty five 1.0 * * @return the string Copyright text. */ function twentytwentyfive_copyright_binding()  $copyright_text = sprintf( /* translators: 1: Copyright symbol or word, 2: Year */ esc_html__( '%1$s %2$s', 'twentytwentyfive' ), '©', wp_date( 'Y' ) ); return $copyright_text;  endif; add_action( 'init', 'twentytwentyfive_register_block_bindings' );

This code will display (c) year in the UI in default. This is shown in the following image.

It is important to note that the text in the block canvas isn't active and shows only the source label.

To determine the marking of this block, you have to create a copy of Twenty twenty-five's Copyright pattern. Then, open your copy of the pattern in The Code editor:

There is more information about the brand new Block Bindings features inside the Block Bindings in the 6.7 notes of development.

Additions to Data Views

Data Views offers a new UI for collections of templates and patterns, pages and many more. It's also a component and an API which allows you to render datasets within the Site editor with various layouts like grid, table, list, etc.

Starting with WordPress 6.7 The gear icon appears on the upper right of the grid view. After clicking this icon the Appearance panel shows a series of options for viewing. Here, you can organize the elements of the view, adjust the grid density and set the amount of elements on a page and choose the properties of an element to display on the view.

A toggle button allows users to hide or show views filters to enhance the user performance on screens with small sizes.

If you have set the filter you want to use The toggle button for filtering will display the number of active filters.

Other changes to Data Views include an adjustable aspect ratio, data view choices from an option menu, and many more.

Enhanced Query Loop block

The Query Loop block is one of the most powerful and complicated blocks. It has to offer the most functionality and flexibility for customization while remaining intuitive and easy to operate. With WordPress 6.7, the Query Loop receives several improvements and enhancements to allow it to be more flexible and simple to use.

The previous Inherit query that was part of the template setting control has been modified and should now be easier to understand and simple.

When editing a template when editing a template, the template's Query Loop settings panel displays an query type control. The following images show how to set the options for two different query types: Default and Custom.

The context detection is also improved. The Query block has an inherit setting that is set to false in default. On a single page, it has no impact on query results and the related control was removed in WordPress 6.7.

In contrast with an archive template, or index template The content in a query block depends on the type of request. This means the archive page for a specific category shows the contents assigned to that category regardless of the other settings specifically set by the user. For instance, the number of posts.

It is possible to find a full overview of the issues that affect the Query Loop block here.

Additions to media management

With WordPress 6.7 the management of media improves and is more effective. From automatic sizes for lazy loading images, to extensive use of background photos here are some of the media management improvements coming with 6.7.

Auto sizes for lazy loaded images

The setting of a default for dimensions lets the browser identify the image file to be used based on the value of the srcset attribute. So it is known that the browser has the width of the image before the page layout is identified.

The HTML spec permits images to leave out the size attribute or alter it to auto or as a string starting with auto:

the keyword auto is a width that is computed in parse a sizes attribute. If present, it has to be the initial entry, and the entire list of source-size-list> value should comprise the value of the string auto (ASCII case-insensitive) or begin with the word auto, (ASCII case-insensitive).

With WordPress 6.7 with auto attribute, the auto attribute is included automatically to the start of the size attribute for every slow-loading image. This results in a performance increase in the speed of loading pages.

Developers can correct the value of the sizes attribute using the new wp_img_tag_add_auto_sizes() function.

Font Library enhancements

WordPress 6.7 also brings a few useful changes in The Font library. The first is that fonts can now be separated in two categories: sources ( Theme and Custom), making it much easier to determine the origin of every font from a glance.

A brand new select all option saves only a few mouse clicks while you look for a particular font in Google Fonts.

Additional changes include a new No fonts installed message when fonts aren't available as well as an enhanced "No fonts installed" state when fonts are installed, but aren't activated.

Support for HEIC format

The format HEIC (High Efficiency Image Container) is an improved version of the HEIF (High Efficiency Image Format), used in Apple for all iPhones and iPads running iOS 11 or later. This format helps iOS users can make the most of 4k cameras and have smaller file sizes.

With WordPress 6.7, HEIC image uploads are automatically converted to JPEG by the server when possible. This feature lets users look at HEIC images on the Media Library and use them in posts and pages regardless of whether their browser does not recognize HEIC.

New and enhanced design tools

With WordPress 6.7, designers have access to new advanced design tools like extended block supports, font size presets, and many more.

Background images can be used to support the UI of Verse, Quote, and Post Blocks of content

WordPress 6.7 includes new controls to control the UI of background images for a few blocks that are in the global style. These blocks comprise Verse, Quote and Post Content.

A background image that is set in general styles is applicable across the whole site. After you've added the background image to a block, you just must modify settings for individual instances of that block for a more customized appearance.

This feature can be used inside the Post content block to wrap post and pages' content within templates. The screenshot below provides an example of how to make use of this feature. Background image.

Block supports for additional blocks

In addition to background support for Verse and Quote blocks, as well as Post Blocks for Content, WordPress 6.7 showcases new block capabilities for various blocks that designers and theme developers will appreciate.

The support for border borders has been expanded to many blocks, including Buttons, Categories, Gallery, Heading, Media Text, Paragraph, Post Title quote, among many other blocks.

This release also adds colors for Buttons, List Item as well as Recent Comments.

WordPress 6.7 also brings the long-anticipated feature for designers and theme developers: shadow support for the Group block.

Font size presets

WordPress 6.7 includes a brand-new UI to manage font size presets on the Global Styles interface. This allows users to override the theme's defaults and make, modify, or remove, and apply Font size presets by using the editor.

This also includes the ability to turn on fluid typography, and to set your own fluid values.

For a test To test it, simply open the Styles interface and navigate to Font Sizes > Font Size Presets. A new panel will display the selection of available font size presets. Click on the preset of your choice and make the necessary edits.

The changes you make will affect the entirety of your website.

UI improvements and other editing features

WordPress 6.7 includes more UI modifications and new features to make editing easier. Let's look at some of the features.

The Publish button has been moved to the right position

It appears that the cancellation and the Publish buttons on the check-box for pre-publish changed locations and you can now publish the article with no need to move the cursor around the page.

Custom block names in the inspector for blocks

In WordPress 6.7, when you create a custom block name, it will now shows within the inspector for blocks also. In the previous version of WordPress 6.6 the block inspector showed the block's default name (e.g. the Heading).

Disable the Modal Choose Pattern

It is now possible to disable the Select patterns modal that appears when you make a new page. If you want to opt-out of this option, simply open the Preferences in the options menu and disable the Show starter patterns option.

Automatic phone number linking

The link field automatically adds the following: tel: after you enter an address.

You can drop multiple images into the image block

It is now possible to drop several images on an Image block and change it into Gallery blocks.

New APIs and features for developers

WordPress 6.7 includes a variety of new APIs to developers that allow them to enhance the functionality of their plugins. A new Preview Options API has been added, and other APIs have been enhanced with brand new features, such as the HTML API as well as the Interactivity API. Let's look into a few.

Preview Options API

The new Preview Options API lets plugin developers extend their ability to expand the Preview dropdown menu available in the post/page editor. The API introduces a new PluginPreviewMenuItem component that plugins can use to add custom menu items with custom titles and click handlers to the Preview dropdown menu.

Developers of plugins can create custom preview options to the WordPress editor to cover a range of items including:

• Custom-format previews (think of the posts you share on social media)
• Previews of pages or posts that are restricted to particular user roles
• Additional preview modes, such as dark mode, emails, etc.

Depending on the provided props, you can use custom menu items for previews as hyperlinks or buttons.

Here is an example from the developer note on the way to use the new API:

import  __  from '@wordpress/i18n'; import  PluginPreviewMenuItem  from '@wordpress/editor'; import  registerPlugin  from '@wordpress/plugins'; function onPreviewClick()  // Handle preview action  const CustomPreviewMenuItem = () => (   __( 'Your menu item label' )   ); registerPlugin( 'custom-preview-menu-item',  render: CustomPreviewMenuItem,  );

The plugin is now available. Template Registration API

Prior to WordPress 6.7, the only possibility to customize block templates was through themes. The process of registering a block template with a plugin was impossible unless you used complicated workarounds.

Thanks to the new template registration API, you can now use custom block templates to register using an application. The new API provides two new functions for registering and unregistering a template: register_block_template() and unregister_block_template().

They are pretty simple to use. It is all you need to do is pass the function a couple of parameters:

$template_name: The name of the template in the form of plugin_uri//template_name (note the //)
   $args: an array containing the below arguments:

•      title    
•      description    
•      content    
•      post_types    

To get a more detailed overview of the new API and usage examples, see the dev note and the original Pull Request.

Block type APIs are now available for registration.

A new wp_register_block_metadata_collection() function registers a block type from a manifest file if it exists instead of reading and parsing the block.json file directly. This is particularly useful when a plugin registers several blocks, since it avoids reading and parsing block.json for each block type.

Note that this new function does not replace the existing register_block_type() and register_block_type_from_metadata() functions. This function can be used in lieu of, however it is highly recommended for plugins that register several blocks to improve performance.

Go through the developer note for an extensive outline of the new API as well as an example of how to use it.

Optional Heading Level Options

Through the use of a brand newly added attribute called levelOptions attribute in the new levelOptions feature, users are able to define which levels of headings should be included in the dropdown interface for Heading, Site Title Tagline for Site, Query Title and Post Title, as well as Comments Title blocks.

The most common use for it is for block templates, template components, as well as patterns. The code below disables H1 Headings H5, H5 and H6 in a block for Headings:

 Schedule a Demo