From 443ce894391a0e07738661c5b3d4af4e34c47616 Mon Sep 17 00:00:00 2001
From: Benazeer Hassan <66269472+benazeer-ben@users.noreply.github.com>
Date: Wed, 27 Nov 2024 19:06:10 +0530
Subject: [PATCH] Site editor: style the selected template pattern (#65917)

* Updated code to set active pattern and its styling

* Fixes for linting issues on updated files

* Updated code based on the first round feedback points

* Modification to highlight active iitem on focus

* Removed local/session storage

* Changes applied from drafted PR

* Changes applied from drafted PR

* Updated with new style changes

* Linting Fix

* Updated code to set active pattern and its styling

* Fixes for linting issues on updated files

* Updated code based on the first round feedback points

* Modification to highlight active iitem on focus

* Removed local/session storage

* Changes applied from drafted PR

* Changes applied from drafted PR

* Updated with new style changes

* Linting Fix

* Fix spacing

---------

Co-authored-by: benazeer-ben <benazeer@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: patil-vipul <vipulpatil@git.wordpress.org>
Co-authored-by: juanfra <juanfra@git.wordpress.org>
---
 .../components/block-patterns-list/index.js   | 13 +++++++++++-
 .../components/block-patterns-list/style.scss | 21 ++++++++++++++-----
 2 files changed, 28 insertions(+), 6 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 8128e89418f45..0c7e54c3c62b2 100644
--- a/packages/block-editor/src/components/block-patterns-list/index.js
+++ b/packages/block-editor/src/components/block-patterns-list/index.js
@@ -41,6 +41,7 @@ function BlockPattern( {
 	onHover,
 	showTitlesAsTooltip,
 	category,
+	isSelected,
 } ) {
 	const [ isDragging, setIsDragging ] = useState( false );
 	const { blocks, viewportWidth } = pattern;
@@ -114,6 +115,7 @@ function BlockPattern( {
 												pattern.type ===
 													INSERTER_PATTERN_TYPES.user &&
 												! pattern.syncStatus,
+											'is-selected': isSelected,
 										}
 									) }
 								/>
@@ -192,6 +194,7 @@ 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,
@@ -201,6 +204,11 @@ function BlockPatternsList(
 		setActiveCompositeId( firstCompositeItemId );
 	}, [ blockPatterns ] );
 
+	const handleClickPattern = ( pattern, blocks ) => {
+		setActivePattern( pattern.name );
+		onClickPattern( pattern, blocks );
+	};
+
 	return (
 		<Composite
 			orientation={ orientation }
@@ -216,11 +224,14 @@ function BlockPatternsList(
 					key={ pattern.name }
 					id={ pattern.name }
 					pattern={ pattern }
-					onClick={ onClickPattern }
+					onClick={ handleClickPattern }
 					onHover={ onHover }
 					isDraggable={ isDraggable }
 					showTitlesAsTooltip={ showTitlesAsTooltip }
 					category={ category }
+					isSelected={
+						!! activePattern && activePattern === pattern.name
+					}
 				/>
 			) ) }
 			{ pagingProps && <BlockPatternsPaging { ...pagingProps } /> }
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 c46bb49b9a901..8b1b0b54c9b1a 100644
--- a/packages/block-editor/src/components/block-patterns-list/style.scss
+++ b/packages/block-editor/src/components/block-patterns-list/style.scss
@@ -44,19 +44,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(:focus) .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);
 	}
 
-	&:focus .block-editor-block-preview__container::after {
+	// 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");
+		outline-offset: calc(-1 * var(--wp-admin-border-width-focus));
 	}
 
 	.block-editor-patterns__pattern-details:not(:empty) {
@@ -68,6 +78,7 @@
 	.block-editor-patterns__pattern-icon-wrapper {
 		min-width: 24px;
 		height: 24px;
+
 		.block-editor-patterns__pattern-icon {
 			fill: var(--wp-block-synced-color);
 		}