Skip to content

Commit aa2e342

Browse files
akasunilakasunilMamadukaramonjdandrewserong
authored
Add 'Reset' option to MediaReplaceFlow component (#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 <sunil25393@git.wordpress.org> Co-authored-by: Mamaduka <mamaduka@git.wordpress.org> Co-authored-by: ramonjd <ramonopoly@git.wordpress.org> Co-authored-by: andrewserong <andrewserong@git.wordpress.org> Co-authored-by: jasmussen <joen@git.wordpress.org>
1 parent a9f239b commit aa2e342

10 files changed

Lines changed: 40 additions & 56 deletions

File tree

‎packages/block-editor/src/components/global-styles/background-panel.js‎

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -432,6 +432,10 @@ function BackgroundImageControls( {
432432
}
433433
variant="secondary"
434434
onError={ onUploadError }
435+
onReset={ () => {
436+
closeAndFocus();
437+
onResetImage();
438+
} }
435439
>
436440
{ canRemove && (
437441
<MenuItem
@@ -444,16 +448,6 @@ function BackgroundImageControls( {
444448
{ __( 'Remove' ) }
445449
</MenuItem>
446450
) }
447-
{ hasValue && (
448-
<MenuItem
449-
onClick={ () => {
450-
closeAndFocus();
451-
onResetImage();
452-
} }
453-
>
454-
{ __( 'Reset' ) }
455-
</MenuItem>
456-
) }
457451
</MediaReplaceFlow>
458452
<DropZone
459453
onFilesDrop={ onFilesDrop }

‎packages/block-editor/src/components/media-replace-flow/index.js‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ const MediaReplaceFlow = ( {
4848
onError,
4949
onSelect,
5050
onSelectURL,
51+
onReset,
5152
onToggleFeaturedImage,
5253
useFeaturedImage,
5354
onFilesUpload = noop,
@@ -75,7 +76,7 @@ const MediaReplaceFlow = ( {
7576
}
7677
// We need to set a timeout for showing the notice
7778
// so that VoiceOver and possibly other screen readers
78-
// can announce the error afer the toolbar button
79+
// can announce the error after the toolbar button
7980
// regains focus once the upload dialog closes.
8081
// Otherwise VO simply skips over the notice and announces
8182
// the focused element and the open menu.
@@ -202,6 +203,16 @@ const MediaReplaceFlow = ( {
202203
{ __( 'Use featured image' ) }
203204
</MenuItem>
204205
) }
206+
{ mediaURL && onReset && (
207+
<MenuItem
208+
onClick={ () => {
209+
onReset();
210+
onClose();
211+
} }
212+
>
213+
{ __( 'Reset' ) }
214+
</MenuItem>
215+
) }
205216
{ typeof children === 'function'
206217
? children( { onClose } )
207218
: children }

‎packages/block-library/src/audio/edit.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -155,6 +155,7 @@ function AudioEdit( {
155155
onSelect={ onSelectAudio }
156156
onSelectURL={ onSelectURL }
157157
onError={ onUploadError }
158+
onReset={ () => onSelectAudio( undefined ) }
158159
/>
159160
</BlockControls>
160161
) }

‎packages/block-library/src/cover/edit/block-controls.js‎

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import {
1010
__experimentalBlockFullHeightAligmentControl as FullHeightAlignmentControl,
1111
privateApis as blockEditorPrivateApis,
1212
} from '@wordpress/block-editor';
13-
import { MenuItem } from '@wordpress/components';
1413
import { __ } from '@wordpress/i18n';
1514

1615
/**
@@ -103,16 +102,8 @@ export default function CoverBlockControls( {
103102
onToggleFeaturedImage={ toggleUseFeaturedImage }
104103
useFeaturedImage={ useFeaturedImage }
105104
name={ ! url ? __( 'Add Media' ) : __( 'Replace' ) }
106-
>
107-
{ !! url && (
108-
<MenuItem
109-
className="block-library-cover__reset-button"
110-
onClick={ onClearMedia }
111-
>
112-
{ __( 'Reset' ) }
113-
</MenuItem>
114-
) }
115-
</MediaReplaceFlow>
105+
onReset={ onClearMedia }
106+
/>
116107
</BlockControls>
117108
</>
118109
);

‎packages/block-library/src/file/edit.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,16 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
109109

110110
function onSelectFile( newMedia ) {
111111
if ( ! newMedia || ! newMedia.url ) {
112+
// Reset attributes.
113+
setAttributes( {
114+
href: undefined,
115+
fileName: undefined,
116+
textLinkHref: undefined,
117+
id: undefined,
118+
fileId: undefined,
119+
displayPreview: undefined,
120+
previewHeight: undefined,
121+
} );
112122
setTemporaryURL();
113123
return;
114124
}
@@ -230,6 +240,7 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
230240
accept="*"
231241
onSelect={ onSelectFile }
232242
onError={ onUploadError }
243+
onReset={ () => onSelectFile( undefined ) }
233244
/>
234245
<ClipboardToolbarButton
235246
text={ href }

‎packages/block-library/src/image/image.js‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
*/
44
import { isBlobURL } from '@wordpress/blob';
55
import {
6-
MenuItem,
76
ExternalLink,
87
ResizableBox,
98
Spinner,
@@ -603,11 +602,8 @@ export default function Image( {
603602
onSelect={ onSelectImage }
604603
onSelectURL={ onSelectURL }
605604
onError={ onUploadError }
606-
>
607-
<MenuItem onClick={ () => onSelectImage( undefined ) }>
608-
{ __( 'Reset' ) }
609-
</MenuItem>
610-
</MediaReplaceFlow>
605+
onReset={ () => onSelectImage( undefined ) }
606+
/>
611607
</BlockControls>
612608
) }
613609
{ isSingleSelected && externalBlob && (

‎packages/block-library/src/media-text/media-container.js‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -62,22 +62,18 @@ function ToolbarEditButton( {
6262
onSelectMedia,
6363
toggleUseFeaturedImage,
6464
useFeaturedImage,
65-
featuredImageURL,
6665
} ) {
6766
return (
6867
<BlockControls group="other">
6968
<MediaReplaceFlow
7069
mediaId={ mediaId }
71-
mediaUrl={
72-
useFeaturedImage && featuredImageURL
73-
? featuredImageURL
74-
: mediaUrl
75-
}
70+
mediaURL={ mediaUrl }
7671
allowedTypes={ ALLOWED_MEDIA_TYPES }
7772
accept="image/*,video/*"
7873
onSelect={ onSelectMedia }
7974
onToggleFeaturedImage={ toggleUseFeaturedImage }
8075
useFeaturedImage={ useFeaturedImage }
76+
onReset={ () => onSelectMedia( undefined ) }
8177
/>
8278
</BlockControls>
8379
);
@@ -200,7 +196,6 @@ function MediaContainer( props, ref ) {
200196
}
201197
mediaId={ mediaId }
202198
toggleUseFeaturedImage={ toggleUseFeaturedImage }
203-
useFeaturedImage={ useFeaturedImage }
204199
/>
205200
{ ( mediaTypeRenderers[ mediaType ] || noop )() }
206201
{ isTemporaryMedia && <Spinner /> }

‎packages/block-library/src/post-featured-image/edit.js‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import { isBlobURL } from '@wordpress/blob';
1010
import { useEntityProp, store as coreStore } from '@wordpress/core-data';
1111
import { useSelect, useDispatch } from '@wordpress/data';
1212
import {
13-
MenuItem,
1413
ToggleControl,
1514
PanelBody,
1615
Placeholder,
@@ -368,11 +367,8 @@ export default function PostFeaturedImageEdit( {
368367
accept="image/*"
369368
onSelect={ onSelectImage }
370369
onError={ onUploadError }
371-
>
372-
<MenuItem onClick={ () => setFeaturedImage( 0 ) }>
373-
{ __( 'Reset' ) }
374-
</MenuItem>
375-
</MediaReplaceFlow>
370+
onReset={ () => setFeaturedImage( 0 ) }
371+
/>
376372
</BlockControls>
377373
) }
378374
<figure { ...blockProps }>

‎packages/block-library/src/site-logo/edit.js‎

Lines changed: 3 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ import {
1414
} from '@wordpress/element';
1515
import { __, isRTL } from '@wordpress/i18n';
1616
import {
17-
MenuItem,
1817
PanelBody,
1918
RangeControl,
2019
ResizableBox,
@@ -356,22 +355,11 @@ function SiteLogoReplaceFlow( {
356355
return (
357356
<MediaReplaceFlow
358357
{ ...mediaReplaceProps }
358+
mediaURL={ mediaURL }
359359
allowedTypes={ ALLOWED_MEDIA_TYPES }
360360
accept={ ACCEPT_MEDIA_STRING }
361-
>
362-
{ ( { onClose } ) =>
363-
mediaURL && (
364-
<MenuItem
365-
onClick={ () => {
366-
onRemoveLogo();
367-
onClose();
368-
} }
369-
>
370-
{ __( 'Reset' ) }
371-
</MenuItem>
372-
)
373-
}
374-
</MediaReplaceFlow>
361+
onReset={ onRemoveLogo }
362+
/>
375363
);
376364
}
377365

‎packages/block-library/src/video/edit.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -208,6 +208,7 @@ function VideoEdit( {
208208
onSelect={ onSelectVideo }
209209
onSelectURL={ onSelectURL }
210210
onError={ onUploadError }
211+
onReset={ () => onSelectVideo( undefined ) }
211212
/>
212213
</BlockControls>
213214
</>

0 commit comments

Comments
 (0)