Try moving the control to a separate Position PanelBody

WordPress · Dec 5, 2022 · 8abd0a3 · 8abd0a3
1 parent f6ca65d
commit 8abd0a3
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 7 deletions.
diff --git a/packages/block-editor/src/hooks/index.js b/packages/block-editor/src/hooks/index.js
@@ -14,11 +14,11 @@ import './color';
 import './duotone';
 import './font-size';
 import './border';
+import './position';
 import './layout';
 import './content-lock-ui';
 import './metadata';
 import './metadata-name';
-import './position';
 
 export { useCustomSides } from './dimensions';
 export { useLayoutClasses, useLayoutStyles } from './layout';

diff --git a/packages/block-editor/src/hooks/position.js b/packages/block-editor/src/hooks/position.js
@@ -8,7 +8,11 @@ import classnames from 'classnames';
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks';
-import { BaseControl, CustomSelectControl } from '@wordpress/components';
+import {
+	BaseControl,
+	CustomSelectControl,
+	PanelBody,
+} from '@wordpress/components';
 import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';
 import {
 	useContext,
@@ -253,6 +257,7 @@ export function PositionEdit( props ) {
 						__next36pxDefaultSize
 						className="block-editor-hooks__position-selection__select-control"
 						label={ __( 'Position' ) }
+						hideLabelFromVision
 						describedBy={ sprintf(
 							// translators: %s: Currently selected font size.
 							__( 'Currently selected position: %s' ),
@@ -290,11 +295,10 @@ export const withInspectorControls = createHigherOrderComponent(
 
 		return [
 			positionSupport && (
-				<InspectorControls
-					__experimentalGroup="advanced"
-					key="position"
-				>
-					<PositionEdit { ...props } />
+				<InspectorControls key="position">
+					<PanelBody title={ __( 'Position' ) } initialOpen={ false }>
+						<PositionEdit { ...props } />
+					</PanelBody>
 				</InspectorControls>
 			),
 			<BlockEdit key="edit" { ...props } />,