Media Replace Flow: Add custom toggle support and fix button height (W…

…ordPress#68084) * Update background image control dropdown height to fit-content * Replace ToolbarButton with Button in MediaReplaceFlow component * Refactor MediaReplaceFlow to support dynamic button variants and update BackgroundImageControls to specify button variant * Refactor MediaReplaceFlow to set default button variant to 'toolbar' and remove unused default variant * Remove redundant height property from background image control dropdown styles * Refactor BackgroundImageControls and MediaReplaceFlow to improve button rendering and support custom toggle rendering * Remove unnecessary blank line in MediaReplaceFlow component * Update BackgroundImageControls to use 'ArrowDown' key for dropdown navigation * Media Replace Flow: Add custom toggle support and fix button height * added `renderToggle` prop details to readme * refactor: remove unused styles * style: increase dropdown toggle height to 40px Co-authored-by: yogeshbhutkar <[email protected]> Co-authored-by: tyxla <[email protected]> Co-authored-by: mirka <[email protected]> Co-authored-by: Mamaduka <[email protected]> Co-authored-by: juanfra <[email protected]>
himanshupathak95 · Jan 2, 2025 · 9b35bc6 · 9b35bc6
1 parent 6eb365e
commit 9b35bc6
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 19 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,6 +24,7 @@ import {
 	Placeholder,
 	Spinner,
 	__experimentalDropdownContentWrapper as DropdownContentWrapper,
+	Button,
 } from '@wordpress/components';
 import { __, _x, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
@@ -378,6 +379,9 @@ function BackgroundImageControls( {
 					/>
 				}
 				variant="secondary"
+				renderToggle={ ( props ) => (
+					<Button { ...props } __next40pxDefaultSize />
+				) }
 				onError={ onUploadError }
 				onReset={ () => {
 					closeAndFocus();

diff --git a/packages/block-editor/src/components/background-image-control/style.scss b/packages/block-editor/src/components/background-image-control/style.scss
@@ -23,7 +23,10 @@
 
 	.components-dropdown {
 		display: block;
-		height: 36px;
+
+		.block-editor-global-styles-background-panel__dropdown-toggle {
+			height: 40px;
+		}
 	}
 }
 
@@ -44,7 +47,6 @@
 
 	.components-dropdown {
 		display: block;
-		height: 36px;
 	}
 
 	button.components-button {

diff --git a/packages/block-editor/src/components/media-replace-flow/README.md b/packages/block-editor/src/components/media-replace-flow/README.md
@@ -98,3 +98,10 @@ If passed, children are rendered inside the dropdown.
 -   Required: No
 
 If passed, children are rendered inside the dropdown. If a function is provided for this prop, it will receive an object with the `onClose` prop as an argument.
+
+### renderToggle
+
+-   Type: `func`
+-   Required: No
+
+If passed, it will be used to render the provided button instead of the default one. It should accept and pass through `button` props to a `button` element.
diff --git a/packages/block-editor/src/components/media-replace-flow/index.js b/packages/block-editor/src/components/media-replace-flow/index.js
@@ -1,16 +1,15 @@
 /**
  * WordPress dependencies
  */
-import { useRef } from '@wordpress/element';
 import { __, _x } from '@wordpress/i18n';
 import { speak } from '@wordpress/a11y';
 import {
 	FormFileUpload,
 	NavigableMenu,
 	MenuItem,
-	ToolbarButton,
 	Dropdown,
 	withFilters,
+	ToolbarButton,
 } from '@wordpress/components';
 import { useSelect, withDispatch } from '@wordpress/data';
 import { DOWN } from '@wordpress/keycodes';
@@ -55,9 +54,9 @@ const MediaReplaceFlow = ( {
 	addToGallery,
 	handleUpload = true,
 	popoverProps,
+	renderToggle,
 } ) => {
 	const { getSettings } = useSelect( blockEditorStore );
-	const editMediaButtonRef = useRef();
 	const errorNoticeID = `block-editor/media-replace-flow/error-notice/${ ++uniqueId }`;
 
 	const onUploadError = ( message ) => {
@@ -133,17 +132,27 @@ const MediaReplaceFlow = ( {
 		<Dropdown
 			popoverProps={ popoverProps }
 			contentClassName="block-editor-media-replace-flow__options"
-			renderToggle={ ( { isOpen, onToggle } ) => (
-				<ToolbarButton
-					ref={ editMediaButtonRef }
-					aria-expanded={ isOpen }
-					aria-haspopup="true"
-					onClick={ onToggle }
-					onKeyDown={ openOnArrowDown }
-				>
-					{ name }
-				</ToolbarButton>
-			) }
+			renderToggle={ ( { isOpen, onToggle } ) => {
+				if ( renderToggle ) {
+					return renderToggle( {
+						'aria-expanded': isOpen,
+						'aria-haspopup': 'true',
+						onClick: onToggle,
+						onKeyDown: openOnArrowDown,
+						children: name,
+					} );
+				}
+				return (
+					<ToolbarButton
+						aria-expanded={ isOpen }
+						aria-haspopup="true"
+						onClick={ onToggle }
+						onKeyDown={ openOnArrowDown }
+					>
+						{ name }
+					</ToolbarButton>
+				);
+			} }
 			renderContent={ ( { onClose } ) => (
 				<>
 					<NavigableMenu className="block-editor-media-replace-flow__media-upload-menu">
@@ -222,7 +231,6 @@ const MediaReplaceFlow = ( {
 								showSuggestions={ false }
 								onChange={ ( { url } ) => {
 									onSelectURL( url );
-									editMediaButtonRef.current.focus();
 								} }
 							/>
 						</form>

diff --git a/packages/block-library/src/post-template/block.json b/packages/block-library/src/post-template/block.json
@@ -50,8 +50,8 @@
 			},
 			"__experimentalDefaultControls": {
 				"blockGap": true,
-				"padding" : false,
-				"margin" : false
+				"padding": false,
+				"margin": false
 			}
 		},
 		"interactivity": {