Try a new hover and select approach to improve nested block selection

core-blocks/columns/editor.scss

@@ -37,18 +37,3 @@
 		margin-right: $block-side-ui-padding;
 	}
 }
-
-// Hide appender shortcuts in columns
-// @todo This essentially duplicates the mobile styles for the appender component
-// It would be nice to be able to use element queries in that component instead https://github.com/tomhodgins/element-queries-spec
-.wp-block-columns {
-	.editor-inserter-with-shortcuts {
-		display: none;
-	}
-
-	.editor-block-list__empty-block-inserter,
-	.editor-default-block-appender .editor-inserter {
-		left: auto;
-		right: $item-spacing;
-	}
-}

core-blocks/columns/style.scss

@@ -1,9 +1,12 @@
 .wp-block-columns {
-	display: grid;
-	grid-auto-flow: dense;
+
+	.editor-inner-blocks {
+		display: grid;
+		grid-auto-flow: dense;
+	}
 
 	@for $i from 2 through 6 {
-		&.has-#{ $i }-columns {
+		&.has-#{ $i }-columns .editor-inner-blocks {
 			grid-auto-columns: #{ 100% / $i };
 		}
 	}

core-blocks/freeform/editor.scss

@@ -127,7 +127,7 @@
 	}
 
 	// Don't show block type label for classic block
-	&.is-hovered .editor-block-breadcrumb {
+	&.is-hovered .editor-block-list__breadcrumb {
 		display: none;
 	}
 }
@@ -140,7 +140,7 @@ div[data-type="core/freeform"] .editor-block-contextual-toolbar + div {
 
 .freeform-toolbar {
 	width: auto;
-	margin: -$block-padding;
+	margin: #{ -$block-padding } #{ -$parent-block-padding };
 	margin-bottom: $block-padding;
 	position: sticky;
 	z-index: z-index( '.freeform-toolbar' );

edit-post/assets/stylesheets/_animations.scss

@@ -26,7 +26,7 @@
 	animation: slide_in_right 0.1s forwards;
 }
 
-@mixin fade_in {
-	animation: fade-in 0.3s ease-out;
+@mixin fade_in( $speed: 0.2s ) {
+	animation: fade-in $speed ease-out;
 	animation-fill-mode: forwards;
 }

edit-post/assets/stylesheets/_colors.scss

@@ -80,6 +80,7 @@ $blue-medium-300: #66C6E4;
 $blue-medium-200: #BFE7F3;
 $blue-medium-100: #E5F5FA;
 $blue-medium-highlight: #b3e7fe;
+$blue-medium-focus: #007cba;
 
 // Alert colors
 $alert-yellow: #f0b849;

edit-post/assets/stylesheets/_mixins.scss

@@ -101,21 +101,6 @@
 	}
 }
 
-/**
- * Editor Width mixin
- *
- * This mixin seeks to take the vinegar out of the responsive alignments in the editor.
- */
-
-@mixin editor-width( $width ) {
-	@media ( min-width: #{ ( $width ) } ) {
-		@content;
-	}
-}
-
-$content-width-padding: $content-width + $block-side-ui-padding + $block-side-ui-padding;
-$float-margin: calc( 50% - #{ $content-width-padding / 2 } );
-
 /**
  * Button states and focus styles
  */

edit-post/assets/stylesheets/_variables.scss

@@ -43,12 +43,14 @@ $inserter-tabs-height: 36px;
 $block-toolbar-height: 37px;
 
 // Blocks
-$block-padding: 14px;
-$block-mover-margin: 18px;
-$block-spacing: 4px;
-$block-side-ui-padding: 36px;
-$block-side-ui-width: 28px;		// The side UI max height matches a single line of text, 56px. 28px is half, allowing 2 mover arrows
-$block-side-ui-clearance: 2px;
+$parent-block-padding: 28px; // padding of top level blocks, should be larger than $block-padding, otherwise a user can't select the parent from a child
+$block-padding: 14px; // padding of nested blocks
+$block-spacing: 4px; // vertical space between blocks
+
+$block-side-ui-width: 28px; // width of the side UI, matches half matches half of a single line of text, so two buttons stacke matches 1
+$block-side-ui-clearance: 2px; // space between side UI and block
+$block-side-ui-padding: $block-side-ui-width + $block-side-ui-clearance; // total space used to accommodate side UI
+$block-parent-side-ui-clearance: $parent-block-padding - $block-padding; // space between side UI and block on top level blocks
 
 // Buttons & UI Widgets
 $button-style__radius-roundrect: 4px;

edit-post/assets/stylesheets/_z-index.scss

@@ -9,6 +9,7 @@ $z-layers: (
 	'.editor-block-list__block {core/image aligned left or right}': 20,
 	'.editor-block-list__block {core/image aligned wide or fullwide}': 20,
 	'.freeform-toolbar': 10,
+	'.editor-block-list__breadcrumb': 1,
 	'.editor-warning': 1,
 	'.components-form-toggle__input': 1,
 	'.editor-inserter__tabs': 1,
@@ -26,6 +27,10 @@ $z-layers: (
 	'.core-blocks-button__inline-link .editor-url-input__suggestions': 6, // URL suggestions for button block above sibling inserter
 	'.wp-block-image__resize-handlers': 1, // Resize handlers above sibling inserter
 
+	// Side UI active buttons
+	'.editor-block-settings-remove': 1,
+	'.editor-block-mover__control': 1,
+
 	// Should have lower index than anything else positioned inside the block containers
 	'.editor-block-list__block-draggable': 0,
 
@@ -44,6 +49,10 @@ $z-layers: (
 	// should overlap most block content.
 	'.editor-block-list__block.is-{selected,hovered} .editor-block-{settings-menu,mover}': 80,
 
+	// Small screen inner blocks overlay must be displayed above drop zone,
+	// settings menu, and movers.
+	'.editor-inner-blocks__small-screen-overlay:after': 120,
+
 	// Show sidebar above wp-admin navigation bar for mobile viewports:
 	// #wpadminbar { z-index: 99999 }
 	'.edit-post-sidebar': 100000,

edit-post/components/visual-editor/style.scss

@@ -45,8 +45,8 @@
 
 	@include break-small() {
 		.editor-block-list__block-edit {
-			margin-left: -$block-side-ui-padding;
-			margin-right: -$block-side-ui-padding;
+			margin-left: -$block-side-ui-width;
+			margin-right: -$block-side-ui-width;
 		}
 
 		&[data-align="full"] > .editor-block-contextual-toolbar,
@@ -87,8 +87,8 @@
 	// include space for side UI on desktops
 	@include break-small() {
 		> div {
-			margin-left: -$block-side-ui-padding - 1px;
-			margin-right: -$block-side-ui-padding - 1px;
+			margin-left: -$block-side-ui-width;
+			margin-right: -$block-side-ui-width;
 		}
 	}
 }

editor/components/block-edit/index.js

@@ -34,6 +34,7 @@ export class BlockEdit extends Component {
 		} = this.props;
 
 		return {
+			uid,
 			BlockList: createInnerBlockList( uid ),
 			canUserUseUnfilteredHTML: get( user.data, [
 				'capabilities',
@@ -76,6 +77,7 @@ export class BlockEdit extends Component {
 }
 
 BlockEdit.childContextTypes = {
+	uid: noop,
 	BlockList: noop,
 	canUserUseUnfilteredHTML: noop,
 };

editor/components/block-list/block.js

@@ -413,6 +413,7 @@ export class BlockListBlock extends Component {
 			isLargeViewport,
 			isEmptyDefaultBlock,
 			isPreviousBlockADefaultEmptyBlock,
+			hasSelectedInnerBlock,
 		} = this.props;
 		const isHovered = this.state.isHovered && ! isMultiSelecting;
 		const { name: blockName, isValid } = block;
@@ -424,14 +425,14 @@ export class BlockListBlock extends Component {
 
 		// If the block is selected and we're typing the block should not appear.
 		// Empty paragraph blocks should always show up as unselected.
-		const isSelectedNotTyping = isSelected && ! isTypingWithinBlock;
 		const showEmptyBlockSideInserter = ( isSelected || isHovered ) && isEmptyDefaultBlock;
-		const shouldAppearSelected = ! showEmptyBlockSideInserter && isSelectedNotTyping;
+		const showSideInserter = ( isSelected || isHovered ) && isEmptyDefaultBlock;
+		const shouldAppearSelected = ! showSideInserter && ( isSelected || hasSelectedInnerBlock ) && ! isTypingWithinBlock;
 		// We render block movers and block settings to keep them tabbale even if hidden
 		const shouldRenderMovers = ( isSelected || hoverArea === 'left' ) && ! showEmptyBlockSideInserter && ! isMultiSelecting && ! isMultiSelected && ! isTypingWithinBlock;
 		const shouldRenderBlockSettings = ( isSelected || hoverArea === 'right' ) && ! isMultiSelecting && ! isMultiSelected && ! isTypingWithinBlock;
-		const shouldShowBreadcrumb = isHovered;
-		const shouldShowContextualToolbar = shouldAppearSelected && isValid && ( ! hasFixedToolbar || ! isLargeViewport );
+		const shouldShowBreadcrumb = isHovered && ! isEmptyDefaultBlock;
+		const shouldShowContextualToolbar = ! showSideInserter && isSelected && ! isTypingWithinBlock && isValid && ( ! hasFixedToolbar || ! isLargeViewport );
 		const shouldShowMobileToolbar = shouldAppearSelected;
 		const { error, dragging } = this.state;
 
@@ -446,7 +447,7 @@ export class BlockListBlock extends Component {
 			'has-warning': ! isValid || !! error,
 			'is-selected': shouldAppearSelected,
 			'is-multi-selected': isMultiSelected,
-			'is-hovered': isHovered,
+			'is-hovered': isHovered && ! isEmptyDefaultBlock,
 			'is-shared': isSharedBlock( blockType ),
 			'is-hidden': dragging,
 			'is-typing': isTypingWithinBlock,
@@ -620,8 +621,10 @@ const applyWithSelect = withSelect( ( select, { uid, rootUID } ) => {
 		isSelectionEnabled,
 		getSelectedBlocksInitialCaretPosition,
 		getEditorSettings,
+		hasSelectedInnerBlock,
 	} = select( 'core/editor' );
 	const isSelected = isBlockSelected( uid );
+	const isParentOfSelectedBlock = hasSelectedInnerBlock( uid );
 	const { templateLock, hasFixedToolbar } = getEditorSettings();
 	const block = getBlock( uid );
 	const previousBlockUid = getPreviousBlockUid( uid );
@@ -632,9 +635,10 @@ const applyWithSelect = withSelect( ( select, { uid, rootUID } ) => {
 		isMultiSelected: isBlockMultiSelected( uid ),
 		isFirstMultiSelected: isFirstMultiSelectedBlock( uid ),
 		isMultiSelecting: isMultiSelecting(),
+		hasSelectedInnerBlock: isParentOfSelectedBlock,
 		// 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 && isTyping(),
+		isTypingWithinBlock: ( isSelected || isParentOfSelectedBlock ) && isTyping(),
 		order: getBlockIndex( uid, rootUID ),
 		meta: getEditedPostAttribute( 'meta' ),
 		mode: getBlockMode( uid ),

editor/components/block-list/breadcrumb.js

@@ -1,15 +1,9 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
-import { compose, Component } from '@wordpress/element';
-import { IconButton, Toolbar } from '@wordpress/components';
-import { withDispatch, withSelect } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
+import { compose, Component, Fragment } from '@wordpress/element';
+import { Toolbar } from '@wordpress/components';
+import { withSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -53,22 +47,16 @@ export class BlockBreadcrumb extends Component {
 	}
 
 	render( ) {
-		const { uid, rootUID, selectRootBlock, isHidden } = this.props;
-		const { isFocused } = this.state;
+		const { uid, rootUID } = this.props;
 
 		return (
-			<div className={ classnames( 'editor-block-list__breadcrumb', {
-				'is-visible': ! isHidden || isFocused,
-			} ) }>
+			<div className={ 'editor-block-list__breadcrumb' }>
 				<Toolbar>
 					{ rootUID && (
-						<IconButton
-							onClick={ selectRootBlock }
-							onFocus={ this.onFocus }
-							onBlur={ this.onBlur }
-							label={ __( 'Select parent block' ) }
-							icon="arrow-left-alt"
-						/>
+						<Fragment>
+							<BlockTitle uid={ rootUID } />
+							<span className="editor-block-list__descendant-arrow" />
+						</Fragment>
 					) }
 					<BlockTitle uid={ uid } />
 				</Toolbar>
@@ -86,12 +74,4 @@ export default compose( [
 			rootUID: getBlockRootUID( uid ),
 		};
 	} ),
-	withDispatch( ( dispatch, ownProps ) => {
-		const { rootUID } = ownProps;
-		const { selectBlock } = dispatch( 'core/editor' );
-
-		return {
-			selectRootBlock: () => selectBlock( rootUID ),
-		};
-	} ),
 ] )( BlockBreadcrumb );