MediaReplaceFlow: improve error customization

[retrofox]

Description

This PR adds some changes in order to be able to handle errors when something fails in the media replacing flow. It adds a filter to the component which allows catching the notices (among all other customizations that a filter provides) and also adds an optional onFilesUpload property helpful when we want to know files to upload.

How to use it

The following example shows how to change the status and description of all notices.

const customizeReplaceButton = createHigherOrderComponent(
	MediaReplaceFlow => props => {
		return <MediaReplaceFlow
			{ ...props }
			createNotice={ ( status, content, options ) => {
				props.createNotice(
					'info',
					'Dont worry be Happy',
					options
				);
			} }
		/>;
	},
	'coverEditMediaPlaceholder'
);

addFilter( 'editor.MediaReplaceFlow', 'me/customize', customizeReplaceButton );

How has this been tested?

These changes shouldn't modify the MediaReplaceFlow API which means that everything should be ok when you upload a new media using the Replace button. It's available in many blocks, for instance core/cover.
So the first testing is replacing a media from this button.

Also, you could modify how the Replace button renders, binding a function to the filter hook. The example shown above is a good and valid example of how to do it. In the following, I've replaced the staus of the notice always to info, even when I try to upload an invalid file. Also, added an example of how to use onFilesUpload property:

const customizeReplaceButton = createHigherOrderComponent(
	MediaReplaceFlow => props => {
		return <MediaReplaceFlow
			{ ...props }
			createNotice={ ( status, content, options ) => {
				props.createNotice(
					'info',
					'Dont worry be Happy',
					options
				);
			} }
			onFilesUpload= { ( files ) => console.log( `Uploading ${ files.length } files...` ) } 
		/>;
	},
	'coverEditMediaPlaceholder'
);

addFilter( 'editor.MediaReplaceFlow', 'me/customize', customizeReplaceButton );

Screenshots

Types of changes

Checklist:

• My code is tested.
• [ x My code follows the WordPress code style.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.

[github-actions]

Size Change: +1.52 kB (0%)

Total Size: 1.13 MB

Filename	Size	Change
build/a11y/index.js	1.14 kB	-1 B
build/block-editor/index.js	106 kB	-78 B (0%)
build/block-editor/style-rtl.css	11.8 kB	+374 B (3%)
build/block-editor/style.css	11.8 kB	+369 B (3%)
build/block-library/editor-rtl.css	7.88 kB	+14 B (0%)
build/block-library/editor.css	7.89 kB	+13 B (0%)
build/block-library/index.js	127 kB	+380 B (0%)
build/block-library/style-rtl.css	7.72 kB	+2 B (0%)
build/block-library/style.css	7.72 kB	+7 B (0%)
build/block-serialization-default-parser/index.js	1.88 kB	+1 B
build/blocks/index.js	48.1 kB	+1 B
build/components/index.js	195 kB	+415 B (0%)
build/components/style-rtl.css	19.5 kB	+9 B (0%)
build/components/style.css	19.5 kB	+7 B (0%)
build/core-data/index.js	11.4 kB	-3 B (0%)
build/data-controls/index.js	1.29 kB	-2 B (0%)
build/data/index.js	8.45 kB	-2 B (0%)
build/date/index.js	5.47 kB	-3 B (0%)
build/deprecated/index.js	772 B	+1 B
build/dom/index.js	3.17 kB	-1 B
build/edit-post/index.js	303 kB	-2 B (0%)
build/edit-site/index.js	15.5 kB	+25 B (0%)
build/edit-widgets/index.js	9.34 kB	+1 B
build/editor/index.js	44.8 kB	-3 B (0%)
build/element/index.js	4.64 kB	-1 B
build/is-shallow-equal/index.js	710 B	-1 B
build/keyboard-shortcuts/index.js	2.52 kB	+2 B (0%)
build/media-utils/index.js	5.3 kB	-1 B
build/plugins/index.js	2.56 kB	-1 B
build/rich-text/index.js	14.8 kB	-1 B
build/token-list/index.js	1.28 kB	+1 B
build/url/index.js	4.06 kB	+2 B (0%)

ℹ️ View Unchanged

Filename	Size	Change
build/annotations/index.js	3.62 kB	0 B
build/api-fetch/index.js	3.4 kB	0 B
build/autop/index.js	2.83 kB	0 B
build/blob/index.js	620 B	0 B
build/block-directory/index.js	6.77 kB	0 B
build/block-directory/style-rtl.css	892 B	0 B
build/block-directory/style.css	892 B	0 B
build/block-library/theme-rtl.css	684 B	0 B
build/block-library/theme.css	686 B	0 B
build/block-serialization-spec-parser/index.js	3.1 kB	0 B
build/compose/index.js	9.31 kB	0 B
build/dom-ready/index.js	569 B	0 B
build/edit-navigation/index.js	8.25 kB	0 B
build/edit-navigation/style-rtl.css	918 B	0 B
build/edit-navigation/style.css	919 B	0 B
build/edit-post/style-rtl.css	5.6 kB	0 B
build/edit-post/style.css	5.6 kB	0 B
build/edit-site/style-rtl.css	2.96 kB	0 B
build/edit-site/style.css	2.96 kB	0 B
build/edit-widgets/style-rtl.css	2.4 kB	0 B
build/edit-widgets/style.css	2.4 kB	0 B
build/editor/editor-styles-rtl.css	425 B	0 B
build/editor/editor-styles.css	428 B	0 B
build/editor/style-rtl.css	4.26 kB	0 B
build/editor/style.css	4.27 kB	0 B
build/escape-html/index.js	733 B	0 B
build/format-library/index.js	7.72 kB	0 B
build/format-library/style-rtl.css	502 B	0 B
build/format-library/style.css	502 B	0 B
build/hooks/index.js	2.13 kB	0 B
build/html-entities/index.js	621 B	0 B
build/i18n/index.js	3.56 kB	0 B
build/keycodes/index.js	1.94 kB	0 B
build/list-reusable-blocks/index.js	3.12 kB	0 B
build/list-reusable-blocks/style-rtl.css	226 B	0 B
build/list-reusable-blocks/style.css	226 B	0 B
build/notices/index.js	1.79 kB	0 B
build/nux/index.js	3.41 kB	0 B
build/nux/style-rtl.css	616 B	0 B
build/nux/style.css	613 B	0 B
build/primitives/index.js	1.5 kB	0 B
build/priority-queue/index.js	789 B	0 B
build/redux-routine/index.js	2.85 kB	0 B
build/server-side-render/index.js	2.68 kB	0 B
build/shortcode/index.js	1.7 kB	0 B
build/viewport/index.js	1.85 kB	0 B
build/warning/index.js	1.14 kB	0 B
build/wordcount/index.js	1.17 kB	0 B

_{compressed-size-action}

[draganescu]

I went through this PR and the one thing I would like to ask is if we shouldn't add the same kind of middleware like onFilesUpload for all the three possible kinds of actions in the media replace dropdown, like onMediaFileSelect and onURLChange. What do you think @retrofox ?

[retrofox]

I went through this PR and the one thing I would like to ask is if we shouldn't add the same kind of middleware like onFilesUpload for all the three possible kinds of actions in the media replace dropdown, like onMediaFileSelect and onURLChange. What do you think @retrofox ?

are these tackled by onSelect and onSelectURL properties?

[draganescu]

:))) yes you are right @retrofox, all the other actions are handled, so this is perfect, basically adding consistency, great work.