Add 'Reset' option to MediaReplaceFlow component (WordPress#64826)

* Add reset option in MediaReplaceFlow component * Add media reset option in toolbar of media-text block * Refactor MediaReplaceFlow component use in cover, image and post-featured-image blocks * Refactor MediaReplaceFlow component use in site-logo block * Refactor BackgroundImageControls component under global styles * Add media reset option in video, audio and file blocks * Fix onReset argument value error on image block * Remove unused MenuItem component from blocks * Reset attribute on reset option click in file block * Fix issue of reset option in media-text block Co-authored-by: akasunil <[email protected]> Co-authored-by: Mamaduka <[email protected]> Co-authored-by: ramonjd <[email protected]> Co-authored-by: andrewserong <[email protected]> Co-authored-by: jasmussen <[email protected]>
bph · Aug 31, 2024 · d24eaa6 · d24eaa6
1 parent 51b9054
commit d24eaa6
Show file tree

Hide file tree

Showing 10 changed files with 40 additions and 56 deletions.
diff --git a/packages/block-editor/src/components/global-styles/background-panel.js b/packages/block-editor/src/components/global-styles/background-panel.js
@@ -432,6 +432,10 @@ function BackgroundImageControls( {
 				}
 				variant="secondary"
 				onError={ onUploadError }
+				onReset={ () => {
+					closeAndFocus();
+					onResetImage();
+				} }
 			>
 				{ canRemove && (
 					<MenuItem
@@ -444,16 +448,6 @@ function BackgroundImageControls( {
 						{ __( 'Remove' ) }
 					</MenuItem>
 				) }
-				{ hasValue && (
-					<MenuItem
-						onClick={ () => {
-							closeAndFocus();
-							onResetImage();
-						} }
-					>
-						{ __( 'Reset' ) }
-					</MenuItem>
-				) }
 			</MediaReplaceFlow>
 			<DropZone
 				onFilesDrop={ onFilesDrop }

diff --git a/packages/block-editor/src/components/media-replace-flow/index.js b/packages/block-editor/src/components/media-replace-flow/index.js
@@ -48,6 +48,7 @@ const MediaReplaceFlow = ( {
 	onError,
 	onSelect,
 	onSelectURL,
+	onReset,
 	onToggleFeaturedImage,
 	useFeaturedImage,
 	onFilesUpload = noop,
@@ -75,7 +76,7 @@ const MediaReplaceFlow = ( {
 		}
 		// We need to set a timeout for showing the notice
 		// so that VoiceOver and possibly other screen readers
-		// can announce the error afer the toolbar button
+		// can announce the error after the toolbar button
 		// regains focus once the upload dialog closes.
 		// Otherwise VO simply skips over the notice and announces
 		// the focused element and the open menu.
@@ -202,6 +203,16 @@ const MediaReplaceFlow = ( {
 								{ __( 'Use featured image' ) }
 							</MenuItem>
 						) }
+						{ mediaURL && onReset && (
+							<MenuItem
+								onClick={ () => {
+									onReset();
+									onClose();
+								} }
+							>
+								{ __( 'Reset' ) }
+							</MenuItem>
+						) }
 						{ typeof children === 'function'
 							? children( { onClose } )
 							: children }

diff --git a/packages/block-library/src/audio/edit.js b/packages/block-library/src/audio/edit.js
@@ -155,6 +155,7 @@ function AudioEdit( {
 						onSelect={ onSelectAudio }
 						onSelectURL={ onSelectURL }
 						onError={ onUploadError }
+						onReset={ () => onSelectAudio( undefined ) }
 					/>
 				</BlockControls>
 			) }

diff --git a/packages/block-library/src/cover/edit/block-controls.js b/packages/block-library/src/cover/edit/block-controls.js
@@ -10,7 +10,6 @@ import {
 	__experimentalBlockFullHeightAligmentControl as FullHeightAlignmentControl,
 	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
-import { MenuItem } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -103,16 +102,8 @@ export default function CoverBlockControls( {
 					onToggleFeaturedImage={ toggleUseFeaturedImage }
 					useFeaturedImage={ useFeaturedImage }
 					name={ ! url ? __( 'Add Media' ) : __( 'Replace' ) }
-				>
-					{ !! url && (
-						<MenuItem
-							className="block-library-cover__reset-button"
-							onClick={ onClearMedia }
-						>
-							{ __( 'Reset' ) }
-						</MenuItem>
-					) }
-				</MediaReplaceFlow>
+					onReset={ onClearMedia }
+				/>
 			</BlockControls>
 		</>
 	);

diff --git a/packages/block-library/src/file/edit.js b/packages/block-library/src/file/edit.js
@@ -109,6 +109,16 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 
 	function onSelectFile( newMedia ) {
 		if ( ! newMedia || ! newMedia.url ) {
+			// Reset attributes.
+			setAttributes( {
+				href: undefined,
+				fileName: undefined,
+				textLinkHref: undefined,
+				id: undefined,
+				fileId: undefined,
+				displayPreview: undefined,
+				previewHeight: undefined,
+			} );
 			setTemporaryURL();
 			return;
 		}
@@ -230,6 +240,7 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 					accept="*"
 					onSelect={ onSelectFile }
 					onError={ onUploadError }
+					onReset={ () => onSelectFile( undefined ) }
 				/>
 				<ClipboardToolbarButton
 					text={ href }

diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js
@@ -3,7 +3,6 @@
  */
 import { isBlobURL } from '@wordpress/blob';
 import {
-	MenuItem,
 	ExternalLink,
 	ResizableBox,
 	Spinner,
@@ -603,11 +602,8 @@ export default function Image( {
 						onSelect={ onSelectImage }
 						onSelectURL={ onSelectURL }
 						onError={ onUploadError }
-					>
-						<MenuItem onClick={ () => onSelectImage( undefined ) }>
-							{ __( 'Reset' ) }
-						</MenuItem>
-					</MediaReplaceFlow>
+						onReset={ () => onSelectImage( undefined ) }
+					/>
 				</BlockControls>
 			) }
 			{ isSingleSelected && externalBlob && (

diff --git a/packages/block-library/src/media-text/media-container.js b/packages/block-library/src/media-text/media-container.js
@@ -62,22 +62,18 @@ function ToolbarEditButton( {
 	onSelectMedia,
 	toggleUseFeaturedImage,
 	useFeaturedImage,
-	featuredImageURL,
 } ) {
 	return (
 		<BlockControls group="other">
 			<MediaReplaceFlow
 				mediaId={ mediaId }
-				mediaUrl={
-					useFeaturedImage && featuredImageURL
-						? featuredImageURL
-						: mediaUrl
-				}
+				mediaURL={ mediaUrl }
 				allowedTypes={ ALLOWED_MEDIA_TYPES }
 				accept="image/*,video/*"
 				onSelect={ onSelectMedia }
 				onToggleFeaturedImage={ toggleUseFeaturedImage }
 				useFeaturedImage={ useFeaturedImage }
+				onReset={ () => onSelectMedia( undefined ) }
 			/>
 		</BlockControls>
 	);
@@ -200,7 +196,6 @@ function MediaContainer( props, ref ) {
 					}
 					mediaId={ mediaId }
 					toggleUseFeaturedImage={ toggleUseFeaturedImage }
-					useFeaturedImage={ useFeaturedImage }
 				/>
 				{ ( mediaTypeRenderers[ mediaType ] || noop )() }
 				{ isTemporaryMedia && <Spinner /> }

diff --git a/packages/block-library/src/post-featured-image/edit.js b/packages/block-library/src/post-featured-image/edit.js
@@ -10,7 +10,6 @@ import { isBlobURL } from '@wordpress/blob';
 import { useEntityProp, store as coreStore } from '@wordpress/core-data';
 import { useSelect, useDispatch } from '@wordpress/data';
 import {
-	MenuItem,
 	ToggleControl,
 	PanelBody,
 	Placeholder,
@@ -368,11 +367,8 @@ export default function PostFeaturedImageEdit( {
 						accept="image/*"
 						onSelect={ onSelectImage }
 						onError={ onUploadError }
-					>
-						<MenuItem onClick={ () => setFeaturedImage( 0 ) }>
-							{ __( 'Reset' ) }
-						</MenuItem>
-					</MediaReplaceFlow>
+						onReset={ () => setFeaturedImage( 0 ) }
+					/>
 				</BlockControls>
 			) }
 			<figure { ...blockProps }>

diff --git a/packages/block-library/src/site-logo/edit.js b/packages/block-library/src/site-logo/edit.js
@@ -14,7 +14,6 @@ import {
 } from '@wordpress/element';
 import { __, isRTL } from '@wordpress/i18n';
 import {
-	MenuItem,
 	PanelBody,
 	RangeControl,
 	ResizableBox,
@@ -356,22 +355,11 @@ function SiteLogoReplaceFlow( {
 	return (
 		<MediaReplaceFlow
 			{ ...mediaReplaceProps }
+			mediaURL={ mediaURL }
 			allowedTypes={ ALLOWED_MEDIA_TYPES }
 			accept={ ACCEPT_MEDIA_STRING }
-		>
-			{ ( { onClose } ) =>
-				mediaURL && (
-					<MenuItem
-						onClick={ () => {
-							onRemoveLogo();
-							onClose();
-						} }
-					>
-						{ __( 'Reset' ) }
-					</MenuItem>
-				)
-			}
-		</MediaReplaceFlow>
+			onReset={ onRemoveLogo }
+		/>
 	);
 }
 

diff --git a/packages/block-library/src/video/edit.js b/packages/block-library/src/video/edit.js
@@ -208,6 +208,7 @@ function VideoEdit( {
 							onSelect={ onSelectVideo }
 							onSelectURL={ onSelectURL }
 							onError={ onUploadError }
+							onReset={ () => onSelectVideo( undefined ) }
 						/>
 					</BlockControls>
 				</>