From 0fac00c68cc70bb69886aa019db681ff28dc4c21 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Fri, 27 Sep 2024 16:53:36 +1000
Subject: [PATCH 1/9] Style Book: Add color tab

---
 ...se-multiple-origin-colors-and-gradients.js |   6 +
 .../src/components/global-styles/ui.js        |  15 ++
 .../src/components/style-book/constants.ts    |  49 +++++-
 .../src/components/style-book/examples.ts     | 146 +++++++++++++++++-
 .../src/components/style-book/index.js        | 138 ++++++++++++++---
 .../components/style-book/test/categories.js  |   5 -
 .../src/components/style-book/types.ts        |  36 ++++-
 7 files changed, 361 insertions(+), 34 deletions(-)

diff --git a/packages/block-editor/src/components/colors-gradients/use-multiple-origin-colors-and-gradients.js b/packages/block-editor/src/components/colors-gradients/use-multiple-origin-colors-and-gradients.js
index ee27960529ede3..1163492c322378 100644
--- a/packages/block-editor/src/components/colors-gradients/use-multiple-origin-colors-and-gradients.js
+++ b/packages/block-editor/src/components/colors-gradients/use-multiple-origin-colors-and-gradients.js
@@ -55,6 +55,7 @@ export default function useMultipleOriginColorsAndGradients() {
 					'Theme',
 					'Indicates this palette comes from the theme.'
 				),
+				slug: 'theme',
 				colors: themeColors,
 			} );
 		}
@@ -68,6 +69,7 @@ export default function useMultipleOriginColorsAndGradients() {
 					'Default',
 					'Indicates this palette comes from WordPress.'
 				),
+				slug: 'default',
 				colors: defaultColors,
 			} );
 		}
@@ -77,6 +79,7 @@ export default function useMultipleOriginColorsAndGradients() {
 					'Custom',
 					'Indicates this palette comes from the theme.'
 				),
+				slug: 'custom',
 				colors: customColors,
 			} );
 		}
@@ -96,6 +99,7 @@ export default function useMultipleOriginColorsAndGradients() {
 					'Theme',
 					'Indicates this palette comes from the theme.'
 				),
+				slug: 'theme',
 				gradients: themeGradients,
 			} );
 		}
@@ -109,6 +113,7 @@ export default function useMultipleOriginColorsAndGradients() {
 					'Default',
 					'Indicates this palette comes from WordPress.'
 				),
+				slug: 'default',
 				gradients: defaultGradients,
 			} );
 		}
@@ -118,6 +123,7 @@ export default function useMultipleOriginColorsAndGradients() {
 					'Custom',
 					'Indicates this palette is created by the user.'
 				),
+				slug: 'custom',
 				gradients: customGradients,
 			} );
 		}
diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js
index 6cd465e237100a..4c1b00b283b06f 100644
--- a/packages/edit-site/src/components/global-styles/ui.js
+++ b/packages/edit-site/src/components/global-styles/ui.js
@@ -45,6 +45,7 @@ import ScreenCSS from './screen-css';
 import ScreenRevisions from './screen-revisions';
 import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
+import { STYLE_BOOK_COLOR_GROUPS } from '../style-book/constants';
 
 const SLOT_FILL_NAME = 'GlobalStylesMenu';
 const { useGlobalStylesReset } = unlock( blockEditorPrivateApis );
@@ -191,6 +192,20 @@ function GlobalStylesStyleBook() {
 				)
 			}
 			onSelect={ ( blockName ) => {
+				if ( blockName === 'duotones' ) {
+					return;
+				}
+
+				if (
+					STYLE_BOOK_COLOR_GROUPS.find(
+						( group ) => group.slug === blockName
+					)
+				) {
+					// Go to color palettes Global Styles.
+					navigator.goTo( '/colors/palette' );
+					return;
+				}
+
 				// Now go to the selected block.
 				navigator.goTo( '/blocks/' + encodeURIComponent( blockName ) );
 			} }
diff --git a/packages/edit-site/src/components/style-book/constants.ts b/packages/edit-site/src/components/style-book/constants.ts
index fc06d8f1409f0d..96352844177617 100644
--- a/packages/edit-site/src/components/style-book/constants.ts
+++ b/packages/edit-site/src/components/style-book/constants.ts
@@ -6,7 +6,46 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import type { StyleBookCategory } from './types';
+import type { StyleBookCategory, StyleBookColorGroup } from './types';
+
+export const STYLE_BOOK_COLOR_GROUPS: StyleBookColorGroup[] = [
+	{
+		slug: 'theme-colors',
+		title: __( 'Theme Colors' ),
+		origin: 'theme',
+		type: 'colors',
+	},
+	{
+		slug: 'custom-colors',
+		title: __( 'Custom Colors' ),
+		origin: 'custom',
+		type: 'colors',
+	},
+	{
+		slug: 'custom-gradients',
+		title: __( 'Custom Gradients' ),
+		origin: 'custom', // User.
+		type: 'gradients',
+	},
+	{
+		slug: 'duotones',
+		title: __( 'Duotones' ),
+		origin: 'theme',
+		type: 'duotones',
+	},
+	{
+		slug: 'default-colors',
+		title: __( 'Default Colors' ),
+		origin: 'default',
+		type: 'colors',
+	},
+	{
+		slug: 'default-gradients',
+		title: __( 'Default Gradients' ),
+		origin: 'default',
+		type: 'gradients',
+	},
+];
 
 export const STYLE_BOOK_THEME_SUBCATEGORIES: Omit<
 	StyleBookCategory,
@@ -74,7 +113,7 @@ export const STYLE_BOOK_CATEGORIES: StyleBookCategory[] = [
 	{
 		slug: 'colors',
 		title: __( 'Colors' ),
-		blocks: [ 'custom/colors' ],
+		blocks: [],
 	},
 	{
 		slug: 'theme',
@@ -111,7 +150,7 @@ export const STYLE_BOOK_IFRAME_STYLES = `
 	.is-root-container {
 		display: flow-root;
 	}
-	
+
 	body {
 		position: relative;
 		padding: 32px !important;
@@ -149,7 +188,7 @@ export const STYLE_BOOK_IFRAME_STYLES = `
 	.edit-site-style-book__examples.is-wide .edit-site-style-book__example {
 		flex-direction: row;
 	}
-	
+
 	.edit-site-style-book__subcategory-title,
 	.edit-site-style-book__example-title {
 		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
@@ -160,7 +199,7 @@ export const STYLE_BOOK_IFRAME_STYLES = `
 		text-align: left;
 		text-transform: uppercase;
 	}
-	
+
 	.edit-site-style-book__subcategory-title {
 		font-size: 16px;
 		margin-bottom: 40px;
diff --git a/packages/edit-site/src/components/style-book/examples.ts b/packages/edit-site/src/components/style-book/examples.ts
index 80807b10374c68..c9be0666846670 100644
--- a/packages/edit-site/src/components/style-book/examples.ts
+++ b/packages/edit-site/src/components/style-book/examples.ts
@@ -12,21 +12,158 @@ import {
 /**
  * Internal dependencies
  */
-import type { BlockExample } from './types';
+import type {
+	Block,
+	BlockExample,
+	ColorItem,
+	ColorOrigin,
+	Duotone,
+	MultiOriginPalettes,
+} from './types';
+import { STYLE_BOOK_COLOR_GROUPS } from './constants';
+
+// Base CSS styles to be applied to color block examples.
+const defaultColorExampleStyles = {
+	dimensions: { minHeight: '52px' },
+	border: {
+		width: '1px',
+		style: 'solid',
+		color: '#ddd', // Match horizontal rule under sub title headings
+	},
+};
+
+/**
+ * Creates an example block to demo a given color item for the Style Book.
+ * A color example could be for a simple color, gradient, or duotone filter.
+ *
+ * @param {ColorItem} color The color for display.
+ * @param {string}    type  Type of color e.g. color, gradient, or duotone.
+ * @return {Block|undefined} Example block.
+ */
+function getColorExample( color: ColorItem, type: string ): Block | undefined {
+	if ( type === 'colors' ) {
+		return createBlock( 'core/group', {
+			backgroundColor: color.slug,
+			style: defaultColorExampleStyles,
+		} );
+	}
+
+	if ( type === 'gradients' ) {
+		return createBlock( 'core/group', {
+			gradient: color.slug,
+			style: defaultColorExampleStyles,
+		} );
+	}
+
+	if ( type === 'duotones' ) {
+		return createBlock(
+			'core/group',
+			{
+				layout: {
+					type: 'grid',
+					columnCount: 2,
+					minimumColumnWidth: null,
+				},
+				style: { spacing: { blockGap: '8px' } },
+			},
+			[
+				createBlock( 'core/image', {
+					sizeSlug: 'medium',
+					url: 'https://s.w.org/images/core/5.3/MtBlanc1.jpg',
+					aspectRatio: '16/9',
+					scale: 'cover',
+					style: {
+						layout: { columnSpan: 2, rowSpan: 1 },
+						color: {
+							duotone: `var:preset|duotone|${ color.slug }`,
+						},
+					},
+				} ),
+				createBlock( 'core/group', {
+					style: {
+						...defaultColorExampleStyles,
+						color: { background: ( color as Duotone ).colors[ 0 ] },
+						dimensions: { minHeight: '20px' },
+					},
+				} ),
+				createBlock( 'core/group', {
+					style: {
+						...defaultColorExampleStyles,
+						color: { background: ( color as Duotone ).colors[ 1 ] },
+						dimensions: { minHeight: '20px' },
+					},
+				} ),
+			]
+		);
+	}
+}
+
+/**
+ * Returns examples color examples for each origin
+ * e.g. Core (Default), Theme, and User.
+ *
+ * @param {MultiOriginPalettes} colors Global Styles color palettes per origin.
+ * @return {BlockExample[]} An array of color block examples.
+ */
+function getColorExamples( colors: MultiOriginPalettes ): BlockExample[] {
+	if ( ! colors ) {
+		return [];
+	}
+
+	const examples: BlockExample[] = [];
+
+	STYLE_BOOK_COLOR_GROUPS.forEach( ( group ) => {
+		const palette = colors[ group.type ].find(
+			( origin: ColorOrigin ) => origin.slug === group.origin
+		);
+
+		if ( palette?.[ group.type ] ) {
+			const example: BlockExample = {
+				name: group.slug,
+				title: group.title,
+				category: 'colors',
+				blocks: [
+					createBlock(
+						'core/group',
+						{
+							layout: {
+								type: 'grid',
+								columnCount: 2,
+								minimumColumnWidth: null,
+							},
+							style: {
+								spacing: {
+									blockGap: { top: '8px', left: '16px' },
+								},
+							},
+						},
+						palette[ group.type ].map( ( color: ColorItem ) =>
+							getColorExample( color, group.type )
+						)
+					),
+				],
+			};
+			examples.push( example );
+		}
+	} );
+
+	return examples;
+}
 
 /**
  * Returns a list of examples for registered block types.
  *
+ * @param {MultiOriginPalettes} colors Global styles colors grouped by origin e.g. Core, Theme, and User.
  * @return {BlockExample[]} An array of block examples.
  */
-export function getExamples(): BlockExample[] {
+export function getExamples( colors: MultiOriginPalettes ): BlockExample[] {
 	const nonHeadingBlockExamples = getBlockTypes()
 		.filter( ( blockType ) => {
 			const { name, example, supports } = blockType;
 			return (
 				name !== 'core/heading' &&
 				!! example &&
-				supports.inserter !== false
+				supports?.inserter !== false
 			);
 		} )
 		.map( ( blockType ) => ( {
@@ -58,6 +195,7 @@ export function getExamples(): BlockExample[] {
 			} );
 		} ),
 	};
+	const colorExamples = getColorExamples( colors );
 
-	return [ headingsExample, ...nonHeadingBlockExamples ];
+	return [ headingsExample, ...colorExamples, ...nonHeadingBlockExamples ];
 }
diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js
index 42b6e3f4fc99b6..423d45b86834e4 100644
--- a/packages/edit-site/src/components/style-book/index.js
+++ b/packages/edit-site/src/components/style-book/index.js
@@ -11,18 +11,26 @@ import {
 	Composite,
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
-import { __, sprintf } from '@wordpress/i18n';
+import { __, _x, sprintf } from '@wordpress/i18n';
 import {
 	BlockList,
 	privateApis as blockEditorPrivateApis,
 	store as blockEditorStore,
+	useSettings,
 	__unstableEditorStyles as EditorStyles,
 	__unstableIframe as Iframe,
+	__experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients,
 } from '@wordpress/block-editor';
 import { privateApis as editorPrivateApis } from '@wordpress/editor';
 import { useSelect } from '@wordpress/data';
 import { useResizeObserver } from '@wordpress/compose';
-import { useMemo, useState, memo, useContext } from '@wordpress/element';
+import {
+	useMemo,
+	useState,
+	memo,
+	useContext,
+	useEffect,
+} from '@wordpress/element';
 import { ENTER, SPACE } from '@wordpress/keycodes';
 
 /**
@@ -51,6 +59,83 @@ function isObjectEmpty( object ) {
 	return ! object || Object.keys( object ).length === 0;
 }
 
+/**
+ * Retrieves colors, gradients, and duotone filters from Global Styles.
+ * The inclusion of default (Core) palettes is controlled by the relevant
+ * theme.json property e.g. defaultPalette, defaultGradients, defaultDuotone.
+ *
+ * @return {Object} Object containing properties for each type of palette.
+ */
+function useMultiOriginPalettes() {
+	const { colors, gradients } = useMultipleOriginColorsAndGradients();
+
+	// Add duotone filters to the palettes data.
+	// TODO: Might need to include `disableCustomDuotones` setting or whatever to match colors/gradients from useMultipleOriginColorsAndGradients.
+	const [
+		shouldDisplayDefaultDuotones,
+		customDuotones,
+		themeDuotones,
+		defaultDuotones,
+	] = useSettings(
+		'color.defaultDuotone',
+		'color.duotone.custom',
+		'color.duotone.theme',
+		'color.duotone.default'
+	);
+
+	const palettes = useMemo( () => {
+		const result = { colors, gradients, duotones: [] };
+
+		if ( themeDuotones && themeDuotones.length ) {
+			result.duotones.push( {
+				name: _x(
+					'Theme',
+					'Indicates this palette comes from the theme.'
+				),
+				slug: 'theme',
+				duotones: themeDuotones,
+			} );
+		}
+
+		if (
+			shouldDisplayDefaultDuotones &&
+			defaultDuotones &&
+			defaultDuotones.length
+		) {
+			result.duotones.push( {
+				name: _x(
+					'Default',
+					'Indicates this palette comes from WordPress.'
+				),
+				slug: 'default',
+				duotones: defaultDuotones,
+			} );
+		}
+		if ( customDuotones && customDuotones.length ) {
+			result.duotones.push( {
+				name: _x(
+					'Custom',
+					// TODO: Should the follow saying from the theme or user? It currently matches useMultipleOriginColorsAndGradients.
+					'Indicates this palette comes from the theme.'
+				),
+				slug: 'custom',
+				duotones: customDuotones,
+			} );
+		}
+
+		return result;
+	}, [
+		colors,
+		gradients,
+		customDuotones,
+		themeDuotones,
+		defaultDuotones,
+		shouldDisplayDefaultDuotones,
+	] );
+
+	return palettes;
+}
+
 function StyleBook( {
 	enableResizing = true,
 	isSelected,
@@ -64,7 +149,8 @@ function StyleBook( {
 	const [ resizeObserver, sizes ] = useResizeObserver();
 	const [ textColor ] = useGlobalStyle( 'color.text' );
 	const [ backgroundColor ] = useGlobalStyle( 'color.background' );
-	const [ examples ] = useState( getExamples );
+	const colors = useMultiOriginPalettes();
+	const [ examples, setExamples ] = useState( () => getExamples( colors ) );
 	const tabs = useMemo(
 		() =>
 			getTopLevelStyleBookCategories().filter( ( category ) =>
@@ -74,6 +160,12 @@ function StyleBook( {
 			),
 		[ examples ]
 	);
+
+	// Ensure color examples are kept in sync with Global Styles palette changes.
+	useEffect( () => {
+		setExamples( getExamples( colors ) );
+	}, [ colors ] );
+
 	const { base: baseConfig } = useContext( GlobalStylesContext );
 
 	const mergedConfig = useMemo( () => {
@@ -217,7 +309,6 @@ const StyleBookBody = ( {
 			tabIndex={ 0 }
 			{ ...( onClick ? buttonModeProps : {} ) }
 		>
-			<EditorStyles styles={ settings.styles } />
 			<style>
 				{ STYLE_BOOK_IFRAME_STYLES }
 				{ !! onClick &&
@@ -240,6 +331,7 @@ const StyleBookBody = ( {
 				}
 				isSelected={ isSelected }
 				onSelect={ onSelect }
+				settings={ settings }
 				key={ category }
 			/>
 		</Iframe>
@@ -247,7 +339,15 @@ const StyleBookBody = ( {
 };
 
 const Examples = memo(
-	( { className, examples, category, label, isSelected, onSelect } ) => {
+	( {
+		className,
+		examples,
+		category,
+		label,
+		isSelected,
+		onSelect,
+		settings,
+	} ) => {
 		const categoryDefinition = category
 			? getTopLevelStyleBookCategories().find(
 					( _category ) => _category.slug === category
@@ -273,6 +373,7 @@ const Examples = memo(
 							title={ example.title }
 							blocks={ example.blocks }
 							isSelected={ isSelected( example.name ) }
+							settings={ settings }
 							onClick={ () => {
 								onSelect?.( example.name );
 							} }
@@ -293,6 +394,7 @@ const Examples = memo(
 								examples={ subcategory.examples }
 								isSelected={ isSelected }
 								onSelect={ onSelect }
+								settings={ settings }
 							/>
 						</Composite.Group>
 					) ) }
@@ -301,7 +403,7 @@ const Examples = memo(
 	}
 );
 
-const Subcategory = ( { examples, isSelected, onSelect } ) => {
+const Subcategory = ( { examples, isSelected, onSelect, settings } ) => {
 	return (
 		!! examples?.length &&
 		examples.map( ( example ) => (
@@ -314,24 +416,21 @@ const Subcategory = ( { examples, isSelected, onSelect } ) => {
 				onClick={ () => {
 					onSelect?.( example.name );
 				} }
+				settings={ settings }
 			/>
 		) )
 	);
 };
 
-const Example = ( { id, title, blocks, isSelected, onClick } ) => {
-	const originalSettings = useSelect(
-		( select ) => select( blockEditorStore ).getSettings(),
-		[]
-	);
-	const settings = useMemo(
-		() => ( {
-			...originalSettings,
-			focusMode: false, // Disable "Spotlight mode".
-			__unstableIsPreviewMode: true,
-		} ),
-		[ originalSettings ]
-	);
+const Example = ( {
+	id,
+	title,
+	blocks,
+	isSelected,
+	onClick,
+	settings: originalSettings,
+} ) => {
+	const settings = { ...originalSettings, focusMode: false };
 
 	// Cache the list of blocks to avoid additional processing when the component is re-rendered.
 	const renderedBlocks = useMemo(
@@ -368,6 +467,7 @@ const Example = ( { id, title, blocks, isSelected, onClick } ) => {
 								value={ renderedBlocks }
 								settings={ settings }
 							>
+								<EditorStyles styles={ settings.styles } />
 								<BlockList renderAppender={ false } />
 							</ExperimentalBlockEditorProvider>
 						</Disabled>
diff --git a/packages/edit-site/src/components/style-book/test/categories.js b/packages/edit-site/src/components/style-book/test/categories.js
index 5629689e260f89..128eaf282a9c5d 100644
--- a/packages/edit-site/src/components/style-book/test/categories.js
+++ b/packages/edit-site/src/components/style-book/test/categories.js
@@ -48,11 +48,6 @@ const exampleThemeBlocks = [
 		title: 'Home Link',
 		category: 'design',
 	},
-	{
-		name: 'custom/colors',
-		title: 'Colors',
-		category: 'colors',
-	},
 	{
 		name: 'core/site-logo',
 		title: 'Site Logo',
diff --git a/packages/edit-site/src/components/style-book/types.ts b/packages/edit-site/src/components/style-book/types.ts
index 4729b38b1b2bb1..651d24f94a2f6a 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[];
@@ -9,6 +9,7 @@ export type StyleBookCategory = {
 	slug: string;
 	blocks?: string[];
 	exclude?: string[];
+	include?: string[];
 	subcategories?: StyleBookCategory[];
 };
 
@@ -25,3 +26,36 @@ export type CategoryExamples = {
 	examples?: BlockExample[];
 	subcategories?: CategoryExamples[];
 };
+
+export type StyleBookColorGroup = {
+	origin: string;
+	slug: string;
+	title: string;
+	type: string;
+};
+
+export type Color = { slug: string };
+export type Gradient = { slug: string };
+export type Duotone = {
+	colors: string[];
+	slug: string;
+};
+
+export type ColorItem = Color | Gradient | Duotone;
+
+export type ColorOrigin = {
+	name: string;
+	slug: string;
+	colors?: Color[];
+	gradients?: Gradient[];
+	duotones?: Duotone[];
+};
+
+export type MultiOriginPalettes = {
+	disableCustomColors: boolean;
+	disableCustomGradients: boolean;
+	hasColorsOrGradients: boolean;
+	colors: Omit< ColorOrigin, 'gradients' | 'duotones' >;
+	duotones: Omit< ColorOrigin, 'colors' | 'gradients' >;
+	gradients: Omit< ColorOrigin, 'colors' | 'duotones' >;
+};

From 2654f37234b524e533b4281383162b19b6f8d315 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Tue, 1 Oct 2024 17:58:27 +1000
Subject: [PATCH 2/9] Try rendering only style overrides and duotone svgs in
 each example

---
 .../src/components/style-book/examples.ts     |  3 +-
 .../src/components/style-book/index.js        | 41 ++++++++++++++++++-
 2 files changed, 41 insertions(+), 3 deletions(-)

diff --git a/packages/edit-site/src/components/style-book/examples.ts b/packages/edit-site/src/components/style-book/examples.ts
index c9be0666846670..3f43d7364a612f 100644
--- a/packages/edit-site/src/components/style-book/examples.ts
+++ b/packages/edit-site/src/components/style-book/examples.ts
@@ -118,6 +118,7 @@ function getColorExamples( colors: MultiOriginPalettes ): BlockExample[] {
 		);
 
 		if ( palette?.[ group.type ] ) {
+			const rowGap = group.type === 'duotones' ? '16px' : '8px';
 			const example: BlockExample = {
 				name: group.slug,
 				title: group.title,
@@ -133,7 +134,7 @@ function getColorExamples( colors: MultiOriginPalettes ): BlockExample[] {
 							},
 							style: {
 								spacing: {
-									blockGap: { top: '8px', left: '16px' },
+									blockGap: { top: rowGap, left: '16px' },
 								},
 							},
 						},
diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js
index 423d45b86834e4..798920a41ead27 100644
--- a/packages/edit-site/src/components/style-book/index.js
+++ b/packages/edit-site/src/components/style-book/index.js
@@ -9,6 +9,7 @@ import clsx from 'clsx';
 import {
 	Disabled,
 	Composite,
+	SVG,
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { __, _x, sprintf } from '@wordpress/i18n';
@@ -309,6 +310,7 @@ const StyleBookBody = ( {
 			tabIndex={ 0 }
 			{ ...( onClick ? buttonModeProps : {} ) }
 		>
+			<EditorStyles styles={ settings.styles } />
 			<style>
 				{ STYLE_BOOK_IFRAME_STYLES }
 				{ !! onClick &&
@@ -467,8 +469,7 @@ const Example = ( {
 								value={ renderedBlocks }
 								settings={ settings }
 							>
-								<EditorStyles styles={ settings.styles } />
-								<BlockList renderAppender={ false } />
+								<ExampleBlocks />
 							</ExperimentalBlockEditorProvider>
 						</Disabled>
 					</div>
@@ -478,4 +479,40 @@ const Example = ( {
 	);
 };
 
+const ExampleBlocks = () => {
+	const overrides = useSelect(
+		( select ) => unlock( select( blockEditorStore ) ).getStyleOverrides(),
+		[]
+	);
+
+	const styles = overrides.filter( ( [ , override ] ) => override?.css );
+	const svgs = overrides
+		.filter( ( [ , override ] ) => override.__unstableType === 'svgs' )
+		.map( ( [ , svg ] ) => svg.assets )
+		.join( '' );
+
+	return (
+		<>
+			{ styles.map( ( [ id, override ] ) => (
+				<style key={ id }>{ override.css }</style>
+			) ) }
+			<SVG
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 0 0"
+				width="0"
+				height="0"
+				role="none"
+				style={ {
+					visibility: 'hidden',
+					position: 'absolute',
+					left: '-9999px',
+					overflow: 'hidden',
+				} }
+				dangerouslySetInnerHTML={ { __html: svgs } }
+			/>
+			<BlockList renderAppender={ false } />
+		</>
+	);
+};
+
 export default StyleBook;

From 16429fbdf0f3be371db40925dcc6e513257a3e42 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Wed, 2 Oct 2024 11:54:57 +1000
Subject: [PATCH 3/9] Revert "Try rendering only style overrides and duotone
 svgs in each example"

This reverts commit eb744676097f12438478abaf0b96bd26a095cac0.
---
 .../src/components/style-book/examples.ts     |  3 +-
 .../src/components/style-book/index.js        | 41 +------------------
 2 files changed, 3 insertions(+), 41 deletions(-)

diff --git a/packages/edit-site/src/components/style-book/examples.ts b/packages/edit-site/src/components/style-book/examples.ts
index 3f43d7364a612f..c9be0666846670 100644
--- a/packages/edit-site/src/components/style-book/examples.ts
+++ b/packages/edit-site/src/components/style-book/examples.ts
@@ -118,7 +118,6 @@ function getColorExamples( colors: MultiOriginPalettes ): BlockExample[] {
 		);
 
 		if ( palette?.[ group.type ] ) {
-			const rowGap = group.type === 'duotones' ? '16px' : '8px';
 			const example: BlockExample = {
 				name: group.slug,
 				title: group.title,
@@ -134,7 +133,7 @@ function getColorExamples( colors: MultiOriginPalettes ): BlockExample[] {
 							},
 							style: {
 								spacing: {
-									blockGap: { top: rowGap, left: '16px' },
+									blockGap: { top: '8px', left: '16px' },
 								},
 							},
 						},
diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js
index 798920a41ead27..423d45b86834e4 100644
--- a/packages/edit-site/src/components/style-book/index.js
+++ b/packages/edit-site/src/components/style-book/index.js
@@ -9,7 +9,6 @@ import clsx from 'clsx';
 import {
 	Disabled,
 	Composite,
-	SVG,
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { __, _x, sprintf } from '@wordpress/i18n';
@@ -310,7 +309,6 @@ const StyleBookBody = ( {
 			tabIndex={ 0 }
 			{ ...( onClick ? buttonModeProps : {} ) }
 		>
-			<EditorStyles styles={ settings.styles } />
 			<style>
 				{ STYLE_BOOK_IFRAME_STYLES }
 				{ !! onClick &&
@@ -469,7 +467,8 @@ const Example = ( {
 								value={ renderedBlocks }
 								settings={ settings }
 							>
-								<ExampleBlocks />
+								<EditorStyles styles={ settings.styles } />
+								<BlockList renderAppender={ false } />
 							</ExperimentalBlockEditorProvider>
 						</Disabled>
 					</div>
@@ -479,40 +478,4 @@ const Example = ( {
 	);
 };
 
-const ExampleBlocks = () => {
-	const overrides = useSelect(
-		( select ) => unlock( select( blockEditorStore ) ).getStyleOverrides(),
-		[]
-	);
-
-	const styles = overrides.filter( ( [ , override ] ) => override?.css );
-	const svgs = overrides
-		.filter( ( [ , override ] ) => override.__unstableType === 'svgs' )
-		.map( ( [ , svg ] ) => svg.assets )
-		.join( '' );
-
-	return (
-		<>
-			{ styles.map( ( [ id, override ] ) => (
-				<style key={ id }>{ override.css }</style>
-			) ) }
-			<SVG
-				xmlns="http://www.w3.org/2000/svg"
-				viewBox="0 0 0 0"
-				width="0"
-				height="0"
-				role="none"
-				style={ {
-					visibility: 'hidden',
-					position: 'absolute',
-					left: '-9999px',
-					overflow: 'hidden',
-				} }
-				dangerouslySetInnerHTML={ { __html: svgs } }
-			/>
-			<BlockList renderAppender={ false } />
-		</>
-	);
-};
-
 export default StyleBook;

From 700675d2c87a1e65cbbcb0a61a8824d5f9467664 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Wed, 2 Oct 2024 12:11:52 +1000
Subject: [PATCH 4/9] Simplify inclusion of block support styles in style book
 examples

---
 .../src/components/style-book/examples.ts     |  3 +-
 .../src/components/style-book/index.js        | 41 ++++++++-----------
 2 files changed, 19 insertions(+), 25 deletions(-)

diff --git a/packages/edit-site/src/components/style-book/examples.ts b/packages/edit-site/src/components/style-book/examples.ts
index c9be0666846670..3f43d7364a612f 100644
--- a/packages/edit-site/src/components/style-book/examples.ts
+++ b/packages/edit-site/src/components/style-book/examples.ts
@@ -118,6 +118,7 @@ function getColorExamples( colors: MultiOriginPalettes ): BlockExample[] {
 		);
 
 		if ( palette?.[ group.type ] ) {
+			const rowGap = group.type === 'duotones' ? '16px' : '8px';
 			const example: BlockExample = {
 				name: group.slug,
 				title: group.title,
@@ -133,7 +134,7 @@ function getColorExamples( colors: MultiOriginPalettes ): BlockExample[] {
 							},
 							style: {
 								spacing: {
-									blockGap: { top: '8px', left: '16px' },
+									blockGap: { top: rowGap, left: '16px' },
 								},
 							},
 						},
diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js
index 423d45b86834e4..ac0a990758f5ad 100644
--- a/packages/edit-site/src/components/style-book/index.js
+++ b/packages/edit-site/src/components/style-book/index.js
@@ -309,6 +309,7 @@ const StyleBookBody = ( {
 			tabIndex={ 0 }
 			{ ...( onClick ? buttonModeProps : {} ) }
 		>
+			<EditorStyles styles={ settings.styles } />
 			<style>
 				{ STYLE_BOOK_IFRAME_STYLES }
 				{ !! onClick &&
@@ -331,7 +332,6 @@ const StyleBookBody = ( {
 				}
 				isSelected={ isSelected }
 				onSelect={ onSelect }
-				settings={ settings }
 				key={ category }
 			/>
 		</Iframe>
@@ -339,15 +339,7 @@ const StyleBookBody = ( {
 };
 
 const Examples = memo(
-	( {
-		className,
-		examples,
-		category,
-		label,
-		isSelected,
-		onSelect,
-		settings,
-	} ) => {
+	( { className, examples, category, label, isSelected, onSelect } ) => {
 		const categoryDefinition = category
 			? getTopLevelStyleBookCategories().find(
 					( _category ) => _category.slug === category
@@ -373,7 +365,6 @@ const Examples = memo(
 							title={ example.title }
 							blocks={ example.blocks }
 							isSelected={ isSelected( example.name ) }
-							settings={ settings }
 							onClick={ () => {
 								onSelect?.( example.name );
 							} }
@@ -394,7 +385,6 @@ const Examples = memo(
 								examples={ subcategory.examples }
 								isSelected={ isSelected }
 								onSelect={ onSelect }
-								settings={ settings }
 							/>
 						</Composite.Group>
 					) ) }
@@ -403,7 +393,7 @@ const Examples = memo(
 	}
 );
 
-const Subcategory = ( { examples, isSelected, onSelect, settings } ) => {
+const Subcategory = ( { examples, isSelected, onSelect } ) => {
 	return (
 		!! examples?.length &&
 		examples.map( ( example ) => (
@@ -416,21 +406,24 @@ const Subcategory = ( { examples, isSelected, onSelect, settings } ) => {
 				onClick={ () => {
 					onSelect?.( example.name );
 				} }
-				settings={ settings }
 			/>
 		) )
 	);
 };
 
-const Example = ( {
-	id,
-	title,
-	blocks,
-	isSelected,
-	onClick,
-	settings: originalSettings,
-} ) => {
-	const settings = { ...originalSettings, focusMode: false };
+const Example = ( { id, title, blocks, isSelected, onClick } ) => {
+	const originalSettings = useSelect(
+		( select ) => select( blockEditorStore ).getSettings(),
+		[]
+	);
+	const settings = useMemo(
+		() => ( {
+			...originalSettings,
+			focusMode: false, // Disable "Spotlight mode".
+			__unstableIsPreviewMode: true,
+		} ),
+		[ originalSettings ]
+	);
 
 	// Cache the list of blocks to avoid additional processing when the component is re-rendered.
 	const renderedBlocks = useMemo(
@@ -467,7 +460,7 @@ const Example = ( {
 								value={ renderedBlocks }
 								settings={ settings }
 							>
-								<EditorStyles styles={ settings.styles } />
+								<EditorStyles />
 								<BlockList renderAppender={ false } />
 							</ExperimentalBlockEditorProvider>
 						</Disabled>

From f8c76a35c8166ccb38ba27b7c4e7b6fcc67052a9 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Wed, 2 Oct 2024 17:41:37 +1000
Subject: [PATCH 5/9] Try no using blocks for color tab examples

---
 .../components/style-book/color-examples.tsx  |  44 ++++
 .../src/components/style-book/constants.ts    |  21 ++
 .../style-book/duotone-examples.tsx           |  53 +++++
 .../src/components/style-book/examples.ts     | 202 ------------------
 .../src/components/style-book/examples.tsx    | 113 ++++++++++
 .../src/components/style-book/index.js        |  22 +-
 .../src/components/style-book/types.ts        |   7 +-
 7 files changed, 248 insertions(+), 214 deletions(-)
 create mode 100644 packages/edit-site/src/components/style-book/color-examples.tsx
 create mode 100644 packages/edit-site/src/components/style-book/duotone-examples.tsx
 delete mode 100644 packages/edit-site/src/components/style-book/examples.ts
 create mode 100644 packages/edit-site/src/components/style-book/examples.tsx

diff --git a/packages/edit-site/src/components/style-book/color-examples.tsx b/packages/edit-site/src/components/style-book/color-examples.tsx
new file mode 100644
index 00000000000000..97bdeecee32d3d
--- /dev/null
+++ b/packages/edit-site/src/components/style-book/color-examples.tsx
@@ -0,0 +1,44 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { __experimentalGrid as Grid } from '@wordpress/components';
+import { View } from '@wordpress/primitives';
+import {
+	getColorClassName,
+	__experimentalGetGradientClass,
+} from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import type { Color, Gradient } from './types';
+
+const ColorExamples = ( { colors, type } ): JSX.Element | null => {
+	if ( ! colors ) {
+		return null;
+	}
+
+	return (
+		<Grid columns={ 2 } rowGap={ 8 } columnGap={ 16 }>
+			{ colors.map( ( color: Color | Gradient ) => {
+				const className =
+					type === 'gradients'
+						? __experimentalGetGradientClass( color.slug )
+						: getColorClassName( 'background-color', color.slug );
+				const classes = clsx(
+					'edit-site-style-book__color-example',
+					className
+				);
+
+				return <View key={ color.slug } className={ classes } />;
+			} ) }
+		</Grid>
+	);
+};
+
+export default ColorExamples;
diff --git a/packages/edit-site/src/components/style-book/constants.ts b/packages/edit-site/src/components/style-book/constants.ts
index 96352844177617..05f77ab2ad1e93 100644
--- a/packages/edit-site/src/components/style-book/constants.ts
+++ b/packages/edit-site/src/components/style-book/constants.ts
@@ -185,6 +185,27 @@ export const STYLE_BOOK_IFRAME_STYLES = `
 		outline: 3px solid transparent;
 	}
 
+	.edit-site-style-book__duotone-example > div:first-child {
+		display: flex;
+		aspect-ratio: 16 / 9;
+		grid-row: span 1;
+		grid-column: span 2;
+	}
+	.edit-site-style-book__duotone-example img {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+	}
+	.edit-site-style-book__duotone-example > div:not(:first-child) {
+		height: 20px;
+		border: 1px solid #ddd;
+	}
+
+	.edit-site-style-book__color-example {
+		height: 52px;
+		border: 1px solid #ddd;
+	}
+
 	.edit-site-style-book__examples.is-wide .edit-site-style-book__example {
 		flex-direction: row;
 	}
diff --git a/packages/edit-site/src/components/style-book/duotone-examples.tsx b/packages/edit-site/src/components/style-book/duotone-examples.tsx
new file mode 100644
index 00000000000000..7ee90e61f1c6aa
--- /dev/null
+++ b/packages/edit-site/src/components/style-book/duotone-examples.tsx
@@ -0,0 +1,53 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalGrid as Grid } from '@wordpress/components';
+import { View } from '@wordpress/primitives';
+
+/**
+ * Internal dependencies
+ */
+import type { Duotone } from './types';
+
+const DuotoneExamples = ( { duotones } ): JSX.Element | null => {
+	if ( ! duotones ) {
+		return null;
+	}
+
+	return (
+		<Grid columns={ 2 } rowGap={ 16 } columnGap={ 16 }>
+			{ duotones.map( ( duotone: Duotone ) => {
+				return (
+					<Grid
+						key={ duotone.slug }
+						className="edit-site-style-book__duotone-example"
+						columns={ 2 }
+						rowGap={ 8 }
+						columnGap={ 8 }
+					>
+						<View>
+							<img
+								alt={ `Duotone example: ${ duotone.slug }` }
+								src="https://s.w.org/images/core/5.3/MtBlanc1.jpg"
+								style={ {
+									filter: `url(#wp-duotone-${ duotone.slug })`,
+								} }
+							/>
+						</View>
+						{ duotone.colors.map( ( color ) => {
+							return (
+								<View
+									key={ color }
+									className="edit-site-style-book__color-example"
+									style={ { backgroundColor: color } }
+								/>
+							);
+						} ) }
+					</Grid>
+				);
+			} ) }
+		</Grid>
+	);
+};
+
+export default DuotoneExamples;
diff --git a/packages/edit-site/src/components/style-book/examples.ts b/packages/edit-site/src/components/style-book/examples.ts
deleted file mode 100644
index 3f43d7364a612f..00000000000000
--- a/packages/edit-site/src/components/style-book/examples.ts
+++ /dev/null
@@ -1,202 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __, sprintf } from '@wordpress/i18n';
-import {
-	getBlockType,
-	getBlockTypes,
-	getBlockFromExample,
-	createBlock,
-} from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
-import type {
-	Block,
-	BlockExample,
-	ColorItem,
-	ColorOrigin,
-	Duotone,
-	MultiOriginPalettes,
-} from './types';
-import { STYLE_BOOK_COLOR_GROUPS } from './constants';
-
-// Base CSS styles to be applied to color block examples.
-const defaultColorExampleStyles = {
-	dimensions: { minHeight: '52px' },
-	border: {
-		width: '1px',
-		style: 'solid',
-		color: '#ddd', // Match horizontal rule under sub title headings
-	},
-};
-
-/**
- * Creates an example block to demo a given color item for the Style Book.
- * A color example could be for a simple color, gradient, or duotone filter.
- *
- * @param {ColorItem} color The color for display.
- * @param {string}    type  Type of color e.g. color, gradient, or duotone.
- * @return {Block|undefined} Example block.
- */
-function getColorExample( color: ColorItem, type: string ): Block | undefined {
-	if ( type === 'colors' ) {
-		return createBlock( 'core/group', {
-			backgroundColor: color.slug,
-			style: defaultColorExampleStyles,
-		} );
-	}
-
-	if ( type === 'gradients' ) {
-		return createBlock( 'core/group', {
-			gradient: color.slug,
-			style: defaultColorExampleStyles,
-		} );
-	}
-
-	if ( type === 'duotones' ) {
-		return createBlock(
-			'core/group',
-			{
-				layout: {
-					type: 'grid',
-					columnCount: 2,
-					minimumColumnWidth: null,
-				},
-				style: { spacing: { blockGap: '8px' } },
-			},
-			[
-				createBlock( 'core/image', {
-					sizeSlug: 'medium',
-					url: 'https://s.w.org/images/core/5.3/MtBlanc1.jpg',
-					aspectRatio: '16/9',
-					scale: 'cover',
-					style: {
-						layout: { columnSpan: 2, rowSpan: 1 },
-						color: {
-							duotone: `var:preset|duotone|${ color.slug }`,
-						},
-					},
-				} ),
-				createBlock( 'core/group', {
-					style: {
-						...defaultColorExampleStyles,
-						color: { background: ( color as Duotone ).colors[ 0 ] },
-						dimensions: { minHeight: '20px' },
-					},
-				} ),
-				createBlock( 'core/group', {
-					style: {
-						...defaultColorExampleStyles,
-						color: { background: ( color as Duotone ).colors[ 1 ] },
-						dimensions: { minHeight: '20px' },
-					},
-				} ),
-			]
-		);
-	}
-}
-
-/**
- * Returns examples color examples for each origin
- * e.g. Core (Default), Theme, and User.
- *
- * @param {MultiOriginPalettes} colors Global Styles color palettes per origin.
- * @return {BlockExample[]} An array of color block examples.
- */
-function getColorExamples( colors: MultiOriginPalettes ): BlockExample[] {
-	if ( ! colors ) {
-		return [];
-	}
-
-	const examples: BlockExample[] = [];
-
-	STYLE_BOOK_COLOR_GROUPS.forEach( ( group ) => {
-		const palette = colors[ group.type ].find(
-			( origin: ColorOrigin ) => origin.slug === group.origin
-		);
-
-		if ( palette?.[ group.type ] ) {
-			const rowGap = group.type === 'duotones' ? '16px' : '8px';
-			const example: BlockExample = {
-				name: group.slug,
-				title: group.title,
-				category: 'colors',
-				blocks: [
-					createBlock(
-						'core/group',
-						{
-							layout: {
-								type: 'grid',
-								columnCount: 2,
-								minimumColumnWidth: null,
-							},
-							style: {
-								spacing: {
-									blockGap: { top: rowGap, left: '16px' },
-								},
-							},
-						},
-						palette[ group.type ].map( ( color: ColorItem ) =>
-							getColorExample( color, group.type )
-						)
-					),
-				],
-			};
-			examples.push( example );
-		}
-	} );
-
-	return examples;
-}
-
-/**
- * Returns a list of examples for registered block types.
- *
- * @param {MultiOriginPalettes} colors Global styles colors grouped by origin e.g. Core, Theme, and User.
- * @return {BlockExample[]} An array of block examples.
- */
-export function getExamples( colors: MultiOriginPalettes ): BlockExample[] {
-	const nonHeadingBlockExamples = getBlockTypes()
-		.filter( ( blockType ) => {
-			const { name, example, supports } = blockType;
-			return (
-				name !== 'core/heading' &&
-				!! example &&
-				supports?.inserter !== false
-			);
-		} )
-		.map( ( blockType ) => ( {
-			name: blockType.name,
-			title: blockType.title,
-			category: blockType.category,
-			blocks: getBlockFromExample( blockType.name, blockType.example ),
-		} ) );
-	const isHeadingBlockRegistered = !! getBlockType( 'core/heading' );
-
-	if ( ! isHeadingBlockRegistered ) {
-		return nonHeadingBlockExamples;
-	}
-
-	// Use our own example for the Heading block so that we can show multiple
-	// heading levels.
-	const headingsExample = {
-		name: 'core/heading',
-		title: __( 'Headings' ),
-		category: 'text',
-		blocks: [ 1, 2, 3, 4, 5, 6 ].map( ( level ) => {
-			return createBlock( 'core/heading', {
-				content: sprintf(
-					// translators: %d: heading level e.g: "1", "2", "3"
-					__( 'Heading %d' ),
-					level
-				),
-				level,
-			} );
-		} ),
-	};
-	const colorExamples = getColorExamples( colors );
-
-	return [ headingsExample, ...colorExamples, ...nonHeadingBlockExamples ];
-}
diff --git a/packages/edit-site/src/components/style-book/examples.tsx b/packages/edit-site/src/components/style-book/examples.tsx
new file mode 100644
index 00000000000000..9f4badd99a6582
--- /dev/null
+++ b/packages/edit-site/src/components/style-book/examples.tsx
@@ -0,0 +1,113 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import {
+	getBlockType,
+	getBlockTypes,
+	getBlockFromExample,
+	createBlock,
+} from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import type { BlockExample, ColorOrigin, MultiOriginPalettes } from './types';
+import ColorExamples from './color-examples';
+import DuotoneExamples from './duotone-examples';
+import { STYLE_BOOK_COLOR_GROUPS } from './constants';
+
+/**
+ * Returns examples color examples for each origin
+ * e.g. Core (Default), Theme, and User.
+ *
+ * @param {MultiOriginPalettes} colors Global Styles color palettes per origin.
+ * @return {BlockExample[]} An array of color block examples.
+ */
+function getColorExamples( colors: MultiOriginPalettes ): BlockExample[] {
+	if ( ! colors ) {
+		return [];
+	}
+
+	const examples: BlockExample[] = [];
+
+	STYLE_BOOK_COLOR_GROUPS.forEach( ( group ) => {
+		const palette = colors[ group.type ].find(
+			( origin: ColorOrigin ) => origin.slug === group.origin
+		);
+
+		if ( palette?.[ group.type ] ) {
+			const example: BlockExample = {
+				name: group.slug,
+				title: group.title,
+				category: 'colors',
+			};
+			if ( group.type === 'duotones' ) {
+				example.content = (
+					<DuotoneExamples duotones={ palette[ group.type ] } />
+				);
+				examples.push( example );
+			} else {
+				example.content = (
+					<ColorExamples
+						colors={ palette[ group.type ] }
+						type={ group.type }
+					/>
+				);
+				examples.push( example );
+			}
+		}
+	} );
+
+	return examples;
+}
+
+/**
+ * Returns a list of examples for registered block types.
+ *
+ * @param {MultiOriginPalettes} colors Global styles colors grouped by origin e.g. Core, Theme, and User.
+ * @return {BlockExample[]} An array of block examples.
+ */
+export function getExamples( colors: MultiOriginPalettes ): BlockExample[] {
+	const nonHeadingBlockExamples = getBlockTypes()
+		.filter( ( blockType ) => {
+			const { name, example, supports } = blockType;
+			return (
+				name !== 'core/heading' &&
+				!! example &&
+				supports?.inserter !== false
+			);
+		} )
+		.map( ( blockType ) => ( {
+			name: blockType.name,
+			title: blockType.title,
+			category: blockType.category,
+			blocks: getBlockFromExample( blockType.name, blockType.example ),
+		} ) );
+	const isHeadingBlockRegistered = !! getBlockType( 'core/heading' );
+
+	if ( ! isHeadingBlockRegistered ) {
+		return nonHeadingBlockExamples;
+	}
+
+	// Use our own example for the Heading block so that we can show multiple
+	// heading levels.
+	const headingsExample = {
+		name: 'core/heading',
+		title: __( 'Headings' ),
+		category: 'text',
+		blocks: [ 1, 2, 3, 4, 5, 6 ].map( ( level ) => {
+			return createBlock( 'core/heading', {
+				content: sprintf(
+					// translators: %d: heading level e.g: "1", "2", "3"
+					__( 'Heading %d' ),
+					level
+				),
+				level,
+			} );
+		} ),
+	};
+	const colorExamples = getColorExamples( colors );
+
+	return [ headingsExample, ...colorExamples, ...nonHeadingBlockExamples ];
+}
diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js
index ac0a990758f5ad..5e29d1971a04dd 100644
--- a/packages/edit-site/src/components/style-book/index.js
+++ b/packages/edit-site/src/components/style-book/index.js
@@ -363,6 +363,7 @@ const Examples = memo(
 							key={ example.name }
 							id={ `example-${ example.name }` }
 							title={ example.title }
+							content={ example.content }
 							blocks={ example.blocks }
 							isSelected={ isSelected( example.name ) }
 							onClick={ () => {
@@ -401,6 +402,7 @@ const Subcategory = ( { examples, isSelected, onSelect } ) => {
 				key={ example.name }
 				id={ `example-${ example.name }` }
 				title={ example.title }
+				content={ example.content }
 				blocks={ example.blocks }
 				isSelected={ isSelected( example.name ) }
 				onClick={ () => {
@@ -411,7 +413,7 @@ const Subcategory = ( { examples, isSelected, onSelect } ) => {
 	);
 };
 
-const Example = ( { id, title, blocks, isSelected, onClick } ) => {
+const Example = ( { id, title, blocks, isSelected, onClick, content } ) => {
 	const originalSettings = useSelect(
 		( select ) => select( blockEditorStore ).getSettings(),
 		[]
@@ -456,13 +458,17 @@ const Example = ( { id, title, blocks, isSelected, onClick } ) => {
 						aria-hidden
 					>
 						<Disabled className="edit-site-style-book__example-preview__content">
-							<ExperimentalBlockEditorProvider
-								value={ renderedBlocks }
-								settings={ settings }
-							>
-								<EditorStyles />
-								<BlockList renderAppender={ false } />
-							</ExperimentalBlockEditorProvider>
+							{ content ? (
+								content
+							) : (
+								<ExperimentalBlockEditorProvider
+									value={ renderedBlocks }
+									settings={ settings }
+								>
+									<EditorStyles />
+									<BlockList renderAppender={ false } />
+								</ExperimentalBlockEditorProvider>
+							) }
 						</Disabled>
 					</div>
 				</Composite.Item>
diff --git a/packages/edit-site/src/components/style-book/types.ts b/packages/edit-site/src/components/style-book/types.ts
index 651d24f94a2f6a..e7be17b17dd4df 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 @@
-export type Block = {
+type Block = {
 	name: string;
 	attributes: Record< string, unknown >;
 	innerBlocks?: Block[];
@@ -17,7 +17,8 @@ export type BlockExample = {
 	name: string;
 	title: string;
 	category: string;
-	blocks: Block | Block[];
+	content?: JSX.Element;
+	blocks?: Block | Block[];
 };
 
 export type CategoryExamples = {
@@ -41,8 +42,6 @@ export type Duotone = {
 	slug: string;
 };
 
-export type ColorItem = Color | Gradient | Duotone;
-
 export type ColorOrigin = {
 	name: string;
 	slug: string;

From 50a1096d858cff5efc9456b68b46e106ac377f80 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Fri, 11 Oct 2024 16:17:28 +1000
Subject: [PATCH 6/9] Add missing theme gradients

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

diff --git a/packages/edit-site/src/components/style-book/constants.ts b/packages/edit-site/src/components/style-book/constants.ts
index 05f77ab2ad1e93..d4450a1256d61b 100644
--- a/packages/edit-site/src/components/style-book/constants.ts
+++ b/packages/edit-site/src/components/style-book/constants.ts
@@ -15,6 +15,12 @@ export const STYLE_BOOK_COLOR_GROUPS: StyleBookColorGroup[] = [
 		origin: 'theme',
 		type: 'colors',
 	},
+	{
+		slug: 'theme-gradients',
+		title: __( 'Theme Gradients' ),
+		origin: 'theme',
+		type: 'gradients',
+	},
 	{
 		slug: 'custom-colors',
 		title: __( 'Custom Colors' ),

From 7ff90785a547b7c54ba6af09509c9b0e493bcb91 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Wed, 16 Oct 2024 17:40:19 +1000
Subject: [PATCH 7/9] Try different approach to preventing duotone navigation

---
 packages/edit-site/src/components/global-styles/ui.js |  4 ----
 .../edit-site/src/components/style-book/constants.ts  |  4 ++++
 packages/edit-site/src/components/style-book/index.js | 11 +++++++++++
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js
index 4c1b00b283b06f..9ca88f40f1f001 100644
--- a/packages/edit-site/src/components/global-styles/ui.js
+++ b/packages/edit-site/src/components/global-styles/ui.js
@@ -192,10 +192,6 @@ function GlobalStylesStyleBook() {
 				)
 			}
 			onSelect={ ( blockName ) => {
-				if ( blockName === 'duotones' ) {
-					return;
-				}
-
 				if (
 					STYLE_BOOK_COLOR_GROUPS.find(
 						( group ) => group.slug === blockName
diff --git a/packages/edit-site/src/components/style-book/constants.ts b/packages/edit-site/src/components/style-book/constants.ts
index d4450a1256d61b..1ba1bf5e3dffa9 100644
--- a/packages/edit-site/src/components/style-book/constants.ts
+++ b/packages/edit-site/src/components/style-book/constants.ts
@@ -186,6 +186,10 @@ export const STYLE_BOOK_IFRAME_STYLES = `
 		box-shadow: 0 0 0 1px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
 	}
 
+	.edit-site-style-book__example.is-disabled-example {
+		pointer-events: none;
+	}
+
 	.edit-site-style-book__example:focus:not(:disabled) {
 		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
 		outline: 3px solid transparent;
diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js
index 5e29d1971a04dd..d6c20b34fe518d 100644
--- a/packages/edit-site/src/components/style-book/index.js
+++ b/packages/edit-site/src/components/style-book/index.js
@@ -413,6 +413,8 @@ const Subcategory = ( { examples, isSelected, onSelect } ) => {
 	);
 };
 
+const disabledExamples = [ 'example-duotones' ];
+
 const Example = ( { id, title, blocks, isSelected, onClick, content } ) => {
 	const originalSettings = useSelect(
 		( select ) => select( blockEditorStore ).getSettings(),
@@ -433,12 +435,20 @@ const Example = ( { id, title, blocks, isSelected, onClick, content } ) => {
 		[ blocks ]
 	);
 
+	const disabledProps = disabledExamples.includes( id )
+		? {
+				disabled: true,
+				accessibleWhenDisabled: true,
+		  }
+		: {};
+
 	return (
 		<div role="row">
 			<div role="gridcell">
 				<Composite.Item
 					className={ clsx( 'edit-site-style-book__example', {
 						'is-selected': isSelected,
+						'is-disabled-example': !! disabledProps?.disabled,
 					} ) }
 					id={ id }
 					aria-label={ sprintf(
@@ -449,6 +459,7 @@ const Example = ( { id, title, blocks, isSelected, onClick, content } ) => {
 					render={ <div /> }
 					role="button"
 					onClick={ onClick }
+					{ ...disabledProps }
 				>
 					<span className="edit-site-style-book__example-title">
 						{ title }

From d13c2f7de08b8890db67f1c3a6d95be516d3c702 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Wed, 16 Oct 2024 17:45:18 +1000
Subject: [PATCH 8/9] Fix and improve translation context strings

---
 .../use-multiple-origin-colors-and-gradients.js            | 2 +-
 packages/edit-site/src/components/style-book/index.js      | 7 +++----
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/block-editor/src/components/colors-gradients/use-multiple-origin-colors-and-gradients.js b/packages/block-editor/src/components/colors-gradients/use-multiple-origin-colors-and-gradients.js
index 1163492c322378..cfa5930ba7034c 100644
--- a/packages/block-editor/src/components/colors-gradients/use-multiple-origin-colors-and-gradients.js
+++ b/packages/block-editor/src/components/colors-gradients/use-multiple-origin-colors-and-gradients.js
@@ -77,7 +77,7 @@ export default function useMultipleOriginColorsAndGradients() {
 			result.push( {
 				name: _x(
 					'Custom',
-					'Indicates this palette comes from the theme.'
+					'Indicates this palette is created by the user.'
 				),
 				slug: 'custom',
 				colors: customColors,
diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js
index d6c20b34fe518d..3833011e7b40d0 100644
--- a/packages/edit-site/src/components/style-book/index.js
+++ b/packages/edit-site/src/components/style-book/index.js
@@ -90,7 +90,7 @@ function useMultiOriginPalettes() {
 			result.duotones.push( {
 				name: _x(
 					'Theme',
-					'Indicates this palette comes from the theme.'
+					'Indicates these duotone filters come from the theme.'
 				),
 				slug: 'theme',
 				duotones: themeDuotones,
@@ -105,7 +105,7 @@ function useMultiOriginPalettes() {
 			result.duotones.push( {
 				name: _x(
 					'Default',
-					'Indicates this palette comes from WordPress.'
+					'Indicates these duotone filters come from WordPress.'
 				),
 				slug: 'default',
 				duotones: defaultDuotones,
@@ -115,8 +115,7 @@ function useMultiOriginPalettes() {
 			result.duotones.push( {
 				name: _x(
 					'Custom',
-					// TODO: Should the follow saying from the theme or user? It currently matches useMultipleOriginColorsAndGradients.
-					'Indicates this palette comes from the theme.'
+					'Indicates these doutone filters are created by the user.'
 				),
 				slug: 'custom',
 				duotones: customDuotones,

From 4d4a0950abf8ada7361e38bf16639d1db5589bda Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Wed, 16 Oct 2024 18:04:10 +1000
Subject: [PATCH 9/9] Remove extraneous todo comment

---
 packages/edit-site/src/components/style-book/index.js | 1 -
 1 file changed, 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 3833011e7b40d0..0db99cfe56638a 100644
--- a/packages/edit-site/src/components/style-book/index.js
+++ b/packages/edit-site/src/components/style-book/index.js
@@ -70,7 +70,6 @@ function useMultiOriginPalettes() {
 	const { colors, gradients } = useMultipleOriginColorsAndGradients();
 
 	// Add duotone filters to the palettes data.
-	// TODO: Might need to include `disableCustomDuotones` setting or whatever to match colors/gradients from useMultipleOriginColorsAndGradients.
 	const [
 		shouldDisplayDefaultDuotones,
 		customDuotones,