Try rendering only style overrides and duotone svgs in each example

WordPress · Oct 1, 2024 · eb74467 · eb74467
1 parent 2874f35
commit eb74467
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 3 deletions.
diff --git 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
@@ -9,6 +9,7 @@ import clsx from 'clsx';
 import {
 	Disabled,
 	Composite,
+	SVG,
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { __, _x, sprintf } from '@wordpress/i18n';
@@ -308,6 +309,7 @@ const StyleBookBody = ( {
 			tabIndex={ 0 }
 			{ ...( onClick ? buttonModeProps : {} ) }
 		>
+			<EditorStyles styles={ settings.styles } />
 			<style>
 				{ STYLE_BOOK_IFRAME_STYLES }
 				{ !! onClick &&
@@ -466,8 +468,7 @@ const Example = ( {
 								value={ renderedBlocks }
 								settings={ settings }
 							>
-								<EditorStyles styles={ settings.styles } />
-								<BlockList renderAppender={ false } />
+								<ExampleBlocks />
 							</ExperimentalBlockEditorProvider>
 						</Disabled>
 					</div>
@@ -477,4 +478,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;