Current state

Signed-off-by: brookewp <[email protected]>

Author: brookewp

example/rest-api/art-institute/art-institute.php

@@ -21,7 +21,7 @@ function register_aic_block(): void {
 		'service_config' => [
 			'__version' => 1,
 			'display_name' => 'Art Institute of Chicago',
-			'endpoint' => 'https://api.artic.edu/api/v1/artworks',
+			'endpoint' => 'https://api.artic.edu/api!/v1/artworks',
 			'request_headers' => [
 				'Content-Type' => 'application/json',
 			],

remote-data-blocks.php

@@ -55,3 +55,4 @@
 // Plugin developers: If you need to register additional code for testing, you
 // can do so here, e.g.:
 // require_once __DIR__ . '/example/shopify/register.php';
+require_once __DIR__ . '/example/rest-api/art-institute/art-institute.php';

src/blocks/remote-data-container/edit.tsx

@@ -8,6 +8,7 @@ import { DataPanel } from '@/blocks/remote-data-container/components/panels/Data
 import { OverridesPanel } from '@/blocks/remote-data-container/components/panels/OverridesPanel';
 import { PatternSelection } from '@/blocks/remote-data-container/components/pattern-selection/PatternSelection';
 import { Placeholder } from '@/blocks/remote-data-container/components/placeholders/Placeholder';
+import { PlaceholderError } from '@/blocks/remote-data-container/components/placeholders/PlaceholderError';
 import {
 	CONTAINER_CLASS_NAME,
 	DISPLAY_QUERY_KEY,
@@ -39,13 +40,18 @@ export function Edit( props: BlockEditProps< RemoteDataBlockAttributes > ) {
 		resetInnerBlocks,
 	} = usePatterns( blockName, rootClientId );
 
-	const { data, fetch, loading, reset } = useRemoteData( {
+	const { data, error, fetch, loading, reset } = useRemoteData( {
 		blockName,
 		externallyManagedRemoteData: remoteDataAttribute,
 		externallyManagedUpdateRemoteData: updateRemoteData,
+		// error is passed along with this query key
+		// queryKey: 'RemoteDataBlocks\\Config\\Query\\HttpQuery',
+		// error is undefined with this query key
 		queryKey: DISPLAY_QUERY_KEY,
 	} );
 
+	console.log( 'error', error );
+
 	const [ showPatternSelection, setShowPatternSelection ] = useState< boolean >( false );
 
 	function refreshRemoteData(): void {
@@ -83,6 +89,14 @@ export function Edit( props: BlockEditProps< RemoteDataBlockAttributes > ) {
 		}
 	}
 
+	if ( error ) {
+		return (
+			<div { ...blockProps }>
+				<PlaceholderError blockName={ blockConfig.settings.title } error={ error } />
+			</div>
+		);
+	}
+
 	// No remote data has been selected yet, show a placeholder.
 	if ( ! data ) {
 		return (

src/blocks/remote-data-container/hooks/useRemoteData.ts

@@ -199,18 +199,6 @@ export function useRemoteData( {
 
 		// Log the error to the console for visibility.
 		console.error( 'Remote Data Blocks query error:', err );
-
-		// Show a prominent notice.
-		let message = err.message;
-		if ( err instanceof RemoteDataFetchError && err.cause instanceof Error ) {
-			message = `${ message }: ${ err.cause.message }`;
-		}
-
-		createErrorNotice( message, {
-			isDismissible: true,
-			onDismiss: () => setError( undefined ),
-			type: 'default',
-		} );
 	}
 
 	async function fetch( inputs: RemoteDataQueryInput[] ): Promise< void > {