From 24d33eaefc610251c9d7b5f77fabc9c4544d3208 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Tue, 29 Oct 2024 13:52:58 +1100
Subject: [PATCH 01/13] Add a landing section to stylebook tabs

---
 .../src/components/style-book/constants.ts    |  5 +
 .../src/components/style-book/examples.tsx    | 91 ++++++++++++++++++-
 2 files changed, 95 insertions(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/style-book/constants.ts b/packages/edit-site/src/components/style-book/constants.ts
index 6aa280c937d42d..6af8f21e0706fe 100644
--- a/packages/edit-site/src/components/style-book/constants.ts
+++ b/packages/edit-site/src/components/style-book/constants.ts
@@ -107,6 +107,11 @@ export const STYLE_BOOK_THEME_SUBCATEGORIES: Omit<
 ];
 
 export const STYLE_BOOK_CATEGORIES: StyleBookCategory[] = [
+	{
+		slug: 'landing',
+		title: __( 'Landing' ),
+		blocks: [],
+	},
 	{
 		slug: 'text',
 		title: __( 'Text' ),
diff --git a/packages/edit-site/src/components/style-book/examples.tsx b/packages/edit-site/src/components/style-book/examples.tsx
index 9f4badd99a6582..0429ec1461b416 100644
--- a/packages/edit-site/src/components/style-book/examples.tsx
+++ b/packages/edit-site/src/components/style-book/examples.tsx
@@ -62,6 +62,88 @@ function getColorExamples( colors: MultiOriginPalettes ): BlockExample[] {
 	return examples;
 }
 
+/**
+ * Returns examples for the landing page.
+ *
+ * @param {MultiOriginPalettes} colors Global Styles color palettes per origin.
+ * @return {BlockExample[]} An array of block examples.
+ */
+function getLandingBlockExamples(
+	colors: MultiOriginPalettes
+): BlockExample[] {
+	const examples: BlockExample[] = [];
+
+	// Get theme palette from colors.
+	const themePalette = colors.colors.find(
+		( origin: ColorOrigin ) => origin.slug === 'theme'
+	);
+
+	const themeColorexample: BlockExample = {
+		name: 'theme-colors',
+		title: __( 'Theme Colors' ),
+		category: 'landing',
+		content: (
+			<ColorExamples colors={ themePalette.colors } type={ colors } />
+		),
+	};
+
+	examples.push( themeColorexample );
+
+	// Use our own example for the Heading block so that we can show multiple
+	// heading levels.
+	// (duplicate for now)
+	const headingsExample = {
+		name: 'core/heading',
+		title: __( 'Headings' ),
+		category: 'landing',
+		blocks: createBlock( 'core/heading', {
+			content: `AaBbCcDdEeFfGgHhIi
+				JjKkLlMmNnOoPpQqRrSs
+				TtUuVvWwXxYyZz
+				0123456789{(...)},?!*&:;_@#$`,
+			level: 1,
+		} ),
+	};
+	examples.push( headingsExample );
+
+	const paragraphExample = {
+		name: 'core/paragraph',
+		title: __( 'Paragraphs' ),
+		category: 'landing',
+		blocks: createBlock( 'core/paragraph', {
+			content: `There was an Old Man of Vienna, 
+					Who lived upon Tincture of Senna; 
+					When that did not agree, he took Camomile Tea, 
+					That nasty Old Man of Vienna.`,
+		} ),
+	};
+	examples.push( paragraphExample );
+
+	const otherBlockExamples = [
+		'core/image',
+		'core/separator',
+		'core/buttons',
+		'core/pullquote',
+		'core/search',
+	];
+
+	// Get examples for other blocks and put them in order of above array.
+	otherBlockExamples.forEach( ( blockName ) => {
+		const blockType = getBlockType( blockName );
+		if ( blockType && blockType.example ) {
+			const blockExample: BlockExample = {
+				name: blockName,
+				title: blockType.title,
+				category: 'landing',
+				blocks: getBlockFromExample( blockName, blockType.example ),
+			};
+			examples.push( blockExample );
+		}
+	} );
+
+	return examples;
+}
+
 /**
  * Returns a list of examples for registered block types.
  *
@@ -109,5 +191,12 @@ export function getExamples( colors: MultiOriginPalettes ): BlockExample[] {
 	};
 	const colorExamples = getColorExamples( colors );
 
-	return [ headingsExample, ...colorExamples, ...nonHeadingBlockExamples ];
+	const landingBlockExamples = getLandingBlockExamples( colors );
+
+	return [
+		headingsExample,
+		...colorExamples,
+		...nonHeadingBlockExamples,
+		...landingBlockExamples,
+	];
 }

From 2653ac91e1b37fb00095d3ff71c204da3f6f1355 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Tue, 29 Oct 2024 15:56:45 +1100
Subject: [PATCH 02/13] Check that theme palette exists

---
 .../src/components/style-book/examples.tsx    | 22 ++++++++++---------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/packages/edit-site/src/components/style-book/examples.tsx b/packages/edit-site/src/components/style-book/examples.tsx
index 0429ec1461b416..f26f283ffa4477 100644
--- a/packages/edit-site/src/components/style-book/examples.tsx
+++ b/packages/edit-site/src/components/style-book/examples.tsx
@@ -78,16 +78,18 @@ function getLandingBlockExamples(
 		( origin: ColorOrigin ) => origin.slug === 'theme'
 	);
 
-	const themeColorexample: BlockExample = {
-		name: 'theme-colors',
-		title: __( 'Theme Colors' ),
-		category: 'landing',
-		content: (
-			<ColorExamples colors={ themePalette.colors } type={ colors } />
-		),
-	};
-
-	examples.push( themeColorexample );
+	if ( themePalette ) {
+		const themeColorexample: BlockExample = {
+			name: 'theme-colors',
+			title: __( 'Theme Colors' ),
+			category: 'landing',
+			content: (
+				<ColorExamples colors={ themePalette.colors } type={ colors } />
+			),
+		};
+
+		examples.push( themeColorexample );
+	}
 
 	// Use our own example for the Heading block so that we can show multiple
 	// heading levels.

From abd9745f8c3195e4acdba6aa7c92b2f73edbd8cc Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Tue, 5 Nov 2024 16:07:05 +1100
Subject: [PATCH 03/13] dedupe examples for single page stylebook

---
 .../src/components/style-book/index.js         | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js
index 9918c169ff6ab0..93025ba496de2e 100644
--- a/packages/edit-site/src/components/style-book/index.js
+++ b/packages/edit-site/src/components/style-book/index.js
@@ -203,6 +203,22 @@ function StyleBook( {
 		[ examples ]
 	);
 
+	const examplesForSinglePageUse = [];
+	const landingCategoryExamples = getExamplesByCategory(
+		{ slug: 'landing' },
+		examples
+	);
+	examplesForSinglePageUse.push( ...landingCategoryExamples.examples );
+	const otherExamples = examples.filter( ( example ) => {
+		return (
+			example.category !== 'landing' &&
+			! landingCategoryExamples.examples.find(
+				( landingExample ) => landingExample.name === example.name
+			)
+		);
+	} );
+	examplesForSinglePageUse.push( ...otherExamples );
+
 	const { base: baseConfig } = useContext( GlobalStylesContext );
 	const goTo = getStyleBookNavigationFromPath( path );
 
@@ -286,7 +302,7 @@ function StyleBook( {
 					</Tabs>
 				) : (
 					<StyleBookBody
-						examples={ examples }
+						examples={ examplesForSinglePageUse }
 						isSelected={ isSelected }
 						onClick={ onClick }
 						onSelect={ onSelect }

From ea7377abb15d02ff56b2a430fd122e753634846a Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Tue, 5 Nov 2024 16:29:25 +1100
Subject: [PATCH 04/13] Fix Heading example resizing

---
 packages/edit-site/src/components/style-book/constants.ts | 2 +-
 packages/edit-site/src/components/style-book/examples.tsx | 5 +----
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/packages/edit-site/src/components/style-book/constants.ts b/packages/edit-site/src/components/style-book/constants.ts
index 6af8f21e0706fe..84fb06f33c743e 100644
--- a/packages/edit-site/src/components/style-book/constants.ts
+++ b/packages/edit-site/src/components/style-book/constants.ts
@@ -252,7 +252,7 @@ export const STYLE_BOOK_IFRAME_STYLES = `
 	}
 
 	.edit-site-style-book__example-preview {
-		width: 100%;
+		width: calc(100% - 120px);
 	}
 
 	.edit-site-style-book__example-preview .block-editor-block-list__insertion-point,
diff --git a/packages/edit-site/src/components/style-book/examples.tsx b/packages/edit-site/src/components/style-book/examples.tsx
index f26f283ffa4477..fdd00e7aba3e9f 100644
--- a/packages/edit-site/src/components/style-book/examples.tsx
+++ b/packages/edit-site/src/components/style-book/examples.tsx
@@ -99,10 +99,7 @@ function getLandingBlockExamples(
 		title: __( 'Headings' ),
 		category: 'landing',
 		blocks: createBlock( 'core/heading', {
-			content: `AaBbCcDdEeFfGgHhIi
-				JjKkLlMmNnOoPpQqRrSs
-				TtUuVvWwXxYyZz
-				0123456789{(...)},?!*&:;_@#$`,
+			content: `AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz0123456789{(...)},?!*&:;_@#$`,
 			level: 1,
 		} ),
 	};

From 880591f376ecbc7a7ba12ffd23a832caddb88fe2 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Tue, 5 Nov 2024 16:46:16 +1100
Subject: [PATCH 05/13] Fix e2e tests

---
 packages/edit-site/src/components/style-book/examples.tsx | 4 ++--
 test/e2e/specs/site-editor/style-book.spec.js             | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/edit-site/src/components/style-book/examples.tsx b/packages/edit-site/src/components/style-book/examples.tsx
index fdd00e7aba3e9f..5bcecb717e06eb 100644
--- a/packages/edit-site/src/components/style-book/examples.tsx
+++ b/packages/edit-site/src/components/style-book/examples.tsx
@@ -96,7 +96,7 @@ function getLandingBlockExamples(
 	// (duplicate for now)
 	const headingsExample = {
 		name: 'core/heading',
-		title: __( 'Headings' ),
+		title: __( 'Heading' ),
 		category: 'landing',
 		blocks: createBlock( 'core/heading', {
 			content: `AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz0123456789{(...)},?!*&:;_@#$`,
@@ -107,7 +107,7 @@ function getLandingBlockExamples(
 
 	const paragraphExample = {
 		name: 'core/paragraph',
-		title: __( 'Paragraphs' ),
+		title: __( 'Paragraph' ),
 		category: 'landing',
 		blocks: createBlock( 'core/paragraph', {
 			content: `There was an Old Man of Vienna, 
diff --git a/test/e2e/specs/site-editor/style-book.spec.js b/test/e2e/specs/site-editor/style-book.spec.js
index c94049872edcf6..2b88a7eac11aa5 100644
--- a/test/e2e/specs/site-editor/style-book.spec.js
+++ b/test/e2e/specs/site-editor/style-book.spec.js
@@ -103,7 +103,7 @@ test.describe( 'Style Book', () => {
 		await page
 			.frameLocator( '[name="style-book-canvas"]' )
 			.getByRole( 'button', {
-				name: 'Open Quote styles in Styles panel',
+				name: 'Open Pullquote styles in Styles panel',
 			} )
 			.click();
 

From dbcc3ebe97a10cbb5d2eb51c0e2507d792ae61e8 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Wed, 6 Nov 2024 10:13:45 +1100
Subject: [PATCH 06/13] Fix e2e

---
 packages/edit-site/src/components/style-book/examples.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/style-book/examples.tsx b/packages/edit-site/src/components/style-book/examples.tsx
index 5bcecb717e06eb..29e3fcae2431c8 100644
--- a/packages/edit-site/src/components/style-book/examples.tsx
+++ b/packages/edit-site/src/components/style-book/examples.tsx
@@ -96,7 +96,7 @@ function getLandingBlockExamples(
 	// (duplicate for now)
 	const headingsExample = {
 		name: 'core/heading',
-		title: __( 'Heading' ),
+		title: __( 'Headings' ),
 		category: 'landing',
 		blocks: createBlock( 'core/heading', {
 			content: `AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz0123456789{(...)},?!*&:;_@#$`,

From c2b3c428640bb4d304298f4dc966d0eb5d7f885e Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Thu, 7 Nov 2024 14:04:09 +1100
Subject: [PATCH 07/13] Fix styles on small breakpoint

---
 packages/edit-site/src/components/style-book/constants.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/edit-site/src/components/style-book/constants.ts b/packages/edit-site/src/components/style-book/constants.ts
index 84fb06f33c743e..510fa320dbc879 100644
--- a/packages/edit-site/src/components/style-book/constants.ts
+++ b/packages/edit-site/src/components/style-book/constants.ts
@@ -252,6 +252,10 @@ export const STYLE_BOOK_IFRAME_STYLES = `
 	}
 
 	.edit-site-style-book__example-preview {
+		width: 100%;
+	}
+	
+	.is-wide .edit-site-style-book__example-preview {
 		width: calc(100% - 120px);
 	}
 

From 9dada60b684197b43f515366d9517370f33cdadc Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Thu, 7 Nov 2024 16:39:13 +1100
Subject: [PATCH 08/13] Update landing text examples

---
 .../src/components/style-book/examples.tsx    | 53 ++++++++++---------
 1 file changed, 29 insertions(+), 24 deletions(-)

diff --git a/packages/edit-site/src/components/style-book/examples.tsx b/packages/edit-site/src/components/style-book/examples.tsx
index 29e3fcae2431c8..83e6fba9b16ee9 100644
--- a/packages/edit-site/src/components/style-book/examples.tsx
+++ b/packages/edit-site/src/components/style-book/examples.tsx
@@ -81,7 +81,7 @@ function getLandingBlockExamples(
 	if ( themePalette ) {
 		const themeColorexample: BlockExample = {
 			name: 'theme-colors',
-			title: __( 'Theme Colors' ),
+			title: __( 'Colors' ),
 			category: 'landing',
 			content: (
 				<ColorExamples colors={ themePalette.colors } type={ colors } />
@@ -91,32 +91,37 @@ function getLandingBlockExamples(
 		examples.push( themeColorexample );
 	}
 
-	// Use our own example for the Heading block so that we can show multiple
-	// heading levels.
-	// (duplicate for now)
-	const headingsExample = {
-		name: 'core/heading',
-		title: __( 'Headings' ),
-		category: 'landing',
-		blocks: createBlock( 'core/heading', {
-			content: `AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz0123456789{(...)},?!*&:;_@#$`,
-			level: 1,
-		} ),
-	};
-	examples.push( headingsExample );
+	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`,
+	} );
+	const secondParagraphBlock = createBlock( 'core/paragraph', {
+		content: `text into smaller, manageable chunks, allowing readers to scan and comprehend the content more easily. 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`,
+	} );
 
-	const paragraphExample = {
-		name: 'core/paragraph',
-		title: __( 'Paragraph' ),
+	const textExample = {
+		name: 'theme-text',
+		title: __( 'Text' ),
 		category: 'landing',
-		blocks: createBlock( 'core/paragraph', {
-			content: `There was an Old Man of Vienna, 
-					Who lived upon Tincture of Senna; 
-					When that did not agree, he took Camomile Tea, 
-					That nasty Old Man of Vienna.`,
-		} ),
+		blocks: [
+			headingBlock,
+			createBlock(
+				'core/group',
+				{
+					layout: { type: 'grid', columnCount: 2 },
+				},
+				[ firstParagraphBlock, secondParagraphBlock ]
+			),
+		],
 	};
-	examples.push( paragraphExample );
+	examples.push( textExample );
 
 	const otherBlockExamples = [
 		'core/image',

From 2a28f66e4cec4f54430df08fd9df5f2ce8bab348 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Thu, 7 Nov 2024 16:54:12 +1100
Subject: [PATCH 09/13] Make two col layout responsive

---
 .../edit-site/src/components/style-book/examples.tsx  | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/style-book/examples.tsx b/packages/edit-site/src/components/style-book/examples.tsx
index 83e6fba9b16ee9..5de6ef2f4e64ad 100644
--- a/packages/edit-site/src/components/style-book/examples.tsx
+++ b/packages/edit-site/src/components/style-book/examples.tsx
@@ -115,7 +115,16 @@ pieces of information. In terms of formatting, paragraphs in websites are common
 			createBlock(
 				'core/group',
 				{
-					layout: { type: 'grid', columnCount: 2 },
+					layout: {
+						type: 'grid',
+						columnCount: 2,
+						minimumColumnWidth: '12rem',
+					},
+					style: {
+						spacing: {
+							blockGap: '1.5rem',
+						},
+					},
 				},
 				[ firstParagraphBlock, secondParagraphBlock ]
 			),

From f2733034c6b21872e2f61356a5e6643cd7143860 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Thu, 7 Nov 2024 16:57:03 +1100
Subject: [PATCH 10/13] Make translatable

---
 .../edit-site/src/components/style-book/examples.tsx   | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/edit-site/src/components/style-book/examples.tsx b/packages/edit-site/src/components/style-book/examples.tsx
index 5de6ef2f4e64ad..6b4bd13a015c2f 100644
--- a/packages/edit-site/src/components/style-book/examples.tsx
+++ b/packages/edit-site/src/components/style-book/examples.tsx
@@ -98,12 +98,14 @@ function getLandingBlockExamples(
 		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`,
+		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`
+		),
 	} );
 	const secondParagraphBlock = createBlock( 'core/paragraph', {
-		content: `text into smaller, manageable chunks, allowing readers to scan and comprehend the content more easily. 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`,
+		content: __(
+			`text into smaller, manageable chunks, allowing readers to scan and comprehend the content more easily. 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`
+		),
 	} );
 
 	const textExample = {

From d2fb3e95262e213a73cd2424e5432d847a8f8102 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Mon, 11 Nov 2024 11:58:16 +1100
Subject: [PATCH 11/13] Change "landing" to "overview"

---
 .../src/components/style-book/constants.ts     |  4 ++--
 .../src/components/style-book/examples.tsx     | 18 +++++++++---------
 .../src/components/style-book/index.js         | 12 ++++++------
 3 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/packages/edit-site/src/components/style-book/constants.ts b/packages/edit-site/src/components/style-book/constants.ts
index 510fa320dbc879..8339123dc05d25 100644
--- a/packages/edit-site/src/components/style-book/constants.ts
+++ b/packages/edit-site/src/components/style-book/constants.ts
@@ -108,8 +108,8 @@ export const STYLE_BOOK_THEME_SUBCATEGORIES: Omit<
 
 export const STYLE_BOOK_CATEGORIES: StyleBookCategory[] = [
 	{
-		slug: 'landing',
-		title: __( 'Landing' ),
+		slug: 'overview',
+		title: __( 'Overview' ),
 		blocks: [],
 	},
 	{
diff --git a/packages/edit-site/src/components/style-book/examples.tsx b/packages/edit-site/src/components/style-book/examples.tsx
index 6b4bd13a015c2f..0a44a8b69c3b66 100644
--- a/packages/edit-site/src/components/style-book/examples.tsx
+++ b/packages/edit-site/src/components/style-book/examples.tsx
@@ -63,12 +63,12 @@ function getColorExamples( colors: MultiOriginPalettes ): BlockExample[] {
 }
 
 /**
- * Returns examples for the landing page.
+ * Returns examples for the overview page.
  *
  * @param {MultiOriginPalettes} colors Global Styles color palettes per origin.
  * @return {BlockExample[]} An array of block examples.
  */
-function getLandingBlockExamples(
+function getOverviewBlockExamples(
 	colors: MultiOriginPalettes
 ): BlockExample[] {
 	const examples: BlockExample[] = [];
@@ -82,7 +82,7 @@ function getLandingBlockExamples(
 		const themeColorexample: BlockExample = {
 			name: 'theme-colors',
 			title: __( 'Colors' ),
-			category: 'landing',
+			category: 'overview',
 			content: (
 				<ColorExamples colors={ themePalette.colors } type={ colors } />
 			),
@@ -99,19 +99,19 @@ function getLandingBlockExamples(
 	} );
 	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`
+			`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: __(
-			`text into smaller, manageable chunks, allowing readers to scan and comprehend the content more easily. 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`
+			`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: 'theme-text',
 		title: __( 'Text' ),
-		category: 'landing',
+		category: 'overview',
 		blocks: [
 			headingBlock,
 			createBlock(
@@ -149,7 +149,7 @@ function getLandingBlockExamples(
 			const blockExample: BlockExample = {
 				name: blockName,
 				title: blockType.title,
-				category: 'landing',
+				category: 'overview',
 				blocks: getBlockFromExample( blockName, blockType.example ),
 			};
 			examples.push( blockExample );
@@ -206,12 +206,12 @@ export function getExamples( colors: MultiOriginPalettes ): BlockExample[] {
 	};
 	const colorExamples = getColorExamples( colors );
 
-	const landingBlockExamples = getLandingBlockExamples( colors );
+	const overviewBlockExamples = getOverviewBlockExamples( colors );
 
 	return [
 		headingsExample,
 		...colorExamples,
 		...nonHeadingBlockExamples,
-		...landingBlockExamples,
+		...overviewBlockExamples,
 	];
 }
diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js
index 93025ba496de2e..de4c38bd40c05d 100644
--- a/packages/edit-site/src/components/style-book/index.js
+++ b/packages/edit-site/src/components/style-book/index.js
@@ -204,16 +204,16 @@ function StyleBook( {
 	);
 
 	const examplesForSinglePageUse = [];
-	const landingCategoryExamples = getExamplesByCategory(
-		{ slug: 'landing' },
+	const overviewCategoryExamples = getExamplesByCategory(
+		{ slug: 'overview' },
 		examples
 	);
-	examplesForSinglePageUse.push( ...landingCategoryExamples.examples );
+	examplesForSinglePageUse.push( ...overviewCategoryExamples.examples );
 	const otherExamples = examples.filter( ( example ) => {
 		return (
-			example.category !== 'landing' &&
-			! landingCategoryExamples.examples.find(
-				( landingExample ) => landingExample.name === example.name
+			example.category !== 'overview' &&
+			! overviewCategoryExamples.examples.find(
+				( overviewExample ) => overviewExample.name === example.name
 			)
 		);
 	} );

From 49a8b0fb05b93f53263143fb346e511750a7d171 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Mon, 11 Nov 2024 13:57:12 +1100
Subject: [PATCH 12/13] Add link to typography section and update e2e

---
 .../sidebar-global-styles-wrapper/index.js           |  4 ++++
 .../edit-site/src/components/style-book/examples.tsx |  4 ++--
 test/e2e/specs/site-editor/style-book.spec.js        | 12 ++++--------
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/edit-site/src/components/sidebar-global-styles-wrapper/index.js b/packages/edit-site/src/components/sidebar-global-styles-wrapper/index.js
index afa9f489dde22b..223f1cde9122d2 100644
--- a/packages/edit-site/src/components/sidebar-global-styles-wrapper/index.js
+++ b/packages/edit-site/src/components/sidebar-global-styles-wrapper/index.js
@@ -131,6 +131,10 @@ export default function GlobalStylesUIWrapper() {
 							// Go to color palettes Global Styles.
 							onPathChange( '/colors/palette' );
 							return;
+						} else if ( blockName === 'typography' ) {
+							// Go to typography Global Styles.
+							onPathChange( '/typography' );
+							return;
 						}
 
 						// Now go to the selected block.
diff --git a/packages/edit-site/src/components/style-book/examples.tsx b/packages/edit-site/src/components/style-book/examples.tsx
index 0a44a8b69c3b66..2fefe227ca52b7 100644
--- a/packages/edit-site/src/components/style-book/examples.tsx
+++ b/packages/edit-site/src/components/style-book/examples.tsx
@@ -109,8 +109,8 @@ function getOverviewBlockExamples(
 	} );
 
 	const textExample = {
-		name: 'theme-text',
-		title: __( 'Text' ),
+		name: 'typography',
+		title: __( 'Typography' ),
 		category: 'overview',
 		blocks: [
 			headingBlock,
diff --git a/test/e2e/specs/site-editor/style-book.spec.js b/test/e2e/specs/site-editor/style-book.spec.js
index 2b88a7eac11aa5..d860b05bc8f06d 100644
--- a/test/e2e/specs/site-editor/style-book.spec.js
+++ b/test/e2e/specs/site-editor/style-book.spec.js
@@ -52,14 +52,10 @@ test.describe( 'Style Book', () => {
 			'[name="style-book-canvas"]'
 		);
 
+		// In the Overview tab, expect a button for the main typography section.
 		await expect(
 			styleBookIframe.getByRole( 'button', {
-				name: 'Open Headings styles in Styles panel',
-			} )
-		).toBeVisible();
-		await expect(
-			styleBookIframe.getByRole( 'button', {
-				name: 'Open Paragraph styles in Styles panel',
+				name: 'Open Typography styles in Styles panel',
 			} )
 		).toBeVisible();
 
@@ -83,13 +79,13 @@ test.describe( 'Style Book', () => {
 		await page
 			.frameLocator( '[name="style-book-canvas"]' )
 			.getByRole( 'button', {
-				name: 'Open Headings styles in Styles panel',
+				name: 'Open Image styles in Styles panel',
 			} )
 			.click();
 
 		await expect(
 			page.locator(
-				'role=region[name="Editor settings"i] >> role=heading[name="Heading"i]'
+				'role=region[name="Editor settings"i] >> role=heading[name="Image"i]'
 			)
 		).toBeVisible();
 	} );

From f6ce5b107b8717f3d8a1d831891ad3fb39aff398 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Mon, 11 Nov 2024 17:12:05 +1100
Subject: [PATCH 13/13] Add typography path in editor canvas stylebook.

---
 packages/edit-site/src/components/global-styles/ui.js        | 5 +++++
 .../src/components/sidebar-global-styles-wrapper/index.js    | 3 ++-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js
index 2edea0fdbc3da3..0cab4c13aa3ee7 100644
--- a/packages/edit-site/src/components/global-styles/ui.js
+++ b/packages/edit-site/src/components/global-styles/ui.js
@@ -202,6 +202,11 @@ function GlobalStylesStyleBook() {
 					navigator.goTo( '/colors/palette' );
 					return;
 				}
+				if ( blockName === 'typography' ) {
+					// Go to typography Global Styles.
+					navigator.goTo( '/typography' );
+					return;
+				}
 
 				// Now go to the selected block.
 				navigator.goTo( '/blocks/' + encodeURIComponent( blockName ) );
diff --git a/packages/edit-site/src/components/sidebar-global-styles-wrapper/index.js b/packages/edit-site/src/components/sidebar-global-styles-wrapper/index.js
index 223f1cde9122d2..342fb1b5db52d2 100644
--- a/packages/edit-site/src/components/sidebar-global-styles-wrapper/index.js
+++ b/packages/edit-site/src/components/sidebar-global-styles-wrapper/index.js
@@ -131,7 +131,8 @@ export default function GlobalStylesUIWrapper() {
 							// Go to color palettes Global Styles.
 							onPathChange( '/colors/palette' );
 							return;
-						} else if ( blockName === 'typography' ) {
+						}
+						if ( blockName === 'typography' ) {
 							// Go to typography Global Styles.
 							onPathChange( '/typography' );
 							return;