From 8d81fa8fd47756a0aae2a331c84916035f11bf9d Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Thu, 2 Mar 2023 16:43:15 +1100
Subject: [PATCH 01/12] Style Book: Try moving iframe to root of content area

---
 .../src/components/style-book/index.js        | 137 +++++++++++++-----
 .../src/components/style-book/style.scss      |   2 +-
 2 files changed, 103 insertions(+), 36 deletions(-)

diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js
index b9b6b63cfe4a9e..05e398ee502ec0 100644
--- a/packages/edit-site/src/components/style-book/index.js
+++ b/packages/edit-site/src/components/style-book/index.js
@@ -8,6 +8,7 @@ import classnames from 'classnames';
  */
 import {
 	Button,
+	Disabled,
 	TabPanel,
 	createSlotFill,
 	__experimentalUseSlotFills as useSlotFills,
@@ -20,9 +21,13 @@ import {
 	createBlock,
 } from '@wordpress/blocks';
 import {
-	BlockPreview,
+	BlockList,
 	privateApis as blockEditorPrivateApis,
+	store as blockEditorStore,
+	__unstableEditorStyles as EditorStyles,
+	__unstableIframe as Iframe,
 } from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
 import { closeSmall } from '@wordpress/icons';
 import {
 	useResizeObserver,
@@ -38,7 +43,9 @@ import { ESCAPE } from '@wordpress/keycodes';
  */
 import { unlock } from '../../private-apis';
 
-const { useGlobalStyle } = unlock( blockEditorPrivateApis );
+const { ExperimentalBlockEditorProvider, useGlobalStyle } = unlock(
+	blockEditorPrivateApis
+);
 
 const SLOT_FILL_NAME = 'EditSiteStyleBook';
 const { Slot: StyleBookSlot, Fill: StyleBookFill } =
@@ -118,6 +125,15 @@ function StyleBook( { isSelected, onSelect, onClose } ) {
 		[ examples ]
 	);
 
+	const originalSettings = useSelect(
+		( select ) => select( blockEditorStore ).getSettings(),
+		[]
+	);
+	const settings = useMemo(
+		() => ( { ...originalSettings, __unstableIsPreviewMode: true } ),
+		[ originalSettings ]
+	);
+
 	function closeOnEscape( event ) {
 		if ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {
 			event.preventDefault();
@@ -156,12 +172,51 @@ function StyleBook( { isSelected, onSelect, onClose } ) {
 					tabs={ tabs }
 				>
 					{ ( tab ) => (
-						<Examples
-							examples={ examples }
-							category={ tab.name }
-							isSelected={ isSelected }
-							onSelect={ onSelect }
-						/>
+						<Iframe
+							head={
+								<>
+									<EditorStyles styles={ settings.styles } />
+									<style>{
+										// Forming a "block formatting context" to prevent margin collapsing.
+										// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
+										`.is-root-container { display: flow-root; }
+										body { position: relative; padding: 32px !important; }
+
+										.edit-site-style-book__example {
+											background: none;
+											border-radius: 2px;
+											border: none;
+											color: inherit;
+											cursor: pointer;
+											display: flex;
+											flex-direction: column;
+											gap: 40px;
+											margin-bottom: 40px;
+											padding: 16px;
+											width: 100%;
+											box-sizing: border-box;
+										}
+
+										.edit-site-style-book__example.is-selected {
+											box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
+										}
+
+										.edit-site-style-book.is-wide .edit-site-style-book__example {
+											flex-direction: row;
+										}
+										`
+									}</style>
+								</>
+							}
+							texIndex={ -1 }
+						>
+							<Examples
+								examples={ examples }
+								category={ tab.name }
+								isSelected={ isSelected }
+								onSelect={ onSelect }
+							/>
+						</Iframe>
 					) }
 				</TabPanel>
 			</section>
@@ -187,34 +242,46 @@ const Examples = memo( ( { examples, category, isSelected, onSelect } ) => (
 	</div>
 ) );
 
-const Example = memo( ( { title, blocks, isSelected, onClick } ) => (
-	<button
-		className={ classnames( 'edit-site-style-book__example', {
-			'is-selected': isSelected,
-		} ) }
-		aria-label={ sprintf(
-			// translators: %s: Title of a block, e.g. Heading.
-			__( 'Open %s styles in Styles panel' ),
-			title
-		) }
-		onClick={ onClick }
-	>
-		<span className="edit-site-style-book__example-title">{ title }</span>
-		<div className="edit-site-style-book__example-preview">
-			<BlockPreview
-				blocks={ blocks }
-				viewportWidth={ 0 }
-				additionalStyles={ [
-					{
-						css:
-							'.wp-block:first-child { margin-top: 0; }' +
-							'.wp-block:last-child { margin-bottom: 0; }',
-					},
-				] }
-			/>
+const Example = memo( ( { title, blocks, isSelected, onClick } ) => {
+	const originalSettings = useSelect(
+		( select ) => select( blockEditorStore ).getSettings(),
+		[]
+	);
+	const settings = useMemo(
+		() => ( { ...originalSettings, __unstableIsPreviewMode: true } ),
+		[ originalSettings ]
+	);
+
+	/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
+	return (
+		<div
+			className={ classnames( 'edit-site-style-book__example', {
+				'is-selected': isSelected,
+			} ) }
+			aria-label={ sprintf(
+				// translators: %s: Title of a block, e.g. Heading.
+				__( 'Open %s styles in Styles panel' ),
+				title
+			) }
+			onClick={ onClick }
+		>
+			<span className="edit-site-style-book__example-title">
+				{ title }
+			</span>
+			<div className="edit-site-style-book__example-preview">
+				<Disabled className="edit-site-style-book__example-preview__content">
+					<ExperimentalBlockEditorProvider
+						value={ Array.isArray( blocks ) ? blocks : [ blocks ] }
+						settings={ settings }
+					>
+						<BlockList renderAppender={ false } />
+					</ExperimentalBlockEditorProvider>
+				</Disabled>
+			</div>
 		</div>
-	</button>
-) );
+	);
+	/* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
+} );
 
 function useHasStyleBook() {
 	const fills = useSlotFills( SLOT_FILL_NAME );
diff --git a/packages/edit-site/src/components/style-book/style.scss b/packages/edit-site/src/components/style-book/style.scss
index fc88c399cac207..6ab68a99f9c5bf 100644
--- a/packages/edit-site/src/components/style-book/style.scss
+++ b/packages/edit-site/src/components/style-book/style.scss
@@ -26,7 +26,7 @@
 		bottom: 0;
 		left: 0;
 		overflow: auto;
-		padding: $grid-unit-40;
+		padding: 0;
 		position: absolute;
 		right: 0;
 		top: $grid-unit-60; // Height of tabs.

From 5e5b7c32b7eb6f95bae302aa330e417522d1d495 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Fri, 3 Mar 2023 12:08:45 +1100
Subject: [PATCH 02/12] Try to match styles inside the iframe to the existing
 text styles from Gutenberg

---
 .../src/components/style-book/index.js        | 70 ++++++++++++++-----
 .../src/components/style-book/style.scss      | 44 ------------
 2 files changed, 51 insertions(+), 63 deletions(-)

diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js
index 05e398ee502ec0..c0dcf08d7ccc71 100644
--- a/packages/edit-site/src/components/style-book/index.js
+++ b/packages/edit-site/src/components/style-book/index.js
@@ -182,6 +182,11 @@ function StyleBook( { isSelected, onSelect, onClose } ) {
 										`.is-root-container { display: flow-root; }
 										body { position: relative; padding: 32px !important; }
 
+										.edit-site-style-book__examples {
+											max-width: 900px;
+											margin: 0 auto;
+										}
+
 										.edit-site-style-book__example {
 											background: none;
 											border-radius: 2px;
@@ -201,16 +206,41 @@ function StyleBook( { isSelected, onSelect, onClose } ) {
 											box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
 										}
 
-										.edit-site-style-book.is-wide .edit-site-style-book__example {
+										.edit-site-style-book__examples.is-wide .edit-site-style-book__example {
 											flex-direction: row;
 										}
+
+										.edit-site-style-book__example-title {
+											font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+											font-size: 11px;
+											font-weight: 500;
+											line-height: normal;
+											margin: 0;
+											text-align: left;
+											text-transform: uppercase;
+										}
+
+										.edit-site-style-book__examples.is-wide .edit-site-style-book__example-title {
+											text-align: right;
+											width: 120px;
+										}
+
+										.edit-site-style-book__example-preview {
+											width: 100%;
+										}
 										`
 									}</style>
 								</>
 							}
-							texIndex={ -1 }
+							tabIndex={ -1 }
 						>
 							<Examples
+								className={ classnames(
+									'edit-site-style-book__examples',
+									{
+										'is-wide': sizes.width > 600,
+									}
+								) }
 								examples={ examples }
 								category={ tab.name }
 								isSelected={ isSelected }
@@ -224,23 +254,25 @@ function StyleBook( { isSelected, onSelect, onClose } ) {
 	);
 }
 
-const Examples = memo( ( { examples, category, isSelected, onSelect } ) => (
-	<div className="edit-site-style-book__examples">
-		{ examples
-			.filter( ( example ) => example.category === category )
-			.map( ( example ) => (
-				<Example
-					key={ example.name }
-					title={ example.title }
-					blocks={ example.blocks }
-					isSelected={ isSelected( example.name ) }
-					onClick={ () => {
-						onSelect( example.name );
-					} }
-				/>
-			) ) }
-	</div>
-) );
+const Examples = memo(
+	( { className, examples, category, isSelected, onSelect } ) => (
+		<div className={ className }>
+			{ examples
+				.filter( ( example ) => example.category === category )
+				.map( ( example ) => (
+					<Example
+						key={ example.name }
+						title={ example.title }
+						blocks={ example.blocks }
+						isSelected={ isSelected( example.name ) }
+						onClick={ () => {
+							onSelect( example.name );
+						} }
+					/>
+				) ) }
+		</div>
+	)
+);
 
 const Example = memo( ( { title, blocks, isSelected, onClick } ) => {
 	const originalSettings = useSelect(
diff --git a/packages/edit-site/src/components/style-book/style.scss b/packages/edit-site/src/components/style-book/style.scss
index 6ab68a99f9c5bf..881b117a75ccb3 100644
--- a/packages/edit-site/src/components/style-book/style.scss
+++ b/packages/edit-site/src/components/style-book/style.scss
@@ -32,47 +32,3 @@
 		top: $grid-unit-60; // Height of tabs.
 	}
 }
-
-.edit-site-style-book__examples {
-	max-width: 900px;
-	margin: 0 auto;
-}
-
-.edit-site-style-book__example {
-	background: none;
-	border-radius: $radius-block-ui;
-	border: none;
-	color: inherit;
-	cursor: pointer;
-	display: flex;
-	flex-direction: column;
-	gap: $grid-unit-50;
-	margin-bottom: $grid-unit-50;
-	padding: $grid-unit-20;
-	width: 100%;
-
-	&.is-selected {
-		box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
-	}
-
-	.edit-site-style-book.is-wide & {
-		flex-direction: row;
-	}
-}
-
-.edit-site-style-book__example-title {
-	font-size: 11px;
-	font-weight: 500;
-	margin: 0;
-	text-align: left;
-	text-transform: uppercase;
-
-	.edit-site-style-book.is-wide & {
-		text-align: right;
-		width: 120px;
-	}
-}
-
-.edit-site-style-book__example-preview {
-	width: 100%;
-}

From bb07045acfde2d1bf79eeff511463c8d1cc9b973 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Fri, 3 Mar 2023 12:30:30 +1100
Subject: [PATCH 03/12] Restore margin rules to prevent vertical margins on
 previews from affecting the height of the preview

---
 packages/edit-site/src/components/style-book/index.js | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js
index c0dcf08d7ccc71..e2005985bc863d 100644
--- a/packages/edit-site/src/components/style-book/index.js
+++ b/packages/edit-site/src/components/style-book/index.js
@@ -228,6 +228,13 @@ function StyleBook( { isSelected, onSelect, onClose } ) {
 										.edit-site-style-book__example-preview {
 											width: 100%;
 										}
+
+										.edit-site-style-book__example-preview .is-root-container > .wp-block:first-child {
+											margin-top: 0;
+										}
+										.edit-site-style-book__example-preview .is-root-container > .wp-block:last-child {
+											margin-bottom: 0;
+										}
 										`
 									}</style>
 								</>

From 8f370706ec9f148cae6e2e19c3e51da929ab69b3 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Fri, 3 Mar 2023 13:56:29 +1100
Subject: [PATCH 04/12] Fix svg filters, attempt to fix tabbing behaviour

---
 packages/edit-site/src/components/style-book/index.js | 5 ++++-
 1 file changed, 4 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 e2005985bc863d..990f75d2423af4 100644
--- a/packages/edit-site/src/components/style-book/index.js
+++ b/packages/edit-site/src/components/style-book/index.js
@@ -239,8 +239,10 @@ function StyleBook( { isSelected, onSelect, onClose } ) {
 									}</style>
 								</>
 							}
-							tabIndex={ -1 }
+							tabIndex={ 0 }
 						>
+							{ /* Filters need to be rendered before children to avoid Safari rendering issues. */ }
+							{ settings.svgFilters }
 							<Examples
 								className={ classnames(
 									'edit-site-style-book__examples',
@@ -303,6 +305,7 @@ const Example = memo( ( { title, blocks, isSelected, onClick } ) => {
 				title
 			) }
 			onClick={ onClick }
+			tabIndex={ 0 }
 		>
 			<span className="edit-site-style-book__example-title">
 				{ title }

From fb5e7554494fbbd30023ae59a30010462ca68153 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Fri, 3 Mar 2023 14:38:37 +1100
Subject: [PATCH 05/12] Add Enter key handling, button role, update e2e tests

---
 .../src/components/style-book/index.js        | 12 ++++-
 test/e2e/specs/site-editor/style-book.spec.js | 52 ++++++++++++-------
 2 files changed, 45 insertions(+), 19 deletions(-)

diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js
index 990f75d2423af4..ac4aaba938db79 100644
--- a/packages/edit-site/src/components/style-book/index.js
+++ b/packages/edit-site/src/components/style-book/index.js
@@ -36,7 +36,7 @@ import {
 	useMergeRefs,
 } from '@wordpress/compose';
 import { useMemo, memo } from '@wordpress/element';
-import { ESCAPE } from '@wordpress/keycodes';
+import { ENTER, ESCAPE } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
@@ -173,6 +173,7 @@ function StyleBook( { isSelected, onSelect, onClose } ) {
 				>
 					{ ( tab ) => (
 						<Iframe
+							className="edit-site-style-book__iframe"
 							head={
 								<>
 									<EditorStyles styles={ settings.styles } />
@@ -293,6 +294,13 @@ const Example = memo( ( { title, blocks, isSelected, onClick } ) => {
 		[ originalSettings ]
 	);
 
+	const selectOnEnter = ( event ) => {
+		if ( event.keyCode === ENTER ) {
+			event.preventDefault();
+			onClick();
+		}
+	};
+
 	/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
 	return (
 		<div
@@ -304,7 +312,9 @@ const Example = memo( ( { title, blocks, isSelected, onClick } ) => {
 				__( 'Open %s styles in Styles panel' ),
 				title
 			) }
+			role="button"
 			onClick={ onClick }
+			onKeyDown={ selectOnEnter }
 			tabIndex={ 0 }
 		>
 			<span className="edit-site-style-book__example-title">
diff --git a/test/e2e/specs/site-editor/style-book.spec.js b/test/e2e/specs/site-editor/style-book.spec.js
index f3c06308b92154..45863124c044e6 100644
--- a/test/e2e/specs/site-editor/style-book.spec.js
+++ b/test/e2e/specs/site-editor/style-book.spec.js
@@ -59,37 +59,50 @@ test.describe( 'Style Book', () => {
 		).toBeVisible();
 		await expect( page.locator( 'role=tab[name="Theme"i]' ) ).toBeVisible();
 
+		// Buttons to select block examples are rendered within the Style Book iframe.
+		let styleBookIframeLocator = page.frameLocator(
+			'.edit-site-style-book__iframe'
+		);
+
 		await expect(
-			page.locator(
-				'role=button[name="Open Headings styles in Styles panel"i]'
-			)
+			styleBookIframeLocator.getByRole( 'button', {
+				name: 'Open Headings styles in Styles panel',
+			} )
 		).toBeVisible();
 		await expect(
-			page.locator(
-				'role=button[name="Open Paragraph styles in Styles panel"i]'
-			)
+			styleBookIframeLocator.getByRole( 'button', {
+				name: 'Open Paragraph styles in Styles panel',
+			} )
 		).toBeVisible();
 
 		await page.click( 'role=tab[name="Media"i]' );
 
+		// The tab has changed, which means the iframe has been re-rendered.
+		styleBookIframeLocator = page.frameLocator(
+			'.edit-site-style-book__iframe'
+		);
+
 		await expect(
-			page.locator(
-				'role=button[name="Open Image styles in Styles panel"i]'
-			)
+			styleBookIframeLocator.getByRole( 'button', {
+				name: 'Open Image styles in Styles panel',
+			} )
 		).toBeVisible();
 		await expect(
-			page.locator(
-				'role=button[name="Open Gallery styles in Styles panel"i]'
-			)
+			styleBookIframeLocator.getByRole( 'button', {
+				name: 'Open Gallery styles in Styles panel',
+			} )
 		).toBeVisible();
 	} );
 
 	test( 'should open correct Global Styles panel when example is clicked', async ( {
 		page,
 	} ) => {
-		await page.click(
-			'role=button[name="Open Headings styles in Styles panel"i]'
-		);
+		await page
+			.frameLocator( '.edit-site-style-book__iframe' )
+			.getByRole( 'button', {
+				name: 'Open Headings styles in Styles panel',
+			} )
+			.click();
 
 		await expect(
 			page.locator(
@@ -105,9 +118,12 @@ test.describe( 'Style Book', () => {
 		await page.click( 'role=button[name="Heading block styles"]' );
 		await page.click( 'role=button[name="Typography styles"]' );
 
-		await page.click(
-			'role=button[name="Open Quote styles in Styles panel"i]'
-		);
+		await page
+			.frameLocator( '.edit-site-style-book__iframe' )
+			.getByRole( 'button', {
+				name: 'Open Quote styles in Styles panel',
+			} )
+			.click();
 
 		await page.click( 'role=button[name="Navigate to the previous view"]' );
 		await page.click( 'role=button[name="Navigate to the previous view"]' );

From 70696cb9910664a4ef9080d6ea585c79ee3904c8 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Fri, 3 Mar 2023 15:08:39 +1100
Subject: [PATCH 06/12] Tidy hard-coded styling rules

---
 .../src/components/style-book/index.js        | 128 ++++++++++--------
 1 file changed, 68 insertions(+), 60 deletions(-)

diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js
index ac4aaba938db79..7a9d3398e0bfe2 100644
--- a/packages/edit-site/src/components/style-book/index.js
+++ b/packages/edit-site/src/components/style-book/index.js
@@ -51,6 +51,66 @@ const SLOT_FILL_NAME = 'EditSiteStyleBook';
 const { Slot: StyleBookSlot, Fill: StyleBookFill } =
 	createSlotFill( SLOT_FILL_NAME );
 
+// The content area of the Style Book is rendered within an iframe so that global styles
+// affect and are displayed within the entire content area. To support elements that are
+// no part of the block previews, such as headings, and layout for the block previews,
+// additional CSS rules need to be passed into the iframe. These are hard-coded below.
+const STYLE_BOOK_IFRAME_STYLES = `
+	.edit-site-style-book__examples {
+		max-width: 900px;
+		margin: 0 auto;
+	}
+
+	.edit-site-style-book__example {
+		background: none;
+		border-radius: 2px;
+		border: none;
+		color: inherit;
+		cursor: pointer;
+		display: flex;
+		flex-direction: column;
+		gap: 40px;
+		margin-bottom: 40px;
+		padding: 16px;
+		width: 100%;
+		box-sizing: border-box;
+	}
+
+	.edit-site-style-book__example.is-selected {
+		box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
+	}
+
+	.edit-site-style-book__examples.is-wide .edit-site-style-book__example {
+		flex-direction: row;
+	}
+
+	.edit-site-style-book__example-title {
+		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+		font-size: 11px;
+		font-weight: 500;
+		line-height: normal;
+		margin: 0;
+		text-align: left;
+		text-transform: uppercase;
+	}
+
+	.edit-site-style-book__examples.is-wide .edit-site-style-book__example-title {
+		text-align: right;
+		width: 120px;
+	}
+
+	.edit-site-style-book__example-preview {
+		width: 100%;
+	}
+
+	.edit-site-style-book__example-preview .is-root-container > .wp-block:first-child {
+		margin-top: 0;
+	}
+	.edit-site-style-book__example-preview .is-root-container > .wp-block:last-child {
+		margin-bottom: 0;
+	}
+`;
+
 function getExamples() {
 	// Use our own example for the Heading block so that we can show multiple
 	// heading levels.
@@ -177,67 +237,15 @@ function StyleBook( { isSelected, onSelect, onClose } ) {
 							head={
 								<>
 									<EditorStyles styles={ settings.styles } />
-									<style>{
-										// Forming a "block formatting context" to prevent margin collapsing.
-										// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
-										`.is-root-container { display: flow-root; }
-										body { position: relative; padding: 32px !important; }
-
-										.edit-site-style-book__examples {
-											max-width: 900px;
-											margin: 0 auto;
-										}
-
-										.edit-site-style-book__example {
-											background: none;
-											border-radius: 2px;
-											border: none;
-											color: inherit;
-											cursor: pointer;
-											display: flex;
-											flex-direction: column;
-											gap: 40px;
-											margin-bottom: 40px;
-											padding: 16px;
-											width: 100%;
-											box-sizing: border-box;
-										}
-
-										.edit-site-style-book__example.is-selected {
-											box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
-										}
-
-										.edit-site-style-book__examples.is-wide .edit-site-style-book__example {
-											flex-direction: row;
-										}
-
-										.edit-site-style-book__example-title {
-											font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-											font-size: 11px;
-											font-weight: 500;
-											line-height: normal;
-											margin: 0;
-											text-align: left;
-											text-transform: uppercase;
-										}
-
-										.edit-site-style-book__examples.is-wide .edit-site-style-book__example-title {
-											text-align: right;
-											width: 120px;
-										}
-
-										.edit-site-style-book__example-preview {
-											width: 100%;
-										}
-
-										.edit-site-style-book__example-preview .is-root-container > .wp-block:first-child {
-											margin-top: 0;
-										}
-										.edit-site-style-book__example-preview .is-root-container > .wp-block:last-child {
-											margin-bottom: 0;
+									<style>
+										{
+											// Forming a "block formatting context" to prevent margin collapsing.
+											// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
+											`.is-root-container { display: flow-root; }
+											body { position: relative; padding: 32px !important; }` +
+												STYLE_BOOK_IFRAME_STYLES
 										}
-										`
-									}</style>
+									</style>
 								</>
 							}
 							tabIndex={ 0 }

From 4dd2009cc01e10d9a2c6dd8de9f05fddd4bf8b54 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Mon, 6 Mar 2023 14:37:25 +1100
Subject: [PATCH 07/12] Switch back to button element, add additional focus
 styles, update e2e tests

---
 .../src/components/style-book/index.js        | 37 ++++++++++---------
 test/e2e/specs/site-editor/style-book.spec.js | 19 ++++------
 2 files changed, 26 insertions(+), 30 deletions(-)

diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js
index 7a9d3398e0bfe2..0cd12a907444c9 100644
--- a/packages/edit-site/src/components/style-book/index.js
+++ b/packages/edit-site/src/components/style-book/index.js
@@ -36,7 +36,7 @@ import {
 	useMergeRefs,
 } from '@wordpress/compose';
 import { useMemo, memo } from '@wordpress/element';
-import { ENTER, ESCAPE } from '@wordpress/keycodes';
+import { ESCAPE } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
@@ -52,15 +52,22 @@ const { Slot: StyleBookSlot, Fill: StyleBookFill } =
 	createSlotFill( SLOT_FILL_NAME );
 
 // The content area of the Style Book is rendered within an iframe so that global styles
-// affect and are displayed within the entire content area. To support elements that are
-// no part of the block previews, such as headings, and layout for the block previews,
+// are applied to elements within the entire content area. To support elements that are
+// not part of the block previews, such as headings and layout for the block previews,
 // additional CSS rules need to be passed into the iframe. These are hard-coded below.
+// Note that button styles are unset, and then focus rules from the `Button` component are
+// applied to the `button` element, targeted via `.edit-site-style-book__example`.
+// This is to ensure that browser default styles for buttons are not applied to the previews.
 const STYLE_BOOK_IFRAME_STYLES = `
 	.edit-site-style-book__examples {
 		max-width: 900px;
 		margin: 0 auto;
 	}
 
+	.edit-site-style-book__example {
+		all: unset;
+	}
+
 	.edit-site-style-book__example {
 		background: none;
 		border-radius: 2px;
@@ -77,7 +84,12 @@ const STYLE_BOOK_IFRAME_STYLES = `
 	}
 
 	.edit-site-style-book__example.is-selected {
-		box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
+		box-shadow: 0 0 0 1px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+	}
+
+	.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;
 	}
 
 	.edit-site-style-book__examples.is-wide .edit-site-style-book__example {
@@ -248,6 +260,7 @@ function StyleBook( { isSelected, onSelect, onClose } ) {
 									</style>
 								</>
 							}
+							name="style-book-canvas"
 							tabIndex={ 0 }
 						>
 							{ /* Filters need to be rendered before children to avoid Safari rendering issues. */ }
@@ -302,16 +315,8 @@ const Example = memo( ( { title, blocks, isSelected, onClick } ) => {
 		[ originalSettings ]
 	);
 
-	const selectOnEnter = ( event ) => {
-		if ( event.keyCode === ENTER ) {
-			event.preventDefault();
-			onClick();
-		}
-	};
-
-	/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
 	return (
-		<div
+		<button
 			className={ classnames( 'edit-site-style-book__example', {
 				'is-selected': isSelected,
 			} ) }
@@ -320,10 +325,7 @@ const Example = memo( ( { title, blocks, isSelected, onClick } ) => {
 				__( 'Open %s styles in Styles panel' ),
 				title
 			) }
-			role="button"
 			onClick={ onClick }
-			onKeyDown={ selectOnEnter }
-			tabIndex={ 0 }
 		>
 			<span className="edit-site-style-book__example-title">
 				{ title }
@@ -338,9 +340,8 @@ const Example = memo( ( { title, blocks, isSelected, onClick } ) => {
 					</ExperimentalBlockEditorProvider>
 				</Disabled>
 			</div>
-		</div>
+		</button>
 	);
-	/* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
 } );
 
 function useHasStyleBook() {
diff --git a/test/e2e/specs/site-editor/style-book.spec.js b/test/e2e/specs/site-editor/style-book.spec.js
index 45863124c044e6..ad8b11fb193b1f 100644
--- a/test/e2e/specs/site-editor/style-book.spec.js
+++ b/test/e2e/specs/site-editor/style-book.spec.js
@@ -60,35 +60,30 @@ test.describe( 'Style Book', () => {
 		await expect( page.locator( 'role=tab[name="Theme"i]' ) ).toBeVisible();
 
 		// Buttons to select block examples are rendered within the Style Book iframe.
-		let styleBookIframeLocator = page.frameLocator(
-			'.edit-site-style-book__iframe'
+		const styleBookIframe = page.frameLocator(
+			'[name="style-book-canvas"]'
 		);
 
 		await expect(
-			styleBookIframeLocator.getByRole( 'button', {
+			styleBookIframe.getByRole( 'button', {
 				name: 'Open Headings styles in Styles panel',
 			} )
 		).toBeVisible();
 		await expect(
-			styleBookIframeLocator.getByRole( 'button', {
+			styleBookIframe.getByRole( 'button', {
 				name: 'Open Paragraph styles in Styles panel',
 			} )
 		).toBeVisible();
 
 		await page.click( 'role=tab[name="Media"i]' );
 
-		// The tab has changed, which means the iframe has been re-rendered.
-		styleBookIframeLocator = page.frameLocator(
-			'.edit-site-style-book__iframe'
-		);
-
 		await expect(
-			styleBookIframeLocator.getByRole( 'button', {
+			styleBookIframe.getByRole( 'button', {
 				name: 'Open Image styles in Styles panel',
 			} )
 		).toBeVisible();
 		await expect(
-			styleBookIframeLocator.getByRole( 'button', {
+			styleBookIframe.getByRole( 'button', {
 				name: 'Open Gallery styles in Styles panel',
 			} )
 		).toBeVisible();
@@ -119,7 +114,7 @@ test.describe( 'Style Book', () => {
 		await page.click( 'role=button[name="Typography styles"]' );
 
 		await page
-			.frameLocator( '.edit-site-style-book__iframe' )
+			.frameLocator( '[name="style-book-canvas"]' )
 			.getByRole( 'button', {
 				name: 'Open Quote styles in Styles panel',
 			} )

From 0079f98653e7b62f4f3d9a9d4eb8c47e6a04b348 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Mon, 6 Mar 2023 16:50:35 +1100
Subject: [PATCH 08/12] Remove unneeded CSS rules

---
 packages/edit-site/src/components/style-book/index.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js
index 0cd12a907444c9..6711b75508afb5 100644
--- a/packages/edit-site/src/components/style-book/index.js
+++ b/packages/edit-site/src/components/style-book/index.js
@@ -69,10 +69,7 @@ const STYLE_BOOK_IFRAME_STYLES = `
 	}
 
 	.edit-site-style-book__example {
-		background: none;
 		border-radius: 2px;
-		border: none;
-		color: inherit;
 		cursor: pointer;
 		display: flex;
 		flex-direction: column;

From 239b7005a46b88a78f120863bdd162c7755e5c7d Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Mon, 6 Mar 2023 16:52:47 +1100
Subject: [PATCH 09/12] Update e2e test

---
 test/e2e/specs/site-editor/style-book.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/e2e/specs/site-editor/style-book.spec.js b/test/e2e/specs/site-editor/style-book.spec.js
index ad8b11fb193b1f..56d0ca0cf20f1b 100644
--- a/test/e2e/specs/site-editor/style-book.spec.js
+++ b/test/e2e/specs/site-editor/style-book.spec.js
@@ -93,7 +93,7 @@ test.describe( 'Style Book', () => {
 		page,
 	} ) => {
 		await page
-			.frameLocator( '.edit-site-style-book__iframe' )
+			.frameLocator( '[name="style-book-canvas"]' )
 			.getByRole( 'button', {
 				name: 'Open Headings styles in Styles panel',
 			} )

From 4fd840ffffa0bdf04dd1908db2d8c634babbc8ad Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Tue, 7 Mar 2023 11:55:49 +1100
Subject: [PATCH 10/12] Improve caching of blocks

---
 packages/edit-site/src/components/style-book/index.js | 8 +++++++-
 1 file changed, 7 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 6711b75508afb5..aab5c72855cb48 100644
--- a/packages/edit-site/src/components/style-book/index.js
+++ b/packages/edit-site/src/components/style-book/index.js
@@ -312,6 +312,12 @@ const Example = memo( ( { title, blocks, isSelected, onClick } ) => {
 		[ originalSettings ]
 	);
 
+	// Cache the list of blocks to avoid additional processing when the component is re-rendered.
+	const renderedBlocks = useMemo(
+		() => ( Array.isArray( blocks ) ? blocks : [ blocks ] ),
+		[ blocks ]
+	);
+
 	return (
 		<button
 			className={ classnames( 'edit-site-style-book__example', {
@@ -330,7 +336,7 @@ const Example = memo( ( { title, blocks, isSelected, onClick } ) => {
 			<div className="edit-site-style-book__example-preview">
 				<Disabled className="edit-site-style-book__example-preview__content">
 					<ExperimentalBlockEditorProvider
-						value={ Array.isArray( blocks ) ? blocks : [ blocks ] }
+						value={ renderedBlocks }
 						settings={ settings }
 					>
 						<BlockList renderAppender={ false } />

From cf0aec6de0afc5c7914f4d72a32e564e5387a6cc Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Tue, 7 Mar 2023 12:50:34 +1100
Subject: [PATCH 11/12] Try swapping out button element for Composite and
 CompositeItem

---
 .../src/components/style-book/index.js        | 152 ++++++++++--------
 1 file changed, 89 insertions(+), 63 deletions(-)

diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js
index aab5c72855cb48..6b9d6e7dc9cecf 100644
--- a/packages/edit-site/src/components/style-book/index.js
+++ b/packages/edit-site/src/components/style-book/index.js
@@ -8,6 +8,9 @@ import classnames from 'classnames';
  */
 import {
 	Button,
+	__unstableComposite as Composite,
+	__unstableUseCompositeState as useCompositeState,
+	__unstableCompositeItem as CompositeItem,
 	Disabled,
 	TabPanel,
 	createSlotFill,
@@ -64,10 +67,6 @@ const STYLE_BOOK_IFRAME_STYLES = `
 		margin: 0 auto;
 	}
 
-	.edit-site-style-book__example {
-		all: unset;
-	}
-
 	.edit-site-style-book__example {
 		border-radius: 2px;
 		cursor: pointer;
@@ -112,6 +111,11 @@ const STYLE_BOOK_IFRAME_STYLES = `
 		width: 100%;
 	}
 
+	.edit-site-style-book__example-preview .block-editor-block-list__insertion-point,
+	.edit-site-style-book__example-preview .block-list-appender {
+		display: none;
+	}
+
 	.edit-site-style-book__example-preview .is-root-container > .wp-block:first-child {
 		margin-top: 0;
 	}
@@ -271,6 +275,13 @@ function StyleBook( { isSelected, onSelect, onClose } ) {
 								) }
 								examples={ examples }
 								category={ tab.name }
+								label={ sprintf(
+									// translators: %s: Category of blocks, e.g. Text.
+									__(
+										'Examples of blocks in the %s category'
+									),
+									tab.title
+								) }
 								isSelected={ isSelected }
 								onSelect={ onSelect }
 							/>
@@ -283,69 +294,84 @@ function StyleBook( { isSelected, onSelect, onClose } ) {
 }
 
 const Examples = memo(
-	( { className, examples, category, isSelected, onSelect } ) => (
-		<div className={ className }>
-			{ examples
-				.filter( ( example ) => example.category === category )
-				.map( ( example ) => (
-					<Example
-						key={ example.name }
-						title={ example.title }
-						blocks={ example.blocks }
-						isSelected={ isSelected( example.name ) }
-						onClick={ () => {
-							onSelect( example.name );
-						} }
-					/>
-				) ) }
-		</div>
-	)
+	( { className, examples, category, label, isSelected, onSelect } ) => {
+		const composite = useCompositeState( { orientation: 'vertical' } );
+		return (
+			<Composite
+				{ ...composite }
+				className={ className }
+				aria-label={ label }
+			>
+				{ examples
+					.filter( ( example ) => example.category === category )
+					.map( ( example, index ) => (
+						<Example
+							key={ example.name }
+							id={ `example-${ index }` }
+							composite={ composite }
+							title={ example.title }
+							blocks={ example.blocks }
+							isSelected={ isSelected( example.name ) }
+							onClick={ () => {
+								onSelect( example.name );
+							} }
+						/>
+					) ) }
+			</Composite>
+		);
+	}
 );
 
-const Example = memo( ( { title, blocks, isSelected, onClick } ) => {
-	const originalSettings = useSelect(
-		( select ) => select( blockEditorStore ).getSettings(),
-		[]
-	);
-	const settings = useMemo(
-		() => ( { ...originalSettings, __unstableIsPreviewMode: true } ),
-		[ originalSettings ]
-	);
+const Example = memo(
+	( { composite, id, title, blocks, isSelected, onClick } ) => {
+		const originalSettings = useSelect(
+			( select ) => select( blockEditorStore ).getSettings(),
+			[]
+		);
+		const settings = useMemo(
+			() => ( { ...originalSettings, __unstableIsPreviewMode: true } ),
+			[ originalSettings ]
+		);
 
-	// Cache the list of blocks to avoid additional processing when the component is re-rendered.
-	const renderedBlocks = useMemo(
-		() => ( Array.isArray( blocks ) ? blocks : [ blocks ] ),
-		[ blocks ]
-	);
+		// Cache the list of blocks to avoid additional processing when the component is re-rendered.
+		const renderedBlocks = useMemo(
+			() => ( Array.isArray( blocks ) ? blocks : [ blocks ] ),
+			[ blocks ]
+		);
 
-	return (
-		<button
-			className={ classnames( 'edit-site-style-book__example', {
-				'is-selected': isSelected,
-			} ) }
-			aria-label={ sprintf(
-				// translators: %s: Title of a block, e.g. Heading.
-				__( 'Open %s styles in Styles panel' ),
-				title
-			) }
-			onClick={ onClick }
-		>
-			<span className="edit-site-style-book__example-title">
-				{ title }
-			</span>
-			<div className="edit-site-style-book__example-preview">
-				<Disabled className="edit-site-style-book__example-preview__content">
-					<ExperimentalBlockEditorProvider
-						value={ renderedBlocks }
-						settings={ settings }
-					>
-						<BlockList renderAppender={ false } />
-					</ExperimentalBlockEditorProvider>
-				</Disabled>
-			</div>
-		</button>
-	);
-} );
+		return (
+			<CompositeItem
+				{ ...composite }
+				className={ classnames( 'edit-site-style-book__example', {
+					'is-selected': isSelected,
+				} ) }
+				id={ id }
+				aria-label={ sprintf(
+					// translators: %s: Title of a block, e.g. Heading.
+					__( 'Open %s styles in Styles panel' ),
+					title
+				) }
+				onClick={ onClick }
+				role="button"
+				as="div"
+			>
+				<span className="edit-site-style-book__example-title">
+					{ title }
+				</span>
+				<div className="edit-site-style-book__example-preview">
+					<Disabled className="edit-site-style-book__example-preview__content">
+						<ExperimentalBlockEditorProvider
+							value={ renderedBlocks }
+							settings={ settings }
+						>
+							<BlockList renderAppender={ false } />
+						</ExperimentalBlockEditorProvider>
+					</Disabled>
+				</div>
+			</CompositeItem>
+		);
+	}
+);
 
 function useHasStyleBook() {
 	const fills = useSlotFills( SLOT_FILL_NAME );

From f1a2c35466ba8e2f3fad5d67e958878fffca12b4 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Wed, 8 Mar 2023 10:05:48 +1100
Subject: [PATCH 12/12] Update id key, remove unnecessary memo call

---
 .../src/components/style-book/index.js        | 98 +++++++++----------
 1 file changed, 48 insertions(+), 50 deletions(-)

diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js
index 6b9d6e7dc9cecf..5eca935ad0d257 100644
--- a/packages/edit-site/src/components/style-book/index.js
+++ b/packages/edit-site/src/components/style-book/index.js
@@ -304,10 +304,10 @@ const Examples = memo(
 			>
 				{ examples
 					.filter( ( example ) => example.category === category )
-					.map( ( example, index ) => (
+					.map( ( example ) => (
 						<Example
 							key={ example.name }
-							id={ `example-${ index }` }
+							id={ `example-${ example.name }` }
 							composite={ composite }
 							title={ example.title }
 							blocks={ example.blocks }
@@ -322,56 +322,54 @@ const Examples = memo(
 	}
 );
 
-const Example = memo(
-	( { composite, id, title, blocks, isSelected, onClick } ) => {
-		const originalSettings = useSelect(
-			( select ) => select( blockEditorStore ).getSettings(),
-			[]
-		);
-		const settings = useMemo(
-			() => ( { ...originalSettings, __unstableIsPreviewMode: true } ),
-			[ originalSettings ]
-		);
+const Example = ( { composite, id, title, blocks, isSelected, onClick } ) => {
+	const originalSettings = useSelect(
+		( select ) => select( blockEditorStore ).getSettings(),
+		[]
+	);
+	const settings = useMemo(
+		() => ( { ...originalSettings, __unstableIsPreviewMode: true } ),
+		[ originalSettings ]
+	);
 
-		// Cache the list of blocks to avoid additional processing when the component is re-rendered.
-		const renderedBlocks = useMemo(
-			() => ( Array.isArray( blocks ) ? blocks : [ blocks ] ),
-			[ blocks ]
-		);
+	// Cache the list of blocks to avoid additional processing when the component is re-rendered.
+	const renderedBlocks = useMemo(
+		() => ( Array.isArray( blocks ) ? blocks : [ blocks ] ),
+		[ blocks ]
+	);
 
-		return (
-			<CompositeItem
-				{ ...composite }
-				className={ classnames( 'edit-site-style-book__example', {
-					'is-selected': isSelected,
-				} ) }
-				id={ id }
-				aria-label={ sprintf(
-					// translators: %s: Title of a block, e.g. Heading.
-					__( 'Open %s styles in Styles panel' ),
-					title
-				) }
-				onClick={ onClick }
-				role="button"
-				as="div"
-			>
-				<span className="edit-site-style-book__example-title">
-					{ title }
-				</span>
-				<div className="edit-site-style-book__example-preview">
-					<Disabled className="edit-site-style-book__example-preview__content">
-						<ExperimentalBlockEditorProvider
-							value={ renderedBlocks }
-							settings={ settings }
-						>
-							<BlockList renderAppender={ false } />
-						</ExperimentalBlockEditorProvider>
-					</Disabled>
-				</div>
-			</CompositeItem>
-		);
-	}
-);
+	return (
+		<CompositeItem
+			{ ...composite }
+			className={ classnames( 'edit-site-style-book__example', {
+				'is-selected': isSelected,
+			} ) }
+			id={ id }
+			aria-label={ sprintf(
+				// translators: %s: Title of a block, e.g. Heading.
+				__( 'Open %s styles in Styles panel' ),
+				title
+			) }
+			onClick={ onClick }
+			role="button"
+			as="div"
+		>
+			<span className="edit-site-style-book__example-title">
+				{ title }
+			</span>
+			<div className="edit-site-style-book__example-preview" aria-hidden>
+				<Disabled className="edit-site-style-book__example-preview__content">
+					<ExperimentalBlockEditorProvider
+						value={ renderedBlocks }
+						settings={ settings }
+					>
+						<BlockList renderAppender={ false } />
+					</ExperimentalBlockEditorProvider>
+				</Disabled>
+			</div>
+		</CompositeItem>
+	);
+};
 
 function useHasStyleBook() {
 	const fills = useSlotFills( SLOT_FILL_NAME );