Site editor: style the selected template pattern

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 } /> }

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);
 		}