From 1015e151e6341fbcc8dba3b7cd2a867b16fb46d9 Mon Sep 17 00:00:00 2001
From: benazeer <benazircpra@gmail.com>
Date: Mon, 7 Oct 2024 18:47:50 +0530
Subject: [PATCH 01/14] Updated code to set active pattern and its styling

---
 .../components/block-patterns-list/index.js   | 69 +++++++++++++++----
 .../components/block-patterns-list/style.scss |  7 ++
 2 files changed, 64 insertions(+), 12 deletions(-)

diff --git a/packages/block-editor/src/components/block-patterns-list/index.js b/packages/block-editor/src/components/block-patterns-list/index.js
index 2609cc2db97a13..c613fc2faf4a1e 100644
--- a/packages/block-editor/src/components/block-patterns-list/index.js
+++ b/packages/block-editor/src/components/block-patterns-list/index.js
@@ -42,6 +42,8 @@ function BlockPattern( {
 	showTitle = true,
 	showTooltip,
 	category,
+	isActive, // new prop to manage active state
+	setActivePattern, // function to set the active pattern
 } ) {
 	const [ isDragging, setIsDragging ] = useState( false );
 	const { blocks, viewportWidth } = pattern;
@@ -77,8 +79,13 @@ function BlockPattern( {
 		>
 			{ ( { draggable, onDragStart, onDragEnd } ) => (
 				<div
-					className="block-editor-block-patterns-list__list-item"
-					draggable={ draggable }
+					className={clsx(
+						'block-editor-block-patterns-list__list-item',
+						{ 'is-active': isActive } // Apply 'is-active' class if this pattern is active
+					)}
+					role="button" // Add role to make it behave like a button
+					tabIndex={0}  // Make the element focusable by keyboard
+					draggable={draggable}
 					onDragStart={ ( event ) => {
 						setIsDragging( true );
 						if ( onDragStart ) {
@@ -92,6 +99,20 @@ function BlockPattern( {
 							onDragEnd( event );
 						}
 					} }
+					onClick={() => {
+						setActivePattern(id); // Set active pattern when clicked
+						onClick(pattern, blocks);
+						onHover?.(null);
+					}}
+					onKeyDown={(event) => {
+						// Simulate button click with Enter or Space key press
+						if (event.key === 'Enter' || event.key === ' ') {
+							event.preventDefault(); // Prevent default behavior for spacebar
+							setActivePattern(id);
+							onClick(pattern, blocks);
+							onHover?.(null);
+						}
+					}}
 				>
 					<WithToolTip
 						showTooltip={
@@ -122,7 +143,8 @@ function BlockPattern( {
 								/>
 							}
 							id={ id }
-							onClick={ () => {
+							onClick={() => {
+								setActivePattern(id); // Set active pattern when clicked
 								onClick( pattern, blocks );
 								onHover?.( null );
 							} }
@@ -199,23 +221,44 @@ function BlockPatternsList(
 	},
 	ref
 ) {
-	const [ activeCompositeId, setActiveCompositeId ] = useState( undefined );
+	const [activePattern, setActivePattern] = useState(null); // State to track active pattern
 
 	useEffect( () => {
 		// Reset the active composite item whenever the available patterns change,
 		// to make sure that Composite widget can receive focus correctly when its
 		// composite items change. The first composite item will receive focus.
-		const firstCompositeItemId = blockPatterns.find( ( pattern ) =>
-			shownPatterns.includes( pattern )
-		)?.name;
-		setActiveCompositeId( firstCompositeItemId );
-	}, [ shownPatterns, blockPatterns ] );
+		if (typeof window !== 'undefined' && window.localStorage) {
+			// eslint-disable-next-line no-undef
+			const storedPatternName = localStorage.getItem('savedPattern');
 
+			if (storedPatternName && shownPatterns.some(pattern => pattern.name === storedPatternName)) {
+				// If there's a saved pattern and it exists in shownPatterns, set it as active
+				setActivePattern(storedPatternName);
+			} else {
+				const firstCompositeItemId = blockPatterns.find((pattern) =>
+					shownPatterns.includes(pattern)
+				)?.name;
+
+				if (firstCompositeItemId) {
+					setActivePattern(firstCompositeItemId);
+				}
+			}
+		}
+	}, [ shownPatterns, blockPatterns ] );
+	const handleClickPattern = (pattern) => {
+		// Check if we are in a browser environment and localStorage is available
+		if (typeof window !== 'undefined' && window.localStorage) {
+			// eslint-disable-next-line no-undef
+			localStorage.setItem('savedPattern', pattern.name); // Save the selected pattern in localStorage
+		}
+		setActivePattern(pattern.name); // Set the clicked pattern as active
+		onClickPattern(pattern); // Original onClick logic
+	};
 	return (
 		<Composite
 			orientation={ orientation }
-			activeId={ activeCompositeId }
-			setActiveId={ setActiveCompositeId }
+			activeId={ activePattern }
+			setActiveId={ setActivePattern }
 			role="listbox"
 			className="block-editor-block-patterns-list"
 			aria-label={ label }
@@ -228,12 +271,14 @@ function BlockPatternsList(
 						key={ pattern.name }
 						id={ pattern.name }
 						pattern={ pattern }
-						onClick={ onClickPattern }
+						onClick={ handleClickPattern }
 						onHover={ onHover }
 						isDraggable={ isDraggable }
 						showTitle={ showTitle }
 						showTooltip={ showTitlesAsTooltip }
 						category={ category }
+						isActive={activePattern === pattern.name} // Highlight the active pattern
+						setActivePattern={setActivePattern} // Function to set the active pattern
 					/>
 				) : (
 					<BlockPatternPlaceholder key={ pattern.name } />
diff --git a/packages/block-editor/src/components/block-patterns-list/style.scss b/packages/block-editor/src/components/block-patterns-list/style.scss
index 84e95563737c3c..93334aba23671c 100644
--- a/packages/block-editor/src/components/block-patterns-list/style.scss
+++ b/packages/block-editor/src/components/block-patterns-list/style.scss
@@ -71,3 +71,10 @@
 		}
 	}
 }
+// Solution for "Add "selected" styling to active elements in the design selector."
+// https: //github.com/WordPress/gutenberg/issues/65127
+.block-editor-block-patterns-list__list-item.is-active {
+	border: 2px solid #007cba;
+	/* Custom styles for active item */
+	background-color: #eaf5ff;
+}

From c16a376c725e53a9d559031413cb109335da2965 Mon Sep 17 00:00:00 2001
From: benazeer <benazircpra@gmail.com>
Date: Tue, 8 Oct 2024 12:24:34 +0530
Subject: [PATCH 02/14] Fixes for linting issues on updated files

---
 .../components/block-patterns-list/index.js   | 71 ++++++++++---------
 1 file changed, 38 insertions(+), 33 deletions(-)

diff --git a/packages/block-editor/src/components/block-patterns-list/index.js b/packages/block-editor/src/components/block-patterns-list/index.js
index c613fc2faf4a1e..a5bcb8008a4a52 100644
--- a/packages/block-editor/src/components/block-patterns-list/index.js
+++ b/packages/block-editor/src/components/block-patterns-list/index.js
@@ -79,13 +79,13 @@ function BlockPattern( {
 		>
 			{ ( { draggable, onDragStart, onDragEnd } ) => (
 				<div
-					className={clsx(
+					className={ clsx(
 						'block-editor-block-patterns-list__list-item',
 						{ 'is-active': isActive } // Apply 'is-active' class if this pattern is active
-					)}
+					) }
 					role="button" // Add role to make it behave like a button
-					tabIndex={0}  // Make the element focusable by keyboard
-					draggable={draggable}
+					tabIndex={ 0 } // Make the element focusable by keyboard
+					draggable={ draggable }
 					onDragStart={ ( event ) => {
 						setIsDragging( true );
 						if ( onDragStart ) {
@@ -99,20 +99,20 @@ function BlockPattern( {
 							onDragEnd( event );
 						}
 					} }
-					onClick={() => {
-						setActivePattern(id); // Set active pattern when clicked
-						onClick(pattern, blocks);
-						onHover?.(null);
-					}}
-					onKeyDown={(event) => {
+					onClick={ () => {
+						setActivePattern( id ); // Set active pattern when clicked
+						onClick( pattern, blocks );
+						onHover?.( null );
+					} }
+					onKeyDown={ ( event ) => {
 						// Simulate button click with Enter or Space key press
-						if (event.key === 'Enter' || event.key === ' ') {
+						if ( event.key === 'Enter' || event.key === ' ' ) {
 							event.preventDefault(); // Prevent default behavior for spacebar
-							setActivePattern(id);
-							onClick(pattern, blocks);
-							onHover?.(null);
+							setActivePattern( id );
+							onClick( pattern, blocks );
+							onHover?.( null );
 						}
-					}}
+					} }
 				>
 					<WithToolTip
 						showTooltip={
@@ -143,8 +143,8 @@ function BlockPattern( {
 								/>
 							}
 							id={ id }
-							onClick={() => {
-								setActivePattern(id); // Set active pattern when clicked
+							onClick={ () => {
+								setActivePattern( id ); // Set active pattern when clicked
 								onClick( pattern, blocks );
 								onHover?.( null );
 							} }
@@ -221,38 +221,43 @@ function BlockPatternsList(
 	},
 	ref
 ) {
-	const [activePattern, setActivePattern] = useState(null); // State to track active pattern
+	const [ activePattern, setActivePattern ] = useState( null ); // State to track active pattern
 
 	useEffect( () => {
 		// Reset the active composite item whenever the available patterns change,
 		// to make sure that Composite widget can receive focus correctly when its
 		// composite items change. The first composite item will receive focus.
-		if (typeof window !== 'undefined' && window.localStorage) {
+		if ( typeof window !== 'undefined' && window.localStorage ) {
 			// eslint-disable-next-line no-undef
-			const storedPatternName = localStorage.getItem('savedPattern');
+			const storedPatternName = localStorage.getItem( 'savedPattern' );
 
-			if (storedPatternName && shownPatterns.some(pattern => pattern.name === storedPatternName)) {
+			if (
+				storedPatternName &&
+				shownPatterns.some(
+					( pattern ) => pattern.name === storedPatternName
+				)
+			) {
 				// If there's a saved pattern and it exists in shownPatterns, set it as active
-				setActivePattern(storedPatternName);
+				setActivePattern( storedPatternName );
 			} else {
-				const firstCompositeItemId = blockPatterns.find((pattern) =>
-					shownPatterns.includes(pattern)
+				const firstCompositeItemId = blockPatterns.find( ( pattern ) =>
+					shownPatterns.includes( pattern )
 				)?.name;
 
-				if (firstCompositeItemId) {
-					setActivePattern(firstCompositeItemId);
+				if ( firstCompositeItemId ) {
+					setActivePattern( firstCompositeItemId );
 				}
 			}
 		}
 	}, [ shownPatterns, blockPatterns ] );
-	const handleClickPattern = (pattern) => {
+	const handleClickPattern = ( pattern ) => {
 		// Check if we are in a browser environment and localStorage is available
-		if (typeof window !== 'undefined' && window.localStorage) {
+		if ( typeof window !== 'undefined' && window.localStorage ) {
 			// eslint-disable-next-line no-undef
-			localStorage.setItem('savedPattern', pattern.name); // Save the selected pattern in localStorage
+			localStorage.setItem( 'savedPattern', pattern.name ); // Save the selected pattern in localStorage
 		}
-		setActivePattern(pattern.name); // Set the clicked pattern as active
-		onClickPattern(pattern); // Original onClick logic
+		setActivePattern( pattern.name ); // Set the clicked pattern as active
+		onClickPattern( pattern ); // Original onClick logic
 	};
 	return (
 		<Composite
@@ -277,8 +282,8 @@ function BlockPatternsList(
 						showTitle={ showTitle }
 						showTooltip={ showTitlesAsTooltip }
 						category={ category }
-						isActive={activePattern === pattern.name} // Highlight the active pattern
-						setActivePattern={setActivePattern} // Function to set the active pattern
+						isActive={ activePattern === pattern.name } // Highlight the active pattern
+						setActivePattern={ setActivePattern } // Function to set the active pattern
 					/>
 				) : (
 					<BlockPatternPlaceholder key={ pattern.name } />

From b615175c95d9ab52e9323b451f1bbc38b5eaf82a Mon Sep 17 00:00:00 2001
From: benazeer <benazircpra@gmail.com>
Date: Thu, 10 Oct 2024 12:29:34 +0530
Subject: [PATCH 03/14] Updated code based on the first round feedback points

---
 .../components/block-patterns-list/index.js   | 35 +++++++------------
 .../components/block-patterns-list/style.scss | 15 ++++----
 2 files changed, 20 insertions(+), 30 deletions(-)

diff --git a/packages/block-editor/src/components/block-patterns-list/index.js b/packages/block-editor/src/components/block-patterns-list/index.js
index a5bcb8008a4a52..53d10fddd3ff68 100644
--- a/packages/block-editor/src/components/block-patterns-list/index.js
+++ b/packages/block-editor/src/components/block-patterns-list/index.js
@@ -42,7 +42,7 @@ function BlockPattern( {
 	showTitle = true,
 	showTooltip,
 	category,
-	isActive, // new prop to manage active state
+	isSelected, // new prop to manage active state
 	setActivePattern, // function to set the active pattern
 } ) {
 	const [ isDragging, setIsDragging ] = useState( false );
@@ -75,16 +75,14 @@ function BlockPattern( {
 		<InserterDraggableBlocks
 			isEnabled={ isDraggable }
 			blocks={ patternBlocks }
-			pattern={ pattern }
+			pattern={pattern}
 		>
 			{ ( { draggable, onDragStart, onDragEnd } ) => (
 				<div
 					className={ clsx(
 						'block-editor-block-patterns-list__list-item',
-						{ 'is-active': isActive } // Apply 'is-active' class if this pattern is active
-					) }
-					role="button" // Add role to make it behave like a button
-					tabIndex={ 0 } // Make the element focusable by keyboard
+						{ 'is-selected': isSelected } // Apply 'is-selected' class if this pattern is active
+					)}
 					draggable={ draggable }
 					onDragStart={ ( event ) => {
 						setIsDragging( true );
@@ -100,19 +98,10 @@ function BlockPattern( {
 						}
 					} }
 					onClick={ () => {
-						setActivePattern( id ); // Set active pattern when clicked
 						onClick( pattern, blocks );
 						onHover?.( null );
 					} }
-					onKeyDown={ ( event ) => {
-						// Simulate button click with Enter or Space key press
-						if ( event.key === 'Enter' || event.key === ' ' ) {
-							event.preventDefault(); // Prevent default behavior for spacebar
-							setActivePattern( id );
-							onClick( pattern, blocks );
-							onHover?.( null );
-						}
-					} }
+					
 				>
 					<WithToolTip
 						showTooltip={
@@ -154,7 +143,7 @@ function BlockPattern( {
 								}
 								onHover?.( pattern );
 							} }
-							onMouseLeave={ () => onHover?.( null ) }
+							onMouseLeave={() => onHover?.(null)}
 						>
 							<BlockPreview
 								blocks={ blocks }
@@ -227,9 +216,9 @@ function BlockPatternsList(
 		// Reset the active composite item whenever the available patterns change,
 		// to make sure that Composite widget can receive focus correctly when its
 		// composite items change. The first composite item will receive focus.
-		if ( typeof window !== 'undefined' && window.localStorage ) {
+		if (typeof window !== 'undefined' && window.sessionStorage ) {
 			// eslint-disable-next-line no-undef
-			const storedPatternName = localStorage.getItem( 'savedPattern' );
+			const storedPatternName = sessionStorage.getItem( 'savedPattern' );
 
 			if (
 				storedPatternName &&
@@ -251,10 +240,10 @@ function BlockPatternsList(
 		}
 	}, [ shownPatterns, blockPatterns ] );
 	const handleClickPattern = ( pattern ) => {
-		// Check if we are in a browser environment and localStorage is available
-		if ( typeof window !== 'undefined' && window.localStorage ) {
+		// Check if we are in a browser environment and sessionStorage is available
+		if (typeof window !== 'undefined' && window.sessionStorage ) {
 			// eslint-disable-next-line no-undef
-			localStorage.setItem( 'savedPattern', pattern.name ); // Save the selected pattern in localStorage
+			sessionStorage.setItem('savedPattern', pattern.name); // Save the selected pattern in sessionStorage
 		}
 		setActivePattern( pattern.name ); // Set the clicked pattern as active
 		onClickPattern( pattern ); // Original onClick logic
@@ -282,7 +271,7 @@ function BlockPatternsList(
 						showTitle={ showTitle }
 						showTooltip={ showTitlesAsTooltip }
 						category={ category }
-						isActive={ activePattern === pattern.name } // Highlight the active pattern
+						isSelected={ activePattern === pattern.name } // Highlight the active pattern
 						setActivePattern={ setActivePattern } // Function to set the active pattern
 					/>
 				) : (
diff --git a/packages/block-editor/src/components/block-patterns-list/style.scss b/packages/block-editor/src/components/block-patterns-list/style.scss
index 93334aba23671c..57dd5893afed34 100644
--- a/packages/block-editor/src/components/block-patterns-list/style.scss
+++ b/packages/block-editor/src/components/block-patterns-list/style.scss
@@ -14,6 +14,13 @@
 	&[draggable="true"] {
 		cursor: grab;
 	}
+
+	// Solution for "Add "selected" styling to selected pattern in the design selector."
+	// https: //github.com/WordPress/gutenberg/issues/65127
+
+	&.is-selected {
+		border: $border-width solid var(--wp-admin-theme-color);
+	}
 }
 
 .block-editor-block-patterns-list__item {
@@ -66,15 +73,9 @@
 	.block-editor-patterns__pattern-icon-wrapper {
 		min-width: 24px;
 		height: 24px;
+
 		.block-editor-patterns__pattern-icon {
 			fill: var(--wp-block-synced-color);
 		}
 	}
 }
-// Solution for "Add "selected" styling to active elements in the design selector."
-// https: //github.com/WordPress/gutenberg/issues/65127
-.block-editor-block-patterns-list__list-item.is-active {
-	border: 2px solid #007cba;
-	/* Custom styles for active item */
-	background-color: #eaf5ff;
-}

From 92b1723f72d896a950b4861267417dc08bbec2fa Mon Sep 17 00:00:00 2001
From: benazeer <benazircpra@gmail.com>
Date: Fri, 11 Oct 2024 14:00:41 +0530
Subject: [PATCH 04/14] Modification to highlight active iitem on focus

---
 .../src/components/block-patterns-list/index.js           | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/block-editor/src/components/block-patterns-list/index.js b/packages/block-editor/src/components/block-patterns-list/index.js
index 53d10fddd3ff68..3129cca8b04383 100644
--- a/packages/block-editor/src/components/block-patterns-list/index.js
+++ b/packages/block-editor/src/components/block-patterns-list/index.js
@@ -114,6 +114,7 @@ function BlockPattern( {
 							render={
 								<div
 									role="option"
+									tabIndex={0}
 									aria-label={ pattern.title }
 									aria-describedby={
 										pattern.description
@@ -210,6 +211,7 @@ function BlockPatternsList(
 	},
 	ref
 ) {
+	const [activeCompositeId, setActiveCompositeId] = useState(undefined);
 	const [ activePattern, setActivePattern ] = useState( null ); // State to track active pattern
 
 	useEffect( () => {
@@ -251,8 +253,10 @@ function BlockPatternsList(
 	return (
 		<Composite
 			orientation={ orientation }
-			activeId={ activePattern }
-			setActiveId={ setActivePattern }
+			activeId={ activeCompositeId }
+			setActiveId={ setActiveCompositeId }
+			selectedId={ activePattern }
+			setSelectedId={ setActivePattern }
 			role="listbox"
 			className="block-editor-block-patterns-list"
 			aria-label={ label }

From 09e25d9a692ba80f47dd86cadda523a74fe52916 Mon Sep 17 00:00:00 2001
From: benazeer <benazircpra@gmail.com>
Date: Mon, 14 Oct 2024 22:52:45 +0530
Subject: [PATCH 05/14] Removed local/session storage

---
 .../components/block-patterns-list/index.js   | 40 +++++--------------
 1 file changed, 9 insertions(+), 31 deletions(-)

diff --git a/packages/block-editor/src/components/block-patterns-list/index.js b/packages/block-editor/src/components/block-patterns-list/index.js
index 3129cca8b04383..cca3ec7645b504 100644
--- a/packages/block-editor/src/components/block-patterns-list/index.js
+++ b/packages/block-editor/src/components/block-patterns-list/index.js
@@ -75,14 +75,14 @@ function BlockPattern( {
 		<InserterDraggableBlocks
 			isEnabled={ isDraggable }
 			blocks={ patternBlocks }
-			pattern={pattern}
+			pattern={ pattern }
 		>
 			{ ( { draggable, onDragStart, onDragEnd } ) => (
 				<div
 					className={ clsx(
 						'block-editor-block-patterns-list__list-item',
 						{ 'is-selected': isSelected } // Apply 'is-selected' class if this pattern is active
-					)}
+					) }
 					draggable={ draggable }
 					onDragStart={ ( event ) => {
 						setIsDragging( true );
@@ -101,7 +101,6 @@ function BlockPattern( {
 						onClick( pattern, blocks );
 						onHover?.( null );
 					} }
-					
 				>
 					<WithToolTip
 						showTooltip={
@@ -114,7 +113,7 @@ function BlockPattern( {
 							render={
 								<div
 									role="option"
-									tabIndex={0}
+									tabIndex={ 0 }
 									aria-label={ pattern.title }
 									aria-describedby={
 										pattern.description
@@ -144,7 +143,7 @@ function BlockPattern( {
 								}
 								onHover?.( pattern );
 							} }
-							onMouseLeave={() => onHover?.(null)}
+							onMouseLeave={ () => onHover?.( null ) }
 						>
 							<BlockPreview
 								blocks={ blocks }
@@ -211,42 +210,21 @@ function BlockPatternsList(
 	},
 	ref
 ) {
-	const [activeCompositeId, setActiveCompositeId] = useState(undefined);
+	const [ activeCompositeId, setActiveCompositeId ] = useState( undefined );
 	const [ activePattern, setActivePattern ] = useState( null ); // State to track active pattern
 
 	useEffect( () => {
 		// Reset the active composite item whenever the available patterns change,
 		// to make sure that Composite widget can receive focus correctly when its
 		// composite items change. The first composite item will receive focus.
-		if (typeof window !== 'undefined' && window.sessionStorage ) {
-			// eslint-disable-next-line no-undef
-			const storedPatternName = sessionStorage.getItem( 'savedPattern' );
 
-			if (
-				storedPatternName &&
-				shownPatterns.some(
-					( pattern ) => pattern.name === storedPatternName
-				)
-			) {
-				// If there's a saved pattern and it exists in shownPatterns, set it as active
-				setActivePattern( storedPatternName );
-			} else {
-				const firstCompositeItemId = blockPatterns.find( ( pattern ) =>
-					shownPatterns.includes( pattern )
-				)?.name;
+		const firstCompositeItemId = blockPatterns.find( ( pattern ) =>
+			shownPatterns.includes( pattern )
+		)?.name;
 
-				if ( firstCompositeItemId ) {
-					setActivePattern( firstCompositeItemId );
-				}
-			}
-		}
+		setActiveCompositeId( firstCompositeItemId );
 	}, [ shownPatterns, blockPatterns ] );
 	const handleClickPattern = ( pattern ) => {
-		// Check if we are in a browser environment and sessionStorage is available
-		if (typeof window !== 'undefined' && window.sessionStorage ) {
-			// eslint-disable-next-line no-undef
-			sessionStorage.setItem('savedPattern', pattern.name); // Save the selected pattern in sessionStorage
-		}
 		setActivePattern( pattern.name ); // Set the clicked pattern as active
 		onClickPattern( pattern ); // Original onClick logic
 	};

From 81ab63645f5c4277410e1c478935365dc1d4cc48 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Wed, 16 Oct 2024 22:34:47 +0200
Subject: [PATCH 06/14] Remove unnecessary tabindex (composite already handles
 that)

---
 .../block-editor/src/components/block-patterns-list/index.js     | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/block-editor/src/components/block-patterns-list/index.js b/packages/block-editor/src/components/block-patterns-list/index.js
index cca3ec7645b504..d19bacf31f6f1f 100644
--- a/packages/block-editor/src/components/block-patterns-list/index.js
+++ b/packages/block-editor/src/components/block-patterns-list/index.js
@@ -113,7 +113,6 @@ function BlockPattern( {
 							render={
 								<div
 									role="option"
-									tabIndex={ 0 }
 									aria-label={ pattern.title }
 									aria-describedby={
 										pattern.description

From d3d19c51a5832f7691aa84fb7c8a1fb3e4e96b06 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Wed, 16 Oct 2024 22:35:53 +0200
Subject: [PATCH 07/14] No need to call setActivePattern, since it's also
 called in the onClick callback

---
 .../block-editor/src/components/block-patterns-list/index.js   | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/block-editor/src/components/block-patterns-list/index.js b/packages/block-editor/src/components/block-patterns-list/index.js
index d19bacf31f6f1f..ad04b2df193d00 100644
--- a/packages/block-editor/src/components/block-patterns-list/index.js
+++ b/packages/block-editor/src/components/block-patterns-list/index.js
@@ -43,7 +43,6 @@ function BlockPattern( {
 	showTooltip,
 	category,
 	isSelected, // new prop to manage active state
-	setActivePattern, // function to set the active pattern
 } ) {
 	const [ isDragging, setIsDragging ] = useState( false );
 	const { blocks, viewportWidth } = pattern;
@@ -132,7 +131,6 @@ function BlockPattern( {
 							}
 							id={ id }
 							onClick={ () => {
-								setActivePattern( id ); // Set active pattern when clicked
 								onClick( pattern, blocks );
 								onHover?.( null );
 							} }
@@ -253,7 +251,6 @@ function BlockPatternsList(
 						showTooltip={ showTitlesAsTooltip }
 						category={ category }
 						isSelected={ activePattern === pattern.name } // Highlight the active pattern
-						setActivePattern={ setActivePattern } // Function to set the active pattern
 					/>
 				) : (
 					<BlockPatternPlaceholder key={ pattern.name } />

From fdf2d49ba6edcd43cf924665f75b276d24ede5a4 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Wed, 16 Oct 2024 22:36:24 +0200
Subject: [PATCH 08/14] Move the is-selected classname to the composite item
 itself

---
 .../src/components/block-patterns-list/index.js             | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/block-editor/src/components/block-patterns-list/index.js b/packages/block-editor/src/components/block-patterns-list/index.js
index ad04b2df193d00..98a316cda0c6e9 100644
--- a/packages/block-editor/src/components/block-patterns-list/index.js
+++ b/packages/block-editor/src/components/block-patterns-list/index.js
@@ -78,10 +78,7 @@ function BlockPattern( {
 		>
 			{ ( { draggable, onDragStart, onDragEnd } ) => (
 				<div
-					className={ clsx(
-						'block-editor-block-patterns-list__list-item',
-						{ 'is-selected': isSelected } // Apply 'is-selected' class if this pattern is active
-					) }
+					className="block-editor-block-patterns-list__list-item"
 					draggable={ draggable }
 					onDragStart={ ( event ) => {
 						setIsDragging( true );
@@ -125,6 +122,7 @@ function BlockPattern( {
 												pattern.type ===
 													INSERTER_PATTERN_TYPES.user &&
 												! pattern.syncStatus,
+											'is-selected': isSelected,
 										}
 									) }
 								/>

From 5a6ba83be7d9e16c4afdc2c2bd7ac6528c94109c Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Wed, 16 Oct 2024 22:36:46 +0200
Subject: [PATCH 09/14] No need for an extra onClick handler, the one on
 Composite.Item is enough

---
 .../block-editor/src/components/block-patterns-list/index.js  | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/packages/block-editor/src/components/block-patterns-list/index.js b/packages/block-editor/src/components/block-patterns-list/index.js
index 98a316cda0c6e9..1adf10a23a0f01 100644
--- a/packages/block-editor/src/components/block-patterns-list/index.js
+++ b/packages/block-editor/src/components/block-patterns-list/index.js
@@ -93,10 +93,6 @@ function BlockPattern( {
 							onDragEnd( event );
 						}
 					} }
-					onClick={ () => {
-						onClick( pattern, blocks );
-						onHover?.( null );
-					} }
 				>
 					<WithToolTip
 						showTooltip={

From 3abb4e4f98d5c1a0722d9e5f69b8df8bea4a93a5 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Wed, 16 Oct 2024 22:37:21 +0200
Subject: [PATCH 10/14] Fix the onCLick handler by accepting all the parameters
 needed

---
 .../src/components/block-patterns-list/index.js             | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/block-editor/src/components/block-patterns-list/index.js b/packages/block-editor/src/components/block-patterns-list/index.js
index 1adf10a23a0f01..2be8f3725f9795 100644
--- a/packages/block-editor/src/components/block-patterns-list/index.js
+++ b/packages/block-editor/src/components/block-patterns-list/index.js
@@ -215,9 +215,9 @@ function BlockPatternsList(
 
 		setActiveCompositeId( firstCompositeItemId );
 	}, [ shownPatterns, blockPatterns ] );
-	const handleClickPattern = ( pattern ) => {
-		setActivePattern( pattern.name ); // Set the clicked pattern as active
-		onClickPattern( pattern ); // Original onClick logic
+	const handleClickPattern = ( pattern, blocks ) => {
+		setActivePattern( pattern.name );
+		onClickPattern( pattern, blocks );
 	};
 	return (
 		<Composite

From 169af5cf5d7780d6c6cb5effd751cc3416d5b8d3 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Wed, 16 Oct 2024 22:38:11 +0200
Subject: [PATCH 11/14] Remove unnecessary comments, make sure that
 activePattern is selected

---
 .../src/components/block-patterns-list/index.js             | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/block-editor/src/components/block-patterns-list/index.js b/packages/block-editor/src/components/block-patterns-list/index.js
index 2be8f3725f9795..0d366f1a0ed3ba 100644
--- a/packages/block-editor/src/components/block-patterns-list/index.js
+++ b/packages/block-editor/src/components/block-patterns-list/index.js
@@ -42,7 +42,7 @@ function BlockPattern( {
 	showTitle = true,
 	showTooltip,
 	category,
-	isSelected, // new prop to manage active state
+	isSelected,
 } ) {
 	const [ isDragging, setIsDragging ] = useState( false );
 	const { blocks, viewportWidth } = pattern;
@@ -244,7 +244,9 @@ function BlockPatternsList(
 						showTitle={ showTitle }
 						showTooltip={ showTitlesAsTooltip }
 						category={ category }
-						isSelected={ activePattern === pattern.name } // Highlight the active pattern
+						isSelected={
+							!! activePattern && activePattern === pattern.name
+						}
 					/>
 				) : (
 					<BlockPatternPlaceholder key={ pattern.name } />

From c22fc3c5621d3ede1763efa3eb77f1f1950576a9 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Wed, 16 Oct 2024 23:01:27 +0200
Subject: [PATCH 12/14] Do not pass unnecessary / non-existing props to
 Composite

---
 .../block-editor/src/components/block-patterns-list/index.js    | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/block-editor/src/components/block-patterns-list/index.js b/packages/block-editor/src/components/block-patterns-list/index.js
index 0d366f1a0ed3ba..f95d6a3a509e2b 100644
--- a/packages/block-editor/src/components/block-patterns-list/index.js
+++ b/packages/block-editor/src/components/block-patterns-list/index.js
@@ -224,8 +224,6 @@ function BlockPatternsList(
 			orientation={ orientation }
 			activeId={ activeCompositeId }
 			setActiveId={ setActiveCompositeId }
-			selectedId={ activePattern }
-			setSelectedId={ setActivePattern }
 			role="listbox"
 			className="block-editor-block-patterns-list"
 			aria-label={ label }

From 5b91306f73ad7b5420092ecb115dbdb6e26dbf1b Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Wed, 16 Oct 2024 23:02:07 +0200
Subject: [PATCH 13/14] Re-work styles, and show a light colored overlay to
 indicate selected pattern

---
 .../components/block-patterns-list/style.scss | 26 +++++++++----------
 1 file changed, 12 insertions(+), 14 deletions(-)

diff --git a/packages/block-editor/src/components/block-patterns-list/style.scss b/packages/block-editor/src/components/block-patterns-list/style.scss
index 57dd5893afed34..534f5a5fa2b4e7 100644
--- a/packages/block-editor/src/components/block-patterns-list/style.scss
+++ b/packages/block-editor/src/components/block-patterns-list/style.scss
@@ -14,13 +14,6 @@
 	&[draggable="true"] {
 		cursor: grab;
 	}
-
-	// Solution for "Add "selected" styling to selected pattern in the design selector."
-	// https: //github.com/WordPress/gutenberg/issues/65127
-
-	&.is-selected {
-		border: $border-width solid var(--wp-admin-theme-color);
-	}
 }
 
 .block-editor-block-patterns-list__item {
@@ -52,16 +45,21 @@
 		}
 	}
 
-	&:hover:not(:focus) .block-editor-block-preview__container::after {
-		outline-color: rgba($black, 0.3);
+	&:hover:not( [data-focus-visible] )
+		.block-editor-block-preview__container::after {
+		outline-color: rgba( $black, 0.3 );
 	}
 
-	&:focus .block-editor-block-preview__container::after {
-		outline-color: var(--wp-admin-theme-color);
-		outline-width: var(--wp-admin-border-width-focus);
-		outline-offset: calc((-1 * var(--wp-admin-border-width-focus)));
+	&[data-focus-visible] .block-editor-block-preview__container::after {
+		outline-color: var( --wp-admin-theme-color );
+		outline-width: var( --wp-admin-border-width-focus );
+		outline-offset: calc( ( -1 * var( --wp-admin-border-width-focus ) ) );
 		transition: outline 0.1s linear;
-		@include reduce-motion("transition");
+		@include reduce-motion( 'transition' );
+	}
+
+	&.is-selected .block-editor-block-preview__container::after {
+		background-color: rgba( var( --wp-admin-theme-color--rgb ), 0.04 );
 	}
 
 	.block-editor-patterns__pattern-details:not(:empty) {

From 76a666e28dfdeb262e202de3e116bfd6f005d8d5 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Fri, 18 Oct 2024 18:12:58 +0200
Subject: [PATCH 14/14] Update focus and hover styles

---
 .../components/block-patterns-list/style.scss | 23 +++++++++++--------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/packages/block-editor/src/components/block-patterns-list/style.scss b/packages/block-editor/src/components/block-patterns-list/style.scss
index 534f5a5fa2b4e7..b7e75754b7507c 100644
--- a/packages/block-editor/src/components/block-patterns-list/style.scss
+++ b/packages/block-editor/src/components/block-patterns-list/style.scss
@@ -42,24 +42,29 @@
 			outline: $border-width solid rgba($black, 0.1);
 			outline-offset: -$border-width;
 			border-radius: $radius-medium;
+
+			transition: outline 0.1s linear;
+			@include reduce-motion( 'transition' );
 		}
 	}
 
-	&:hover:not( [data-focus-visible] )
-		.block-editor-block-preview__container::after {
+	// Selected
+	&.is-selected .block-editor-block-preview__container::after {
+		outline-color: $gray-900;
+		outline-width: var( --wp-admin-border-width-focus );
+		outline-offset: calc( -1 * var( --wp-admin-border-width-focus ) );
+	}
+
+	// Hover state
+	&:hover .block-editor-block-preview__container::after {
 		outline-color: rgba( $black, 0.3 );
 	}
 
+	// Focused state
 	&[data-focus-visible] .block-editor-block-preview__container::after {
 		outline-color: var( --wp-admin-theme-color );
 		outline-width: var( --wp-admin-border-width-focus );
-		outline-offset: calc( ( -1 * var( --wp-admin-border-width-focus ) ) );
-		transition: outline 0.1s linear;
-		@include reduce-motion( 'transition' );
-	}
-
-	&.is-selected .block-editor-block-preview__container::after {
-		background-color: rgba( var( --wp-admin-theme-color--rgb ), 0.04 );
+		outline-offset: calc( -1 * var( --wp-admin-border-width-focus ) );
 	}
 
 	.block-editor-patterns__pattern-details:not(:empty) {