Visual Editor: Hide sibling inserter by CSS

WordPress · Nov 15, 2017 · 4eccc7b · 4eccc7b
1 parent b6bfb70
commit 4eccc7b
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 79 deletions.
diff --git a/editor/modes/visual-editor/sibling-inserter.js b/editor/modes/visual-editor/sibling-inserter.js
@@ -8,7 +8,6 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { Component } from '@wordpress/element';
-import { focus } from '@wordpress/utils';
 
 /**
  * Internal dependencies
@@ -23,98 +22,41 @@ class VisualEditorSiblingInserter extends Component {
 	constructor() {
 		super( ...arguments );
 
-		this.bindNode = this.bindNode.bind( this );
-		this.focusFirstTabbable = this.focusFirstTabbable.bind( this );
-		this.show = this.toggleVisible.bind( this, true );
-		this.hide = this.toggleVisible.bind( this, false );
-		this.showAndFocus = this.showAndFocus.bind( this );
-		this.suspendToggleVisible = this.suspendToggleVisible.bind( this );
+		this.forceVisibleWhileInserting = this.forceVisibleWhileInserting.bind( this );
 
 		this.state = {
-			isVisible: false,
-			isToggleVisibleSuspended: false,
+			isForcedVisible: false,
 		};
 	}
 
-	componentDidUpdate( prevProps, prevState ) {
-		const { visibleViaFocus, state } = this;
-		const { isVisible, isToggleVisibleSuspended } = state;
-		if ( isVisible && ! prevState.isVisible && visibleViaFocus ) {
-			this.focusFirstTabbable();
-
-			// Reset for next toggle visible
-			this.visibleViaFocus = false;
-		}
-
-		// If inserter is closed, we must check to see if focus is still within
-		// the inserter, since it may have been closed by clicking outside. We
-		// want to retain visible if still focused, or hide otherwise.
-		if ( ! isToggleVisibleSuspended && prevState.isToggleVisibleSuspended &&
-				! this.node.contains( document.activeElement ) ) {
-			this.toggleVisible( false );
-		}
-	}
-
-	bindNode( node ) {
-		this.node = node;
-	}
-
-	focusFirstTabbable() {
-		// Sibling inserter doesn't render its inserter button until after it
-		// becomes visible by focus or hover. If visible by focus, move focus
-		// into the now-visible button.
-		const tabbable = focus.tabbable.find( this.node );
-		if ( tabbable.length ) {
-			tabbable[ 0 ].focus();
-		}
-	}
-
-	toggleVisible( isVisible ) {
-		if ( ! this.state.isToggleVisibleSuspended ) {
-			this.setState( { isVisible } );
-		}
-	}
-
-	showAndFocus() {
-		this.toggleVisible( true );
-		this.visibleViaFocus = true;
-	}
-
-	suspendToggleVisible( isOpen ) {
+	forceVisibleWhileInserting( isOpen ) {
 		// Prevent mouseout and blur while navigating the open inserter menu
 		// from causing the inserter to be unmounted.
-		this.setState( { isToggleVisibleSuspended: isOpen } );
+		this.setState( { isForcedVisible: isOpen } );
 	}
 
 	render() {
 		const { insertIndex, showInsertionPoint } = this.props;
-		const { isVisible } = this.state;
+		const { isForcedVisible } = this.state;
 
 		const classes = classnames( 'editor-visual-editor__sibling-inserter', {
-			'is-visible': isVisible || showInsertionPoint,
+			'is-forced-visible': isForcedVisible || showInsertionPoint,
 		} );
 
 		return (
 			<div
 				ref={ this.bindNode }
 				data-insert-index={ insertIndex }
-				className={ classes }
-				onFocus={ this.showAndFocus }
-				onBlur={ this.hide }
-				onMouseEnter={ this.show }
-				onMouseLeave={ this.hide }
-				tabIndex={ isVisible ? -1 : 0 }>
+				className={ classes }>
 				{ showInsertionPoint && (
 					<div className="editor-visual-editor__insertion-point" />
 				) }
-				{ isVisible &&
-					<Inserter
-						key="inserter"
-						position="bottom"
-						insertIndex={ insertIndex }
-						onToggle={ this.suspendToggleVisible }
-					/>
-				}
+				<Inserter
+					key="inserter"
+					position="bottom"
+					insertIndex={ insertIndex }
+					onToggle={ this.forceVisibleWhileInserting }
+				/>
 			</div>
 		);
 	}

diff --git a/editor/modes/visual-editor/style.scss b/editor/modes/visual-editor/style.scss
@@ -445,9 +445,6 @@
 	position: relative;
 	max-width: $visual-editor-max-width + ( 2 * $block-mover-padding-visible ) - ( 2 * $block-padding );
 	margin: 0 auto;
-	opacity: 0;
-	transition: opacity 0.25s ease-in-out;
-	transition-delay: 0.3s;
 
 	@include break-small {
 		max-width: $visual-editor-max-width - ( 2 * $block-padding );
@@ -457,10 +454,6 @@
 		top: #{ -1 * ( $block-spacing / 2 ) };
 	}
 
-	&.is-visible {
-		opacity: 1;
-	}
-
 	&:before {
 		content: '';
 		position: absolute;
@@ -482,6 +475,18 @@
 		margin: 0;
 	}
 
+	.editor-inserter__toggle {
+		opacity: 0;
+		transition: opacity 0.25s ease-in-out;
+		transition-delay: 0.3s;
+	}
+
+	&.is-forced-visible .editor-inserter__toggle,
+	&:hover .editor-inserter__toggle,
+	.editor-inserter__toggle:focus {
+		opacity: 1;
+	}
+
 	.editor-inserter__toggle.components-button {
 		margin: 0;
 		padding: 4px;

diff --git a/test/e2e/integration/002-adding-blocks.js b/test/e2e/integration/002-adding-blocks.js
@@ -20,7 +20,7 @@ describe( 'Adding blocks', () => {
 		cy.get( lastBlockSelector ).type( 'Quote block' );
 
 		// Using the regular inserter
-		cy.get( '.editor-visual-editor [aria-label="Insert block"]' ).click();
+		cy.get( '.editor-visual-editor__inserter [aria-label="Insert block"]' ).click();
 		cy.get( '[placeholder="Search for a block"]' ).type( 'code' );
 		cy.get( '.editor-inserter__block' ).contains( 'Code' ).click();
 		cy.get( '[placeholder="Write code…"]' ).type( 'Code block' );