Block Editor: Try groups for InspectorControls (#34069)

* Block Editor: Try groups for InspectorControls * Update packages/block-editor/src/components/inspector-controls/fill.js * Remove the `block` group in InspectorControls * Make the group in InspectorControls experimental * Update React Native implementation to match web
WordPress · Aug 23, 2021 · 9385d9c · 9385d9c
1 parent cfc5d8b
commit 9385d9c
Show file tree

Hide file tree

Showing 21 changed files with 211 additions and 374 deletions.
diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md
@@ -438,9 +438,7 @@ Undocumented declaration.
 
 ### InspectorAdvancedControls
 
-_Related_
-
--   <https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/inspector-advanced-controls/README.md>
+Undocumented declaration.
 
 ### InspectorControls
 

diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js
@@ -19,8 +19,10 @@ import { useSelect } from '@wordpress/data';
  */
 import SkipToSelectedBlock from '../skip-to-selected-block';
 import BlockCard from '../block-card';
-import InspectorControls from '../inspector-controls';
-import InspectorAdvancedControls from '../inspector-advanced-controls';
+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';
@@ -128,18 +130,15 @@ const BlockInspectorSingleBlock = ( {
 			) }
 			<InspectorControls.Slot bubblesVirtually={ bubblesVirtually } />
 			<div>
-				<AdvancedControls
-					slotName={ InspectorAdvancedControls.slotName }
-					bubblesVirtually={ bubblesVirtually }
-				/>
+				<AdvancedControls bubblesVirtually={ bubblesVirtually } />
 			</div>
 			<SkipToSelectedBlock key="back" />
 		</div>
 	);
 };
 
-const AdvancedControls = ( { slotName, bubblesVirtually } ) => {
-	const slot = useSlot( slotName );
+const AdvancedControls = ( { bubblesVirtually } ) => {
+	const slot = useSlot( InspectorAdvancedControls.slotName );
 	const hasFills = Boolean( slot.fills && slot.fills.length );
 
 	if ( ! hasFills ) {
@@ -152,7 +151,8 @@ const AdvancedControls = ( { slotName, bubblesVirtually } ) => {
 			title={ __( 'Advanced' ) }
 			initialOpen={ false }
 		>
-			<InspectorAdvancedControls.Slot
+			<InspectorControls.Slot
+				__experimentalGroup="advanced"
 				bubblesVirtually={ bubblesVirtually }
 			/>
 		</PanelBody>

diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js
@@ -52,8 +52,10 @@ export {
 	default as InnerBlocks,
 	useInnerBlocksProps as __experimentalUseInnerBlocksProps,
 } from './inner-blocks';
-export { default as InspectorAdvancedControls } from './inspector-advanced-controls';
-export { default as InspectorControls } from './inspector-controls';
+export {
+	default as InspectorControls,
+	InspectorAdvancedControls,
+} from './inspector-controls';
 export {
 	JustifyToolbar,
 	JustifyContentControl,

diff --git a/packages/block-editor/src/components/index.native.js b/packages/block-editor/src/components/index.native.js
@@ -22,8 +22,10 @@ export {
 	default as InnerBlocks,
 	useInnerBlocksProps as __experimentalUseInnerBlocksProps,
 } from './inner-blocks';
-export { default as InspectorAdvancedControls } from './inspector-advanced-controls';
-export { default as InspectorControls } from './inspector-controls';
+export {
+	default as InspectorControls,
+	InspectorAdvancedControls,
+} from './inspector-controls';
 export {
 	JustifyToolbar,
 	JustifyContentControl,

diff --git a/packages/block-editor/src/components/inspector-advanced-controls/README.md b/packages/block-editor/src/components/inspector-advanced-controls/README.md
diff --git a/packages/block-editor/src/components/inspector-advanced-controls/index.js b/packages/block-editor/src/components/inspector-advanced-controls/index.js