From 44372da3fab09a2361a5af400d418b77990b3624 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Tue, 6 Dec 2022 13:31:51 +0800 Subject: [PATCH 1/3] Sidebar Tabs: Use editor settings to override display --- ...-rest-block-editor-settings-controller.php | 6 +++++ .../src/components/block-inspector/index.js | 27 ++++++++++++++++--- .../src/navigation-link/index.php | 23 ++++++++++++++++ .../provider/use-block-editor-settings.js | 1 + 4 files changed, 53 insertions(+), 4 deletions(-) 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 4a258a70102bb5..d95fb497d3a0a3 100644 --- a/lib/experimental/class-wp-rest-block-editor-settings-controller.php +++ b/lib/experimental/class-wp-rest-block-editor-settings-controller.php @@ -168,6 +168,12 @@ 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' ), + ), + 'alignWide' => array( 'description' => __( 'Enable/Disable Wide/Full Alignments.', 'gutenberg' ), 'type' => 'boolean', diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js index 29cfb81dcdba28..5bcd1428c27226 100644 --- a/packages/block-editor/src/components/block-inspector/index.js +++ b/packages/block-editor/src/components/block-inspector/index.js @@ -72,6 +72,18 @@ function getContentBlocks( blocks, isContentBlock ) { return result; } +function getShowTabs( blockName, tabSettings = {} ) { + if ( tabSettings[ blockName ] !== undefined ) { + return tabSettings[ blockName ]; + } + + if ( tabSettings.default !== undefined ) { + return tabSettings.default; + } + + return window?.__experimentalEnableBlockInspectorTabs; +} + function BlockNavigationButton( { blockTypes, block, selectedBlock } ) { const { selectBlock } = useDispatch( blockEditorStore ); const blockType = blockTypes.find( ( { name } ) => name === block.name ); @@ -140,6 +152,7 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => { selectedBlockClientId, blockType, topLevelLockedBlock, + tabSettings, } = useSelect( ( select ) => { const { getSelectedBlockClientId, @@ -147,6 +160,7 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => { getBlockName, __unstableGetContentLockingParent, getTemplateLock, + getSettings, } = select( blockEditorStore ); const _selectedBlockClientId = getSelectedBlockClientId(); @@ -154,12 +168,14 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => { _selectedBlockClientId && getBlockName( _selectedBlockClientId ); const _blockType = _selectedBlockName && getBlockType( _selectedBlockName ); + const _tabSettings = getSettings().__experimentalBlockInspectorTabs; return { count: getSelectedBlockCount(), selectedBlockClientId: _selectedBlockClientId, selectedBlockName: _selectedBlockName, blockType: _blockType, + tabSettings: _tabSettings, topLevelLockedBlock: __unstableGetContentLockingParent( _selectedBlockClientId ) || ( getTemplateLock( _selectedBlockClientId ) === 'contentOnly' @@ -170,8 +186,7 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => { const availableTabs = useInspectorControlsTabs( blockType?.name ); const showTabs = - window?.__experimentalEnableBlockInspectorTabs && - availableTabs.length > 1; + availableTabs.length > 1 && getShowTabs( blockType?.name, tabSettings ); if ( count > 1 ) { return ( @@ -242,10 +257,14 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => { }; const BlockInspectorSingleBlock = ( { clientId, blockName } ) => { + const tabSettings = useSelect( ( select ) => { + return select( blockEditorStore ).getSettings() + .__experimentalBlockInspectorTabs; + }, [] ); + const availableTabs = useInspectorControlsTabs( blockName ); const showTabs = - window?.__experimentalEnableBlockInspectorTabs && - availableTabs.length > 1; + availableTabs.length > 1 && getShowTabs( blockName, tabSettings ); const hasBlockStyles = useSelect( ( select ) => { diff --git a/packages/block-library/src/navigation-link/index.php b/packages/block-library/src/navigation-link/index.php index f32437b41a3f84..73a20b2e56ae36 100644 --- a/packages/block-library/src/navigation-link/index.php +++ b/packages/block-library/src/navigation-link/index.php @@ -344,3 +344,26 @@ function register_block_core_navigation_link() { ); } add_action( 'init', 'register_block_core_navigation_link' ); + +/** + * Disables the display of tabs for the Navigation Link block. + * + * @param array $settings Default editor settings. + * @return array Filtered editor settings. + */ +function gutenberg_disable_tabs_for_navigation_link_block( $settings ) { + $current_tab_settings = _wp_array_get( + $settings, + array( '__experimentalBlockInspectorTabs' ), + array() + ); + + $settings['__experimentalBlockInspectorTabs'] = array_merge( + $current_tab_settings, + array( 'core/navigation-link' => false ) + ); + + return $settings; +} + +add_filter( 'block_editor_settings_all', 'gutenberg_disable_tabs_for_navigation_link_block' ); 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 3f4ed5a15fe370..70ab1ac333c44a 100644 --- a/packages/editor/src/components/provider/use-block-editor-settings.js +++ b/packages/editor/src/components/provider/use-block-editor-settings.js @@ -135,6 +135,7 @@ function useBlockEditorSettings( settings, hasTemplate ) { Object.entries( settings ).filter( ( [ key ] ) => [ '__experimentalBlockDirectory', + '__experimentalBlockInspectorTabs', '__experimentalDiscussionSettings', '__experimentalFeatures', '__experimentalPreferredStyleVariations', From e5dd52f58bbf8de31645fbff93d4f85aedbf56d0 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Tue, 6 Dec 2022 17:32:09 +0800 Subject: [PATCH 2/3] Roll check of tab display into use tabs hook --- .../src/components/block-inspector/index.js | 27 ++-------------- .../use-inspector-controls-tabs.js | 31 ++++++++++++++++++- 2 files changed, 32 insertions(+), 26 deletions(-) diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js index 5bcd1428c27226..bc56ee66ba6351 100644 --- a/packages/block-editor/src/components/block-inspector/index.js +++ b/packages/block-editor/src/components/block-inspector/index.js @@ -72,18 +72,6 @@ function getContentBlocks( blocks, isContentBlock ) { return result; } -function getShowTabs( blockName, tabSettings = {} ) { - if ( tabSettings[ blockName ] !== undefined ) { - return tabSettings[ blockName ]; - } - - if ( tabSettings.default !== undefined ) { - return tabSettings.default; - } - - return window?.__experimentalEnableBlockInspectorTabs; -} - function BlockNavigationButton( { blockTypes, block, selectedBlock } ) { const { selectBlock } = useDispatch( blockEditorStore ); const blockType = blockTypes.find( ( { name } ) => name === block.name ); @@ -152,7 +140,6 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => { selectedBlockClientId, blockType, topLevelLockedBlock, - tabSettings, } = useSelect( ( select ) => { const { getSelectedBlockClientId, @@ -160,7 +147,6 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => { getBlockName, __unstableGetContentLockingParent, getTemplateLock, - getSettings, } = select( blockEditorStore ); const _selectedBlockClientId = getSelectedBlockClientId(); @@ -168,14 +154,12 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => { _selectedBlockClientId && getBlockName( _selectedBlockClientId ); const _blockType = _selectedBlockName && getBlockType( _selectedBlockName ); - const _tabSettings = getSettings().__experimentalBlockInspectorTabs; return { count: getSelectedBlockCount(), selectedBlockClientId: _selectedBlockClientId, selectedBlockName: _selectedBlockName, blockType: _blockType, - tabSettings: _tabSettings, topLevelLockedBlock: __unstableGetContentLockingParent( _selectedBlockClientId ) || ( getTemplateLock( _selectedBlockClientId ) === 'contentOnly' @@ -185,8 +169,7 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => { }, [] ); const availableTabs = useInspectorControlsTabs( blockType?.name ); - const showTabs = - availableTabs.length > 1 && getShowTabs( blockType?.name, tabSettings ); + const showTabs = availableTabs.length > 1; if ( count > 1 ) { return ( @@ -257,14 +240,8 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => { }; const BlockInspectorSingleBlock = ( { clientId, blockName } ) => { - const tabSettings = useSelect( ( select ) => { - return select( blockEditorStore ).getSettings() - .__experimentalBlockInspectorTabs; - }, [] ); - const availableTabs = useInspectorControlsTabs( blockName ); - const showTabs = - availableTabs.length > 1 && getShowTabs( blockName, tabSettings ); + const showTabs = availableTabs.length > 1; const hasBlockStyles = useSelect( ( select ) => { 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 28d9ecfc9ac3ad..1239df6241fd2c 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 @@ -2,6 +2,7 @@ * WordPress dependencies */ import { __experimentalUseSlotFills as useSlotFills } from '@wordpress/components'; +import { useSelect } from '@wordpress/data'; /** * Internal dependencies @@ -10,6 +11,27 @@ import InspectorControlsGroups from '../inspector-controls/groups'; import useIsListViewTabDisabled from './use-is-list-view-tab-disabled'; import { InspectorAdvancedControls } from '../inspector-controls'; import { TAB_LIST_VIEW, TAB_SETTINGS, TAB_STYLES } from './utils'; +import { store as blockEditorStore } from '../../store'; + +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 ]; + } + + // Use generic default if set over the Gutenberg experiment option. + if ( tabSettings.default !== undefined ) { + return tabSettings.default; + } + + return true; +} export default function useInspectorControlsTabs( blockName ) { const tabs = []; @@ -54,5 +76,12 @@ export default function useInspectorControlsTabs( blockName ) { tabs.push( TAB_SETTINGS ); } - return tabs; + const tabSettings = useSelect( ( select ) => { + return select( blockEditorStore ).getSettings() + .__experimentalBlockInspectorTabs; + }, [] ); + + const showTabs = getShowTabs( blockName, tabSettings ); + + return showTabs ? tabs : []; } From 7d4e31fa9964a1445385c729b0563945342b259a Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Tue, 6 Dec 2022 17:48:39 +0800 Subject: [PATCH 3/3] Disable display of tabs for Nav Submenu block --- .../src/navigation-submenu/index.php | 23 +++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/packages/block-library/src/navigation-submenu/index.php b/packages/block-library/src/navigation-submenu/index.php index be6046076e76e1..e22ba164577510 100644 --- a/packages/block-library/src/navigation-submenu/index.php +++ b/packages/block-library/src/navigation-submenu/index.php @@ -289,3 +289,26 @@ function register_block_core_navigation_submenu() { ); } add_action( 'init', 'register_block_core_navigation_submenu' ); + +/** + * Disables the display of tabs for the Navigation Submenu block. + * + * @param array $settings Default editor settings. + * @return array Filtered editor settings. + */ +function gutenberg_disable_tabs_for_navigation_submenu_block( $settings ) { + $current_tab_settings = _wp_array_get( + $settings, + array( '__experimentalBlockInspectorTabs' ), + array() + ); + + $settings['__experimentalBlockInspectorTabs'] = array_merge( + $current_tab_settings, + array( 'core/navigation-submenu' => false ) + ); + + return $settings; +} + +add_filter( 'block_editor_settings_all', 'gutenberg_disable_tabs_for_navigation_submenu_block' );