Media Replace Flow: Add custom toggle support and fix button height (#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]>

Author: 6 people

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();

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 {

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.

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>

packages/block-library/src/post-template/block.json

@@ -50,8 +50,8 @@
 			},
 			"__experimentalDefaultControls": {
 				"blockGap": true,
-				"padding" : false,
-				"margin" : false
+				"padding": false,
+				"margin": false
 			}
 		},
 		"interactivity": {