Introduction of Block Inspector Tabs

The new BlockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. Inspector tabs aim to help organize and delineate the design tools within the Block Inspector sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme.. Before these tabs, the sidebar was becoming increasingly crowded and challenging to use. With the release of WordPress 6.2, you’ll find the inspector’s design tools categorized under three tabs;

• Settings – Contains configuration settings for the block that are not appearance-related, e.g. Number of columns or whether the block links to another resource.
• Appearance – Groups panels and controls related specifically to styling the appearance of the current block, e.g. typography and colors.
• List View – Contains controls for managing a block’s children in a similar manner to the editor’s list view, e.g. editing submenus and links in the Navigation block.

Block Inspector Tabs Display

The Block Inspector will only render tabs when it makes sense to do so. As such, there are a few conditions around their display:

• A tab is only rendered if it contains items for display.
• If the Settings tab would only contain the Advanced panel, it will be consolidated into the Appearance tab.
• If the Block Inspector only has a single tab to display, tabs will not be rendered. Instead, the design tools will be rendered directly into the sidebar as they would have been prior to WordPress 6.2.

It is possible that the Block Inspector tabs may not make sense for all blocks. Plugins might also aim to overhaul a block’s available tools. In these cases, it would be desirable to disable Block Inspector tabs. This can be achieved via a new editor setting, blockInspectorTabs. One approach to doing so might be via the block_editor_settings_all filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output., like the example below.

function my_plugin_disable_tabs_for_my_custom_block( $settings ) {
	$current_tab_settings = _wp_array_get( $settings, array( 'blockInspectorTabs' ), array() );
	$settings['blockInspectorTabs'] = array_merge(
		$current_tab_settings,
		array( 'my-plugin/my-custom-block' => false )
	);

	return $settings;
}

add_filter( 'block_editor_settings_all', 'my_plugin_disable_tabs_for_my_custom_block' );

If available, the Block Inspector tabs will be displayed in the following order; List View, Settings, and Appearance. The default selected tab will be the first available. For the majority of blocks, this will be the Settings tab.

Inspector Control Groups

The InspectorControls groups have become requirements for new default experiences and features, such as the Block Inspector tabs or the Navigation Block’s off-canvas editor. As a result, the __experimentalGroup property has been stabilized. You can now define which InspectorControls group to render controls into via the group prop.

In addition to stabilizing the __experimentalGroup property, a new styles group has been added, so styles-related controls that do not fit conceptually under the block support panels; border, color, dimensions, typography etc., can be included under the “Appearance” tab in the Block Inspector.

<InspectorControls group="styles">
  // Add your custom styles-related controls here.
</InspectorControls>

Block Inspector Tabs vs InspectorControl Groups

Each Block Inspector tab is responsible for displaying a subset of the available Inspector Controls groups.

• Settings Tab – Includes any items rendered into the default, settings (alias for default), advanced, or position groups.
• Appearance Tab – Renders block support groups such as; border, color, dimensions, and typography. It also now includes the new styles group, which offers a means of displaying items under the Appearance tab but outside of the block support panels.
• List View Tab – Includes only the list group as this tab is only intended for blocks that need to manage their own children in a list.

Settings-only Blocks

During the experiment trialling Block Inspector tabs, it became clear that some blocks should be considered “settings-only”. A great example of this is the Query block. A user’s primary focus while interacting with this block is to configure it to display their desired posts. Attempts to apply styling e.g. colors, at such a high level leads to inconsistent results.

To ease that friction moving forward, the color block support was removed from the Query block, making it settings-only. A new deprecation has been added to migrate existing Query blocks with colour styles. These will have their inner blocks wrapped in a Group block with the original color styles applied.

For blocks considered settings-only, the recommended approach to styling moving forward is to wrap the inner blocks in a style-provider block, e.g. Group.

Screenshots

Settings and Styles

List View, Settings, and Styles

Props to @bph and @webcommsat for review

#6-2, #dev-notes, #dev-notes-6-2