From 98a8bcb37591844c3e1e20cb3b4c03c12ee47ec0 Mon Sep 17 00:00:00 2001
From: Adam Wood <1017872+adamwoodnz@users.noreply.github.com>
Date: Mon, 10 Jun 2024 15:02:17 +1200
Subject: [PATCH] Create positioning context for 3 column layout

Gutenberg 18.5 added position:relative to all constrained blocks, breaking the 3 column layout.
This change adds makes the layout less brittle by defining it's own positioning context, and adjusts position of the children accordingly.

See https://github.com/WordPress/wporg-parent-2021/issues/139
---
 .../themes/wporg-parent-2021/sass/base/_layout.scss      | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/source/wp-content/themes/wporg-parent-2021/sass/base/_layout.scss b/source/wp-content/themes/wporg-parent-2021/sass/base/_layout.scss
index af58933b..f06c9abe 100644
--- a/source/wp-content/themes/wporg-parent-2021/sass/base/_layout.scss
+++ b/source/wp-content/themes/wporg-parent-2021/sass/base/_layout.scss
@@ -32,6 +32,7 @@
 .has-three-columns {
 	--local--sidebar--width: 248px;
 	--local--column-gap: 40px;
+	position: relative;
 	justify-content: flex-end;
 	max-width: 100%;
 
@@ -45,6 +46,7 @@
 
 	main {
 		order: 1;
+		padding-top: var(--wp--preset--spacing--20);
 	}
 
 	article {
@@ -53,11 +55,12 @@
 
 	// Left sidebar: Typically Chapter List
 	> .wp-block-wporg-sidebar-container {
-		margin-top: var(--wp--preset--spacing--20);
+		padding-top: var(--wp--preset--spacing--20);
 	}
 
 	// Right sidebar: Typically Table of Contents
 	article .wp-block-wporg-sidebar-container {
+		margin-block-start: 0;
 		margin-bottom: var(--wp--preset--spacing--50);
 	}
 
@@ -91,7 +94,9 @@
 			margin-right: auto;
 
 			.wp-block-wporg-sidebar-container {
-				inset-inline-end: var(--wp--preset--spacing--edge-space);
+				padding-top: var(--wp--preset--spacing--20);
+				inset-inline-end: calc((var(--local--block-end-sidebar--width) * -1) - var(--local--column-gap));
+				inset-block: 0;
 			}
 		}
 	}