From d13cb6cb966c634de67de46e0cbaa9968c070d35 Mon Sep 17 00:00:00 2001
From: Alec Rust <me@alecrust.com>
Date: Thu, 27 Jul 2023 14:41:40 +0100
Subject: [PATCH] Use Notice component for displaying error message

---
 src/edit.js     | 12 ++++++++----
 src/editor.scss |  6 ++++++
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/edit.js b/src/edit.js
index bc3175b..41ba06a 100644
--- a/src/edit.js
+++ b/src/edit.js
@@ -1,6 +1,6 @@
 import { __ } from '@wordpress/i18n'
 import { useBlockProps, BlockIcon } from '@wordpress/block-editor' // eslint-disable-line no-unused-vars
-import { Placeholder, TextControl } from '@wordpress/components' // eslint-disable-line no-unused-vars
+import { Placeholder, TextControl, Notice } from '@wordpress/components' // eslint-disable-line no-unused-vars
 import { pluginIcon } from './icons'
 import getVideoId from 'get-video-id'
 
@@ -69,12 +69,16 @@ export default function Edit({ attributes, setAttributes }) {
         />
         {videoUrl && (
           <div>
-            {videoId
-              ? renderVideoThumb()
-              : __(
+            {videoId ? (
+              renderVideoThumb()
+            ) : (
+              <Notice status="error" isDismissible={false}>
+                {__(
                   'Sorry, a video ID could not be found in that URL.',
                   'protected-video'
                 )}
+              </Notice>
+            )}
           </div>
         )}
       </Placeholder>
diff --git a/src/editor.scss b/src/editor.scss
index 4aaaa26..5648122 100644
--- a/src/editor.scss
+++ b/src/editor.scss
@@ -5,4 +5,10 @@
 /* Override flex layout in editor */
 .wp-block-protected-video-protected-video .components-placeholder__fieldset {
   flex-direction: column;
+
+  /* Disable default flash margin */
+  .components-notice {
+    margin-left: 0;
+    margin-right: 0;
+  }
 }