From 162dbc1bc5483d25548e69b2c449822d284645b9 Mon Sep 17 00:00:00 2001
From: Joen A <1204802+jasmussen@users.noreply.github.com>
Date: Fri, 17 Dec 2021 08:52:49 +0100
Subject: [PATCH] Layout Grid: Fix vertical alignment, round 2 (#254)

* Layout Grid: Fix vertical alignment, round 2

* Fix whitespace.
---
 blocks/layout-grid/editor.scss | 16 +++++++++-------
 blocks/layout-grid/style.scss  |  6 ++++++
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/blocks/layout-grid/editor.scss b/blocks/layout-grid/editor.scss
index 040113db..09513b58 100644
--- a/blocks/layout-grid/editor.scss
+++ b/blocks/layout-grid/editor.scss
@@ -34,18 +34,20 @@
  * Visual Glitches
  */
 
-// Make sure each column is full height in the editor, as it is on the frontend.
-[data-type="jetpack/layout-grid-column"] > .block-editor-block-list__block-edit,
-[data-type="jetpack/layout-grid-column"] > .block-editor-block-list__block-edit > [data-block],
+// This prevents collapsing margins, which makes for a more stable experience.
+// It is definitely needed for background colors to work.
 .wp-block-jetpack-layout-grid-column {
-	height: 100%;
-
-	// This prevents collapsing margins, which makes for a more stable experience.
-	// It is definitely needed for background colors to work.
 	border-top: 0.05px solid transparent;
 	border-bottom: 0.05px solid transparent;
 }
 
+// There are extra containers in the editing canvas. They need to be set to grid
+// same as the corresponding containers on the frontend, to match.
+[data-type="jetpack/layout-grid-column"] {
+	display: grid;
+	height: 100%;
+}
+
 // When grid is full-wide, pad the inner blocks so the side UI is available, including resize handles.
 // To make sure this is smooth, we add some animation.
 // For now this whole bit exists so the side UI, and resize handles, are available even on full-wide blocks.
diff --git a/blocks/layout-grid/style.scss b/blocks/layout-grid/style.scss
index cc327e58..c2e96433 100644
--- a/blocks/layout-grid/style.scss
+++ b/blocks/layout-grid/style.scss
@@ -165,9 +165,11 @@
 	}
 }
 
+
 /**
  * Parent column alignment
  */
+
 .wp-block-jetpack-layout-grid {
 	&.are-vertically-aligned-top {
 		align-items: flex-start;
@@ -182,12 +184,16 @@
 	}
 }
 
+
 /**
  * Individual column alignment
  */
+
 .wp-block-jetpack-layout-grid-column {
+	// Allow top-aligned columns to span the full height.
 	&.is-vertically-aligned-top {
 		align-self: flex-start;
+		height: 100%;
 	}
 
 	&.is-vertically-aligned-center {