From abab9fcfa1ef0ae99b7324e1bb75d2f57033c8b1 Mon Sep 17 00:00:00 2001
From: Andrew Hayward <andrew.hayward@automattic.com>
Date: Fri, 13 Oct 2023 11:58:44 +0100
Subject: [PATCH 1/5] Migrating `StyleBook`

---
 .../src/components/style-book/index.js        | 79 +++++++++++--------
 1 file changed, 44 insertions(+), 35 deletions(-)

diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js
index b6931b8e65665..0164eeb49a254 100644
--- a/packages/edit-site/src/components/style-book/index.js
+++ b/packages/edit-site/src/components/style-book/index.js
@@ -7,13 +7,10 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import {
-	__unstableComposite as Composite,
-	__unstableUseCompositeState as useCompositeState,
-	__unstableCompositeItem as CompositeItem,
 	Disabled,
 	TabPanel,
+	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
-
 import { __, sprintf } from '@wordpress/i18n';
 import {
 	getCategories,
@@ -43,6 +40,12 @@ const { ExperimentalBlockEditorProvider, useGlobalStyle } = unlock(
 	blockEditorPrivateApis
 );
 
+const {
+	CompositeV2: Composite,
+	CompositeItemV2: CompositeItem,
+	useCompositeStoreV2: useCompositeStore,
+} = unlock( componentsPrivateApis );
+
 // The content area of the Style Book is rendered within an iframe so that global styles
 // 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,
@@ -339,12 +342,13 @@ const StyleBookBody = ( {
 
 const Examples = memo(
 	( { className, examples, category, label, isSelected, onSelect } ) => {
-		const composite = useCompositeState( { orientation: 'vertical' } );
+		const composite = useCompositeStore( { orientation: 'vertical' } );
 		return (
 			<Composite
-				{ ...composite }
+				store={ composite }
 				className={ className }
 				aria-label={ label }
+				role="grid"
 			>
 				{ examples
 					.filter( ( example ) =>
@@ -354,7 +358,6 @@ const Examples = memo(
 						<Example
 							key={ example.name }
 							id={ `example-${ example.name }` }
-							composite={ composite }
 							title={ example.title }
 							blocks={ example.blocks }
 							isSelected={ isSelected( example.name ) }
@@ -368,7 +371,7 @@ const Examples = memo(
 	}
 );
 
-const Example = ( { composite, id, title, blocks, isSelected, onClick } ) => {
+const Example = ( { id, title, blocks, isSelected, onClick } ) => {
 	const originalSettings = useSelect(
 		( select ) => select( blockEditorStore ).getSettings(),
 		[]
@@ -385,35 +388,41 @@ const Example = ( { composite, id, title, blocks, isSelected, onClick } ) => {
 	);
 
 	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 }
+		<div role="row">
+			<div role="gridcell">
+				<CompositeItem
+					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
+					) }
+					render={ <div /> }
+					role="button"
+					onClick={ onClick }
+				>
+					<span className="edit-site-style-book__example-title">
+						{ title }
+					</span>
+					<div
+						className="edit-site-style-book__example-preview"
+						aria-hidden
 					>
-						<BlockList renderAppender={ false } />
-					</ExperimentalBlockEditorProvider>
-				</Disabled>
+						<Disabled className="edit-site-style-book__example-preview__content">
+							<ExperimentalBlockEditorProvider
+								value={ renderedBlocks }
+								settings={ settings }
+							>
+								<BlockList renderAppender={ false } />
+							</ExperimentalBlockEditorProvider>
+						</Disabled>
+					</div>
+				</CompositeItem>
 			</div>
-		</CompositeItem>
+		</div>
 	);
 };
 

From 57756776f8e1bed74b3572f41fed111bcc5e8862 Mon Sep 17 00:00:00 2001
From: Andrew Hayward <andrew.hayward@automattic.com>
Date: Thu, 16 Nov 2023 22:06:16 +0000
Subject: [PATCH 2/5] Adding scroll margins

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

diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js
index 0164eeb49a254..34edcedde4e70 100644
--- a/packages/edit-site/src/components/style-book/index.js
+++ b/packages/edit-site/src/components/style-book/index.js
@@ -69,6 +69,8 @@ const STYLE_BOOK_IFRAME_STYLES = `
 		padding: 16px;
 		width: 100%;
 		box-sizing: border-box;
+		scroll-margin-top: var(--wp--style--root--padding-top);
+		scroll-margin-bottom: var(--wp--style--root--padding-bottom);
 	}
 
 	.edit-site-style-book__example.is-selected {

From c1e4fa50d55896306aa5cdf11554a4498eb1c0be Mon Sep 17 00:00:00 2001
From: Andrew Hayward <andrew.hayward@automattic.com>
Date: Fri, 17 Nov 2023 10:10:17 +0000
Subject: [PATCH 3/5] Fixing composite when context changes

---
 .../src/components/style-book/index.js          | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js
index 34edcedde4e70..bfff4cbf2e187 100644
--- a/packages/edit-site/src/components/style-book/index.js
+++ b/packages/edit-site/src/components/style-book/index.js
@@ -344,10 +344,23 @@ const StyleBookBody = ( {
 
 const Examples = memo(
 	( { className, examples, category, label, isSelected, onSelect } ) => {
-		const composite = useCompositeStore( { orientation: 'vertical' } );
+		const compositeStore = useCompositeStore( {
+			orientation: 'vertical',
+			setItems: ( compositeItems ) => {
+				if ( ! compositeItems.length ) return;
+
+				for ( const compositeItem in compositeItems ) {
+					if ( compositeItem?.id === activeId ) return;
+				}
+
+				compositeStore.setActiveId( compositeItems[ 0 ]?.id );
+			},
+		} );
+		const activeId = compositeStore.useState( 'activeId' );
+
 		return (
 			<Composite
-				store={ composite }
+				store={ compositeStore }
 				className={ className }
 				aria-label={ label }
 				role="grid"

From c21998cd406b7d8cc65755e8c801eea382b99bcf Mon Sep 17 00:00:00 2001
From: Andrew Hayward <andrew.hayward@automattic.com>
Date: Fri, 17 Nov 2023 12:36:18 +0000
Subject: [PATCH 4/5] Removing `activeId` check in favour of `key` assignment

---
 .../edit-site/src/components/style-book/index.js  | 15 ++-------------
 1 file changed, 2 insertions(+), 13 deletions(-)

diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js
index bfff4cbf2e187..7c6cd64420c45 100644
--- a/packages/edit-site/src/components/style-book/index.js
+++ b/packages/edit-site/src/components/style-book/index.js
@@ -337,6 +337,7 @@ const StyleBookBody = ( {
 				}
 				isSelected={ isSelected }
 				onSelect={ onSelect }
+				key={ category }
 			/>
 		</Iframe>
 	);
@@ -344,19 +345,7 @@ const StyleBookBody = ( {
 
 const Examples = memo(
 	( { className, examples, category, label, isSelected, onSelect } ) => {
-		const compositeStore = useCompositeStore( {
-			orientation: 'vertical',
-			setItems: ( compositeItems ) => {
-				if ( ! compositeItems.length ) return;
-
-				for ( const compositeItem in compositeItems ) {
-					if ( compositeItem?.id === activeId ) return;
-				}
-
-				compositeStore.setActiveId( compositeItems[ 0 ]?.id );
-			},
-		} );
-		const activeId = compositeStore.useState( 'activeId' );
+		const compositeStore = useCompositeStore( { orientation: 'vertical' } );
 
 		return (
 			<Composite

From fea8b9636dd1f23b17ceb0cd2c0e4cd039909a8f Mon Sep 17 00:00:00 2001
From: Andrew Hayward <andrew.hayward@automattic.com>
Date: Fri, 24 Nov 2023 16:32:42 +0000
Subject: [PATCH 5/5] Hardcoding scroll margins

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

diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js
index 7c6cd64420c45..19508f0a59f8e 100644
--- a/packages/edit-site/src/components/style-book/index.js
+++ b/packages/edit-site/src/components/style-book/index.js
@@ -69,8 +69,8 @@ const STYLE_BOOK_IFRAME_STYLES = `
 		padding: 16px;
 		width: 100%;
 		box-sizing: border-box;
-		scroll-margin-top: var(--wp--style--root--padding-top);
-		scroll-margin-bottom: var(--wp--style--root--padding-bottom);
+		scroll-margin-top: 32px;
+		scroll-margin-bottom: 32px;
 	}
 
 	.edit-site-style-book__example.is-selected {