Block: Try adding the left/right block hover areas

edit-post/assets/stylesheets/_animations.scss

@@ -17,4 +17,7 @@
 	animation: slide_in_right 0.1s forwards;
 }
 
-
+@mixin fade_in {
+	animation: fade-in 0.3s ease-out;
+	animation-fill-mode: forwards;
+}

edit-post/assets/stylesheets/main.scss

@@ -147,3 +147,12 @@ body.gutenberg-editor-page {
 		padding: 6px 10px;
 	}
 }
+
+@keyframes fade-in {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}

editor/components/block-list/block.js

@@ -48,6 +48,7 @@ import BlockDraggable from './block-draggable';
 import IgnoreNestedEvents from './ignore-nested-events';
 import InserterWithShortcuts from '../inserter-with-shortcuts';
 import Inserter from '../inserter';
+import withHoverAreas from './with-hover-areas';
 import { createInnerBlockList } from '../../utils/block-list';
 
 const { BACKSPACE, DELETE, ENTER } = keycodes;
@@ -404,8 +405,10 @@ export class BlockListBlock extends Component {
 			isFirstMultiSelected,
 			isLastInSelection,
 			isTypingWithinBlock,
+			isMultiSelecting,
+			hoverArea,
 		} = this.props;
-		const isHovered = this.state.isHovered && ! this.props.isMultiSelecting;
+		const isHovered = this.state.isHovered && ! isMultiSelecting;
 		const { name: blockName, isValid } = block;
 		const blockType = getBlockType( blockName );
 		// translators: %s: Type of block (i.e. Text, Image etc)
@@ -419,8 +422,10 @@ export class BlockListBlock extends Component {
 		const isSelectedNotTyping = isSelected && ! isTypingWithinBlock;
 		const showSideInserter = ( isSelected || isHovered ) && isEmptyDefaultBlock;
 		const shouldAppearSelected = ! showSideInserter && isSelectedNotTyping;
-		const shouldShowMovers = ( shouldAppearSelected || isHovered || ( isEmptyDefaultBlock && isSelectedNotTyping ) ) && ! showSideInserter;
-		const shouldShowSettingsMenu = shouldShowMovers;
+		// We render block movers and block settings to keep them tabbale even if hidden
+		const shouldRenderMovers = ( isSelected || hoverArea === 'left' ) && ! showSideInserter && ! isMultiSelecting && ! isMultiSelected;
+		const shouldRenderBlockSettings = ( isSelected || hoverArea === 'right' ) && ! showSideInserter && ! isMultiSelecting && ! isMultiSelected;
+		const shouldShowBreadcrumb = isHovered;
 		const shouldShowContextualToolbar = shouldAppearSelected && isValid && showContextualToolbar;
 		const shouldShowMobileToolbar = shouldAppearSelected;
 		const { error, dragging } = this.state;
@@ -510,23 +515,25 @@ export class BlockListBlock extends Component {
 					rootUID={ rootUID }
 					layout={ layout }
 				/>
-				{ shouldShowMovers && (
+				{ shouldRenderMovers && (
 					<BlockMover
 						uids={ [ uid ] }
 						rootUID={ rootUID }
 						layout={ layout }
 						isFirst={ isFirst }
 						isLast={ isLast }
+						isHidden={ ! isHovered || hoverArea !== 'left' }
 					/>
 				) }
-				{ shouldShowSettingsMenu && ! showSideInserter && (
+				{ shouldRenderBlockSettings && (
 					<BlockSettingsMenu
 						uids={ [ uid ] }
 						rootUID={ rootUID }
 						renderBlockMenu={ renderBlockMenu }
+						isHidden={ ! isHovered || hoverArea !== 'right' }
 					/>
 				) }
-				{ isHovered && <BlockBreadcrumb uid={ uid } /> }
+				{ shouldShowBreadcrumb && <BlockBreadcrumb uid={ uid } isHidden={ hoverArea !== 'left' } /> }
 				{ shouldShowContextualToolbar && <BlockContextualToolbar /> }
 				{ isFirstMultiSelected && <BlockMultiControls rootUID={ rootUID } /> }
 				<IgnoreNestedEvents
@@ -692,4 +699,5 @@ export default compose(
 		};
 	} ),
 	withFilters( 'editor.BlockListBlock' ),
+	withHoverAreas
 )( BlockListBlock );

editor/components/block-list/breadcrumb.js

@@ -1,7 +1,12 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
-import { compose } from '@wordpress/element';
+import { compose, Component } from '@wordpress/element';
 import { Dashicon, Tooltip, Toolbar, Button } from '@wordpress/components';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
@@ -12,20 +17,6 @@ import { __ } from '@wordpress/i18n';
 import NavigableToolbar from '../navigable-toolbar';
 import BlockTitle from '../block-title';
 
-/**
- * Stops propagation of the given event argument. Assumes that the event has
- * been completely handled and no other listeners should be informed.
- *
- * For the breadcrumb component, this is used for improved interoperability
- * with the block's `onFocus` handler which selects the block, thus conflicting
- * with the intention to select the root block.
- *
- * @param {Event} event Event for which propagation should be stopped.
- */
-function stopPropagation( event ) {
-	event.stopPropagation();
-}
-
 /**
  * Block breadcrumb component, displaying the label of the block. If the block
  * descends from a root block, a button is displayed enabling the user to select
@@ -34,27 +25,59 @@ function stopPropagation( event ) {
  * @param {string}   props.uid             UID of block.
  * @param {string}   props.rootUID         UID of block's root.
  * @param {Function} props.selectRootBlock Callback to select root block.
- *
- * @return {WPElement} Breadcrumb element.
  */
-function BlockBreadcrumb( { uid, rootUID, selectRootBlock } ) {
-	return (
-		<NavigableToolbar className="editor-block-breadcrumb">
-			<Toolbar>
-				{ rootUID && (
-					<Tooltip text={ __( 'Select parent block' ) }>
-						<Button
-							onClick={ selectRootBlock }
-							onFocus={ stopPropagation }
-						>
-							<Dashicon icon="arrow-left" uid={ uid } />
-						</Button>
-					</Tooltip>
-				) }
-				<BlockTitle uid={ uid } />
-			</Toolbar>
-		</NavigableToolbar>
-	);
+export class BlockBreadcrumb extends Component {
+	constructor() {
+		super( ...arguments );
+		this.state = {
+			isFocused: false,
+		};
+		this.onFocus = this.onFocus.bind( this );
+		this.onBlur = this.onBlur.bind( this );
+	}
+
+	onFocus( event ) {
+		this.setState( {
+			isFocused: true,
+		} );
+
+		// This is used for improved interoperability
+		// with the block's `onFocus` handler which selects the block, thus conflicting
+		// with the intention to select the root block.
+		event.stopPropagation();
+	}
+
+	onBlur() {
+		this.setState( {
+			isFocused: false,
+		} );
+	}
+
+	render( ) {
+		const { uid, rootUID, selectRootBlock, isHidden } = this.props;
+		const { isFocused } = this.state;
+
+		return (
+			<NavigableToolbar className={ classnames( 'editor-block-breadcrumb', {
+				'is-visible': ! isHidden || isFocused,
+			} ) }>
+				<Toolbar>
+					{ rootUID && (
+						<Tooltip text={ __( 'Select parent block' ) }>
+							<Button
+								onClick={ selectRootBlock }
+								onFocus={ this.onFocus }
+								onBlur={ this.onBlur }
+							>
+								<Dashicon icon="arrow-left" uid={ uid } />
+							</Button>
+						</Tooltip>
+					) }
+					<BlockTitle uid={ uid } />
+				</Toolbar>
+			</NavigableToolbar>
+		);
+	}
 }
 
 export default compose( [

editor/components/block-list/style.scss

@@ -699,3 +699,11 @@
 		padding-top: 6px;
 	}
 }
+
+.editor-block-breadcrumb {
+	opacity: 0;
+
+	&.is-visible {
+		@include fade_in;
+	}
+}

editor/components/block-list/with-hover-areas.js

@@ -0,0 +1,62 @@
+/**
+ * WordPress dependencies
+ */
+import { Component, findDOMNode } from '@wordpress/element';
+
+const withHoverAreas = ( WrappedComponent ) => {
+	class WithHoverAreasComponent extends Component {
+		constructor() {
+			super( ...arguments );
+			this.state = {
+				hoverArea: null,
+			};
+			this.onMouseLeave = this.onMouseLeave.bind( this );
+			this.onMouseMove = this.onMouseMove.bind( this );
+		}
+
+		componentDidMount() {
+			// Disable reason: We use findDOMNode to avoid unnecessary extra dom Nodes
+			// eslint-disable-next-line react/no-find-dom-node
+			this.container = findDOMNode( this );
+			this.container.addEventListener( 'mousemove', this.onMouseMove );
+			this.container.addEventListener( 'mouseleave', this.onMouseLeave );
+		}
+
+		componentWillUnmount() {
+			this.container.removeEventListener( 'mousemove', this.onMouseMove );
+			this.container.removeEventListener( 'mouseleave', this.onMouseLeave );
+		}
+
+		onMouseLeave() {
+			if ( this.state.hoverArea ) {
+				this.setState( { hoverArea: null } );
+			}
+		}
+
+		onMouseMove( event ) {
+			const { width, left, right } = this.container.getBoundingClientRect();
+
+			let hoverArea = null;
+			if ( ( event.clientX - left ) < width / 3 ) {
+				hoverArea = 'left';
+			} else if ( ( right - event.clientX ) < width / 3 ) {
+				hoverArea = 'right';
+			}
+
+			if ( hoverArea !== this.state.hoverArea ) {
+				this.setState( { hoverArea } );
+			}
+		}
+
+		render() {
+			const { hoverArea } = this.state;
+			return (
+				<WrappedComponent { ...this.props } hoverArea={ hoverArea } />
+			);
+		}
+	}
+
+	return WithHoverAreasComponent;
+};
+
+export default withHoverAreas;