Selecting Parent Blocks: Try clickthrough (#15537)

* Selecting parents: Try clickthrough.

Clickthrough has you select the parent before you can select the child. This is already in place on the mobile breakpoints, this just expands it to desktop as well.

It is a work in progress, right now it is not working as intended: once you have "unlocked" the deepest level, it becomes immediately locked and you have to click through the layers again to unlock it again. The deepest layer should always be unlocked until you deselect all blocks again.

* Render overlay on top of inner block only when none of the nested blocks is selected

* Fix overlay, fix breadcrumb, polish.

* Remove click-overlay.

* Fix the selection of inner blocks for reusable blocks template

* Disable async mode for parent blocks when nested block selected

* Refactor BlockListBlock to use AsyncModeProvider

* Make the reusable blocks save button clickable. i

At least this means you can edit and save reusable blocks.

* Fix so reusable blocks with nesting are editable.

* Fix movers.

The z-index was too low. It had to be higher to accommodate the other z-index changes.

* Bring the behavior closer to what we have as of today

assets/stylesheets/_z-index.scss

@@ -9,7 +9,6 @@ $z-layers: (
 	".block-library-classic__toolbar": 10,
 	".block-editor-block-list__layout .reusable-block-indicator": 1,
 	".block-editor-block-list__breadcrumb": 2,
-	".editor-inner-blocks .block-editor-block-list__breadcrumb": 22,
 	".components-form-toggle__input": 1,
 	".components-panel__header.edit-post-sidebar__panel-tabs": -1,
 	".edit-post-sidebar .components-panel": -2,
@@ -19,7 +18,6 @@ $z-layers: (
 	".components-modal__header": 10,
 	".edit-post-meta-boxes-area.is-loading::before": 1,
 	".edit-post-meta-boxes-area .spinner": 5,
-	".block-editor-block-contextual-toolbar": 21,
 	".components-popover__close": 5,
 	".block-editor-block-list__insertion-point": 6,
 	".block-editor-inserter-with-shortcuts": 5,
@@ -51,16 +49,21 @@ $z-layers: (
 	".components-drop-zone": 100,
 	".components-drop-zone__content": 110,
 
-	// The block mover, particularly in nested contexts,
-	// should overlap most block content.
-	".block-editor-block-list__block.is-{selected,hovered} .block-editor-block-mover": 80,
-
 	// The block mover for floats should overlap the controls of adjacent blocks.
 	".block-editor-block-list__block {core/image aligned left or right}": 81,
 
 	// Small screen inner blocks overlay must be displayed above drop zone,
 	// settings menu, and movers.
-	".block-editor-inner-blocks__small-screen-overlay:after": 120,
+	".block-editor-inner-blocks.has-overlay::after": 120,
+
+	// The toolbar, when contextual, should be above any adjacent nested block click overlays.
+	".block-editor-block-list__layout .reusable-block-edit-panel": 121,
+	".block-editor-block-contextual-toolbar": 121,
+	".editor-inner-blocks .block-editor-block-list__breadcrumb": 122,
+
+	// The block mover, particularly in nested contexts,
+	// should overlap most block content.
+	".block-editor-block-list__block.is-{selected,hovered} .block-editor-block-mover": 121,
 
 	// Show sidebar above wp-admin navigation bar for mobile viewports:
 	// #wpadminbar { z-index: 99999 }

packages/block-editor/src/components/block-list/block-async-mode-provider.js

@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalAsyncModeProvider as AsyncModeProvider,
+	useSelect,
+} from '@wordpress/data';
+
+const BlockAsyncModeProvider = ( { children, clientId, isBlockInSelection } ) => {
+	const isParentOfSelectedBlock = useSelect( ( select ) => {
+		return select( 'core/block-editor' ).hasSelectedInnerBlock( clientId, true );
+	} );
+
+	const isSyncModeForced = isBlockInSelection || isParentOfSelectedBlock;
+
+	return (
+		<AsyncModeProvider value={ ! isSyncModeForced }>
+			{ children }
+		</AsyncModeProvider>
+	);
+};
+
+export default BlockAsyncModeProvider;

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

@@ -23,7 +23,10 @@ import {
 } from '@wordpress/blocks';
 import { KeyboardShortcuts, withFilters } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
-import { withDispatch, withSelect } from '@wordpress/data';
+import {
+	withDispatch,
+	withSelect,
+} from '@wordpress/data';
 import { withViewportMatch } from '@wordpress/viewport';
 import { compose, pure } from '@wordpress/compose';
 

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

@@ -24,6 +24,7 @@ import { compose } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
+import BlockAsyncModeProvider from './block-async-mode-provider';
 import BlockListBlock from './block';
 import BlockListAppender from '../block-list-appender';
 import { getBlockDOMNode } from '../../utils/dom';
@@ -207,9 +208,10 @@ class BlockList extends Component {
 						selectedBlockClientId === clientId;
 
 					return (
-						<AsyncModeProvider
+						<BlockAsyncModeProvider
 							key={ 'block-' + clientId }
-							value={ ! isBlockInSelection }
+							clientId={ clientId }
+							isBlockInSelection={ isBlockInSelection }
 						>
 							<BlockListBlock
 								clientId={ clientId }
@@ -218,7 +220,7 @@ class BlockList extends Component {
 								rootClientId={ rootClientId }
 								isDraggable={ isDraggable }
 							/>
-						</AsyncModeProvider>
+						</BlockAsyncModeProvider>
 					);
 				} ) }
 

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

@@ -303,6 +303,20 @@
 		}
 	}
 
+	// Reusable Blocks clickthrough overlays
+	&.is-reusable > .block-editor-block-list__block-edit .block-editor-inner-blocks.has-overlay {
+		// Remove only the top click overlay.
+		&::after {
+			display: none;
+		}
+
+		// Restore it for subsequent.
+		.block-editor-inner-blocks.has-overlay::after {
+			display: block;
+		}
+	}
+
+
 	// Alignments
 	&[data-align="left"],
 	&[data-align="right"] {

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

@@ -7,7 +7,6 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { withViewportMatch } from '@wordpress/viewport';
 import { Component } from '@wordpress/element';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { synchronizeBlocksWithTemplate, withBlockContentContext } from '@wordpress/blocks';
@@ -106,14 +105,13 @@ class InnerBlocks extends Component {
 	render() {
 		const {
 			clientId,
-			isSmallScreen,
-			isSelectedBlockInRoot,
+			hasOverlay,
 			renderAppender,
 		} = this.props;
 		const { templateInProcess } = this.state;
 
 		const classes = classnames( 'editor-inner-blocks block-editor-inner-blocks', {
-			'has-overlay': isSmallScreen && ! isSelectedBlockInRoot,
+			'has-overlay': hasOverlay,
 		} );
 
 		return (
@@ -131,7 +129,6 @@ class InnerBlocks extends Component {
 
 InnerBlocks = compose( [
 	withBlockEditContext( ( context ) => pick( context, [ 'clientId' ] ) ),
-	withViewportMatch( { isSmallScreen: '< medium' } ),
 	withSelect( ( select, ownProps ) => {
 		const {
 			isBlockSelected,
@@ -142,12 +139,13 @@ InnerBlocks = compose( [
 			getTemplateLock,
 		} = select( 'core/block-editor' );
 		const { clientId } = ownProps;
+		const block = getBlock( clientId );
 		const rootClientId = getBlockRootClientId( clientId );
 
 		return {
-			isSelectedBlockInRoot: isBlockSelected( clientId ) || hasSelectedInnerBlock( clientId ),
-			block: getBlock( clientId ),
+			block,
 			blockListSettings: getBlockListSettings( clientId ),
+			hasOverlay: block.name !== 'core/template' && ! isBlockSelected( clientId ) && ! hasSelectedInnerBlock( clientId, true ),
 			parentLock: getTemplateLock( rootClientId ),
 		};
 	} ),

packages/block-editor/src/components/inner-blocks/style.scss

@@ -1,9 +1,11 @@
-.block-editor-inner-blocks.has-overlay::after {
-	content: "";
-	position: absolute;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	left: 0;
-	z-index: z-index(".block-editor-inner-blocks__small-screen-overlay:after");
+.block-editor-inner-blocks.has-overlay {
+	&::after {
+		content: "";
+		position: absolute;
+		top: -$block-padding;
+		right: -$block-padding;
+		bottom: -$block-padding;
+		left: -$block-padding;
+		z-index: z-index(".block-editor-inner-blocks.has-overlay::after");
+	}
 }

packages/block-library/src/block/edit-panel/editor.scss

@@ -11,6 +11,10 @@
 	margin: 0 (-$block-padding);
 	padding: $grid-size $block-padding;
 
+	// Elevate the reusable blocks toolbar above the clickthrough overlay.
+	position: relative;
+	z-index: z-index(".block-editor-block-list__layout .reusable-block-edit-panel");
+
 	// Use opacity to work in various editor styles.
 	border: $border-width dashed $dark-opacity-light-500;
 	border-bottom: none;

packages/block-library/src/columns/editor.scss

@@ -164,17 +164,13 @@ div.block-core-columns.is-vertically-aligned-bottom {
  */
 [data-type="core/column"] > .editor-block-list__block-edit > .editor-block-list__breadcrumb {
 	right: 0;
+	left: auto;
 }
 
-// The empty state of a columns block has the default appenders.
-// Since those appenders are not blocks, the parent, actual block, appears "hovered" when hovering the appenders.
-// Because the column shouldn't be hovered as part of this temporary passthrough, we unset the hover style.
-.wp-block-columns [data-type="core/column"].is-hovered {
-	> .block-editor-block-list__block-edit::before {
-		content: none;
-	}
-
-	.block-editor-block-list__breadcrumb {
-		display: none;
-	}
+/**
+ * Make single Column overlay not extend past boundaries of parent
+ */
+.block-core-columns > .block-editor-inner-blocks.has-overlay::after {
+	left: 0;
+	right: 0;
 }

packages/e2e-tests/specs/reusable-blocks.test.js

@@ -45,10 +45,8 @@ describe( 'Reusable Blocks', () => {
 			'//*[contains(@class, "components-snackbar")]/*[text()="Block created."]'
 		);
 
-		// Select all of the text in the title field by triple-clicking on it. We
-		// triple-click because, on Mac, Mod+A doesn't work. This step can be removed
-		// when https://github.com/WordPress/gutenberg/issues/7972 is fixed
-		await page.click( '.reusable-block-edit-panel__title', { clickCount: 3 } );
+		// Select all of the text in the title field.
+		await pressKeyWithModifier( 'primary', 'a' );
 
 		// Give the reusable block a title
 		await page.keyboard.type( 'Greeting block' );
@@ -223,10 +221,8 @@ describe( 'Reusable Blocks', () => {
 			'//*[contains(@class, "components-snackbar")]/*[text()="Block created."]'
 		);
 
-		// Select all of the text in the title field by triple-clicking on it. We
-		// triple-click because, on Mac, Mod+A doesn't work. This step can be removed
-		// when https://github.com/WordPress/gutenberg/issues/7972 is fixed
-		await page.click( '.reusable-block-edit-panel__title', { clickCount: 3 } );
+		// Select all of the text in the title field.
+		await pressKeyWithModifier( 'primary', 'a' );
 
 		// Give the reusable block a title
 		await page.keyboard.type( 'Multi-selection reusable block' );