From edab5f729492a3061a591ab7211e71e1e57b31e8 Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Tue, 16 Oct 2018 10:37:19 -0400
Subject: [PATCH 01/12] Add additional editor stylesheet, plus page title
 styles.

This must be included in a seprate stylesheet (for now), because of Gutenberg's auto-classname injection in style-editor.scss.
---
 functions.php           |  9 +++++++++
 style-editor-frame.css  | 30 ++++++++++++++++++++++++++++++
 style-editor-frame.scss | 29 +++++++++++++++++++++++++++++
 3 files changed, 68 insertions(+)
 create mode 100644 style-editor-frame.css
 create mode 100644 style-editor-frame.scss

diff --git a/functions.php b/functions.php
index ca902194..88fb2419 100644
--- a/functions.php
+++ b/functions.php
@@ -129,6 +129,15 @@ function twentynineteen_scripts() {
 }
 add_action( 'wp_enqueue_scripts', 'twentynineteen_scripts' );
 
+/**
+ * Enqueue supplemental block editor styles
+ */
+function twentynineteen_editor_frame_styles() {
+    wp_enqueue_style( 'twentynineteen-editor-frame-styles', get_theme_file_uri( '/style-editor-frame.css' ), false, '1.0', 'all' );
+}
+
+add_action( 'enqueue_block_editor_assets', 'twentynineteen_editor_frame_styles' );
+
 /**
  * SVG Icons class.
  */
diff --git a/style-editor-frame.css b/style-editor-frame.css
new file mode 100644
index 00000000..365df35a
--- /dev/null
+++ b/style-editor-frame.css
@@ -0,0 +1,30 @@
+/*!
+Twenty Nineteen Editor Frame Styles
+*/
+/** === Includes === */
+/* If we add the border using a regular CSS border, it won't look good on non-retina devices,
+ * since its edges can look jagged due to lack of antialiasing. In this case, we are several
+ * layers of box-shadow to add the border visually, which will render the border smoother. */
+/** === Title === */
+body.gutenberg-editor-page .gutenberg .editor-post-title__block:before {
+  background: #919191;
+  content: "\020";
+  display: block;
+  height: 2px;
+  margin: 1rem 0;
+  width: 1em;
+}
+
+body.gutenberg-editor-page .gutenberg .editor-post-title__block:before {
+  width: 2.8125em;
+  margin-top: 0;
+  margin-bottom: 0;
+  margin-left: 1em;
+  position: relative;
+  top: 0.5em;
+}
+
+body.gutenberg-editor-page .gutenberg .editor-post-title__block .editor-post-title__input {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  font-size: 2.8125em;
+}
diff --git a/style-editor-frame.scss b/style-editor-frame.scss
new file mode 100644
index 00000000..4211e75e
--- /dev/null
+++ b/style-editor-frame.scss
@@ -0,0 +1,29 @@
+/*!
+Twenty Nineteen Editor Frame Styles
+*/
+
+/** === Includes === */
+
+@import "sass/variables-site/variables-site";
+@import "sass/variables-site/colors";
+@import "sass/mixins/mixins-master";
+
+/** === Title === */
+
+body.gutenberg-editor-page .gutenberg .editor-post-title__block {
+	@include post-section-dash;
+
+	&:before {
+		width: $font__size-xxl;
+		margin-top: 0;
+		margin-bottom: 0;
+		margin-left: 1em;
+		position: relative;
+		top: 0.5em;
+	}
+
+	.editor-post-title__input {
+		font-family: $font__heading;
+		font-size: $font__size-xxl;
+	}
+}
\ No newline at end of file

From d7edac16e5fdc9338e2838b79f8012e705c4141c Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Tue, 16 Oct 2018 10:39:11 -0400
Subject: [PATCH 02/12] Introduce left alignment of editor styles.

---
 style-editor-frame.css  | 21 +++++++++++++++++++++
 style-editor-frame.scss | 28 ++++++++++++++++++++++++++++
 2 files changed, 49 insertions(+)

diff --git a/style-editor-frame.css b/style-editor-frame.css
index 365df35a..33231e8a 100644
--- a/style-editor-frame.css
+++ b/style-editor-frame.css
@@ -28,3 +28,24 @@ body.gutenberg-editor-page .gutenberg .editor-post-title__block .editor-post-tit
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
   font-size: 2.8125em;
 }
+
+/** === Off-Center Content === */
+@media all and (min-width: 768px) {
+  body.gutenberg-editor-page .gutenberg .edit-post-layout .editor-writing-flow {
+    display: grid;
+    grid-template-columns: 10% 80% 10%;
+  }
+  body.gutenberg-editor-page .gutenberg .edit-post-layout .editor-writing-flow > div {
+    grid-column-start: 2;
+  }
+  body.gutenberg-editor-page .gutenberg .edit-post-layout .editor-post-title__block,
+  body.gutenberg-editor-page .gutenberg .edit-post-layout .editor-block-list__block {
+    margin-left: 0;
+    margin-right: 0;
+  }
+  body.gutenberg-editor-page .gutenberg .edit-post-layout .editor-block-list__block[data-align="full"] {
+    width: 136%;
+    position: relative;
+    left: -18%;
+  }
+}
diff --git a/style-editor-frame.scss b/style-editor-frame.scss
index 4211e75e..c3bb9c35 100644
--- a/style-editor-frame.scss
+++ b/style-editor-frame.scss
@@ -26,4 +26,32 @@ body.gutenberg-editor-page .gutenberg .editor-post-title__block {
 		font-family: $font__heading;
 		font-size: $font__size-xxl;
 	}
+}
+
+/** === Off-Center Content === */
+
+body.gutenberg-editor-page .gutenberg .edit-post-layout {
+
+	@media all and (min-width: $tablet_width ) {
+		.editor-writing-flow {
+			display: grid;
+			grid-template-columns: 10% 80% 10%;
+
+			> div {
+				grid-column-start: 2;
+			}
+		}
+
+		.editor-post-title__block,
+		.editor-block-list__block {
+			margin-left: 0;
+			margin-right: 0;
+		}
+
+		.editor-block-list__block[data-align="full"] {
+			width: 136%;
+			position: relative;
+			left: -18%;
+		}
+	}
 }
\ No newline at end of file

From ddf3b94b0e9962b7bfb7d6e20d3961c5019f9e7d Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Sun, 21 Oct 2018 20:26:44 -0400
Subject: [PATCH 03/12] Add clarifying file comment.

---
 style-editor-frame.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/style-editor-frame.scss b/style-editor-frame.scss
index c3bb9c35..23e88342 100644
--- a/style-editor-frame.scss
+++ b/style-editor-frame.scss
@@ -1,5 +1,7 @@
 /*!
 Twenty Nineteen Editor Frame Styles
+
+NOTE: This file customizes items that are out of the normal scope of style-editor.css due to the auto-prefixing functionality associated with add_editor_style(). When that file is able to edit the post title and a container similar to .edit-post-layout, these styles should be migrated into style-editor.css. 
 */
 
 /** === Includes === */

From c223eb3ddbc77193f82c9f18eb15a86dc45fac82 Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Sun, 21 Oct 2018 21:31:40 -0400
Subject: [PATCH 04/12] Correct the math behind alignfull image size + position

Width: 125% + 88px of container margins +  28px of block margins

Position: 12.5% (10% of 125) - 46px of container  margins - 14px of block margins.
---
 style-editor-frame.css  | 8 +++++---
 style-editor-frame.scss | 4 ++--
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/style-editor-frame.css b/style-editor-frame.css
index 33231e8a..52f7f647 100644
--- a/style-editor-frame.css
+++ b/style-editor-frame.css
@@ -1,5 +1,7 @@
 /*!
 Twenty Nineteen Editor Frame Styles
+
+NOTE: This file customizes items that are out of the normal scope of style-editor.css due to the auto-prefixing functionality associated with add_editor_style(). When that file is able to edit the post title and a container similar to .edit-post-layout, these styles should be migrated into style-editor.css. 
 */
 /** === Includes === */
 /* If we add the border using a regular CSS border, it won't look good on non-retina devices,
@@ -7,7 +9,7 @@ Twenty Nineteen Editor Frame Styles
  * layers of box-shadow to add the border visually, which will render the border smoother. */
 /** === Title === */
 body.gutenberg-editor-page .gutenberg .editor-post-title__block:before {
-  background: #919191;
+  background: #767676;
   content: "\020";
   display: block;
   height: 2px;
@@ -44,8 +46,8 @@ body.gutenberg-editor-page .gutenberg .editor-post-title__block .editor-post-tit
     margin-right: 0;
   }
   body.gutenberg-editor-page .gutenberg .edit-post-layout .editor-block-list__block[data-align="full"] {
-    width: 136%;
+    width: calc( 125% + 88px + 28px);
     position: relative;
-    left: -18%;
+    left: calc( -12.5% - 46px - 14px);
   }
 }
diff --git a/style-editor-frame.scss b/style-editor-frame.scss
index 23e88342..9d9887a2 100644
--- a/style-editor-frame.scss
+++ b/style-editor-frame.scss
@@ -51,9 +51,9 @@ body.gutenberg-editor-page .gutenberg .edit-post-layout {
 		}
 
 		.editor-block-list__block[data-align="full"] {
-			width: 136%;
+			width: calc( 125% + 88px + 28px );
 			position: relative;
-			left: -18%;
+			left: calc( -12.5% - 46px - 14px );
 		}
 	}
 }
\ No newline at end of file

From 8709e23a3f5964b3170be722e36adb1c941d8e56 Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Sun, 21 Oct 2018 21:38:07 -0400
Subject: [PATCH 05/12] Make alignright blocks extend off to the right.

This way they align with the right edge of alignwide blocks, just like on the frontend.
---
 style-editor-frame.css  | 3 +++
 style-editor-frame.scss | 4 ++++
 2 files changed, 7 insertions(+)

diff --git a/style-editor-frame.css b/style-editor-frame.css
index 52f7f647..ecc91ebe 100644
--- a/style-editor-frame.css
+++ b/style-editor-frame.css
@@ -50,4 +50,7 @@ body.gutenberg-editor-page .gutenberg .editor-post-title__block .editor-post-tit
     position: relative;
     left: calc( -12.5% - 46px - 14px);
   }
+  body.gutenberg-editor-page .gutenberg .edit-post-layout .editor-block-list__block[data-align="right"] {
+    max-width: 125%;
+  }
 }
diff --git a/style-editor-frame.scss b/style-editor-frame.scss
index 9d9887a2..f215e6b2 100644
--- a/style-editor-frame.scss
+++ b/style-editor-frame.scss
@@ -55,5 +55,9 @@ body.gutenberg-editor-page .gutenberg .edit-post-layout {
 			position: relative;
 			left: calc( -12.5% - 46px - 14px );
 		}
+
+		.editor-block-list__block[data-align="right"] {
+			max-width: 125%;
+		}
 	}
 }
\ No newline at end of file

From da1810fd84b9cfb6543955f9257722a1d677c61d Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Sun, 21 Oct 2018 22:01:42 -0400
Subject: [PATCH 06/12] Use standard media query, adjust block appender
 margins.

---
 style-editor-frame.css  | 3 ++-
 style-editor-frame.scss | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/style-editor-frame.css b/style-editor-frame.css
index ecc91ebe..12701f1c 100644
--- a/style-editor-frame.css
+++ b/style-editor-frame.css
@@ -32,7 +32,7 @@ body.gutenberg-editor-page .gutenberg .editor-post-title__block .editor-post-tit
 }
 
 /** === Off-Center Content === */
-@media all and (min-width: 768px) {
+@media only screen and (min-width: 768px) {
   body.gutenberg-editor-page .gutenberg .edit-post-layout .editor-writing-flow {
     display: grid;
     grid-template-columns: 10% 80% 10%;
@@ -41,6 +41,7 @@ body.gutenberg-editor-page .gutenberg .editor-post-title__block .editor-post-tit
     grid-column-start: 2;
   }
   body.gutenberg-editor-page .gutenberg .edit-post-layout .editor-post-title__block,
+  body.gutenberg-editor-page .gutenberg .edit-post-layout .editor-default-block-appender,
   body.gutenberg-editor-page .gutenberg .edit-post-layout .editor-block-list__block {
     margin-left: 0;
     margin-right: 0;
diff --git a/style-editor-frame.scss b/style-editor-frame.scss
index f215e6b2..39d738b3 100644
--- a/style-editor-frame.scss
+++ b/style-editor-frame.scss
@@ -34,7 +34,7 @@ body.gutenberg-editor-page .gutenberg .editor-post-title__block {
 
 body.gutenberg-editor-page .gutenberg .edit-post-layout {
 
-	@media all and (min-width: $tablet_width ) {
+	@include media(tablet) {
 		.editor-writing-flow {
 			display: grid;
 			grid-template-columns: 10% 80% 10%;
@@ -45,6 +45,7 @@ body.gutenberg-editor-page .gutenberg .edit-post-layout {
 		}
 
 		.editor-post-title__block,
+		.editor-default-block-appender,
 		.editor-block-list__block {
 			margin-left: 0;
 			margin-right: 0;

From c8f673cec4f19ad88c7933439aa4b01bd590876e Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Sun, 21 Oct 2018 22:02:23 -0400
Subject: [PATCH 07/12] Fix issue where cover image text overflowed the
 container.

---
 style-editor.css  | 32 +++++++++-----------------------
 style-editor.scss | 23 +++++++----------------
 2 files changed, 16 insertions(+), 39 deletions(-)

diff --git a/style-editor.css b/style-editor.css
index 96fc4bbd..3b0bcaca 100644
--- a/style-editor.css
+++ b/style-editor.css
@@ -139,24 +139,6 @@ figcaption {
   font-size: 2.25em;
   font-weight: bold;
   line-height: 1.4;
-  width: calc(100vw - (2 * 1rem));
-  max-width: calc(100vw - (2 * 1rem));
-}
-
-@media only screen and (min-width: 768px) {
-  .wp-block-cover-image h2,
-  .wp-block-cover-image .wp-block-cover-image-text {
-    width: calc(8 * (100vw / 12));
-    max-width: calc(8 * (100vw / 12));
-  }
-}
-
-@media only screen and (min-width: 1168px) {
-  .wp-block-cover-image h2,
-  .wp-block-cover-image .wp-block-cover-image-text {
-    width: calc(6 * (100vw / 12));
-    max-width: calc(6 * (100vw / 12));
-  }
 }
 
 .wp-block-cover-image.has-left-content {
@@ -185,11 +167,15 @@ body[data-type="core/cover-image"][data-align="right"] .wp-block-cover-image-tex
   max-width: 305px;
 }
 
-body[data-type="core/cover-image"][data-align="wide"] h2,
-body[data-type="core/cover-image"][data-align="wide"] .wp-block-cover-image-text,
-body[data-type="core/cover-image"][data-align="full"] h2,
-body[data-type="core/cover-image"][data-align="full"] .wp-block-cover-image-text {
-  padding: 0;
+@media only screen and (min-width: 1168px) {
+  body[data-type="core/cover-image"][data-align="wide"] h2,
+  body[data-type="core/cover-image"][data-align="wide"] .wp-block-cover-image-text,
+  body[data-type="core/cover-image"][data-align="full"] h2,
+  body[data-type="core/cover-image"][data-align="full"] .wp-block-cover-image-text {
+    padding: 0;
+    width: calc(6 * (100vw / 12));
+    max-width: calc(6 * (100vw / 12));
+  }
 }
 
 /** === Gallery === */
diff --git a/style-editor.scss b/style-editor.scss
index 10d9a60f..65f7240b 100644
--- a/style-editor.scss
+++ b/style-editor.scss
@@ -132,19 +132,6 @@ figcaption {
 		font-size: $font__size-xl;
 		font-weight: bold;
 		line-height: 1.4;
-
-		width: calc(100vw - (2 * #{ $size__spacing-unit}));
-		max-width: calc(100vw - (2 * #{ $size__spacing-unit}));
-
-		@include media(tablet) {
-			width: calc(8 * (100vw / 12));
-			max-width: calc(8 * (100vw / 12));
-		}
-
-		@include media(desktop) {
-			width: calc(6 * (100vw / 12));
-			max-width: calc(6 * (100vw / 12));
-		}
 	}
 
 	&.has-left-content {
@@ -179,9 +166,13 @@ body[data-type="core/cover-image"][data-align="right"] {
 body[data-type="core/cover-image"][data-align="wide"],
 body[data-type="core/cover-image"][data-align="full"] {
 
-	h2,
-	.wp-block-cover-image-text {
-		padding: 0;
+	@include media(desktop) {
+		h2,
+		.wp-block-cover-image-text {
+			padding: 0;
+			width: calc(6 * (100vw / 12));
+			max-width: calc(6 * (100vw / 12));
+		}
 	}
 }
 

From 98c70ca409828d3c3b015c292ac70f5ebdb8d6ba Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Sun, 21 Oct 2018 22:11:35 -0400
Subject: [PATCH 08/12] Styling the default appender text

---
 style-editor-frame.css  | 6 ++++++
 style-editor-frame.scss | 7 +++++++
 2 files changed, 13 insertions(+)

diff --git a/style-editor-frame.css b/style-editor-frame.css
index 12701f1c..89df569d 100644
--- a/style-editor-frame.css
+++ b/style-editor-frame.css
@@ -31,6 +31,12 @@ body.gutenberg-editor-page .gutenberg .editor-post-title__block .editor-post-tit
   font-size: 2.8125em;
 }
 
+/** === Default Appender Text === */
+body.gutenberg-editor-page .gutenberg .editor-default-block-appender__content {
+  font-size: 22px;
+  font-family: "Hoefler Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+}
+
 /** === Off-Center Content === */
 @media only screen and (min-width: 768px) {
   body.gutenberg-editor-page .gutenberg .edit-post-layout .editor-writing-flow {
diff --git a/style-editor-frame.scss b/style-editor-frame.scss
index 39d738b3..f803d4e3 100644
--- a/style-editor-frame.scss
+++ b/style-editor-frame.scss
@@ -30,6 +30,13 @@ body.gutenberg-editor-page .gutenberg .editor-post-title__block {
 	}
 }
 
+/** === Default Appender === */
+
+body.gutenberg-editor-page .gutenberg .editor-default-block-appender__content {
+	font-size: $font__size_base;
+	font-family: $font__body;
+}
+
 /** === Off-Center Content === */
 
 body.gutenberg-editor-page .gutenberg .edit-post-layout {

From 5aa7b49262a6e596d10968943f81a22aeebe0249 Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Sun, 21 Oct 2018 22:12:28 -0400
Subject: [PATCH 09/12] Minor

Swapping order of font size/family to match the declarations above.
---
 style-editor-frame.css  | 4 ++--
 style-editor-frame.scss | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/style-editor-frame.css b/style-editor-frame.css
index 89df569d..5b0ed9f6 100644
--- a/style-editor-frame.css
+++ b/style-editor-frame.css
@@ -31,10 +31,10 @@ body.gutenberg-editor-page .gutenberg .editor-post-title__block .editor-post-tit
   font-size: 2.8125em;
 }
 
-/** === Default Appender Text === */
+/** === Default Appender === */
 body.gutenberg-editor-page .gutenberg .editor-default-block-appender__content {
-  font-size: 22px;
   font-family: "Hoefler Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+  font-size: 22px;
 }
 
 /** === Off-Center Content === */
diff --git a/style-editor-frame.scss b/style-editor-frame.scss
index f803d4e3..3564bfaa 100644
--- a/style-editor-frame.scss
+++ b/style-editor-frame.scss
@@ -33,8 +33,8 @@ body.gutenberg-editor-page .gutenberg .editor-post-title__block {
 /** === Default Appender === */
 
 body.gutenberg-editor-page .gutenberg .editor-default-block-appender__content {
-	font-size: $font__size_base;
 	font-family: $font__body;
+	font-size: $font__size_base;
 }
 
 /** === Off-Center Content === */

From 1f4ca1107090fc4ef4e0f5dd08088c6a285b3312 Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Sun, 21 Oct 2018 22:32:24 -0400
Subject: [PATCH 10/12] Add  style-editor-frame.css to package.json

---
 package.json | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index 4119ea6d..c74b3600 100644
--- a/package.json
+++ b/package.json
@@ -17,15 +17,15 @@
   },
   "rtlcssConfig": {
     "options": {
-        "autoRename": false,
-        "autoRenameStrict": false,
-        "blacklist":{},
-        "clean": true,
-        "greedy": false,
-        "processUrls": false,
-        "stringMap":[]
+      "autoRename": false,
+      "autoRenameStrict": false,
+      "blacklist": {},
+      "clean": true,
+      "greedy": false,
+      "processUrls": false,
+      "stringMap": []
     },
-    "plugins": [ ],
+    "plugins": [],
     "map": false
   },
   "browserslist": [
@@ -34,6 +34,7 @@
   "scripts": {
     "build:style": "node-sass style.scss style.css --output-style expanded && postcss -r style.css",
     "build:style-editor": "node-sass style-editor.scss style-editor.css --output-style expanded && postcss -r style-editor.css",
+    "build:style-editor-frame": "node-sass style-editor-frame.scss style-editor-frame.css --output-style expanded && postcss -r style-editor-frame.css",
     "build:rtl": "rtlcss style.css style-rtl.css",
     "build:print": "node-sass print.scss print.css --output-style expanded && postcss -r print.css",
     "build": "run-p \"build:*\"",

From c74c1b3e67032bb0c1dcb1a9d3e6245ad9d585a9 Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Mon, 22 Oct 2018 08:33:39 -0400
Subject: [PATCH 11/12] Fix linting error.

---
 functions.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/functions.php b/functions.php
index c369a996..31fa5138 100644
--- a/functions.php
+++ b/functions.php
@@ -153,7 +153,7 @@ function twentynineteen_scripts() {
  * Enqueue supplemental block editor styles
  */
 function twentynineteen_editor_frame_styles() {
-    wp_enqueue_style( 'twentynineteen-editor-frame-styles', get_theme_file_uri( '/style-editor-frame.css' ), false, '1.0', 'all' );
+	wp_enqueue_style( 'twentynineteen-editor-frame-styles', get_theme_file_uri( '/style-editor-frame.css' ), false, '1.0', 'all' );
 }
 
 add_action( 'enqueue_block_editor_assets', 'twentynineteen_editor_frame_styles' );

From 9acb00363f9b447d3c5951c5c2360040f1c1f43c Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Mon, 22 Oct 2018 08:58:59 -0400
Subject: [PATCH 12/12] Swapping out CSS Grid with plain old max-width and
 margins.

For simpler code and better compatibility with older browsers.
---
 style-editor-frame.css  | 7 ++-----
 style-editor-frame.scss | 8 ++------
 2 files changed, 4 insertions(+), 11 deletions(-)

diff --git a/style-editor-frame.css b/style-editor-frame.css
index 5b0ed9f6..197b8c2f 100644
--- a/style-editor-frame.css
+++ b/style-editor-frame.css
@@ -40,11 +40,8 @@ body.gutenberg-editor-page .gutenberg .editor-default-block-appender__content {
 /** === Off-Center Content === */
 @media only screen and (min-width: 768px) {
   body.gutenberg-editor-page .gutenberg .edit-post-layout .editor-writing-flow {
-    display: grid;
-    grid-template-columns: 10% 80% 10%;
-  }
-  body.gutenberg-editor-page .gutenberg .edit-post-layout .editor-writing-flow > div {
-    grid-column-start: 2;
+    max-width: 80%;
+    margin: 0 10%;
   }
   body.gutenberg-editor-page .gutenberg .edit-post-layout .editor-post-title__block,
   body.gutenberg-editor-page .gutenberg .edit-post-layout .editor-default-block-appender,
diff --git a/style-editor-frame.scss b/style-editor-frame.scss
index 3564bfaa..94e8962b 100644
--- a/style-editor-frame.scss
+++ b/style-editor-frame.scss
@@ -43,12 +43,8 @@ body.gutenberg-editor-page .gutenberg .edit-post-layout {
 
 	@include media(tablet) {
 		.editor-writing-flow {
-			display: grid;
-			grid-template-columns: 10% 80% 10%;
-
-			> div {
-				grid-column-start: 2;
-			}
+			max-width: 80%;
+			margin: 0 10%;
 		}
 
 		.editor-post-title__block,