From 6416a4885dcbec72e7a8ca9ac7589e69fe01c6da Mon Sep 17 00:00:00 2001
From: Staci Cooper <63313398+stacimc@users.noreply.github.com>
Date: Wed, 6 Oct 2021 22:12:53 -0700
Subject: [PATCH] Site Logo: Move Reset button to the Replace menu dropdown
 (#35372)

* Move Reset button to the Replace menu dropdown
* Use reset icon instead of trash icon
---
 .../src/components/media-replace-flow/README.md     |  7 +++++++
 .../src/components/media-replace-flow/index.js      |  2 ++
 packages/block-library/src/site-logo/edit.js        | 13 ++++++-------
 3 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/packages/block-editor/src/components/media-replace-flow/README.md b/packages/block-editor/src/components/media-replace-flow/README.md
index 2f462b9414da4..8a7b012ea4152 100644
--- a/packages/block-editor/src/components/media-replace-flow/README.md
+++ b/packages/block-editor/src/components/media-replace-flow/README.md
@@ -76,3 +76,10 @@ Removes a media replace notice.
 
 -   Type: `func`
 -   Required: No
+
+### children
+
+-   Type: `Element`
+-   Required: No
+
+If passed, children are rendered inside the dropdown.
diff --git a/packages/block-editor/src/components/media-replace-flow/index.js b/packages/block-editor/src/components/media-replace-flow/index.js
index 57d6c1c371322..3cd8e0f1755ae 100644
--- a/packages/block-editor/src/components/media-replace-flow/index.js
+++ b/packages/block-editor/src/components/media-replace-flow/index.js
@@ -42,6 +42,7 @@ const MediaReplaceFlow = ( {
 	name = __( 'Replace' ),
 	createNotice,
 	removeNotice,
+	children,
 } ) => {
 	const [ mediaURLValue, setMediaURLValue ] = useState( mediaURL );
 	const mediaUpload = useSelect( ( select ) => {
@@ -161,6 +162,7 @@ const MediaReplaceFlow = ( {
 								} }
 							/>
 						</MediaUploadCheck>
+						{ children }
 					</NavigableMenu>
 					{ onSelectURL && (
 						// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
diff --git a/packages/block-library/src/site-logo/edit.js b/packages/block-library/src/site-logo/edit.js
index ff6e93ee02a8d..f6f0aac9ca799 100644
--- a/packages/block-library/src/site-logo/edit.js
+++ b/packages/block-library/src/site-logo/edit.js
@@ -11,6 +11,7 @@ import { isBlobURL } from '@wordpress/blob';
 import { useEffect, useState, useRef } from '@wordpress/element';
 import { __, isRTL } from '@wordpress/i18n';
 import {
+	MenuItem,
 	Notice,
 	PanelBody,
 	RangeControl,
@@ -18,7 +19,6 @@ import {
 	Spinner,
 	ToggleControl,
 	ToolbarButton,
-	ToolbarGroup,
 	Placeholder,
 } from '@wordpress/components';
 import { useViewportMatch } from '@wordpress/compose';
@@ -35,7 +35,7 @@ import {
 } from '@wordpress/block-editor';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
-import { crop, siteLogo as icon } from '@wordpress/icons';
+import { crop, reset, siteLogo as icon } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -398,12 +398,11 @@ export default function LogoEdit( {
 				accept={ ACCEPT_MEDIA_STRING }
 				onSelect={ onSelectLogo }
 				onError={ onUploadError }
-			/>
-			<ToolbarGroup>
-				<ToolbarButton onClick={ onRemoveLogo }>
+			>
+				<MenuItem icon={ reset } onClick={ onRemoveLogo }>
 					{ __( 'Reset' ) }
-				</ToolbarButton>
-			</ToolbarGroup>
+				</MenuItem>
+			</MediaReplaceFlow>
 		</BlockControls>
 	);