Expose conditionally general duotone and align block controls

WordPress · Aug 12, 2021 · d8c76a7 · d8c76a7
1 parent 8c6f0ea
commit d8c76a7
Show file tree

Hide file tree

Showing 9 changed files with 63 additions and 38 deletions.
diff --git a/packages/block-editor/src/components/block-controls/hook.js b/packages/block-editor/src/components/block-controls/hook.js
@@ -1,6 +1,7 @@
 /**
  * WordPress dependencies
  */
+import { store as blocksStore } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
 
 /**
@@ -16,9 +17,18 @@ export default function useBlockControlsFill( group, exposeToChildren ) {
 	const { clientId } = useBlockEditContext();
 	const isParentDisplayed = useSelect(
 		( select ) => {
+			const { getBlockName, hasSelectedInnerBlock } = select(
+				blockEditorStore
+			);
+			const { hasBlockSupport } = select( blocksStore );
 			return (
 				exposeToChildren &&
-				select( blockEditorStore ).hasSelectedInnerBlock( clientId )
+				hasBlockSupport(
+					getBlockName( clientId ),
+					'__experimentalCaptureToolbars',
+					false
+				) &&
+				hasSelectedInnerBlock( clientId )
 			);
 		},
 		[ exposeToChildren, clientId ]

diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js
@@ -108,15 +108,7 @@ export default function BlockToolbar( { hideDragHandle } ) {
 	return (
 		<div className={ classes }>
 			{ ! isMultiToolbar && ! displayHeaderToolbar && (
-				<>
-					<BlockParentSelector clientIds={ blockClientIds } />
-					{ shouldShowVisualToolbar && (
-						<BlockControls.Slot
-							group="parent"
-							className="block-editor-block-toolbar__slot"
-						/>
-					) }
-				</>
+				<BlockParentSelector clientIds={ blockClientIds } />
 			) }
 			<div ref={ nodeRef } { ...showMoversGestures }>
 				{ ( shouldShowVisualToolbar || isMultiToolbar ) && (
@@ -131,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,21 +141,30 @@ 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 ) => {
 			const {
 				getBlockName,
 				isBlockSelected,
 				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,
+					'__experimentalCaptureToolbars',
+					false
+				),
+				hasOverlay:
+					blockName !== 'core/template' &&
+					! isBlockSelected( clientId ) &&
+					! hasSelectedInnerBlock( clientId, true ) &&
+					enableClickThrough,
+			};
 		},
 		[ clientId, isSmallScreen ]
 	);
@@ -162,11 +175,15 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 			rootClientId: clientId,
 		} ),
 	] );
+	const innerBlocksProps = {
+		__experimentalCaptureToolbars,
+		...options,
+	};
+
 	const InnerBlocks =
-		options.value && options.onChange
+		innerBlocksProps.value && innerBlocksProps.onChange
 			? ControlledInnerBlocks
 			: UncontrolledInnerBlocks;
-
 	return {
 		...props,
 		ref,
@@ -177,7 +194,7 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 				'has-overlay': hasOverlay,
 			}
 		),
-		children: <InnerBlocks { ...options } clientId={ clientId } />,
+		children: <InnerBlocks { ...innerBlocksProps } clientId={ clientId } />,
 	};
 }
 

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" ],
+		"__experimentalCaptureToolbars": 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
@@ -59,7 +59,6 @@ function ButtonsEdit( {
 			],
 		],
 		orientation,
-		__experimentalCaptureToolbars: true,
 		__experimentalLayout: LAYOUT,
 		templateInsertUpdatesSelection: true,
 	} );

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,
+		"__experimentalCaptureToolbars": 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
@@ -100,7 +100,6 @@ export function SocialLinksEdit( props ) {
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		allowedBlocks: ALLOWED_BLOCKS,
 		orientation: 'horizontal',
-		__experimentalCaptureToolbars: true,
 		placeholder: isSelected ? SelectedSocialPlaceholder : SocialPlaceholder,
 		templateLock: false,
 		__experimentalAppenderTagName: 'li',