Refactor BackgroundImageControls and MediaReplaceFlow to improve butt…

…on rendering and support custom toggle rendering
WordPress · Dec 20, 2024 · a0b5844 · a0b5844
1 parent e2295f0
commit a0b5844
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 32 deletions.
diff --git a/packages/block-editor/src/components/background-image-control/index.js b/packages/block-editor/src/components/background-image-control/index.js
@@ -24,7 +24,9 @@ import {
 	Placeholder,
 	Spinner,
 	__experimentalDropdownContentWrapper as DropdownContentWrapper,
+	Button,
 } from '@wordpress/components';
+import { DOWN } from '@wordpress/keycodes';
 import { __, _x, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
 import { getFilename } from '@wordpress/url';
@@ -369,16 +371,28 @@ function BackgroundImageControls( {
 							displayInPanel,
 					} ),
 				} }
-				name={
-					<InspectorImagePreviewItem
-						className="block-editor-global-styles-background-panel__image-preview"
-						imgUrl={ url }
-						filename={ title }
-						label={ imgLabel }
-					/>
-				}
 				variant="secondary"
-				buttonVariant="button"
+				renderToggle={ ( { isOpen, onToggle } ) => (
+					<Button
+						__next40pxDefaultSize
+						aria-expanded={ isOpen }
+						aria-haspopup="true"
+						onClick={ onToggle }
+						onKeyDown={ ( event ) => {
+							if ( event.keyCode === DOWN ) {
+								event.preventDefault();
+								event.target.click();
+							}
+						} }
+					>
+						<InspectorImagePreviewItem
+							className="block-editor-global-styles-background-panel__image-preview"
+							imgUrl={ url }
+							filename={ title }
+							label={ imgLabel }
+						/>
+					</Button>
+				) }
 				onError={ onUploadError }
 				onReset={ () => {
 					closeAndFocus();

diff --git a/packages/block-editor/src/components/media-replace-flow/index.js b/packages/block-editor/src/components/media-replace-flow/index.js
@@ -6,7 +6,6 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { useRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { speak } from '@wordpress/a11y';
 import {
@@ -16,7 +15,6 @@ import {
 	Dropdown,
 	withFilters,
 	ToolbarButton,
-	Button,
 } from '@wordpress/components';
 import { useSelect, withDispatch } from '@wordpress/data';
 import { DOWN } from '@wordpress/keycodes';
@@ -39,11 +37,6 @@ import { store as blockEditorStore } from '../../store';
 
 const noop = () => {};
 
-const BUTTON_VARIANTS = {
-	toolbar: ToolbarButton,
-	button: Button,
-};
-
 let uniqueId = 0;
 
 const MediaReplaceFlow = ( {
@@ -67,13 +60,12 @@ const MediaReplaceFlow = ( {
 	addToGallery,
 	handleUpload = true,
 	popoverProps,
-	buttonVariant = 'toolbar',
+	renderToggle,
 } ) => {
 	const mediaUpload = useSelect( ( select ) => {
 		return select( blockEditorStore ).getSettings().mediaUpload;
 	}, [] );
 	const canUpload = !! mediaUpload;
-	const editMediaButtonRef = useRef();
 	const errorNoticeID = `block-editor/media-replace-flow/error-notice/${ ++uniqueId }`;
 
 	const onUploadError = ( message ) => {
@@ -144,24 +136,27 @@ const MediaReplaceFlow = ( {
 	};
 
 	const gallery = multiple && onlyAllowsImages();
-	const ButtonComponent = BUTTON_VARIANTS[ buttonVariant ];
+
+	const defaultRenderToggle = ( { isOpen, onToggle } ) => (
+		<ToolbarButton
+			aria-expanded={ isOpen }
+			aria-haspopup="true"
+			onClick={ onToggle }
+			onKeyDown={ openOnArrowDown }
+		>
+			{ name }
+		</ToolbarButton>
+	);
 
 	return (
 		<Dropdown
 			popoverProps={ popoverProps }
 			contentClassName="block-editor-media-replace-flow__options"
-			renderToggle={ ( { isOpen, onToggle } ) => (
-				<ButtonComponent
-					__next40pxDefaultSize={ buttonVariant === 'button' }
-					ref={ editMediaButtonRef }
-					aria-expanded={ isOpen }
-					aria-haspopup="true"
-					onClick={ onToggle }
-					onKeyDown={ openOnArrowDown }
-				>
-					{ name }
-				</ButtonComponent>
-			) }
+			renderToggle={
+				typeof renderToggle === 'function'
+					? renderToggle
+					: defaultRenderToggle
+			}
 			renderContent={ ( { onClose } ) => (
 				<>
 					<NavigableMenu className="block-editor-media-replace-flow__media-upload-menu">
@@ -248,7 +243,6 @@ const MediaReplaceFlow = ( {
 								showSuggestions={ false }
 								onChange={ ( { url } ) => {
 									onSelectURL( url );
-									editMediaButtonRef.current.focus();
 								} }
 							/>
 						</form>