single column patterns and description

WordPress · Mar 23, 2021 · 45e3f17 · 45e3f17
1 parent 2aac195
commit 45e3f17
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 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
@@ -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
@@ -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;
+			}
 		}
 	}
+
 }