Revert Clickthrough

assets/stylesheets/_z-index.scss

@@ -18,6 +18,7 @@ $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,
@@ -49,21 +50,16 @@ $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.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,
+	".block-editor-inner-blocks__small-screen-overlay:after": 120,
 
 	// Show sidebar above wp-admin navigation bar for mobile viewports:
 	// #wpadminbar { z-index: 99999 }

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

@@ -24,10 +24,7 @@ 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

@@ -23,7 +23,6 @@ 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';
@@ -215,10 +214,9 @@ class BlockList extends Component {
 						selectedBlockClientId === clientId;
 
 					return (
-						<BlockAsyncModeProvider
+						<AsyncModeProvider
 							key={ 'block-' + clientId }
-							clientId={ clientId }
-							isBlockInSelection={ isBlockInSelection }
+							value={ ! isBlockInSelection }
 						>
 							<BlockListBlock
 								rootClientId={ rootClientId }
@@ -233,7 +231,7 @@ class BlockList extends Component {
 								animateOnChange={ blockClientIds }
 								enableAnimation={ enableAnimation }
 							/>
-						</BlockAsyncModeProvider>
+						</AsyncModeProvider>
 					);
 				} ) }
 

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

@@ -332,20 +332,6 @@
 		}
 	}
 
-	// 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,6 +7,7 @@ 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';
@@ -107,7 +108,8 @@ class InnerBlocks extends Component {
 	render() {
 		const {
 			clientId,
-			hasOverlay,
+			isSmallScreen,
+			isSelectedBlockInRoot,
 			renderAppender,
 			template,
 			__experimentalTemplateOptions: templateOptions,
@@ -119,7 +121,7 @@ class InnerBlocks extends Component {
 		const isPlaceholder = template === null && !! templateOptions;
 
 		const classes = classnames( 'editor-inner-blocks block-editor-inner-blocks', {
-			'has-overlay': hasOverlay && ! isPlaceholder,
+			'has-overlay': isSmallScreen && ! isSelectedBlockInRoot && ! isPlaceholder,
 		} );
 
 		return (
@@ -143,6 +145,7 @@ class InnerBlocks extends Component {
 
 InnerBlocks = compose( [
 	withBlockEditContext( ( context ) => pick( context, [ 'clientId' ] ) ),
+	withViewportMatch( { isSmallScreen: '< medium' } ),
 	withSelect( ( select, ownProps ) => {
 		const {
 			isBlockSelected,
@@ -153,13 +156,12 @@ InnerBlocks = compose( [
 			getTemplateLock,
 		} = select( 'core/block-editor' );
 		const { clientId } = ownProps;
-		const block = getBlock( clientId );
 		const rootClientId = getBlockRootClientId( clientId );
 
 		return {
-			block,
+			isSelectedBlockInRoot: isBlockSelected( clientId ) || hasSelectedInnerBlock( clientId ),
+			block: getBlock( clientId ),
 			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,15 +1,11 @@
-// Add clickable overlay to blocks with nesting.
-// This makes it easy to select all layers of the block.
-.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");
-	}
+.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");
 }
 
 // On fullwide blocks, don't go beyond the canvas.

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

@@ -11,10 +11,6 @@
 	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

@@ -174,12 +174,17 @@ div.block-core-columns.is-vertically-aligned-bottom {
 	left: -$block-left-border-width;
 }
 
-/**
- * Make single Column overlay not extend past boundaries of parent
- */
-.block-core-columns > .block-editor-inner-blocks.has-overlay::after {
-	left: 0;
-	right: 0;
+// 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;
+	}
 }
 
 /**

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

@@ -45,8 +45,10 @@ describe( 'Reusable Blocks', () => {
 			'//*[contains(@class, "components-snackbar")]/*[text()="Block created."]'
 		);
 
-		// Select all of the text in the title field.
-		await pressKeyWithModifier( 'primary', 'a' );
+		// 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 } );
 
 		// Give the reusable block a title
 		await page.keyboard.type( 'Greeting block' );
@@ -221,8 +223,10 @@ describe( 'Reusable Blocks', () => {
 			'//*[contains(@class, "components-snackbar")]/*[text()="Block created."]'
 		);
 
-		// Select all of the text in the title field.
-		await pressKeyWithModifier( 'primary', 'a' );
+		// 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 } );
 
 		// Give the reusable block a title
 		await page.keyboard.type( 'Multi-selection reusable block' );