What’s new in WordPress 6.7: Zoom Out mode, Meta boxes, Block Pattern API, and much more

WordPress 6.7 is just around the corner, and it’s time to review the new features, changes, and improvements the new version has in store for us.

This release includes 87 core enhancements, feature requests, and over 200 bug fixes.

Eight Gutenberg versions, from 18.6 to 19.3, are included in WordPress 6.7’s core. The block editor receives 445 improvements, 464 bug fixes, and 55 accessibility improvements.

New powerful APIs for developers come to the core. The editor interface receives several additions and improvements, including tools previously accessible only using code. Usability improvements and new design tools should streamline the design process.

WordPress 6.7 also showcases a new default theme, Twenty Twenty-Five, which benefits from the latest features packed with the new version.

Among the many new additions and changes coming with WordPress 6.7, we have selected some that we find most interesting for developers and users. There is much to say, so dive right into the new features.

Zoom out mode

WordPress 6.7 features a new Zoom Out mode to help you create and edit content focusing on patterns instead of individual blocks. This allows you to work at a higher level and provides an overall view of the page under construction.

The following images show the new feature in action. A new Toggle Zoom Out button in the top toolbar lets you switch the Zoom Out view on and off, enabling you to work on patterns or individual blocks alternatively.

With Zoom out mode enabled, you can perform several actions on the selected pattern. The block toolbar provides controls to Drag, Move up/down, and Shuffle. The List view provides links to perform several actions, such as Edit, Duplicate, and Delete the selected pattern.

When you work with Zoom Out enabled, the block inserter defaults to the Patterns tab. The List view also reflects the editing mode and displays patterns instead of blocks.

For a more comprehensive list of features and changes related to the Zoom Out mode, see the Zoom Out mode iteration issue and Developer Notes for Zoom Out in WordPress 6.7.

Meta boxes in the Post editor

In versions before 6.7, meta boxes prevented the post editor canvas from loading in an iframe. This made several benefits unavailable, such as the isolation of block and theme CSS from the editor UI and the accuracy of relative CSS units for media queries and viewport. In short, this issue precluded the use of the same CSS in the editor and front-end views.

Starting with WordPress 6.7, the editor content and meta boxes can coexist in the editor’s interface. Thanks to a new split view, the Post editor canvas loads in an iframe even when the current post/page has one or more meta boxes. According to the dev note:

This change ensures consistent WYSIWYG experience between the Editor and front-end views. Additionally, it makes the meta boxes more readily available than before. It allows visually referencing any part of the post content while working with any meta box or vice versa.

This implementation uses flex to make the content view and metabox area scrollable.

This enhancement also brings several changes to the Post editor interface:

• The height of the meta box area is limited to 50% by default to prevent it from taking up too much space.
• The meta box area is collapsible or resizable depending on the viewport height.
• The state of the resized height and the open/closed state are persistent in user preferences.

Check out the dev note for a more in-depth overview for developers.

Improvements to the Block Bindings API

First introduced with WordPress 6.5, the Block Bindings API allows you to bind the attributes of a block to an external data source. The first iteration of the Block Bindings API made it possible to bind custom field values to the attributes of the Heading, Paragraph, Button, and Image blocks. WordPress 6.6 opened the door to a new powerful feature based on the Block Bindings API: Pattern Overrides.

WordPress 6.7 brings us new features and improvements made possible by the Block Bindings API and a new default interface for managing the post meta source.

New Block Bindings UI

This iteration provides a new interface for managing Block Bindings from the settings sidebar using the built-in post meta block binding source for Heading, Paragraph, Button, and Image blocks.

Once you have registered your custom fields and selected one of the supported blocks, a new Attributes panel will appear in the Block settings sidebar. When you add one or more custom post fields, the Attributes panel gets interactive, allowing you to connect block attributes to your custom fields.

This helps you create bindings without manually adding the code to the Code Editor.

By default, only admins can create and modify bindings. Developers can override the default behavior using the block_editor_settings_all or map_meta_cap filters.

The dev note warns about two limitations related to the new Attributes interface.

• Connecting block attributes to custom sources is not yet possible with this release. This enhancement should be implemented in a future release.
• A second limitation concerns the type of custom fields shown in the Attributes panel. Currently, only fields of type string or rich text are supported. Again, we can expect progressive support for other types of custom fields with future iterations.

See the dev note for an interesting use case of enhanced Block Bindings API with custom post templates.

New post meta label attribute

A new label attribute has been implemented to allow plugin developers to add a custom label for post meta fields during registration. You can now use the following code to register your custom fields 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 set, the label will display in place of the meta key in the Block Bindings UI. The following image shows the Attributes panel with custom labels:

Edit block bindings capability

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. This defaults to a new edit_block_binding capability, which is set to true for admins and false 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 brings new features for developers to use block bindings in the editor.

A new editor API allows you to register custom sources defined on the server with bootstrapped values. In short, you can register external sources and render them in the UI using server APIs.

Twenty Twenty-Five, the new default theme, provides a good example of source bootstrapping with the Copyright pattern. In the theme’s functions.php file, you’ll find the following code:

// 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 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 renders © YEAR in the UI by default, as shown in the following image.

Note that the paragraph in the block canvas is not dynamic and only shows the source label.

To check the markup of this block, you need to create a copy of Twenty Twenty-Five’s Copyright pattern and open your copy in the Code editor:

<!-- wp:paragraph {
	"metadata":{
		"bindings":{
			"content":{
				"source":"twentytwentyfive/copyright"
			}
		}
	},
	"className":"copyright",
	"textColor":"primary",
	"fontSize":"small"
} -->
<p class="copyright has-primary-color has-text-color has-small-font-size"></p>
<!-- /wp:paragraph -->

You can read more about the new Block Bindings features in the Block Bindings in the 6.7 dev note.

Additions to Data Views

Data Views is an improved UI for collections of templates, patterns, pages, and more. It’s also a component and an API that allows you to render datasets in the Site editor using different types of layouts, such as table, grid, list, etc.

Data Views were first introduced with WordPress 6.5 and improved with WordPress 6.6. Now WordPress 6.7 adds new features and enhancements that make them more flexible and functional.

Starting with WordPress 6.7, a gear icon displays in the upper right corner of the grid view. When you click this icon, an Appearance panel shows a series of View options. Here, you can sort the elements in the view, adjust the grid density, set the number of elements per page, and select the element’s properties to display in the preview.

A toggle button allows users to show/hide view filters, improving the experience on narrow screens.

When you set one or more filters, the toggle filter button shows the number of active filters.

Additional changes to Data Views include configurable aspect ratio, data view options out of a menu, and much more.

Improved Query Loop block

The Query Loop block is one of the most powerful and complex blocks. It must provide maximum functionality and customization possibilities while remaining intuitive and easy to use. With WordPress 6.7, the Query Loop receives several improvements and additions that make it more versatile and easy to use.

The previous Inherit query from template setting control has been changed and now should be more intuitive and straightforward.

When editing a template, the Query Loop settings panel displays a Query Type control. The following images show the setting options for the two different query types: Default and Custom.

The context detection has also been improved. The Query block has an inherit setting that is set to true by default. On a single page, this has no effect on the query results, and the corresponding control has been removed with WordPress 6.7.

On the other hand, in an archive or index template, the Query block content depends on the type of request. This means the archive page for a specific category displays the content assigned to that category by default, regardless of other settings explicitly set by the user, such as the number of posts.

You can find a comprehensive list of issues involving the Query Loop block here.

Additions to media management

With WordPress 6.7, media management becomes more functional and efficient. From auto sizes for lazy-loading images to widespread support for background images, here are some of the media management improvements coming with 6.7.

Auto Sizes for lazy-loaded images

Setting a default value for sizes allows the browser to identify the image file to use from the value of the srcset attribute. This way, the browser knows the image width in advance before the page layout is known.

The HTML spec allows images to omit the sizes attribute or explicitly set it to auto or a string beginning with auto:

the keyword auto is a width that is computed in parse a sizes attribute. If present, it must be the first entry and the entire <source-size-list> value must either be the string auto (ASCII case-insensitive) or start with the string auto, (ASCII case-insensitive).

With WordPress 6.7, the auto attribute is automatically added at the beginning of the sizes attribute for any lazy-loaded image. This results in a performance improvement in page loading.

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 improvements to the Font library. First, fonts are now grouped by source (Theme and Custom), making it easier to understand the origin of each font at a glance.

A new Select all option button saves you a few clicks when you search for a font on Google Fonts.

Additional changes include a new No fonts installed message when fonts aren’t available and an improved No fonts installed state when fonts are installed but not activated.

HEIC format support

The HEIC format (High Efficiency Image Container) is an updated variant of HEIF (High Efficiency Image Format), used by Apple across all iPhones and iPads running iOS 11 or later. This format ensures iOS users make the most of 4k cameras and have smaller file sizes.

In WordPress 6.7, HEIC image uploads are automatically converted to JPEG on the server when possible. This addition allows users to view HEIC images in the Media Library and use them in posts and pages even if their browser does not support HEIC.

New and enhanced design tools

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

Background image support UI for Verse, Quote, and Post Content blocks

WordPress 6.7 brings new UI controls for managing background images for a handful of blocks in global styles. These blocks include Verse, Quote, and Post Content.

Setting a background image in global styles applies across the entire website. Once you have added a background image for a block, you just need to customize settings for individual instances of the same block to customize its appearance.

You can use this feature in the Post content block to wrap post and page content in templates. The following screenshot provides an example of how to use the background image.

Additional block supports

In addition to background support for Verse, Quote, And Post Content blocks, WordPress 6.7 showcases new block supports for several blocks that designers and theme developers will love.

Border support has been extended to many blocks, including Buttons, Categories, Gallery, Heading, Media Text, Paragraph, Post Title, Quote, and many others.

This release also adds color support for Buttons, List Item, and Latest Comments.

WordPress 6.7 also brings a long-awaited addition for designers and theme developers: shadow support for the Group block.

Font size presets

WordPress 6.7 introduces a new UI to control font size presets in the Global Styles interface. This allows users to override the theme’s defaults and create, edit, remove, and apply font size presets using the editor.

This also includes the ability to toggle on fluid typography and set custom fluid values.

To try it yourself, open the Styles interface and navigate to Font Sizes > Font Size Presets. A new panel will display the list of the available font size presets. Click on the preset of your choice and make your edits.

All changes will apply across your entire website.

UI improvements and other editing features

WordPress 6.7 introduces more UI changes and features that improve the editing experience. Let’s examine some of them.

Publish button changed position

The Cancel and Publish buttons in the pre-publish check panel have switched positions, so you can now publish the article without moving the cursor on the page.

Custom block names in the block inspector

In WordPress 6.7, when you set a custom block name, it now shows in the block inspector, too. In WordPress 6.6, the block inspector showed the default block name (e.g., Heading).

Disable the Choose a pattern modal

You can now turn off the Choose a pattern modal that appears when you create a new page. To opt out of this functionality, open Preferences from the Options menu and disable the Show starter patterns option.

Automatic phone number linking

The link field automatically adds tel: when you add a phone number.

Allow dropping multiple images to the image block

You can now drop multiple images on an Image block and convert it to a Gallery block.

New features and APIs for developers

WordPress 6.7 features several new APIs for developers to add more functionality to their plugins. A new Preview Options API has been added, and other APIs have been extended with new features, such as the HTML API and the Interactivity API. Let’s explore some of them.

Preview Options API

A new Preview Options API allows plugin developers to extend the Preview dropdown menu 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.

Plugin developers can add custom preview options to the WordPress editor for a whole bunch of things, such as:

• Custom format previews (think of social media posts)
• Previews of posts or pages with restrictions for specific user roles
• Additional preview modes, such as dark mode, emails, etc.

Depending on the provided props, you can use custom preview menu items as buttons or links.

Here is an example from the dev note of how you can 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 = () => (
	<PluginPreviewMenuItem
		onClick={ onPreviewClick }
	>
		{ __( 'Your menu item label' ) }
	</PluginPreviewMenuItem>
);

registerPlugin( 'custom-preview-menu-item', {
	render: CustomPreviewMenuItem,
} );

New plugin Template Registration API

Before WordPress 6.7, the only option to add custom block templates was through a theme. Registering a block template using a plugin was impossible unless you used complicated workarounds.

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

Their use is pretty straightforward. You just need to 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 of the following arguments:

• title
• description
• content
• post_types

For a closer overview of the new API and usage examples, see the dev note and the original pull request.

New block type registration APIs

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 block types, as it avoids reading and parsing the 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. Its usage is optional but recommended for plugins registering multiple blocks to improve performance.

Check the dev note for a comprehensive overview of the new API and an example of usage.

Heading level options

Thanks to a new levelOptions attribute, developers can specify which heading levels should appear in the dropdown UI for Heading, Site Title, Site Tagline, Query Title, Post Title, and Comments Title blocks.

You will use it mostly in block templates, template parts, and patterns. The following example code disables H1, H5 and H6 headings in a Heading block:

<!-- wp:heading {"levelOptions":[2,3,4],"textAlign":"center"} -->
<h2 class="wp-block-heading has-text-align-center"><em>Schedule a Demo</em></h2>
<!-- /wp:heading -->

The image below shows the available options in the block toolbar:

You can also filter the levelOptions attribute with a plugin or in your theme’s functions file using the register_block_type_args filter. The dev note provides the following example:

function example_modify_heading_levels_globally( $args, $block_type ) {
	 
	if ( 'core/heading' !== $block_type ) {
		return $args;
	}
 
	// Remove H1, H2, and H6.
	$args['attributes']['levelOptions']['default'] = [ 3, 4, 5 ];
	 
	return $args;
}
add_filter( 'register_block_type_args', 'example_modify_heading_levels_globally', 10, 2 );

Additional changes for developers in WordPress 6.7

• Inserting a hooked block as a Template Part block’s first or last child is now possible. (See the dev note)
• Hooked blocks now respect the multiple block-supports property. (See the dev note)
• User interface components receive a considerable number of updates. (See the dev note.)
• The new functions getServerState() and getServerContext() provide a way to subscribe to Interactivity API state/context changes on client-side navigation.
• Script modules get a couple of updates with a new @wordpress/a11y script module and a new script_module_data_{$module_id} filter.
• The HTML API gets several enhancements, including support for almost all HTML tags, a new set_modifiable_text() method that allows to replace the text content of self-contained elements such as script, style, or title, a full-parser mode in the HTML Processor, and much more.
• Several internationalization (i18n) improvements were merged into the core, including a new has_translation() function to determine whether a translation already exists without loading the translation first, emails to admin_email being sent in the user’s locale, and a warning for developers if they are loading translations in a plugin or theme before the current user is known.

Summary

In this deep dive into WordPress 6.7, we explored many awesome features and enhancements coming with this release, from a new amazing default theme, to Zoom Out mode to Meta boxes in the Post editor, Block Bindings API additions, improvements to media management, new design tools, and many new features for plugin developers.

Now, it’s your turn. Have you tested WordPress 6.7 yet? What are your favorite features or changes coming with 6.7? Let us know in the comments below.

The post What’s new in WordPress 6.7: Zoom Out mode, Meta boxes, Block Pattern API, and much more appeared first on Kinsta®.