From 45e3f176b3679304db9f0b9f6bdc99b90d75a56c Mon Sep 17 00:00:00 2001
From: ntsekouras <ntsekouras@outlook.com>
Date: Tue, 23 Mar 2021 10:12:11 +0200
Subject: [PATCH] single column patterns and description

---
 .../pattern-transformations-menu.js           |  3 ++
 .../src/components/block-switcher/style.scss  | 48 +++++++++++--------
 2 files changed, 31 insertions(+), 20 deletions(-)

diff --git a/packages/block-editor/src/components/block-switcher/pattern-transformations-menu.js b/packages/block-editor/src/components/block-switcher/pattern-transformations-menu.js
index 3bacc8826b9b2..1b58ab4ee8caa 100644
--- a/packages/block-editor/src/components/block-switcher/pattern-transformations-menu.js
+++ b/packages/block-editor/src/components/block-switcher/pattern-transformations-menu.js
@@ -221,6 +221,9 @@ function BlockPattern( { pattern, onSelect, composite } ) {
 					blocks={ pattern.transformedBlocks }
 					viewportWidth={ 500 }
 				/>
+				<div className={ `${ baseClassName }-list__item-title` }>
+					{ pattern.title }
+				</div>
 			</CompositeItem>
 			{ !! pattern.description && (
 				<VisuallyHidden id={ descriptionId }>
diff --git a/packages/block-editor/src/components/block-switcher/style.scss b/packages/block-editor/src/components/block-switcher/style.scss
index 5363b699e246b..af55c44d2509d 100644
--- a/packages/block-editor/src/components/block-switcher/style.scss
+++ b/packages/block-editor/src/components/block-switcher/style.scss
@@ -149,6 +149,7 @@
 	.block-editor-block-switcher__preview {
 		width: 300px;
 		height: auto;
+		max-height: 500px;
 		padding: $grid-unit-20;
 	}
 }
@@ -184,27 +185,34 @@
 }
 
 .block-editor-block-switcher__preview-patterns-container {
-	display: grid;
-	grid-template-columns: 1fr 1fr;
-	grid-gap: $grid-unit-10;
-	padding: 1px;
-
-	.block-editor-block-switcher__preview-patterns-container-list__item {
-		height: 100%;
-		border-radius: $radius-block-ui;
-		transition: all 0.05s ease-in-out;
-		position: relative;
-		border: $border-width solid transparent;
-
-		&:hover {
-			border: $border-width solid var(--wp-admin-theme-color);
+	.block-editor-block-switcher__preview-patterns-container-list__list-item {
+		margin-top: $grid-unit-20;
+		.block-editor-block-preview__container {
+			cursor: pointer;
 		}
-
-		&:focus {
-			box-shadow: inset 0 0 0 1px $white, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-
-			// Windows High Contrast mode will show this outline, but not the box-shadow.
-			outline: 2px solid transparent;
+		.block-editor-block-switcher__preview-patterns-container-list__item {
+			height: 100%;
+			border-radius: $radius-block-ui;
+			transition: all 0.05s ease-in-out;
+			position: relative;
+			border: $border-width solid transparent;
+			&:hover {
+				border: $border-width solid var(--wp-admin-theme-color);
+			}
+			&:focus {
+				box-shadow: inset 0 0 0 1px $white, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+
+				// Windows High Contrast mode will show this outline, but not the box-shadow.
+				outline: 2px solid transparent;
+			}
+
+			.block-editor-block-switcher__preview-patterns-container-list__item-title {
+				padding: $grid-unit-05;
+				font-size: 12px;
+				text-align: center;
+				cursor: pointer;
+			}
 		}
 	}
+
 }