Add drawer icons to icons package

Switch editor sidebar icons to new drawer icons Icon should reflect RTL as well. Update TabPanel to allow icons on TabButtons Add menu group to InspectorControl slot fills Move nav menu controls into InspectorControls menu group Introduce menu, settings & appearance tabs to sidebar Refactor InspectorControlTabs Re-orders the appearance and settings tabs. Also now omits the TabPanel altogether if only a single tab has contents. Make block inspector tabs a Gutenberg experiment A little tidy up Clean up conditional tabs display Remove nav specific menu tab for now Remove Menu inspector controls group Refactor inspector controls tabs to components Remove conditional display of tabs Render no settings or tools messages when no fills Reduce new styles for equal width tabs Add general slot for items applying to block as a whole Move query block new post link to new slot Revert "Move query block new post link to new slot" This reverts commit 1279985. Revert "Add general slot for items applying to block as a whole" This reverts commit 186276f. Tweak no style options message Add changelog for TabPanel updates Remove empty readme until experiment settles Fix copy and paste error
WordPress · Nov 17, 2022 · 2990b61 · 2990b61
1 parent dbb9487
commit 2990b61
Show file tree

Hide file tree

Showing 18 changed files with 394 additions and 90 deletions.
diff --git a/lib/experimental/editor-settings.php b/lib/experimental/editor-settings.php
@@ -86,6 +86,9 @@ 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' );
+	}
 }
 
 add_action( 'admin_init', 'gutenberg_enable_experiments' );
diff --git a/lib/experiments-page.php b/lib/experiments-page.php
@@ -52,6 +52,7 @@ function gutenberg_initialize_experiments_settings() {
 			'id'    => 'gutenberg-zoomed-out-view',
 		)
 	);
+
 	add_settings_field(
 		'gutenberg-off-canvas-navigation-editor',
 		__( 'Off canvas navigation editor ', 'gutenberg' ),
@@ -63,6 +64,7 @@ function gutenberg_initialize_experiments_settings() {
 			'id'    => 'gutenberg-off-canvas-navigation-editor',
 		)
 	);
+
 	add_settings_field(
 		'gutenberg-color-randomizer',
 		__( 'Color randomizer ', 'gutenberg' ),
@@ -75,6 +77,18 @@ 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',
+		)
+	);
+
 	register_setting(
 		'gutenberg-experiments',
 		'gutenberg-experiments'

diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js
@@ -9,9 +9,8 @@ import {
 	store as blocksStore,
 } from '@wordpress/blocks';
 import {
-	PanelBody,
-	__experimentalUseSlotFills as useSlotFills,
 	FlexItem,
+	PanelBody,
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
 	Button,
@@ -24,20 +23,19 @@ import { useMemo, useCallback } from '@wordpress/element';
  */
 import SkipToSelectedBlock from '../skip-to-selected-block';
 import BlockCard from '../block-card';
-import {
-	default as InspectorControls,
-	InspectorAdvancedControls,
-} from '../inspector-controls';
-import BlockStyles from '../block-styles';
 import MultiSelectionInspector from '../multi-selection-inspector';
-import DefaultStylePicker from '../default-style-picker';
 import BlockVariationTransforms from '../block-variation-transforms';
 import useBlockDisplayInformation from '../use-block-display-information';
 import { store as blockEditorStore } from '../../store';
 import BlockIcon from '../block-icon';
+import BlockStyles from '../block-styles';
+import DefaultStylePicker from '../default-style-picker';
+import { default as InspectorControls } from '../inspector-controls';
+import { default as InspectorControlsTabs } from '../inspector-controls-tabs';
+import AdvancedControls from '../inspector-controls-tabs/advanced-controls-panel';
 
 function useContentBlocks( blockTypes, block ) {
-	const contenBlocksObjectAux = useMemo( () => {
+	const contentBlocksObjectAux = useMemo( () => {
 		return blockTypes.reduce( ( result, blockType ) => {
 			if (
 				blockType.name !== 'core/list-item' &&
@@ -53,7 +51,7 @@ function useContentBlocks( blockTypes, block ) {
 	}, [ blockTypes ] );
 	const isContentBlock = useCallback(
 		( blockName ) => {
-			return !! contenBlocksObjectAux[ blockName ];
+			return !! contentBlocksObjectAux[ blockName ];
 		},
 		[ blockTypes ]
 	);
@@ -166,28 +164,36 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 		};
 	}, [] );
 
+	const showTabs = window?.__experimentalEnableBlockInspectorTabs;
+
 	if ( count > 1 ) {
 		return (
 			<div className="block-editor-block-inspector">
 				<MultiSelectionInspector />
-				<InspectorControls.Slot />
-				<InspectorControls.Slot
-					__experimentalGroup="color"
-					label={ __( 'Color' ) }
-					className="color-block-support-panel__inner-wrapper"
-				/>
-				<InspectorControls.Slot
-					__experimentalGroup="typography"
-					label={ __( 'Typography' ) }
-				/>
-				<InspectorControls.Slot
-					__experimentalGroup="dimensions"
-					label={ __( 'Dimensions' ) }
-				/>
-				<InspectorControls.Slot
-					__experimentalGroup="border"
-					label={ __( 'Border' ) }
-				/>
+				{ showTabs ? (
+					<InspectorControlsTabs />
+				) : (
+					<>
+						<InspectorControls.Slot />
+						<InspectorControls.Slot
+							__experimentalGroup="color"
+							label={ __( 'Color' ) }
+							className="color-block-support-panel__inner-wrapper"
+						/>
+						<InspectorControls.Slot
+							__experimentalGroup="typography"
+							label={ __( 'Typography' ) }
+						/>
+						<InspectorControls.Slot
+							__experimentalGroup="dimensions"
+							label={ __( 'Dimensions' ) }
+						/>
+						<InspectorControls.Slot
+							__experimentalGroup="border"
+							label={ __( 'Border' ) }
+						/>
+					</>
+				) }
 			</div>
 		);
 	}
@@ -229,6 +235,8 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 };
 
 const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
+	const showTabs = window?.__experimentalEnableBlockInspectorTabs;
+
 	const hasBlockStyles = useSelect(
 		( select ) => {
 			const { getBlockStyles } = select( blocksStore );
@@ -238,67 +246,64 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
 		[ blockName ]
 	);
 	const blockInformation = useBlockDisplayInformation( clientId );
+
 	return (
 		<div className="block-editor-block-inspector">
 			<BlockCard { ...blockInformation } />
 			<BlockVariationTransforms blockClientId={ clientId } />
-			{ hasBlockStyles && (
-				<div>
-					<PanelBody title={ __( 'Styles' ) }>
-						<BlockStyles clientId={ clientId } />
-						{ hasBlockSupport(
-							blockName,
-							'defaultStylePicker',
-							true
-						) && <DefaultStylePicker blockName={ blockName } /> }
-					</PanelBody>
-				</div>
+			{ showTabs && (
+				<InspectorControlsTabs
+					hasBlockStyles={ hasBlockStyles }
+					clientId={ clientId }
+					blockName={ blockName }
+				/>
+			) }
+			{ ! showTabs && (
+				<>
+					{ hasBlockStyles && (
+						<div>
+							<PanelBody title={ __( 'Styles' ) }>
+								<BlockStyles clientId={ clientId } />
+								{ hasBlockSupport(
+									blockName,
+									'defaultStylePicker',
+									true
+								) && (
+									<DefaultStylePicker
+										blockName={ blockName }
+									/>
+								) }
+							</PanelBody>
+						</div>
+					) }
+					<InspectorControls.Slot />
+					<InspectorControls.Slot
+						__experimentalGroup="color"
+						label={ __( 'Color' ) }
+						className="color-block-support-panel__inner-wrapper"
+					/>
+					<InspectorControls.Slot
+						__experimentalGroup="typography"
+						label={ __( 'Typography' ) }
+					/>
+					<InspectorControls.Slot
+						__experimentalGroup="dimensions"
+						label={ __( 'Dimensions' ) }
+					/>
+					<InspectorControls.Slot
+						__experimentalGroup="border"
+						label={ __( 'Border' ) }
+					/>
+					<div>
+						<AdvancedControls />
+					</div>
+				</>
 			) }
-			<InspectorControls.Slot />
-			<InspectorControls.Slot
-				__experimentalGroup="color"
-				label={ __( 'Color' ) }
-				className="color-block-support-panel__inner-wrapper"
-			/>
-			<InspectorControls.Slot
-				__experimentalGroup="typography"
-				label={ __( 'Typography' ) }
-			/>
-			<InspectorControls.Slot
-				__experimentalGroup="dimensions"
-				label={ __( 'Dimensions' ) }
-			/>
-			<InspectorControls.Slot
-				__experimentalGroup="border"
-				label={ __( 'Border' ) }
-			/>
-			<div>
-				<AdvancedControls />
-			</div>
 			<SkipToSelectedBlock key="back" />
 		</div>
 	);
 };
 
-const AdvancedControls = () => {
-	const fills = useSlotFills( InspectorAdvancedControls.slotName );
-	const hasFills = Boolean( fills && fills.length );
-
-	if ( ! hasFills ) {
-		return null;
-	}
-
-	return (
-		<PanelBody
-			className="block-editor-block-inspector__advanced"
-			title={ __( 'Advanced' ) }
-			initialOpen={ false }
-		>
-			<InspectorControls.Slot __experimentalGroup="advanced" />
-		</PanelBody>
-	);
-};
-
 /**
  * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-inspector/README.md
  */

diff --git a/packages/block-editor/src/components/block-inspector/style.scss b/packages/block-editor/src/components/block-inspector/style.scss
@@ -27,14 +27,22 @@
 	}
 }
 
-.block-editor-block-inspector__no-blocks {
+.block-editor-block-inspector__no-blocks,
+.block-editor-block-inspector__no-block-tools {
 	display: block;
 	font-size: $default-font-size;
 	background: $white;
 	padding: ($grid-unit-20 * 2) $grid-unit-20;
 	text-align: center;
 }
 
+.block-editor-block-inspector__no-block-tools {
+	border-top: $border-width solid $gray-300;
+}
+
+.block-editor-block-inspector__tab-item {
+	flex: 1 1 0px;
+}
 
 .block-editor-block-inspector__block-buttons-container {
 	border-top: $border-width solid $gray-200;

diff --git a/packages/block-editor/src/components/inspector-controls-tabs/advanced-controls-panel.js b/packages/block-editor/src/components/inspector-controls-tabs/advanced-controls-panel.js
@@ -0,0 +1,37 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	PanelBody,
+	__experimentalUseSlotFills as useSlotFills,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import {
+	default as InspectorControls,
+	InspectorAdvancedControls,
+} from '../inspector-controls';
+
+const AdvancedControls = () => {
+	const fills = useSlotFills( InspectorAdvancedControls.slotName );
+	const hasFills = Boolean( fills && fills.length );
+
+	if ( ! hasFills ) {
+		return null;
+	}
+
+	return (
+		<PanelBody
+			className="block-editor-block-inspector__advanced"
+			title={ __( 'Advanced' ) }
+			initialOpen={ false }
+		>
+			<InspectorControls.Slot __experimentalGroup="advanced" />
+		</PanelBody>
+	);
+};
+
+export default AdvancedControls;