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
WordPress · Oct 7, 2021 · 6416a48 · 6416a48
1 parent 1264b12
commit 6416a48
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 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
@@ -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
@@ -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
@@ -11,14 +11,14 @@ import { isBlobURL } from '@wordpress/blob';
 import { useEffect, useState, useRef } from '@wordpress/element';
 import { __, isRTL } from '@wordpress/i18n';
 import {
+	MenuItem,
 	Notice,
 	PanelBody,
 	RangeControl,
 	ResizableBox,
 	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>
 	);