adds errors to the media replace control

WordPress · Jan 6, 2020 · 8417c49 · 8417c49
1 parent 6bf89a4
commit 8417c49
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 1 deletion.
diff --git a/packages/block-editor/src/components/media-replace-flow/index.js b/packages/block-editor/src/components/media-replace-flow/index.js
@@ -38,8 +38,9 @@ const MediaReplaceFlow = (
 		allowedTypes,
 		accept,
 		onSelect,
+		noticeOperations,
+		noticeUI,
 		onSelectURL,
-		onError,
 		name = __( 'Replace' ),
 	}
 ) => {
@@ -62,6 +63,11 @@ const MediaReplaceFlow = (
 		}
 	};
 
+	const onError = ( message ) => {
+		noticeOperations.removeAllNotices();
+		noticeOperations.createErrorNotice( message );
+	};
+
 	const selectMedia = ( media ) => {
 		onSelect( media );
 		setMediaURLValue( media.url );
@@ -185,6 +191,9 @@ const MediaReplaceFlow = (
 					{ showURLInput && <div className="block-editor-media-flow__url-input">
 						{ urlInputUIContent }
 					</div> }
+					{ noticeUI && <div className="block-editor-media-flow__error">
+						{ noticeUI }
+					</div> }
 				</>
 			) }
 		/>

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 {