Use Notice component for displaying error message

AlecRust · Jul 27, 2023 · d13cb6c · d13cb6c
1 parent 0126ccf
commit d13cb6c
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 4 deletions.
diff --git 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
@@ -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;
+  }
 }