Trigger snackbar if you can't insert a block

WordPress · Sep 23, 2024 · 91cac7f · 91cac7f
1 parent d728620
commit 91cac7f
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 22 deletions.
diff --git a/packages/block-editor/src/components/inserter/hooks/use-block-types-state.js b/packages/block-editor/src/components/inserter/hooks/use-block-types-state.js
@@ -2,13 +2,16 @@
  * WordPress dependencies
  */
 import {
+	getBlockType,
 	createBlock,
 	createBlocksFromInnerBlocksTemplate,
 	store as blocksStore,
 	parse,
 } from '@wordpress/blocks';
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { useCallback, useMemo } from '@wordpress/element';
+import { store as noticesStore } from '@wordpress/notices';
+import { __, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -42,6 +45,7 @@ const useBlockTypesState = ( rootClientId, onInsert, isQuick ) => {
 	const { getClosestAllowedInsertionPoint } = unlock(
 		useSelect( blockEditorStore )
 	);
+	const { createErrorNotice } = useDispatch( noticesStore );
 
 	const [ categories, collections ] = useSelect( ( select ) => {
 		const { getCategories, getCollections } = select( blocksStore );
@@ -57,26 +61,38 @@ const useBlockTypesState = ( rootClientId, onInsert, isQuick ) => {
 				name,
 				rootClientId
 			);
-			if ( destinationClientId !== null ) {
-				const insertedBlock =
-					syncStatus === 'unsynced'
-						? parse( content, {
-								__unstableSkipMigrationLogs: true,
-						  } )
-						: createBlock(
-								name,
-								initialAttributes,
-								createBlocksFromInnerBlocksTemplate(
-									innerBlocks
-								)
-						  );
-				onInsert(
-					insertedBlock,
-					undefined,
-					shouldFocusBlock,
-					destinationClientId
+			if ( destinationClientId === null ) {
+				const title = getBlockType( name )?.title ?? name;
+				createErrorNotice(
+					sprintf(
+						/* translators: %s: block pattern title. */
+						__( 'Block "%s" can\'t be inserted.' ),
+						title
+					),
+					{
+						type: 'snackbar',
+						id: 'inserter-notice',
+					}
 				);
+				return;
 			}
+
+			const insertedBlock =
+				syncStatus === 'unsynced'
+					? parse( content, {
+							__unstableSkipMigrationLogs: true,
+					  } )
+					: createBlock(
+							name,
+							initialAttributes,
+							createBlocksFromInnerBlocksTemplate( innerBlocks )
+					  );
+			onInsert(
+				insertedBlock,
+				undefined,
+				shouldFocusBlock,
+				destinationClientId
+			);
 		},
 		[ onInsert, getClosestAllowedInsertionPoint, rootClientId ]
 	);

diff --git a/packages/block-editor/src/components/inserter/hooks/use-patterns-state.js b/packages/block-editor/src/components/inserter/hooks/use-patterns-state.js
@@ -87,7 +87,7 @@ const usePatternsState = ( onInsert, rootClientId, selectedCategory ) => {
 				),
 				{
 					type: 'snackbar',
-					id: 'block-pattern-inserted-notice',
+					id: 'inserter-notice',
 				}
 			);
 		},

diff --git a/packages/block-editor/src/components/inserter/media-tab/media-preview.js b/packages/block-editor/src/components/inserter/media-tab/media-preview.js
@@ -184,13 +184,16 @@ export function MediaPreview( { media, onClick, category } ) {
 							} );
 							createSuccessNotice(
 								__( 'Image uploaded and inserted.' ),
-								{ type: 'snackbar' }
+								{ type: 'snackbar', id: 'inserter-notice' }
 							);
 							setIsInserting( false );
 						},
 						allowedTypes: ALLOWED_MEDIA_TYPES,
 						onError( message ) {
-							createErrorNotice( message, { type: 'snackbar' } );
+							createErrorNotice( message, {
+								type: 'snackbar',
+								id: 'inserter-notice',
+							} );
 							setIsInserting( false );
 						},
 					} );
@@ -281,6 +284,7 @@ export function MediaPreview( { media, onClick, category } ) {
 						onClick( cloneBlock( block ) );
 						createSuccessNotice( __( 'Image inserted.' ), {
 							type: 'snackbar',
+							id: 'inserter-notice',
 						} );
 						setShowExternalUploadModal( false );
 					} }