From 6aca64b16e120eb6de4a96b0fa4b35c60bcd5628 Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Tue, 25 Apr 2023 15:24:55 +0100
Subject: [PATCH] Try a masonry layout on the template pattern suggestion modal
 (#49958)

* Update template pattern grid

* Four columns on wide breakpoint

* Increase height of 'start blank' button

* Revert "Increase height of 'start blank' button"

This reverts commit 14449755a5d27a3b0c5097c769766247df045ad0.
---
 .../start-template-options/style.scss         | 37 +++++++------------
 1 file changed, 13 insertions(+), 24 deletions(-)

diff --git a/packages/edit-site/src/components/start-template-options/style.scss b/packages/edit-site/src/components/start-template-options/style.scss
index 8337e00418fa28..9537eaf389a619 100644
--- a/packages/edit-site/src/components/start-template-options/style.scss
+++ b/packages/edit-site/src/components/start-template-options/style.scss
@@ -1,32 +1,20 @@
 .edit-site-start-template-options__modal-content .block-editor-block-patterns-list {
-	display: flex;
-	flex-wrap: wrap;
-	gap: $grid-unit-30;
-	width: 100%;
-	margin-top: $grid-unit-05;
+	column-count: 2;
+	column-gap: $grid-unit-30;
 
-	.block-editor-block-patterns-list__list-item {
-		break-inside: avoid-column;
-		margin-bottom: 0;
-		aspect-ratio: 3/4;
-		width: calc(50% - #{ $grid-unit-30 * 1 } / 2);
-
-		@include break-medium() {
-			width: calc(33.333% - #{ $grid-unit-30 * 2 } / 3);
-		}
+	// Small top padding required to avoid cutting off the visible outline when hovering items
+	padding-top: $border-width-focus;
 
-		@include break-wide() {
-			width: calc(25% - #{ $grid-unit-30 * 3 } / 4);
-		}
+	@include break-medium() {
+		column-count: 3;
+	}
 
-		.block-editor-block-preview__container {
-			height: 100%;
-		}
+	@include break-wide() {
+		column-count: 4;
+	}
 
-		.block-editor-block-preview__content {
-			width: 100%;
-			position: absolute;
-		}
+	.block-editor-block-patterns-list__list-item {
+		break-inside: avoid-column;
 
 		.block-editor-block-patterns-list__item-title {
 			display: none;
@@ -47,6 +35,7 @@
 			position: absolute;
 			padding: 0;
 			background: #f0f0f0;
+			min-height: $grid-unit-50 * 4;
 			&::after {
 				width: 100%;
 				top: 50%;