adds errors to the media replace control

WordPress · Feb 6, 2020 · e1d553d · e1d553d
1 parent cbda33e
commit e1d553d
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 5 deletions.
diff --git a/packages/block-editor/src/components/media-replace-flow/index.js b/packages/block-editor/src/components/media-replace-flow/index.js
@@ -1,7 +1,12 @@
+/**
+ * External dependencies
+ */
+import { uniqueId } from 'lodash';
+
 /**
  * WordPress dependencies
  */
-import { useState, createRef } from '@wordpress/element';
+import { useState, createRef, renderToString } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { speak } from '@wordpress/a11y';
 import {
@@ -11,10 +16,9 @@ import {
 	ToolbarGroup,
 	Button,
 	Dropdown,
-	withNotices,
 } from '@wordpress/components';
+import { withDispatch, useSelect } from '@wordpress/data';
 import { LEFT, RIGHT, UP, DOWN, BACKSPACE, ENTER } from '@wordpress/keycodes';
-import { useSelect } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
 
 /**
@@ -31,8 +35,9 @@ const MediaReplaceFlow = ( {
 	accept,
 	onSelect,
 	onSelectURL,
-	onError,
 	name = __( 'Replace' ),
+	createNotice,
+	removeNotice,
 } ) => {
 	const [ showURLInput, setShowURLInput ] = useState( false );
 	const [ showEditURLInput, setShowEditURLInput ] = useState( false );
@@ -41,6 +46,7 @@ const MediaReplaceFlow = ( {
 		return select( 'core/block-editor' ).getSettings().mediaUpload;
 	}, [] );
 	const editMediaButtonRef = createRef();
+	const errorNoticeID = uniqueId();
 
 	const stopPropagation = ( event ) => {
 		event.stopPropagation();
@@ -57,10 +63,20 @@ const MediaReplaceFlow = ( {
 		}
 	};
 
+	const onError = ( message ) => {
+		createNotice( 'error', renderToString( message ), {
+			speak: true,
+			id: errorNoticeID,
+			isDismissible: true,
+			__unstableHTML: true,
+		} );
+	};
+
 	const selectMedia = ( media ) => {
 		onSelect( media );
 		setMediaURLValue( media.url );
 		speak( __( 'The media file has been replaced' ) );
+		removeNotice( errorNoticeID );
 	};
 
 	const selectURL = ( newURL ) => {
@@ -191,4 +207,12 @@ const MediaReplaceFlow = ( {
 	);
 };
 
-export default compose( withNotices )( MediaReplaceFlow );
+export default compose( [
+	withDispatch( ( dispatch ) => {
+		const { createNotice, removeNotice } = dispatch( 'core/notices' );
+		return {
+			createNotice,
+			removeNotice,
+		};
+	} ),
+] )( MediaReplaceFlow );
diff --git a/packages/block-editor/src/components/media-replace-flow/style.scss b/packages/block-editor/src/components/media-replace-flow/style.scss
@@ -23,6 +23,24 @@
 	}
 }
 
+.block-editor-media-flow__error {
+	padding: 0 20px 20px 20px;
+	max-width: 255px;
+
+	.components-with-notices-ui {
+		max-width: 255px;
+
+		.components-notice__content {
+			overflow: hidden;
+			word-wrap: break-word;
+		}
+		.components-notice__dismiss {
+			position: absolute;
+			right: 10px;
+		}
+	}
+}
+
 .block-editor-media-replace-flow__link-viewer {
 	// Overflow is not working properly if we show the icon.
 	.components-external-link__icon {