Block: reposition tabbable inserter (#19596)

* Block: reposition tabbable inserter * Fix e2e
WordPress · Jan 13, 2020 · 06782e1 · 06782e1
1 parent e7342de
commit 06782e1
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 53 deletions.
diff --git a/packages/block-editor/src/components/block-list/block-popover.js b/packages/block-editor/src/components/block-list/block-popover.js
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { findIndex } from 'lodash';
+import classnames from 'classnames';
 
 /**
  * WordPress dependencies
@@ -60,6 +61,7 @@ function BlockPopover( {
 	} = useSelect( selector, [] );
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const [ isToolbarForced, setIsToolbarForced ] = useState( false );
+	const [ isInserterShown, setIsInserterShown ] = useState( false );
 
 	const showEmptyBlockSideInserter = ! isNavigationMode && isEmptyDefaultBlock && isValid;
 	const shouldShowBreadcrumb = isNavigationMode;
@@ -97,6 +99,14 @@ function BlockPopover( {
 		return null;
 	}
 
+	function onFocus() {
+		setIsInserterShown( true );
+	}
+
+	function onBlur() {
+		setIsInserterShown( false );
+	}
+
 	// Position above the anchor, pop out towards the right, and position in the
 	// left corner. For the side inserter, pop out towards the left, and
 	// position in the right corner.
@@ -119,6 +129,25 @@ function BlockPopover( {
 			__unstableAllowHorizontalSubpixelPosition={ moverDirection === 'horizontal' && node }
 			onBlur={ () => setIsToolbarForced( false ) }
 		>
+			{ ( shouldShowContextualToolbar || isToolbarForced ) && (
+				<div
+					onFocus={ onFocus }
+					onBlur={ onBlur }
+					// While ideally it would be enough to capture the
+					// bubbling focus event from the Inserter, due to the
+					// characteristics of click focusing of `button`s in
+					// Firefox and Safari, it is not reliable.
+					//
+					// See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
+					tabIndex={ -1 }
+					className={ classnames(
+						'block-editor-block-list__block-popover-inserter',
+						{ 'is-visible': isInserterShown }
+					) }
+				>
+					<Inserter clientId={ clientId } rootClientId={ rootClientId } />
+				</div>
+			) }
 			{ ( shouldShowContextualToolbar || isToolbarForced ) && (
 				<BlockContextualToolbar
 					// If the toolbar is being shown because of being forced

diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
@@ -395,7 +395,20 @@
 	}
 
 	justify-content: center;
+}
+
+.block-editor-block-list__block-popover-inserter {
+	position: absolute;
+	top: -9999em;
+	margin-bottom: $block-padding;
+
+	&.is-visible {
+		position: static;
+	}
+}
 
+.block-editor-block-list__insertion-point-inserter,
+.block-editor-block-list__block-popover-inserter {
 	// Show a clickable plus.
 	.block-editor-inserter__toggle {
 		border-radius: 50%;

diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js
@@ -1,14 +1,7 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { Toolbar } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -20,14 +13,12 @@ import BlockSettingsMenu from '../block-settings-menu';
 import BlockSwitcher from '../block-switcher';
 import MultiBlocksSwitcher from '../block-switcher/multi-blocks-switcher';
 import BlockMover from '../block-mover';
-import Inserter from '../inserter';
 
 export default function BlockToolbar( { hasMovers = true } ) {
 	const {
 		blockClientIds,
 		isValid,
 		mode,
-		rootClientId,
 		moverDirection,
 	} = useSelect( ( select ) => {
 		const {
@@ -56,40 +47,11 @@ export default function BlockToolbar( { hasMovers = true } ) {
 			moverDirection: __experimentalMoverDirection,
 		};
 	}, [] );
-	const [ isInserterShown, setIsInserterShown ] = useState( false );
 
 	if ( blockClientIds.length === 0 ) {
 		return null;
 	}
 
-	function onFocus() {
-		setIsInserterShown( true );
-	}
-
-	function onBlur() {
-		setIsInserterShown( false );
-	}
-
-	const inserter = (
-		<Toolbar
-			onFocus={ onFocus }
-			onBlur={ onBlur }
-			// While ideally it would be enough to capture the
-			// bubbling focus event from the Inserter, due to the
-			// characteristics of click focusing of `button`s in
-			// Firefox and Safari, it is not reliable.
-			//
-			// See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
-			tabIndex={ -1 }
-			className={ classnames(
-				'block-editor-block-toolbar__inserter',
-				{ 'is-visible': isInserterShown }
-			) }
-		>
-			<Inserter clientId={ blockClientIds[ 0 ] } rootClientId={ rootClientId } />
-		</Toolbar>
-	);
-
 	if ( blockClientIds.length > 1 ) {
 		return (
 			<div className="block-editor-block-toolbar">
@@ -99,7 +61,6 @@ export default function BlockToolbar( { hasMovers = true } ) {
 				/> ) }
 				<MultiBlocksSwitcher />
 				<BlockSettingsMenu clientIds={ blockClientIds } />
-				{ inserter }
 			</div>
 		);
 	}
@@ -118,7 +79,6 @@ export default function BlockToolbar( { hasMovers = true } ) {
 				</>
 			) }
 			<BlockSettingsMenu clientIds={ blockClientIds } />
-			{ inserter }
 		</div>
 	);
 }
diff --git a/packages/block-editor/src/components/block-toolbar/style.scss b/packages/block-editor/src/components/block-toolbar/style.scss
@@ -44,16 +44,6 @@
 			border-color: $light-gray-500;
 		}
 	}
-
-	&__inserter {
-		opacity: 0;
-		pointer-events: none;
-
-		&.is-visible {
-			opacity: 1;
-			pointer-events: all;
-		}
-	}
 }
 
 .block-editor-block-toolbar__slot {

diff --git a/packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js b/packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js
@@ -23,6 +23,9 @@ const navigateToContentEditorTop = async () => {
 };
 
 const tabThroughParagraphBlock = async ( paragraphText, blockIndex ) => {
+	await page.keyboard.press( 'Tab' );
+	await expect( await getActiveLabel() ).toBe( 'Add block' );
+
 	await tabThroughBlockMoverControl();
 	await tabThroughBlockToolbar();
 
@@ -68,9 +71,6 @@ const tabThroughBlockToolbar = async () => {
 
 	await page.keyboard.press( 'Tab' );
 	await expect( await getActiveLabel() ).toBe( 'More options' );
-
-	await page.keyboard.press( 'Tab' );
-	await expect( await getActiveLabel() ).toBe( 'Add block' );
 };
 
 describe( 'Order of block keyboard navigation', () => {