From d6db890e1c9bff3c56f5198d52a1e1e7f1e0c6ea Mon Sep 17 00:00:00 2001
From: Kelly Choyce-Dwan <ryelle@git.wordpress.org>
Date: Tue, 22 Jun 2021 22:14:08 +0000
Subject: [PATCH] Twenty Nineteen: Update margins on full- and wide-aligned
 blocks in the editor.

Previously, full width blocks would cause a horizontal scrollbar, and nesting full width blocks would cause the content to be pulled off the screen. Now wide and full width blocks can be nested without any visual issues.

Props aleperez92, Boniu91, onemaggie, hellofromTonya.
Fixes #53428.



git-svn-id: https://develop.svn.wordpress.org/trunk@51209 602fd350-edb4-49c9-b593-d223f7449a82
---
 .../themes/twentynineteen/style-editor.css    | 25 +++++++++++++---
 .../themes/twentynineteen/style-editor.scss   | 29 ++++++++++++++++---
 2 files changed, 46 insertions(+), 8 deletions(-)

diff --git a/src/wp-content/themes/twentynineteen/style-editor.css b/src/wp-content/themes/twentynineteen/style-editor.css
index 274e2851c2..ea254956dd 100644
--- a/src/wp-content/themes/twentynineteen/style-editor.css
+++ b/src/wp-content/themes/twentynineteen/style-editor.css
@@ -583,8 +583,8 @@ h6:lang(vi), figcaption:lang(vi),
 /** === Editor Frame === */
 body .wp-block[data-align="full"],
 body .wp-block.alignfull {
-  width: calc(100% + 20px);
-  max-width: calc(100% + 20px);
+  max-width: calc(100% + 16px);
+  width: calc(100% + 16px);
 }
 
 body .wp-block[data-align="left"],
@@ -620,11 +620,19 @@ body .wp-block.aligncenter {
   }
   body .wp-block[data-align="full"],
   body .wp-block.alignfull {
-    width: calc( 125% + 20px);
-    max-width: calc( 125% + 20px);
+    width: calc(125% + 16px);
+    max-width: calc(125% + 16px);
     position: relative;
     left: -12.5%;
   }
+  body .wp-block[data-align="wide"] .wp-block[data-align="full"],
+  body .wp-block[data-align="full"] .wp-block[data-align="full"],
+  body .wp-block.alignwide .wp-block.alignfull,
+  body .wp-block.alignfull .wp-block.alignfull {
+    left: 0;
+    margin-left: 0;
+    margin-right: 0;
+  }
 }
 
 /** === Content Width === */
@@ -1560,3 +1568,12 @@ ul.wp-block-archives li ul,
     width: calc(125% + 120px);
   }
 }
+
+.wp-block-post-template .wp-block[data-align="full"],
+.wp-block-post-template .wp-block.alignfull {
+  left: 0;
+  max-width: 100%;
+  padding-left: 0;
+  padding-right: 0;
+  width: 100%;
+}
diff --git a/src/wp-content/themes/twentynineteen/style-editor.scss b/src/wp-content/themes/twentynineteen/style-editor.scss
index 07c352035d..ed06791612 100644
--- a/src/wp-content/themes/twentynineteen/style-editor.scss
+++ b/src/wp-content/themes/twentynineteen/style-editor.scss
@@ -13,8 +13,8 @@ body {
 
 	.wp-block[data-align="full"],
 	.wp-block.alignfull {
-		width: calc(100% + 20px);
-		max-width: calc(100% + 20px);
+		max-width: calc(100% + 16px);
+		width: calc(100% + 16px);
 	}
 
 	.wp-block[data-align="left"],
@@ -54,11 +54,20 @@ body {
 
 		.wp-block[data-align="full"],
 		.wp-block.alignfull {
-			width: calc( 125% + 20px );
-			max-width: calc( 125% + 20px );
+			width: calc(125% + 16px);
+			max-width: calc(125% + 16px);
 			position: relative;
 			left: -12.5%;
 		}
+
+		.wp-block[data-align="wide"] .wp-block[data-align="full"],
+		.wp-block[data-align="full"] .wp-block[data-align="full"],
+		.wp-block.alignwide .wp-block.alignfull,
+		.wp-block.alignfull .wp-block.alignfull {
+			left: 0;
+			margin-left: 0;
+			margin-right: 0;
+		}
 	}
 }
 
@@ -971,3 +980,15 @@ $group-block-background__padding: $font__size_base;
 			}
 		}
 	}
+
+.wp-block-post-template {
+
+	.wp-block[data-align="full"],
+	.wp-block.alignfull {
+		left: 0;
+		max-width: 100%;
+		padding-left: 0;
+		padding-right: 0;
+		width: 100%;
+	}
+}