Inserter: fix 'append-after' keyboard a11y in both modes

WordPress · Jul 9, 2024 · 0244d6f · 0244d6f
1 parent 96750ff
commit 0244d6f
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 9 deletions.
diff --git a/packages/block-editor/src/components/block-popover/style.scss b/packages/block-editor/src/components/block-popover/style.scss
@@ -45,6 +45,14 @@
 	}
 }
 
+.block-editor-block-list__insertion-point {
+	opacity: 0;
+
+	&:focus-within,
+	.is-visible {
+		opacity: 1;
+	}
+}
 
 .components-popover.block-editor-block-popover__drop-zone {
 	// Disable pointer events for dragging and dropping.

diff --git a/packages/block-editor/src/components/block-tools/index.js b/packages/block-editor/src/components/block-tools/index.js
@@ -202,12 +202,6 @@ export default function BlockTools( {
 		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
 		<div { ...props } onKeyDown={ onKeyDown }>
 			<InsertionPointOpenRef.Provider value={ useRef( false ) }>
-				{ ! isTyping && (
-					<InsertionPoint
-						__unstableContentRef={ __unstableContentRef }
-					/>
-				) }
-
 				{ showEmptyBlockSideInserter && (
 					<EmptyBlockInserter
 						__unstableContentRef={ __unstableContentRef }
@@ -251,6 +245,11 @@ export default function BlockTools( {
 					name="__unstable-block-tools-after"
 					ref={ blockToolbarAfterRef }
 				/>
+				{ ! isTyping && (
+					<InsertionPoint
+						__unstableContentRef={ __unstableContentRef }
+					/>
+				) }
 				{ window.__experimentalEnableZoomedOutPatternsTab &&
 					isZoomOutMode && (
 						<ZoomOutModeInserters

diff --git a/packages/block-editor/src/components/block-tools/insertion-point.js b/packages/block-editor/src/components/block-tools/insertion-point.js
@@ -26,6 +26,7 @@ function InbetweenInsertionPointPopover( {
 	__unstableContentRef,
 	operation = 'insert',
 	nearestSide = 'right',
+	isVisible,
 } ) {
 	const { selectBlock, hideInsertionPoint } = useDispatch( blockEditorStore );
 	const openRef = useContext( InsertionPointOpenRef );
@@ -78,7 +79,7 @@ function InbetweenInsertionPointPopover( {
 			rootClientId: insertionPoint.rootClientId,
 			isNavigationMode: _isNavigationMode(),
 			isDistractionFree: settings.isDistractionFree,
-			isInserterShown: insertionPoint?.__unstableWithInserter,
+			isInserterShown: insertionPoint?.__unstableWithInserter ?? true,
 		};
 	}, [] );
 	const { getBlockEditingMode } = useSelect( blockEditorStore );
@@ -177,6 +178,7 @@ function InbetweenInsertionPointPopover( {
 				onFocus={ onFocus }
 				className={ clsx( className, {
 					'is-with-inserter': isInserterShown,
+					'is-visible': isVisible,
 				} ) }
 				onHoverEnd={ maybeHideInserterPoint }
 			>
@@ -231,7 +233,6 @@ export default function InsertionPoint( props ) {
 	);
 
 	if (
-		! isVisible ||
 		// Don't render the insertion point if the block list is empty.
 		// The insertion point will be represented by the appender instead.
 		isBlockListEmpty
@@ -243,7 +244,7 @@ export default function InsertionPoint( props ) {
 	 * Render a popover that overlays the block when the desired operation is to replace it.
 	 * Otherwise, render a popover in between blocks for the indication of inserting between them.
 	 */
-	return insertionPoint.operation === 'replace' ? (
+	return isVisible && insertionPoint.operation === 'replace' ? (
 		<BlockDropZonePopover
 			// Force remount to trigger the animation.
 			key={ `${ insertionPoint.rootClientId }-${ insertionPoint.index }` }
@@ -253,6 +254,7 @@ export default function InsertionPoint( props ) {
 		<InbetweenInsertionPointPopover
 			operation={ insertionPoint.operation }
 			nearestSide={ insertionPoint.nearestSide }
+			isVisible={ isVisible }
 			{ ...props }
 		/>
 	);