Sidebar Tabs: Stabilize the block inspector tabs experiment

lib/experimental/class-wp-rest-block-editor-settings-controller.php

@@ -168,12 +168,6 @@ public function get_item_schema() {
 					'context'     => array( 'mobile' ),
 				),
 
-				'__experimentalBlockInspectorTabs'       => array(
-					'description' => __( 'Block inspector tab display overrides.', 'gutenberg' ),
-					'type'        => 'object',
-					'context'     => array( 'post-editor', 'site-editor', 'widgets-editor' ),
-				),
-
 				'__experimentalBlockInspectorAnimation'  => array(
 					'description' => __( 'Whether to enable animation when showing and hiding the block inspector.', 'gutenberg' ),
 					'type'        => 'object',
@@ -204,6 +198,12 @@ public function get_item_schema() {
 					'context'     => array( 'post-editor', 'site-editor', 'widgets-editor' ),
 				),
 
+				'blockInspectorTabs'                     => array(
+					'description' => __( 'Block inspector tab display overrides.', 'gutenberg' ),
+					'type'        => 'object',
+					'context'     => array( 'post-editor', 'site-editor', 'widgets-editor' ),
+				),
+
 				'disableCustomColors'                    => array(
 					'description' => __( 'Disables custom colors.', 'gutenberg' ),
 					'type'        => 'boolean',

lib/experimental/editor-settings.php

@@ -86,9 +86,6 @@ function gutenberg_enable_experiments() {
 	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-off-canvas-navigation-editor', $gutenberg_experiments ) ) {
 		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableOffCanvasNavigationEditor = true', 'before' );
 	}
-	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-block-inspector-tabs', $gutenberg_experiments ) ) {
-		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableBlockInspectorTabs = true', 'before' );
-	}
 	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-global-styles-custom-css', $gutenberg_experiments ) ) {
 		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableGlobalStylesCustomCSS = true', 'before' );
 	}

lib/experiments-page.php

@@ -77,18 +77,6 @@ function gutenberg_initialize_experiments_settings() {
 		)
 	);
 
-	add_settings_field(
-		'gutenberg-block-inspector-tabs',
-		__( 'Block inspector tabs ', 'gutenberg' ),
-		'gutenberg_display_experiment_field',
-		'gutenberg-experiments',
-		'gutenberg_experiments_section',
-		array(
-			'label' => __( 'Test a new block inspector view splitting settings and appearance controls into tabs', 'gutenberg' ),
-			'id'    => 'gutenberg-block-inspector-tabs',
-		)
-	);
-
 	add_settings_field(
 		'gutenberg-global-styles-custom-css',
 		__( 'Global styles custom css ', 'gutenberg' ),

packages/block-editor/src/components/inspector-controls-tabs/use-inspector-controls-tabs.js

@@ -16,12 +16,6 @@ import { store as blockEditorStore } from '../../store';
 const EMPTY_ARRAY = [];
 
 function getShowTabs( blockName, tabSettings = {} ) {
-	// Don't allow settings to force the display of tabs if the block inspector
-	// tabs experiment hasn't been opted into.
-	if ( ! window?.__experimentalEnableBlockInspectorTabs ) {
-		return false;
-	}
-
 	// Block specific setting takes precedence over generic default.
 	if ( tabSettings[ blockName ] !== undefined ) {
 		return tabSettings[ blockName ];
@@ -81,8 +75,7 @@ export default function useInspectorControlsTabs( blockName ) {
 	}
 
 	const tabSettings = useSelect( ( select ) => {
-		return select( blockEditorStore ).getSettings()
-			.__experimentalBlockInspectorTabs;
+		return select( blockEditorStore ).getSettings().blockInspectorTabs;
 	}, [] );
 
 	const showTabs = getShowTabs( blockName, tabSettings );

packages/block-library/src/navigation-link/index.php

@@ -390,11 +390,11 @@ function register_block_core_navigation_link() {
 function gutenberg_disable_tabs_for_navigation_link_block( $settings ) {
 	$current_tab_settings = _wp_array_get(
 		$settings,
-		array( '__experimentalBlockInspectorTabs' ),
+		array( 'blockInspectorTabs' ),
 		array()
 	);
 
-	$settings['__experimentalBlockInspectorTabs'] = array_merge(
+	$settings['blockInspectorTabs'] = array_merge(
 		$current_tab_settings,
 		array( 'core/navigation-link' => false )
 	);

packages/block-library/src/navigation-submenu/index.php

@@ -308,11 +308,11 @@ function register_block_core_navigation_submenu() {
 function gutenberg_disable_tabs_for_navigation_submenu_block( $settings ) {
 	$current_tab_settings = _wp_array_get(
 		$settings,
-		array( '__experimentalBlockInspectorTabs' ),
+		array( 'blockInspectorTabs' ),
 		array()
 	);
 
-	$settings['__experimentalBlockInspectorTabs'] = array_merge(
+	$settings['blockInspectorTabs'] = array_merge(
 		$current_tab_settings,
 		array( 'core/navigation-submenu' => false )
 	);

packages/block-library/src/navigation/edit/menu-inspector-controls.js

@@ -125,7 +125,7 @@ const DefaultControls = ( props ) => {
 const MenuInspectorControls = ( props ) => {
 	const isOffCanvasNavigationEditorEnabled =
 		window?.__experimentalEnableOffCanvasNavigationEditor === true;
-	const menuControlsSlot = window?.__experimentalEnableBlockInspectorTabs
+	const menuControlsSlot = isOffCanvasNavigationEditorEnabled
 		? 'list'
 		: undefined;
 

packages/e2e-test-utils-playwright/src/editor/index.ts

@@ -18,6 +18,7 @@ import { selectBlocks } from './select-blocks';
 import { setContent } from './set-content';
 import { showBlockToolbar } from './show-block-toolbar';
 import { saveSiteEditorEntities } from './site-editor';
+import { switchBlockInspectorTab } from './switch-block-inspector-tab';
 import { transformBlockTo } from './transform-block-to';
 
 type EditorConstructorProps = {
@@ -67,5 +68,6 @@ export class Editor {
 	selectBlocks = selectBlocks.bind( this );
 	setContent = setContent.bind( this );
 	showBlockToolbar = showBlockToolbar.bind( this );
+	switchBlockInspectorTab = switchBlockInspectorTab.bind( this );
 	transformBlockTo = transformBlockTo.bind( this );
 }

packages/e2e-test-utils-playwright/src/editor/switch-block-inspector-tab.ts

@@ -0,0 +1,26 @@
+/**
+ * Internal dependencies
+ */
+import type { Editor } from './index';
+import { expect } from '../test';
+
+/**
+ * Clicks on the block inspector tab button with the supplied label and waits
+ * for the tab switch.
+ *
+ * @param {Editor} this
+ * @param {string} label
+ */
+export async function switchBlockInspectorTab( this: Editor, label: string ) {
+	const inspectorTabButton = this.page.locator(
+		`role=region[name="Editor settings"i] >> role=tab[name="${ label }"i]`
+	);
+	const id = await inspectorTabButton.getAttribute( 'id' );
+
+	await inspectorTabButton.click();
+	await expect(
+		this.page.locator(
+			`role=region[name="Editor settings"i] >> div[role="tabpanel"][aria-labelledby="${ id }"]`
+		)
+	).toBeVisible();
+}

packages/e2e-test-utils/README.md

@@ -797,6 +797,15 @@ _Parameters_
 The block toolbar is not always visible while typing.
 Call this function to reveal it.
 
+### switchBlockInspectorTab
+
+Clicks on the block inspector tab button with the supplied label and waits
+for the tab switch.
+
+_Parameters_
+
+-   _label_ `string`: Aria label to find tab button by.
+
 ### switchEditorModeTo
 
 Switches editor mode.

packages/e2e-test-utils/src/index.js

@@ -81,6 +81,7 @@ export { selectBlockByClientId } from './select-block-by-client-id';
 export { setBrowserViewport } from './set-browser-viewport';
 export { setOption } from './set-option';
 export { setPostContent } from './set-post-content';
+export { switchBlockInspectorTab } from './switch-block-inspector-tab.js';
 export { switchEditorModeTo } from './switch-editor-mode-to';
 export { switchUserToAdmin } from './switch-user-to-admin';
 export { switchUserToTest } from './switch-user-to-test';

packages/e2e-test-utils/src/switch-block-inspector-tab.js

@@ -0,0 +1,19 @@
+/**
+ * Clicks on the block inspector tab button with the supplied label and waits
+ * for the tab switch.
+ *
+ * @param { string } label Aria label to find tab button by.
+ */
+export async function switchBlockInspectorTab( label ) {
+	const tabButton = await page.$(
+		`.block-editor-block-inspector__tabs button[aria-label="${ label }"]`
+	);
+
+	if ( tabButton ) {
+		const id = await page.evaluate( ( tab ) => tab.id, tabButton );
+		await tabButton.click();
+		await page.waitForSelector(
+			`div[role="tabpanel"][aria-labelledby="${ id }"]`
+		);
+	}
+}

packages/e2e-tests/specs/editor/various/block-hierarchy-navigation.test.js

@@ -9,6 +9,7 @@ import {
 	pressKeyWithModifier,
 	openDocumentSettingsSidebar,
 	getListViewBlocks,
+	switchBlockInspectorTab,
 } from '@wordpress/e2e-test-utils';
 
 async function openListViewSidebar() {
@@ -20,6 +21,20 @@ async function tabToColumnsControl() {
 	let isColumnsControl = false;
 	do {
 		await page.keyboard.press( 'Tab' );
+
+		const isBlockInspectorTab = await page.evaluate( () => {
+			const activeElement = document.activeElement;
+			return (
+				activeElement.getAttribute( 'role' ) === 'tab' &&
+				activeElement.attributes.getNamedItem( 'aria-label' ).value ===
+					'Styles'
+			);
+		} );
+
+		if ( isBlockInspectorTab ) {
+			await page.keyboard.press( 'ArrowRight' );
+		}
+
 		isColumnsControl = await page.evaluate( () => {
 			const activeElement = document.activeElement;
 			return (
@@ -60,6 +75,7 @@ describe( 'Navigating the block hierarchy', () => {
 
 		// Tweak the columns count.
 		await openDocumentSettingsSidebar();
+		await switchBlockInspectorTab( 'Settings' );
 		await page.focus(
 			'.block-editor-block-inspector [aria-label="Columns"][type="number"]'
 		);

packages/editor/src/components/provider/use-block-editor-settings.js

@@ -135,14 +135,14 @@ function useBlockEditorSettings( settings, hasTemplate ) {
 				Object.entries( settings ).filter( ( [ key ] ) =>
 					[
 						'__experimentalBlockDirectory',
-						'__experimentalBlockInspectorTabs',
 						'__experimentalDiscussionSettings',
 						'__experimentalFeatures',
 						'__experimentalPreferredStyleVariations',
 						'__experimentalSetIsInserterOpened',
 						'__unstableGalleryWithImageBlocks',
 						'alignWide',
 						'allowedBlockTypes',
+						'blockInspectorTabs',
 						'bodyPlaceholder',
 						'canLockBlocks',
 						'codeEditingEnabled',

test/e2e/specs/editor/blocks/avatar.spec.js

@@ -52,6 +52,7 @@ test.describe( 'Avatar', () => {
 		);
 
 		await expect( blockInspectorControls ).toBeVisible();
+		await editor.switchBlockInspectorTab( 'Settings' );
 
 		const userInput = page.locator(
 			'role=region[name="Editor settings"i] >> role=combobox[name="User"i]'
@@ -64,7 +65,8 @@ test.describe( 'Avatar', () => {
 
 		await newUser.click();
 
-		const newSrc = await avatarImage.getAttribute( 'src' );
+		const updatedAvatarImage = avatarBlock.locator( 'img' );
+		const newSrc = await updatedAvatarImage.getAttribute( 'src' );
 
 		expect( newSrc ).not.toBe( originalSrc );
 	} );

test/e2e/specs/editor/blocks/buttons.spec.js

@@ -131,6 +131,7 @@ test.describe( 'Buttons', () => {
 		await editor.insertBlock( { name: 'core/buttons' } );
 		await page.keyboard.type( 'Content' );
 		await editor.openDocumentSettingsSidebar();
+		await editor.switchBlockInspectorTab( 'Settings' );
 		await page.click(
 			'role=group[name="Button width"i] >> role=button[name="25%"i]'
 		);

test/e2e/specs/editor/blocks/table.spec.js

@@ -77,6 +77,7 @@ test.describe( 'Table', () => {
 	} ) => {
 		await editor.insertBlock( { name: 'core/table' } );
 		await editor.openDocumentSettingsSidebar();
+		await editor.switchBlockInspectorTab( 'Settings' );
 
 		const headerSwitch = page.locator(
 			'role=checkbox[name="Header section"i]'
@@ -132,11 +133,13 @@ test.describe( 'Table', () => {
 	} ) => {
 		await editor.insertBlock( { name: 'core/table' } );
 		await editor.openDocumentSettingsSidebar();
+		await editor.switchBlockInspectorTab( 'Settings' );
 
 		// Create the table.
 		await page.click( 'role=button[name="Create Table"i]' );
 
 		// Toggle on the switches and add some content.
+		await editor.switchBlockInspectorTab( 'Settings' );
 		await page.locator( 'role=checkbox[name="Header section"i]' ).check();
 		await page.locator( 'role=checkbox[name="Footer section"i]' ).check();
 		await page.click( 'role=textbox[name="Body cell text"i] >> nth=0' );
@@ -202,11 +205,12 @@ test.describe( 'Table', () => {
 	} ) => {
 		await editor.insertBlock( { name: 'core/table' } );
 		await editor.openDocumentSettingsSidebar();
+		await editor.switchBlockInspectorTab( 'Settings' );
 
 		// Create the table.
 		await page.click( 'role=button[name="Create Table"i]' );
 
-		// Enable fixed width as it exascerbates the amount of empty space around the RichText.
+		// Enable fixed width as it exacerbates the amount of empty space around the RichText.
 		await page
 			.locator( 'role=checkbox[name="Fixed width table cells"i]' )
 			.check();

test/e2e/specs/editor/plugins/hooks-api.spec.js

@@ -18,10 +18,12 @@ test.describe( 'Using Hooks API', () => {
 	} );
 
 	test( 'Should contain a reset block button on the sidebar', async ( {
+		editor,
 		page,
 	} ) => {
 		await page.click( 'role=button[name="Add default block"i]' );
 		await page.keyboard.type( 'First paragraph' );
+		await editor.switchBlockInspectorTab( 'Settings' );
 		await expect(
 			page.locator( 'role=button[name="Reset Block"i]' )
 		).toBeVisible();
@@ -38,6 +40,7 @@ test.describe( 'Using Hooks API', () => {
 			'role=document[name="Paragraph block"i]'
 		);
 		await expect( paragraphBlock ).toHaveText( 'First paragraph' );
+		await editor.switchBlockInspectorTab( 'Settings' );
 		await page.click( 'role=button[name="Reset Block"i]' );
 		expect( await editor.getEditedPostContent() ).toEqual( '' );
 	} );

test/e2e/specs/site-editor/push-to-global-styles.spec.js

@@ -52,8 +52,9 @@ test.describe( 'Push to Global Styles button', () => {
 			page.getByRole( 'button', { name: 'Uppercase' } )
 		).toHaveAttribute( 'aria-pressed', 'false' );
 
-		// Go to block settings and open the Advanced panel
+		// Go to block settings, select inner tab, and open the Advanced panel
 		await page.getByRole( 'button', { name: 'Settings' } ).click();
+		await page.getByRole( 'tab', { name: 'Settings' } ).click();
 		await page.getByRole( 'button', { name: 'Advanced' } ).click();
 
 		// Push button should be disabled
@@ -63,9 +64,16 @@ test.describe( 'Push to Global Styles button', () => {
 			} )
 		).toBeDisabled();
 
+		// Switch back to the Styles inspector tab to check typography style
+		await page.getByRole( 'tab', { name: 'Styles' } ).click();
+
 		// Make the Heading block uppercase
 		await page.getByRole( 'button', { name: 'Uppercase' } ).click();
 
+		// Switch back to the Settings inspector tab to check for enabled button
+		await page.getByRole( 'tab', { name: 'Settings' } ).click();
+		await page.getByRole( 'button', { name: 'Advanced' } ).click();
+
 		// Push button should now be enabled
 		await expect(
 			page.getByRole( 'button', {