Rich text popovers: move to block tools to fix tab order (#34956)

WordPress · Oct 8, 2021 · d03b756 · d03b756
1 parent 0fdb83c
commit d03b756
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 12 deletions.
diff --git a/packages/block-editor/src/components/block-tools/index.js b/packages/block-editor/src/components/block-tools/index.js
@@ -128,8 +128,11 @@ export default function BlockTools( {
 					ref={ usePopoverScroll( __unstableContentRef ) }
 				/>
 				{ children }
-				{ /* Forward compatibility: a place to render block tools behind the
-                 content so it can be tabbed to properly. */ }
+				{ /* Used for inline rich text popovers. */ }
+				<Popover.Slot
+					name="__unstable-block-tools-after"
+					ref={ usePopoverScroll( __unstableContentRef ) }
+				/>
 			</InsertionPoint>
 		</div>
 	);

diff --git a/packages/block-editor/src/components/rich-text/index.js b/packages/block-editor/src/components/rich-text/index.js
@@ -26,6 +26,7 @@ import {
 } from '@wordpress/rich-text';
 import deprecated from '@wordpress/deprecated';
 import { BACKSPACE, DELETE } from '@wordpress/keycodes';
+import { Popover } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -307,14 +308,17 @@ function RichTextWrapper(
 			{ isSelected && (
 				<keyboardShortcutContext.Provider value={ keyboardShortcuts }>
 					<inputEventContext.Provider value={ inputEvents }>
-						{ children && children( { value, onChange, onFocus } ) }
-						<FormatEdit
-							value={ value }
-							onChange={ onChange }
-							onFocus={ onFocus }
-							formatTypes={ formatTypes }
-							forwardedRef={ anchorRef }
-						/>
+						<Popover.__unstableSlotNameProvider value="__unstable-block-tools-after">
+							{ children &&
+								children( { value, onChange, onFocus } ) }
+							<FormatEdit
+								value={ value }
+								onChange={ onChange }
+								onFocus={ onFocus }
+								formatTypes={ formatTypes }
+								forwardedRef={ anchorRef }
+							/>
+						</Popover.__unstableSlotNameProvider>
 					</inputEventContext.Provider>
 				</keyboardShortcutContext.Provider>
 			) }

diff --git a/packages/components/src/popover/index.js b/packages/components/src/popover/index.js
@@ -12,6 +12,8 @@ import {
 	useState,
 	useLayoutEffect,
 	forwardRef,
+	createContext,
+	useContext,
 } from '@wordpress/element';
 import { getRectangleFromRange } from '@wordpress/dom';
 import {
@@ -38,6 +40,8 @@ import { getAnimateClassName } from '../animate';
  */
 const SLOT_NAME = 'Popover';
 
+const slotNameContext = createContext();
+
 function computeAnchorRect(
 	anchorRefFallback,
 	anchorRect,
@@ -267,7 +271,8 @@ const Popover = (
 	const containerRef = useRef();
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const [ animateOrigin, setAnimateOrigin ] = useState();
-	const slot = useSlot( __unstableSlotName );
+	const slotName = useContext( slotNameContext ) || __unstableSlotName;
+	const slot = useSlot( slotName );
 	const isExpanded = expandOnMobile && isMobileViewport;
 	const [ containerResizeListener, contentSize ] = useResizeObserver();
 	noArrow = isExpanded || noArrow;
@@ -550,7 +555,7 @@ const Popover = (
 	);
 
 	if ( slot.ref ) {
-		content = <Fill name={ __unstableSlotName }>{ content }</Fill>;
+		content = <Fill name={ slotName }>{ content }</Fill>;
 	}
 
 	if ( anchorRef || anchorRect ) {
@@ -574,5 +579,6 @@ function PopoverSlot( { name = SLOT_NAME }, ref ) {
 }
 
 PopoverContainer.Slot = forwardRef( PopoverSlot );
+PopoverContainer.__unstableSlotNameProvider = slotNameContext.Provider;
 
 export default PopoverContainer;
diff --git a/packages/e2e-tests/specs/editor/various/adding-inline-tokens.test.js b/packages/e2e-tests/specs/editor/various/adding-inline-tokens.test.js
@@ -15,6 +15,7 @@ import {
 	createNewPost,
 	clickBlockToolbarButton,
 	clickButton,
+	pressKeyWithModifier,
 } from '@wordpress/e2e-test-utils';
 
 describe( 'adding inline tokens', () => {
@@ -59,5 +60,20 @@ describe( 'adding inline tokens', () => {
 			`<!-- wp:paragraph -->\\s*<p>a <img class="wp-image-\\d+" style="width:\\s*10px;?" src="[^"]+\\/${ filename }\\.png" alt=""\\/?><\\/p>\\s*<!-- \\/wp:paragraph -->`
 		);
 		expect( await getEditedPostContent() ).toMatch( regex );
+
+		await pressKeyWithModifier( 'shift', 'ArrowLeft' );
+		await page.waitForSelector(
+			'.block-editor-format-toolbar__image-popover'
+		);
+		await page.keyboard.press( 'Tab' );
+		await page.keyboard.press( 'Tab' );
+		await page.keyboard.type( '20' );
+		await page.keyboard.press( 'Enter' );
+
+		// Check the content.
+		const regex2 = new RegExp(
+			`<!-- wp:paragraph -->\\s*<p>a <img class="wp-image-\\d+" style="width:\\s*20px;?" src="[^"]+\\/${ filename }\\.png" alt=""\\/?><\\/p>\\s*<!-- \\/wp:paragraph -->`
+		);
+		expect( await getEditedPostContent() ).toMatch( regex2 );
 	} );
 } );