Fix share controls with children

WordPress · Dec 7, 2023 · aa5e8f5 · aa5e8f5
1 parent 738c07a
commit aa5e8f5
Show file tree

Hide file tree

Showing 10 changed files with 66 additions and 78 deletions.
diff --git a/packages/block-editor/src/components/block-controls/hook.js b/packages/block-editor/src/components/block-controls/hook.js
@@ -1,45 +1,19 @@
 /**
  * WordPress dependencies
  */
-import { store as blocksStore } from '@wordpress/blocks';
-import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import groups from './groups';
-import { store as blockEditorStore } from '../../store';
-import { useBlockEditContext } from '../block-edit/context';
 import useDisplayBlockControls from '../use-display-block-controls';
 
 export default function useBlockControlsFill( group, shareWithChildBlocks ) {
-	const isDisplayed = useDisplayBlockControls();
-	const { clientId } = useBlockEditContext();
-	const isParentDisplayed = useSelect(
-		( select ) => {
-			if ( ! shareWithChildBlocks ) {
-				return false;
-			}
-
-			const { getBlockName, hasSelectedInnerBlock } =
-				select( blockEditorStore );
-			const { hasBlockSupport } = select( blocksStore );
-
-			return (
-				hasBlockSupport(
-					getBlockName( clientId ),
-					'__experimentalExposeControlsToChildren',
-					false
-				) && hasSelectedInnerBlock( clientId )
-			);
-		},
-		[ shareWithChildBlocks, clientId ]
-	);
-
+	const { isDisplayed, isParentDisplayed } = useDisplayBlockControls();
 	if ( isDisplayed ) {
 		return groups[ group ]?.Fill;
 	}
-	if ( isParentDisplayed ) {
+	if ( isParentDisplayed && shareWithChildBlocks ) {
 		return groups.parent.Fill;
 	}
 	return null;

diff --git a/packages/block-editor/src/components/block-info-slot-fill/index.js b/packages/block-editor/src/components/block-info-slot-fill/index.js
@@ -13,7 +13,7 @@ const { createPrivateSlotFill } = unlock( componentsPrivateApis );
 const { Fill, Slot } = createPrivateSlotFill( 'BlockInformation' );
 
 const BlockInfo = ( props ) => {
-	const isDisplayed = useDisplayBlockControls();
+	const { isDisplayed } = useDisplayBlockControls();
 	if ( ! isDisplayed ) {
 		return null;
 	}

diff --git a/packages/block-editor/src/components/inspector-controls/fill.js b/packages/block-editor/src/components/inspector-controls/fill.js
@@ -33,7 +33,7 @@ export default function InspectorControlsFill( {
 		group = __experimentalGroup;
 	}
 
-	const isDisplayed = useDisplayBlockControls();
+	const { isDisplayed } = useDisplayBlockControls();
 	const Fill = groups[ group ]?.Fill;
 	if ( ! Fill ) {
 		warning( `Unknown InspectorControls group "${ group }" provided.` );

diff --git a/packages/block-editor/src/components/inspector-controls/fill.native.js b/packages/block-editor/src/components/inspector-controls/fill.native.js
@@ -35,7 +35,7 @@ export default function InspectorControlsFill( {
 		);
 		group = __experimentalGroup;
 	}
-	const isDisplayed = useDisplayBlockControls();
+	const { isDisplayed } = useDisplayBlockControls();
 
 	const Fill = groups[ group ]?.Fill;
 	if ( ! Fill ) {

diff --git a/packages/block-editor/src/components/use-display-block-controls/index.js b/packages/block-editor/src/components/use-display-block-controls/index.js
@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
+import { store as blocksStore } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -13,23 +14,28 @@ export default function useDisplayBlockControls() {
 	const { isSelected, clientId, name } = useBlockEditContext();
 	return useSelect(
 		( select ) => {
-			if ( isSelected ) {
-				return true;
-			}
-
 			const {
 				getBlockName,
 				isFirstMultiSelectedBlock,
 				getMultiSelectedBlockClientIds,
+				hasSelectedInnerBlock,
 			} = select( blockEditorStore );
+			const { hasBlockSupport } = select( blocksStore );
 
-			if ( isFirstMultiSelectedBlock( clientId ) ) {
-				return getMultiSelectedBlockClientIds().every(
-					( id ) => getBlockName( id ) === name
-				);
-			}
-
-			return false;
+			return {
+				isDisplayed:
+					isSelected ||
+					( isFirstMultiSelectedBlock( clientId ) &&
+						getMultiSelectedBlockClientIds().every(
+							( id ) => getBlockName( id ) === name
+						) ),
+				isParentDisplayed:
+					hasBlockSupport(
+						getBlockName( clientId ),
+						'__experimentalExposeControlsToChildren',
+						false
+					) && hasSelectedInnerBlock( clientId ),
+			};
 		},
 		[ clientId, isSelected, name ]
 	);

diff --git a/packages/block-editor/src/components/use-display-block-controls/index.native.js b/packages/block-editor/src/components/use-display-block-controls/index.native.js
@@ -26,11 +26,7 @@ export default function useDisplayBlockControls() {
 				false
 			);
 
-			if ( ! hideControls && isSelected ) {
-				return true;
-			}
-
-			return false;
+			return { isDisplayed: ! hideControls && isSelected };
 		},
 		[ clientId, isSelected, name ]
 	);

diff --git a/packages/block-editor/src/hooks/align.js b/packages/block-editor/src/hooks/align.js
@@ -153,6 +153,7 @@ function BlockEditAlignmentToolbarControlsPure( {
 }
 
 export default {
+	shareWithChildBlocks: true,
 	edit: BlockEditAlignmentToolbarControlsPure,
 	attributeKeys: [ 'align' ],
 	hasSupport( name ) {

diff --git a/packages/block-editor/src/hooks/duotone.js b/packages/block-editor/src/hooks/duotone.js
@@ -176,6 +176,7 @@ function DuotonePanelPure( { style, setAttributes, name } ) {
 }
 
 export default {
+	shareWithChildBlocks: true,
 	edit: DuotonePanelPure,
 	attributeKeys: [ 'style' ],
 	hasSupport( name ) {

diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js
@@ -287,6 +287,7 @@ function LayoutPanelPure( { layout, setAttributes, name: blockName } ) {
 }
 
 export default {
+	shareWithChildBlocks: true,
 	edit: LayoutPanelPure,
 	attributeKeys: [ 'layout' ],
 	hasSupport( name ) {

diff --git a/packages/block-editor/src/hooks/utils.js b/packages/block-editor/src/hooks/utils.js
@@ -375,45 +375,54 @@ export function createBlockEditFilter( features ) {
 	} );
 	const withBlockEditHooks = createHigherOrderComponent(
 		( OriginalBlockEdit ) => ( props ) => {
-			const shouldDisplayControls = useDisplayBlockControls();
+			const { isDisplayed, isParentDisplayed } =
+				useDisplayBlockControls();
 			// CAUTION: code added before this line will be executed for all
 			// blocks, not just those that support the feature! Code added
 			// above this line should be carefully evaluated for its impact on
 			// performance.
 			return [
-				...features.map(
-					( { Edit, hasSupport, attributeKeys = [] }, i ) => {
-						if (
-							! shouldDisplayControls ||
-							! hasSupport( props.name )
-						) {
-							return null;
-						}
+				...features.map( ( feature, i ) => {
+					const {
+						Edit,
+						hasSupport,
+						attributeKeys = [],
+						shareWithChildBlocks,
+					} = feature;
+					const shouldDisplayControls =
+						isDisplayed ||
+						( isParentDisplayed && shareWithChildBlocks );
 
-						const neededProps = {};
-						for ( const key of attributeKeys ) {
-							if ( props.attributes[ key ] ) {
-								neededProps[ key ] = props.attributes[ key ];
-							}
+					if (
+						! shouldDisplayControls ||
+						! hasSupport( props.name )
+					) {
+						return null;
+					}
+
+					const neededProps = {};
+					for ( const key of attributeKeys ) {
+						if ( props.attributes[ key ] ) {
+							neededProps[ key ] = props.attributes[ key ];
 						}
-						return (
-							<Edit
-								// We can use the index because the array length
-								// is fixed per page load right now.
-								key={ i }
-								name={ props.name }
-								clientId={ props.clientId }
-								setAttributes={ props.setAttributes }
-								__unstableParentLayout={
-									props.__unstableParentLayout
-								}
-								// This component is pure, so only pass needed
-								// props!!!
-								{ ...neededProps }
-							/>
-						);
 					}
-				),
+					return (
+						<Edit
+							// We can use the index because the array length
+							// is fixed per page load right now.
+							key={ i }
+							name={ props.name }
+							clientId={ props.clientId }
+							setAttributes={ props.setAttributes }
+							__unstableParentLayout={
+								props.__unstableParentLayout
+							}
+							// This component is pure, so only pass needed
+							// props!!!
+							{ ...neededProps }
+						/>
+					);
+				} ),
 				<OriginalBlockEdit key="edit" { ...props } />,
 			];
 		},