diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js index 2f3b69131a73e6..88683b4efc3f47 100644 --- a/packages/block-editor/src/components/block-inspector/index.js +++ b/packages/block-editor/src/components/block-inspector/index.js @@ -35,6 +35,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( () => { @@ -377,6 +378,7 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => { __experimentalGroup="border" label={ __( 'Border' ) } /> +
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 new file mode 100644 index 00000000000000..5fc71fab5960f4 --- /dev/null +++ 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 ( + + + + ); +}; + +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 index beac0f10a178a5..ec34035b754a91 100644 --- 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 } ) => ( <> + { showAdvancedControls && (
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 fbe072fab11c58..bf7f61de4c8cb7 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 @@ -43,6 +43,7 @@ export default function useInspectorControlsTabs( blockName ) { default: defaultGroup, dimensions: dimensionsGroup, list: listGroup, + position: positionGroup, typography: typographyGroup, } = InspectorControlsGroups; @@ -71,6 +72,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 index cb03c1ff13fa57..46fca564925aa6 100644 --- 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 index bbaea07ddf035a..700686b9a6a7b8 100644 --- 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 && ( - - - - + + ), ,