Block Editor: Try to absorb parent block toolbar controls

WordPress · Aug 11, 2021 · 87b3cf2 · 87b3cf2
1 parent 29cd8ed
commit 87b3cf2
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 13 deletions.
diff --git a/packages/block-editor/src/components/block-controls/fill.js b/packages/block-editor/src/components/block-controls/fill.js
@@ -22,8 +22,9 @@ export default function BlockControlsFill( {
 	group = 'default',
 	controls,
 	children,
+	__experimentalExposeToChildren = false,
 } ) {
-	if ( ! useDisplayBlockControls() ) {
+	if ( ! useDisplayBlockControls( { __experimentalExposeToChildren } ) ) {
 		return null;
 	}
 	const Fill = groups[ group ].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
@@ -9,31 +9,36 @@ import { useSelect } from '@wordpress/data';
 import { useBlockEditContext } from '../block-edit/context';
 import { store as blockEditorStore } from '../../store';
 
-export default function useDisplayBlockControls() {
+export default function useDisplayBlockControls( {
+	__experimentalExposeToChildren = false,
+} = {} ) {
 	const { isSelected, clientId, name } = useBlockEditContext();
-	const isFirstAndSameTypeMultiSelected = useSelect(
+	const isActive = useSelect(
 		( select ) => {
-			// Don't bother checking, see OR statement below.
 			if ( isSelected ) {
-				return;
+				return true;
 			}
 
 			const {
 				getBlockName,
 				isFirstMultiSelectedBlock,
 				getMultiSelectedBlockClientIds,
+				hasSelectedInnerBlock,
 			} = select( blockEditorStore );
 
-			if ( ! isFirstMultiSelectedBlock( clientId ) ) {
-				return false;
+			if ( isFirstMultiSelectedBlock( clientId ) ) {
+				return getMultiSelectedBlockClientIds().every(
+					( id ) => getBlockName( id ) === name
+				);
+			}
+			if ( __experimentalExposeToChildren ) {
+				return hasSelectedInnerBlock( clientId );
 			}
 
-			return getMultiSelectedBlockClientIds().every(
-				( id ) => getBlockName( id ) === name
-			);
+			return false;
 		},
 		[ clientId, isSelected, name ]
 	);
 
-	return isSelected || isFirstAndSameTypeMultiSelected;
+	return isActive;
 }
diff --git a/packages/block-library/src/buttons/edit.js b/packages/block-library/src/buttons/edit.js
@@ -59,6 +59,7 @@ function ButtonsEdit( {
 			],
 		],
 		orientation,
+		__experimentalCaptureToolbars: true,
 		__experimentalLayout: LAYOUT,
 		templateInsertUpdatesSelection: true,
 	} );
@@ -70,7 +71,7 @@ function ButtonsEdit( {
 
 	return (
 		<>
-			<BlockControls group="block">
+			<BlockControls group="block" __experimentalExposeToChildren>
 				<JustifyContentControl
 					allowedControls={ justifyControls }
 					value={ contentJustification }

diff --git a/packages/block-library/src/social-links/edit.js b/packages/block-library/src/social-links/edit.js
@@ -100,6 +100,7 @@ export function SocialLinksEdit( props ) {
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		allowedBlocks: ALLOWED_BLOCKS,
 		orientation: 'horizontal',
+		__experimentalCaptureToolbars: true,
 		placeholder: isSelected ? SelectedSocialPlaceholder : SocialPlaceholder,
 		templateLock: false,
 		__experimentalAppenderTagName: 'li',
@@ -111,7 +112,7 @@ export function SocialLinksEdit( props ) {
 
 	return (
 		<Fragment>
-			<BlockControls group="block">
+			<BlockControls group="block" __experimentalExposeToChildren>
 				<JustifyContentControl
 					allowedControls={ [
 						'left',