Block Editor: Absorb parent block toolbar controls (#33955)

* Block Editor: Try to absorb parent block toolbar controls * Try a new block controls group - parent * Expose conditionally general duotone and align block controls * Use __experimentalExposeControlsToChildren in block supports
WordPress · Aug 24, 2021 · 1971a3c · 1971a3c
1 parent 2b437fe
commit 1971a3c
Show file tree

Hide file tree

Showing 12 changed files with 110 additions and 43 deletions.
diff --git a/packages/block-editor/src/components/block-controls/fill.js b/packages/block-editor/src/components/block-controls/fill.js
@@ -15,18 +15,18 @@ import {
 /**
  * Internal dependencies
  */
-import useDisplayBlockControls from '../use-display-block-controls';
-import groups from './groups';
+import useBlockControlsFill from './hook';
 
 export default function BlockControlsFill( {
 	group = 'default',
 	controls,
 	children,
+	__experimentalExposeToChildren = false,
 } ) {
-	if ( ! useDisplayBlockControls() ) {
+	const Fill = useBlockControlsFill( group, __experimentalExposeToChildren );
+	if ( ! Fill ) {
 		return null;
 	}
-	const Fill = groups[ group ].Fill;
 
 	return (
 		<StyleProvider document={ document }>

diff --git a/packages/block-editor/src/components/block-controls/groups.js b/packages/block-editor/src/components/block-controls/groups.js
@@ -7,12 +7,14 @@ const BlockControlsDefault = createSlotFill( 'BlockControls' );
 const BlockControlsBlock = createSlotFill( 'BlockControlsBlock' );
 const BlockControlsInline = createSlotFill( 'BlockFormatControls' );
 const BlockControlsOther = createSlotFill( 'BlockControlsOther' );
+const BlockControlsParent = createSlotFill( 'BlockControlsParent' );
 
 const groups = {
 	default: BlockControlsDefault,
 	block: BlockControlsBlock,
 	inline: BlockControlsInline,
 	other: BlockControlsOther,
+	parent: BlockControlsParent,
 };
 
 export default groups;
diff --git a/packages/block-editor/src/components/block-controls/hook.js b/packages/block-editor/src/components/block-controls/hook.js
@@ -0,0 +1,44 @@
+/**
+ * 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, exposeToChildren ) {
+	const isDisplayed = useDisplayBlockControls();
+	const { clientId } = useBlockEditContext();
+	const isParentDisplayed = useSelect(
+		( select ) => {
+			const { getBlockName, hasSelectedInnerBlock } = select(
+				blockEditorStore
+			);
+			const { hasBlockSupport } = select( blocksStore );
+			return (
+				exposeToChildren &&
+				hasBlockSupport(
+					getBlockName( clientId ),
+					'__experimentalExposeControlsToChildren',
+					false
+				) &&
+				hasSelectedInnerBlock( clientId )
+			);
+		},
+		[ exposeToChildren, clientId ]
+	);
+
+	if ( isDisplayed ) {
+		return groups[ group ]?.Fill;
+	}
+	if ( isParentDisplayed ) {
+		return groups.parent.Fill;
+	}
+	return null;
+}
diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js
@@ -123,6 +123,10 @@ export default function BlockToolbar( { hideDragHandle } ) {
 			</div>
 			{ shouldShowVisualToolbar && (
 				<>
+					<BlockControls.Slot
+						group="parent"
+						className="block-editor-block-toolbar__slot"
+					/>
 					<BlockControls.Slot
 						group="block"
 						className="block-editor-block-toolbar__slot"

diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/packages/block-editor/src/components/inner-blocks/index.js
@@ -9,7 +9,11 @@ import classnames from 'classnames';
 import { useViewportMatch, useMergeRefs } from '@wordpress/compose';
 import { forwardRef } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
-import { getBlockType, withBlockContentContext } from '@wordpress/blocks';
+import {
+	getBlockType,
+	store as blocksStore,
+	withBlockContentContext,
+} from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -137,10 +141,10 @@ const ForwardedInnerBlocks = forwardRef( ( props, ref ) => {
 export function useInnerBlocksProps( props = {}, options = {} ) {
 	const { clientId } = useBlockEditContext();
 	const isSmallScreen = useViewportMatch( 'medium', '<' );
-	const hasOverlay = useSelect(
+	const { __experimentalCaptureToolbars, hasOverlay } = useSelect(
 		( select ) => {
 			if ( ! clientId ) {
-				return;
+				return {};
 			}
 
 			const {
@@ -149,13 +153,22 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 				hasSelectedInnerBlock,
 				isNavigationMode,
 			} = select( blockEditorStore );
+			const blockName = getBlockName( clientId );
 			const enableClickThrough = isNavigationMode() || isSmallScreen;
-			return (
-				getBlockName( clientId ) !== 'core/template' &&
-				! isBlockSelected( clientId ) &&
-				! hasSelectedInnerBlock( clientId, true ) &&
-				enableClickThrough
-			);
+			return {
+				__experimentalCaptureToolbars: select(
+					blocksStore
+				).hasBlockSupport(
+					blockName,
+					'__experimentalExposeControlsToChildren',
+					false
+				),
+				hasOverlay:
+					blockName !== 'core/template' &&
+					! isBlockSelected( clientId ) &&
+					! hasSelectedInnerBlock( clientId, true ) &&
+					enableClickThrough,
+			};
 		},
 		[ clientId, isSmallScreen ]
 	);
@@ -167,11 +180,14 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 		} ),
 	] );
 
+	const innerBlocksProps = {
+		__experimentalCaptureToolbars,
+		...options,
+	};
 	const InnerBlocks =
-		options.value && options.onChange
+		innerBlocksProps.value && innerBlocksProps.onChange
 			? ControlledInnerBlocks
 			: UncontrolledInnerBlocks;
-
 	return {
 		...props,
 		ref,
@@ -183,7 +199,7 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 			}
 		),
 		children: clientId ? (
-			<InnerBlocks { ...options } clientId={ clientId } />
+			<InnerBlocks { ...innerBlocksProps } clientId={ clientId } />
 		) : (
 			<BlockListItems { ...options } />
 		),

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
@@ -11,11 +11,10 @@ import { store as blockEditorStore } from '../../store';
 
 export default function useDisplayBlockControls() {
 	const { isSelected, clientId, name } = useBlockEditContext();
-	const isFirstAndSameTypeMultiSelected = useSelect(
+	return useSelect(
 		( select ) => {
-			// Don't bother checking, see OR statement below.
 			if ( isSelected ) {
-				return;
+				return true;
 			}
 
 			const {
@@ -24,16 +23,14 @@ export default function useDisplayBlockControls() {
 				getMultiSelectedBlockClientIds,
 			} = select( blockEditorStore );
 
-			if ( ! isFirstMultiSelectedBlock( clientId ) ) {
-				return false;
+			if ( isFirstMultiSelectedBlock( clientId ) ) {
+				return getMultiSelectedBlockClientIds().every(
+					( id ) => getBlockName( id ) === name
+				);
 			}
 
-			return getMultiSelectedBlockClientIds().every(
-				( id ) => getBlockName( id ) === name
-			);
+			return false;
 		},
 		[ clientId, isSelected, name ]
 	);
-
-	return isSelected || isFirstAndSameTypeMultiSelected;
 }
diff --git a/packages/block-editor/src/hooks/align.js b/packages/block-editor/src/hooks/align.js
@@ -140,18 +140,20 @@ export const withToolbarControls = createHigherOrderComponent(
 			props.setAttributes( { align: nextAlign } );
 		};
 
-		return [
-			validAlignments.length > 0 && props.isSelected && (
-				<BlockControls key="align-controls" group="block">
-					<BlockAlignmentControl
-						value={ props.attributes.align }
-						onChange={ updateAlignment }
-						controls={ validAlignments }
-					/>
-				</BlockControls>
-			),
-			<BlockEdit key="edit" { ...props } />,
-		];
+		return (
+			<>
+				{ validAlignments.length > 0 && (
+					<BlockControls group="block" __experimentalExposeToChildren>
+						<BlockAlignmentControl
+							value={ props.attributes.align }
+							onChange={ updateAlignment }
+							controls={ validAlignments }
+						/>
+					</BlockControls>
+				) }
+				<BlockEdit { ...props } />
+			</>
+		);
 	},
 	'withToolbarControls'
 );

diff --git a/packages/block-editor/src/hooks/duotone.js b/packages/block-editor/src/hooks/duotone.js
@@ -140,7 +140,7 @@ function DuotonePanel( { attributes, setAttributes } ) {
 	}
 
 	return (
-		<BlockControls group="block">
+		<BlockControls group="block" __experimentalExposeToChildren>
 			<DuotoneControl
 				duotonePalette={ duotonePalette }
 				colorPalette={ colorPalette }

diff --git a/packages/block-library/src/buttons/block.json b/packages/block-library/src/buttons/block.json
@@ -17,7 +17,8 @@
 	},
 	"supports": {
 		"anchor": true,
-		"align": [ "wide", "full" ]
+		"align": [ "wide", "full" ],
+		"__experimentalExposeControlsToChildren": true
 	},
 	"editorStyle": "wp-block-buttons-editor",
 	"style": "wp-block-buttons"

diff --git a/packages/block-library/src/buttons/edit.js b/packages/block-library/src/buttons/edit.js
@@ -70,7 +70,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/block.json b/packages/block-library/src/social-links/block.json
@@ -40,7 +40,8 @@
 	},
 	"supports": {
 		"align": [ "left", "center", "right" ],
-		"anchor": true
+		"anchor": true,
+		"__experimentalExposeControlsToChildren": true
 	},
 	"styles": [
 		{ "name": "default", "label": "Default", "isDefault": true },

diff --git a/packages/block-library/src/social-links/edit.js b/packages/block-library/src/social-links/edit.js
@@ -111,7 +111,7 @@ export function SocialLinksEdit( props ) {
 
 	return (
 		<Fragment>
-			<BlockControls group="block">
+			<BlockControls group="block" __experimentalExposeToChildren>
 				<JustifyContentControl
 					allowedControls={ [
 						'left',