diff --git a/lib/experimental/class-wp-rest-block-editor-settings-controller.php b/lib/experimental/class-wp-rest-block-editor-settings-controller.php index 7031a14e89ccac..d38f73be71d208 100644 --- a/lib/experimental/class-wp-rest-block-editor-settings-controller.php +++ b/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', diff --git a/lib/experimental/editor-settings.php b/lib/experimental/editor-settings.php index fbff977cb9fb2d..d5e6393711118f 100644 --- a/lib/experimental/editor-settings.php +++ b/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' ); } diff --git a/lib/experiments-page.php b/lib/experiments-page.php index 83e926da520e93..ea16a526b7cc5c 100644 --- a/lib/experiments-page.php +++ b/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' ), diff --git a/packages/block-editor/src/components/inspector-controls-tabs/use-inspector-controls-tabs.js b/packages/block-editor/src/components/inspector-controls-tabs/use-inspector-controls-tabs.js index bf7f61de4c8cb7..65677506893034 100644 --- a/packages/block-editor/src/components/inspector-controls-tabs/use-inspector-controls-tabs.js +++ b/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 ); diff --git a/packages/block-library/src/navigation-link/index.php b/packages/block-library/src/navigation-link/index.php index 0eab52dc6ae227..f214a6b9b5740f 100644 --- a/packages/block-library/src/navigation-link/index.php +++ b/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 ) ); diff --git a/packages/block-library/src/navigation-submenu/index.php b/packages/block-library/src/navigation-submenu/index.php index c1c8006039f555..f3c8cad8f0ca89 100644 --- a/packages/block-library/src/navigation-submenu/index.php +++ b/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 ) ); diff --git a/packages/block-library/src/navigation/edit/menu-inspector-controls.js b/packages/block-library/src/navigation/edit/menu-inspector-controls.js index ff7faddd5822ba..3350a6a881cfcc 100644 --- a/packages/block-library/src/navigation/edit/menu-inspector-controls.js +++ b/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; diff --git a/packages/e2e-test-utils-playwright/src/editor/index.ts b/packages/e2e-test-utils-playwright/src/editor/index.ts index 3c9ab2d9dbefee..ebaadebd6205fb 100644 --- a/packages/e2e-test-utils-playwright/src/editor/index.ts +++ b/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 ); } diff --git a/packages/e2e-test-utils-playwright/src/editor/switch-block-inspector-tab.ts b/packages/e2e-test-utils-playwright/src/editor/switch-block-inspector-tab.ts new file mode 100644 index 00000000000000..1d9b3b0255ad94 --- /dev/null +++ b/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(); +} diff --git a/packages/e2e-test-utils/README.md b/packages/e2e-test-utils/README.md index 96ed7f3dcb1ea4..e6bdf2d9c33cb2 100644 --- a/packages/e2e-test-utils/README.md +++ b/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. diff --git a/packages/e2e-test-utils/src/index.js b/packages/e2e-test-utils/src/index.js index 6b217d52c44074..a35fd1083f1138 100644 --- a/packages/e2e-test-utils/src/index.js +++ b/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'; diff --git a/packages/e2e-test-utils/src/switch-block-inspector-tab.js b/packages/e2e-test-utils/src/switch-block-inspector-tab.js new file mode 100644 index 00000000000000..062339664c8a44 --- /dev/null +++ b/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 }"]` + ); + } +} diff --git a/packages/e2e-tests/specs/editor/various/block-hierarchy-navigation.test.js b/packages/e2e-tests/specs/editor/various/block-hierarchy-navigation.test.js index c067ead926a5b7..4c57bc33e0bfb9 100644 --- a/packages/e2e-tests/specs/editor/various/block-hierarchy-navigation.test.js +++ b/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"]' ); diff --git a/packages/editor/src/components/provider/use-block-editor-settings.js b/packages/editor/src/components/provider/use-block-editor-settings.js index 70ab1ac333c44a..a914602db45e8f 100644 --- a/packages/editor/src/components/provider/use-block-editor-settings.js +++ b/packages/editor/src/components/provider/use-block-editor-settings.js @@ -135,7 +135,6 @@ function useBlockEditorSettings( settings, hasTemplate ) { Object.entries( settings ).filter( ( [ key ] ) => [ '__experimentalBlockDirectory', - '__experimentalBlockInspectorTabs', '__experimentalDiscussionSettings', '__experimentalFeatures', '__experimentalPreferredStyleVariations', @@ -143,6 +142,7 @@ function useBlockEditorSettings( settings, hasTemplate ) { '__unstableGalleryWithImageBlocks', 'alignWide', 'allowedBlockTypes', + 'blockInspectorTabs', 'bodyPlaceholder', 'canLockBlocks', 'codeEditingEnabled', diff --git a/test/e2e/specs/editor/blocks/avatar.spec.js b/test/e2e/specs/editor/blocks/avatar.spec.js index 70c7f7bd681936..53a5c40c4ffff8 100644 --- a/test/e2e/specs/editor/blocks/avatar.spec.js +++ b/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 ); } ); diff --git a/test/e2e/specs/editor/blocks/buttons.spec.js b/test/e2e/specs/editor/blocks/buttons.spec.js index d88f042ebdf9ff..5ea485b783bb05 100644 --- a/test/e2e/specs/editor/blocks/buttons.spec.js +++ b/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]' ); diff --git a/test/e2e/specs/editor/blocks/table.spec.js b/test/e2e/specs/editor/blocks/table.spec.js index 689682e77b92d0..7d4623c7a328aa 100644 --- a/test/e2e/specs/editor/blocks/table.spec.js +++ b/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(); diff --git a/test/e2e/specs/editor/plugins/hooks-api.spec.js b/test/e2e/specs/editor/plugins/hooks-api.spec.js index 47512d32c387f7..eea308f0d08628 100644 --- a/test/e2e/specs/editor/plugins/hooks-api.spec.js +++ b/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( '' ); } ); diff --git a/test/e2e/specs/site-editor/push-to-global-styles.spec.js b/test/e2e/specs/site-editor/push-to-global-styles.spec.js index 7e9d3a07807f1c..a121e07a84daaa 100644 --- a/test/e2e/specs/site-editor/push-to-global-styles.spec.js +++ b/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', {