Experimental: allow parent Block to consume child Block's toolbar

packages/block-editor/src/components/block-list/block-child-toolbar.js

@@ -0,0 +1,19 @@
+/**
+ * WordPress dependencies
+ */
+import { createSlotFill } from '@wordpress/components';
+
+const { Fill, Slot } = createSlotFill( 'ChildToolbar' );
+
+export const ChildToolbar = ( { children } ) => (
+	<Fill>
+		{ children }
+	</Fill>
+);
+
+// `bubblesVirtually` is required in order to avoid
+// events triggered on the child toolbar from bubbling
+// up to the parent Block.
+export const ChildToolbarSlot = () => (
+	<Slot bubblesVirtually={ true } />
+);

packages/block-editor/src/components/block-list/block.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { first, last } from 'lodash';
+import { first, last, findIndex } from 'lodash';
 import { animated } from 'react-spring/web.cjs';
 
 /**
@@ -51,7 +51,7 @@ import InserterWithShortcuts from '../inserter-with-shortcuts';
 import Inserter from '../inserter';
 import { isInsideRootBlock } from '../../utils/dom';
 import useMovingAnimation from './moving-animation';
-
+import { ChildToolbar, ChildToolbarSlot } from './block-child-toolbar';
 /**
  * Prevents default dragging behavior within a block to allow for multi-
  * selection to take effect unhampered.
@@ -77,7 +77,9 @@ function BlockListBlock( {
 	isTypingWithinBlock,
 	isCaretWithinFormattedText,
 	isEmptyDefaultBlock,
-	isParentOfSelectedBlock,
+	isAncestorOfSelectedBlock,
+	isCapturingDescendantToolbars,
+	hasAncestorCapturingToolbars,
 	isSelectionEnabled,
 	className,
 	name,
@@ -288,7 +290,7 @@ function BlockListBlock( {
 	 * (via `setFocus`), typically if there is no focusable input in the block.
 	 */
 	const onFocus = () => {
-		if ( ! isSelected && ! isParentOfSelectedBlock && ! isPartOfMultiSelection ) {
+		if ( ! isSelected && ! isAncestorOfSelectedBlock && ! isPartOfMultiSelection ) {
 			onSelect();
 		}
 	};
@@ -463,9 +465,10 @@ function BlockListBlock( {
 			'is-reusable': isReusableBlock( blockType ),
 			'is-dragging': isDragging,
 			'is-typing': isTypingWithinBlock,
-			'is-focused': isFocusMode && ( isSelected || isParentOfSelectedBlock ),
+			'is-focused': isFocusMode && ( isSelected || isAncestorOfSelectedBlock ),
 			'is-focus-mode': isFocusMode,
-			'has-child-selected': isParentOfSelectedBlock,
+			'has-child-selected': isAncestorOfSelectedBlock,
+			'has-toolbar-captured': hasAncestorCapturingToolbars,
 		},
 		className
 	);
@@ -508,6 +511,22 @@ function BlockListBlock( {
 		blockEdit = <div style={ { display: 'none' } }>{ blockEdit }</div>;
 	}
 
+	/**
+	 * Renders an individual `BlockContextualToolbar` component.
+	 * This needs to be a function which generates the component
+	 * on demand as we can only have a single toolbar for each render.
+	 * This is because of the `isForcingContextualToolbar` logic which
+	 * relies on a single toolbar being rendered to update the boolean
+	 * value of the ref used to track the "force" state.
+	 */
+	const renderBlockContextualToolbar = () => (
+		<BlockContextualToolbar
+			// If the toolbar is being shown because of being forced
+			// it should focus the toolbar right after the mount.
+			focusOnMount={ isForcingContextualToolbar.current }
+		/>
+	);
+
 	return (
 		<IgnoreNestedEvents
 			id={ blockElementId }
@@ -564,13 +583,25 @@ function BlockListBlock( {
 						ref={ breadcrumb }
 					/>
 				) }
-				{ ( shouldShowContextualToolbar || isForcingContextualToolbar.current ) && (
-					<BlockContextualToolbar
-						// If the toolbar is being shown because of being forced
-						// it should focus the toolbar right after the mount.
-						focusOnMount={ isForcingContextualToolbar.current }
-					/>
+
+				{ ( isCapturingDescendantToolbars ) && (
+					// A slot made available on all ancestors of the selected Block
+					// to allow child Blocks to render their toolbars into the DOM
+					// of the appropriate parent.
+					<ChildToolbarSlot />
 				) }
+
+				{ ( ! ( hasAncestorCapturingToolbars ) ) && ( shouldShowContextualToolbar || isForcingContextualToolbar.current ) && renderBlockContextualToolbar() }
+
+				{ ( hasAncestorCapturingToolbars ) && ( shouldShowContextualToolbar || isForcingContextualToolbar.current ) && (
+					// If the parent Block is set to consume toolbars of the child Blocks
+					// then render the child Block's toolbar into the Slot provided
+					// by the parent.
+					<ChildToolbar>
+						{ renderBlockContextualToolbar() }
+					</ChildToolbar>
+				) }
+
 				{
 					! isNavigationMode &&
 					! shouldShowContextualToolbar &&
@@ -654,14 +685,39 @@ const applyWithSelect = withSelect(
 			getBlockOrder,
 			__unstableGetBlockWithoutInnerBlocks,
 			isNavigationMode,
+			getBlockListSettings,
+			__experimentalGetBlockListSettingsForBlocks,
+			getBlockParents,
 		} = select( 'core/block-editor' );
+
 		const block = __unstableGetBlockWithoutInnerBlocks( clientId );
+
 		const isSelected = isBlockSelected( clientId );
 		const { hasFixedToolbar, focusMode, isRTL } = getSettings();
 		const templateLock = getTemplateLock( rootClientId );
-		const isParentOfSelectedBlock = hasSelectedInnerBlock( clientId, true );
+		const checkDeep = true;
+
+		// "ancestor" is the more appropriate label due to "deep" check
+		const isAncestorOfSelectedBlock = hasSelectedInnerBlock( clientId, checkDeep );
 		const index = getBlockIndex( clientId, rootClientId );
 		const blockOrder = getBlockOrder( rootClientId );
+		const blockParentsClientIds = getBlockParents( clientId );
+		const currentBlockListSettings = getBlockListSettings( clientId );
+
+		// Get Block List Settings for all ancestors of the current Block clientId
+		const ancestorBlockListSettings = __experimentalGetBlockListSettingsForBlocks( blockParentsClientIds );
+
+		// Find the index of the first Block with the `captureDescendantsToolbars` prop defined
+		// This will be the top most ancestor because getBlockParents() returns tree from top -> bottom
+		const topmostAncestorWithCaptureDescendantsToolbarsIndex = findIndex( ancestorBlockListSettings, [ '__experimentalCaptureToolbars', true ] );
+
+		// Boolean to indicate whether current Block has a parent with `captureDescendantsToolbars` set
+		const hasAncestorCapturingToolbars = topmostAncestorWithCaptureDescendantsToolbarsIndex !== -1 ? true : false;
+
+		// Is the *current* Block the one capturing all its descendant toolbars?
+		// If there is no `topmostAncestorWithCaptureDescendantsToolbarsIndex` then
+		// we're at the top of the tree
+		const isCapturingDescendantToolbars = isAncestorOfSelectedBlock && ( currentBlockListSettings && currentBlockListSettings.__experimentalCaptureToolbars ) && ! hasAncestorCapturingToolbars;
 
 		// The fallback to `{}` is a temporary fix.
 		// This function should never be called when a block is not present in the state.
@@ -676,7 +732,7 @@ const applyWithSelect = withSelect(
 			// We only care about this prop when the block is selected
 			// Thus to avoid unnecessary rerenders we avoid updating the prop if the block is not selected.
 			isTypingWithinBlock:
-				( isSelected || isParentOfSelectedBlock ) && isTyping(),
+				( isSelected || isAncestorOfSelectedBlock ) && isTyping(),
 			isCaretWithinFormattedText: isCaretWithinFormattedText(),
 			mode: getBlockMode( clientId ),
 			isSelectionEnabled: isSelectionEnabled(),
@@ -699,7 +755,9 @@ const applyWithSelect = withSelect(
 			attributes,
 			isValid,
 			isSelected,
-			isParentOfSelectedBlock,
+			isAncestorOfSelectedBlock,
+			isCapturingDescendantToolbars,
+			hasAncestorCapturingToolbars,
 		};
 	}
 );

packages/block-editor/src/components/block-list/style.scss

@@ -200,6 +200,11 @@
 			background: transparent;
 		}
 	}
+
+	// Toolbar is captured
+	&.has-toolbar-captured > .block-editor-block-list__block-edit::before {
+		left: 0; // place "selected" indicator closer to block due to no toolbar
+	}
 }
 
 

packages/block-editor/src/components/inner-blocks/README.md

@@ -121,7 +121,7 @@ A 'render prop' function that can be used to customize the block's appender.
 
 #### Notes
 * For convenience two predefined appender components are exposed on `InnerBlocks` which can be consumed within the render function:
-	- `<InnerBlocks.ButtonBlockAppender />` -  display a `+` (plus) icon button that, when clicked, displays the block picker menu. No default Block is inserted. 
+	- `<InnerBlocks.ButtonBlockAppender />` -  display a `+` (plus) icon button that, when clicked, displays the block picker menu. No default Block is inserted.
 	- `<InnerBlocks.DefaultBlockAppender />` - display the default block appender as set by `wp.blocks.setDefaultBlockName`. Typically this is the `paragraph` block.
 * Consumers are also free to pass any valid render function. This provides the full flexibility to define a bespoke block appender.
 
@@ -143,6 +143,14 @@ A 'render prop' function that can be used to customize the block's appender.
 />
 ```
 
+### `__experimentalCaptureToolbars`
+
+* **Type:** `Boolean`
+* **Default:** `false`
+
+Determines whether the toolbars of _all_ child Blocks (applied deeply, recursive) should have their toolbars "captured" and shown on the Block which is consuming `InnerBlocks`.
+
+For example, a button block, deeply nested in several levels of block `X` that utilises this property will see the button block's toolbar displayed on block `X`'s toolbar area.
 
 
 

packages/block-editor/src/components/inner-blocks/index.js

@@ -87,11 +87,13 @@ class InnerBlocks extends Component {
 			updateNestedSettings,
 			templateLock,
 			parentLock,
+			__experimentalCaptureToolbars,
 		} = this.props;
 
 		const newSettings = {
 			allowedBlocks,
 			templateLock: templateLock === undefined ? parentLock : templateLock,
+			__experimentalCaptureToolbars: __experimentalCaptureToolbars || false,
 		};
 
 		if ( ! isShallowEqual( blockListSettings, newSettings ) ) {
@@ -106,11 +108,14 @@ class InnerBlocks extends Component {
 			hasOverlay,
 			renderAppender,
 			__experimentalMoverDirection: moverDirection,
+			__experimentalCaptureToolbars: captureToolbars,
+
 		} = this.props;
 		const { templateInProcess } = this.state;
 
 		const classes = classnames( 'block-editor-inner-blocks', {
 			'has-overlay': enableClickThrough && hasOverlay,
+			'is-capturing-toolbar': captureToolbars,
 		} );
 
 		return (

packages/block-editor/src/store/selectors.js

@@ -1421,6 +1421,23 @@ export function isLastBlockChangePersistent( state ) {
 	return state.blocks.isPersistentChange;
 }
 
+/**
+ * Returns the Block List settings for an array of blocks, if any exist.
+ *
+ * @param {Object}  state    Editor state.
+ * @param {Array} clientIds Block client IDs.
+ *
+ * @return {Array} Block List Settings for each of the found blocks
+ */
+export const __experimentalGetBlockListSettingsForBlocks = createSelector(
+	( state, clientIds ) => {
+		return filter( state.blockListSettings, ( value, key ) => clientIds.includes( key ) );
+	},
+	( state ) => [
+		state.blockListSettings,
+	],
+);
+
 /**
  * Returns the parsed block saved as shared block with the given ID.
  *

packages/block-editor/src/store/test/selectors.js

@@ -58,6 +58,7 @@ const {
 	getTemplate,
 	getTemplateLock,
 	getBlockListSettings,
+	__experimentalGetBlockListSettingsForBlocks,
 	__experimentalGetLastBlockAttributeChanges,
 	INSERTER_UTILITY_HIGH,
 	INSERTER_UTILITY_MEDIUM,
@@ -2368,6 +2369,60 @@ describe( 'selectors', () => {
 		} );
 	} );
 
+	describe( '__experimentalGetBlockListSettingsForBlocks', () => {
+		it( 'should return the settings for a set of blocks', () => {
+			const state = {
+				blockListSettings: {
+					'test-1-dummy-clientId': {
+						setting1: false,
+					},
+					'test-2-dummy-clientId': {
+						setting1: true,
+						setting2: false,
+					},
+					'test-3-dummy-clientId': {
+						setting1: true,
+						setting2: false,
+					},
+					'test-4-dummy-clientId': {
+						setting1: true,
+					},
+				},
+			};
+
+			const targetBlocksClientIds = [ 'test-1-dummy-clientId', 'test-3-dummy-clientId' ];
+
+			expect( __experimentalGetBlockListSettingsForBlocks( state, targetBlocksClientIds ) ).toEqual( [
+				{
+					setting1: false,
+				},
+				{
+					setting1: true,
+					setting2: false,
+				},
+			] );
+		} );
+
+		it( 'should return empty array if settings for the blocks don’t exist', () => {
+			// Does not include target Block clientIds
+			const state = {
+				blockListSettings: {
+					'test-2-dummy-clientId': {
+						setting1: true,
+						setting2: false,
+					},
+					'test-4-dummy-clientId': {
+						setting1: true,
+					},
+				},
+			};
+
+			const targetBlocksClientIds = [ 'test-1-dummy-clientId', 'test-3-dummy-clientId' ];
+
+			expect( __experimentalGetBlockListSettingsForBlocks( state, targetBlocksClientIds ) ).toEqual( [] );
+		} );
+	} );
+
 	describe( '__experimentalGetLastBlockAttributeChanges', () => {
 		it( 'returns the last block attributes change', () => {
 			const state = {

packages/data/src/registry.js

@@ -131,10 +131,10 @@ export function createRegistry( storeConfigs = {}, parent = null ) {
 	);
 
 	/**
- 	 * Given the name of a registered store, returns an object containing the store's
- 	 * selectors pre-bound to state so that you only need to supply additional arguments,
- 	 * and modified so that they return promises that resolve to their eventual values,
- 	 * after any resolvers have ran.
+	 * Given the name of a registered store, returns an object containing the store's
+	 * selectors pre-bound to state so that you only need to supply additional arguments,
+	 * and modified so that they return promises that resolve to their eventual values,
+	 * after any resolvers have ran.
 	 *
 	 * @param {string} reducerKey Part of the state shape to register the
 	 *                            selectors for.