Try no using blocks for color tab examples

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;

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;
 	}

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;