diff --git a/packages/block-editor/src/hooks/position.js b/packages/block-editor/src/hooks/position.js
index 1e50c35bfd0e6f..d3246640861647 100644
--- a/packages/block-editor/src/hooks/position.js
+++ b/packages/block-editor/src/hooks/position.js
@@ -10,6 +10,7 @@ import { __, sprintf } from '@wordpress/i18n';
import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks';
import { BaseControl, CustomSelectControl } from '@wordpress/components';
import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';
+import { useSelect } from '@wordpress/data';
import {
useContext,
useMemo,
@@ -25,6 +26,7 @@ import BlockList from '../components/block-list';
import useSetting from '../components/use-setting';
import InspectorControls from '../components/inspector-controls';
import { cleanEmptyObject } from './utils';
+import { store as blockEditorStore } from '../store';
const POSITION_SUPPORT_KEY = 'position';
@@ -196,15 +198,16 @@ export function useIsPositionDisabled( { name: blockName } = {} ) {
}
/*
- * Position controls to be rendered in an inspector control panel.
+ * Position controls rendered in an inspector control panel.
*
* @param {Object} props
*
- * @return {WPElement} Padding edit element.
+ * @return {WPElement} Position panel.
*/
-export function PositionEdit( props ) {
+export function PositionPanel( props ) {
const {
attributes: { style = {} },
+ clientId,
name: blockName,
setAttributes,
} = props;
@@ -213,16 +216,32 @@ export function PositionEdit( props ) {
const allowSticky = hasStickyPositionSupport( blockName );
const value = style?.position?.type;
+ const { hasParents } = useSelect(
+ ( select ) => {
+ const { getBlockParents } = select( blockEditorStore );
+ const parents = getBlockParents( clientId );
+ return {
+ hasParents: parents.length,
+ };
+ },
+ [ clientId ]
+ );
+
const options = useMemo( () => {
const availableOptions = [ DEFAULT_OPTION ];
- if ( allowSticky || value === STICKY_OPTION.value ) {
+ // Only display sticky option if the block has no parents (is at the root of the document),
+ // or if the block already has a sticky position value set.
+ if (
+ ( allowSticky && ! hasParents ) ||
+ value === STICKY_OPTION.value
+ ) {
availableOptions.push( STICKY_OPTION );
}
if ( allowFixed || value === FIXED_OPTION.value ) {
availableOptions.push( FIXED_OPTION );
}
return availableOptions;
- }, [ allowFixed, allowSticky, value ] );
+ }, [ allowFixed, allowSticky, hasParents, value ] );
const onChangeType = ( next ) => {
// For now, use a hard-coded `0px` value for the position.
@@ -251,32 +270,37 @@ export function PositionEdit( props ) {
? options.find( ( option ) => option.value === value ) || DEFAULT_OPTION
: DEFAULT_OPTION;
+ // Only display position controls if there is at least one option to choose from.
return Platform.select( {
- web: (
- <>
-
- {
- onChangeType( selectedItem.value );
- } }
- size={ '__unstable-large' }
- />
-
- >
- ),
+ web:
+ options.length > 1 ? (
+
+
+ {
+ onChangeType( selectedItem.value );
+ } }
+ size={ '__unstable-large' }
+ />
+
+
+ ) : null,
native: null,
} );
}
@@ -299,14 +323,7 @@ export const withInspectorControls = createHigherOrderComponent(
positionSupport && ! useIsPositionDisabled( props );
return [
- showPositionControls && (
-
-
-
- ),
+ showPositionControls && ,
,
];
},