Add Position group, ensure Position panel always appears just before …

…Advanced
WordPress · Dec 5, 2022 · 338d16b · 338d16b
1 parent 8abd0a3
commit 338d16b
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 9 deletions.
diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js
@@ -34,6 +34,7 @@ import { default as InspectorControls } from '../inspector-controls';
 import { default as InspectorControlsTabs } from '../inspector-controls-tabs';
 import useInspectorControlsTabs from '../inspector-controls-tabs/use-inspector-controls-tabs';
 import AdvancedControls from '../inspector-controls-tabs/advanced-controls-panel';
+import PositionControls from '../inspector-controls-tabs/position-controls-panel';
 
 function useContentBlocks( blockTypes, block ) {
 	const contentBlocksObjectAux = useMemo( () => {
@@ -308,6 +309,7 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
 						__experimentalGroup="border"
 						label={ __( 'Border' ) }
 					/>
+					<PositionControls />
 					<div>
 						<AdvancedControls />
 					</div>

diff --git a/packages/block-editor/src/components/inspector-controls-tabs/position-controls-panel.js b/packages/block-editor/src/components/inspector-controls-tabs/position-controls-panel.js
@@ -0,0 +1,37 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	PanelBody,
+	__experimentalUseSlotFills as useSlotFills,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import InspectorControlsGroups from '../inspector-controls/groups';
+import { default as InspectorControls } from '../inspector-controls';
+
+const PositionControls = () => {
+	const fills = useSlotFills(
+		InspectorControlsGroups.position.Slot.__unstableName
+	);
+	const hasFills = Boolean( fills && fills.length );
+
+	if ( ! hasFills ) {
+		return null;
+	}
+
+	return (
+		<PanelBody
+			className="block-editor-block-inspector__position"
+			title={ __( 'Position' ) }
+			initialOpen={ false }
+		>
+			<InspectorControls.Slot __experimentalGroup="position" />
+		</PanelBody>
+	);
+};
+
+export default PositionControls;
diff --git a/packages/block-editor/src/components/inspector-controls-tabs/settings-tab.js b/packages/block-editor/src/components/inspector-controls-tabs/settings-tab.js
@@ -2,11 +2,13 @@
  * Internal dependencies
  */
 import AdvancedControls from './advanced-controls-panel';
+import PositionControls from './position-controls-panel';
 import { default as InspectorControls } from '../inspector-controls';
 
 const SettingsTab = ( { showAdvancedControls = false } ) => (
 	<>
 		<InspectorControls.Slot />
+		<PositionControls />
 		{ showAdvancedControls && (
 			<div>
 				<AdvancedControls />

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
@@ -19,6 +19,7 @@ export default function useInspectorControlsTabs( blockName ) {
 		default: defaultGroup,
 		dimensions: dimensionsGroup,
 		list: listGroup,
+		position: positionGroup,
 		typography: typographyGroup,
 	} = InspectorControlsGroups;
 
@@ -47,6 +48,7 @@ export default function useInspectorControlsTabs( blockName ) {
 	// or Advanced Controls slot, then add this tab.
 	const settingsFills = [
 		...( useSlotFills( defaultGroup.Slot.__unstableName ) || [] ),
+		...( useSlotFills( positionGroup.Slot.__unstableName ) || [] ),
 		...( useSlotFills( InspectorAdvancedControls.slotName ) || [] ),
 	];
 

diff --git a/packages/block-editor/src/components/inspector-controls/groups.js b/packages/block-editor/src/components/inspector-controls/groups.js
@@ -10,6 +10,7 @@ const InspectorControlsColor = createSlotFill( 'InspectorControlsColor' );
 const InspectorControlsDimensions = createSlotFill(
 	'InspectorControlsDimensions'
 );
+const InspectorControlsPosition = createSlotFill( 'InspectorControlsPosition' );
 const InspectorControlsTypography = createSlotFill(
 	'InspectorControlsTypography'
 );
@@ -23,6 +24,7 @@ const groups = {
 	dimensions: InspectorControlsDimensions,
 	list: InspectorControlsListView,
 	typography: InspectorControlsTypography,
+	position: InspectorControlsPosition,
 };
 
 export default groups;
diff --git a/packages/block-editor/src/hooks/position.js b/packages/block-editor/src/hooks/position.js
@@ -8,11 +8,7 @@ import classnames from 'classnames';
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks';
-import {
-	BaseControl,
-	CustomSelectControl,
-	PanelBody,
-} from '@wordpress/components';
+import { BaseControl, CustomSelectControl } from '@wordpress/components';
 import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';
 import {
 	useContext,
@@ -295,10 +291,11 @@ export const withInspectorControls = createHigherOrderComponent(
 
 		return [
 			positionSupport && (
-				<InspectorControls key="position">
-					<PanelBody title={ __( 'Position' ) } initialOpen={ false }>
-						<PositionEdit { ...props } />
-					</PanelBody>
+				<InspectorControls
+					key="position"
+					__experimentalGroup="position"
+				>
+					<PositionEdit { ...props } />
 				</InspectorControls>
 			),
 			<BlockEdit key="edit" { ...props } />,