From 72417c3b89b6c51fae4b1bf550833738f89aefaf Mon Sep 17 00:00:00 2001
From: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Date: Sat, 7 Dec 2024 15:42:40 +0900
Subject: [PATCH] Style book: Fix critical error when blocks are not registered
 (#67703)

Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
---
 .../src/components/style-book/examples.tsx    | 75 ++++++++++++-------
 .../src/components/style-book/types.ts        |  2 +-
 2 files changed, 48 insertions(+), 29 deletions(-)

diff --git a/packages/edit-site/src/components/style-book/examples.tsx b/packages/edit-site/src/components/style-book/examples.tsx
index c944b87b09d7e..cb7b6afcb422c 100644
--- a/packages/edit-site/src/components/style-book/examples.tsx
+++ b/packages/edit-site/src/components/style-book/examples.tsx
@@ -12,7 +12,12 @@ import {
 /**
  * Internal dependencies
  */
-import type { BlockExample, ColorOrigin, MultiOriginPalettes } from './types';
+import type {
+	Block,
+	BlockExample,
+	ColorOrigin,
+	MultiOriginPalettes,
+} from './types';
 import ColorExamples from './color-examples';
 import DuotoneExamples from './duotone-examples';
 import { STYLE_BOOK_COLOR_GROUPS } from './constants';
@@ -91,30 +96,33 @@ function getOverviewBlockExamples(
 		examples.push( themeColorexample );
 	}
 
-	const headingBlock = createBlock( 'core/heading', {
-		content: __(
-			`AaBbCcDdEeFfGgHhiiJjKkLIMmNnOoPpQakRrssTtUuVVWwXxxYyZzOl23356789X{(…)},2!*&:/A@HELFO™`
-		),
-		level: 1,
-	} );
-	const firstParagraphBlock = createBlock( 'core/paragraph', {
-		content: __(
-			`A paragraph in a website refers to a distinct block of text that is used to present and organize information. It is a fundamental unit of content in web design and is typically composed of a group of related sentences or thoughts focused on a particular topic or idea. Paragraphs play a crucial role in improving the readability and user experience of a website. They break down the text into smaller, manageable chunks, allowing readers to scan the content more easily.`
-		),
-	} );
-	const secondParagraphBlock = createBlock( 'core/paragraph', {
-		content: __(
-			`Additionally, paragraphs help structure the flow of information and provide logical breaks between different concepts or pieces of information. In terms of formatting, paragraphs in websites are commonly denoted by a vertical gap or indentation between each block of text. This visual separation helps visually distinguish one paragraph from another, creating a clear and organized layout that guides the reader through the content smoothly.`
-		),
-	} );
+	// Get examples for typography blocks.
+	const typographyBlockExamples: Block[] = [];
+
+	if ( getBlockType( 'core/heading' ) ) {
+		const headingBlock = createBlock( 'core/heading', {
+			content: __(
+				`AaBbCcDdEeFfGgHhiiJjKkLIMmNnOoPpQakRrssTtUuVVWwXxxYyZzOl23356789X{(…)},2!*&:/A@HELFO™`
+			),
+			level: 1,
+		} );
+		typographyBlockExamples.push( headingBlock );
+	}
+
+	if ( getBlockType( 'core/paragraph' ) ) {
+		const firstParagraphBlock = createBlock( 'core/paragraph', {
+			content: __(
+				`A paragraph in a website refers to a distinct block of text that is used to present and organize information. It is a fundamental unit of content in web design and is typically composed of a group of related sentences or thoughts focused on a particular topic or idea. Paragraphs play a crucial role in improving the readability and user experience of a website. They break down the text into smaller, manageable chunks, allowing readers to scan the content more easily.`
+			),
+		} );
+		const secondParagraphBlock = createBlock( 'core/paragraph', {
+			content: __(
+				`Additionally, paragraphs help structure the flow of information and provide logical breaks between different concepts or pieces of information. In terms of formatting, paragraphs in websites are commonly denoted by a vertical gap or indentation between each block of text. This visual separation helps visually distinguish one paragraph from another, creating a clear and organized layout that guides the reader through the content smoothly.`
+			),
+		} );
 
-	const textExample = {
-		name: 'typography',
-		title: __( 'Typography' ),
-		category: 'overview',
-		blocks: [
-			headingBlock,
-			createBlock(
+		if ( getBlockType( 'core/group' ) ) {
+			const groupBlock = createBlock(
 				'core/group',
 				{
 					layout: {
@@ -129,10 +137,21 @@ function getOverviewBlockExamples(
 					},
 				},
 				[ firstParagraphBlock, secondParagraphBlock ]
-			),
-		],
-	};
-	examples.push( textExample );
+			);
+			typographyBlockExamples.push( groupBlock );
+		} else {
+			typographyBlockExamples.push( firstParagraphBlock );
+		}
+	}
+
+	if ( !! typographyBlockExamples.length ) {
+		examples.push( {
+			name: 'typography',
+			title: __( 'Typography' ),
+			category: 'overview',
+			blocks: typographyBlockExamples,
+		} );
+	}
 
 	const otherBlockExamples = [
 		'core/image',
diff --git a/packages/edit-site/src/components/style-book/types.ts b/packages/edit-site/src/components/style-book/types.ts
index e7be17b17dd4d..9f65039121856 100644
--- a/packages/edit-site/src/components/style-book/types.ts
+++ b/packages/edit-site/src/components/style-book/types.ts
@@ -1,4 +1,4 @@
-type Block = {
+export type Block = {
 	name: string;
 	attributes: Record< string, unknown >;
 	innerBlocks?: Block[];