Update editor margins to match the front end on middle-breakpoints

A followup to #502. Closes #236. Adjusts editor styles between `600px` and `768px` so that the margins are more closely aligned to the front end. Note that this doesn't make them 100% exact: the editor has about 10px more space on either side. This is because the editor requires more space for the hover/editor controls. We _could_ match these up exactly by adjusting the front end, but I tend to prefer tighter margins in general and I think this is close enough.
WordPress · Nov 8, 2018 · 3f11263 · 3f11263
1 parent da4955b
commit 3f11263
Show file tree

Hide file tree

Showing 7 changed files with 74 additions and 36 deletions.
diff --git a/sass/blocks/_blocks.scss b/sass/blocks/_blocks.scss
@@ -110,7 +110,7 @@
 		&.alignleft audio,
 		&.alignright audio {
 
-			max-width: (0.5 * $mobile_width);
+			max-width: (0.33 * $mobile_width);
 
 			@include media(tablet) {
 				max-width: (0.5 * $tablet_width);

diff --git a/sass/mixins/_utilities.scss b/sass/mixins/_utilities.scss
@@ -1,10 +1,17 @@
 
 @mixin media( $res ) {
+	@if mobile == $res {
+		@media only screen and (min-width: $mobile_width) {
+			@content;
+		}
+	}
+
 	@if tablet == $res {
 		@media only screen and (min-width: $tablet_width) {
 			@content;
 		}
 	}
+
 	@if desktop == $res {
 		@media only screen and (min-width: $desktop_width) {
 			@content;

diff --git a/sass/variables-site/_structure.scss b/sass/variables-site/_structure.scss
@@ -9,7 +9,7 @@ $size__site-desktop-content: calc(6 * (100vw / 12) - 28px);
 
 // Responsive widths.
 
-$mobile_width: 380px;
+$mobile_width: 600px;
 $tablet_width: 768px;
 $desktop_width: 1168px;
 $wide_width: 1379px;

diff --git a/style-editor.css b/style-editor.css
@@ -8,16 +8,30 @@ Twenty Nineteen Editor Styles
 /* Fallback for non-latin fonts */
 /* Calculates maximum width for post content */
 /** === Editor Frame === */
-@media screen and (min-width: 600px) {
+body .wp-block[data-align="full"] {
+  width: 100%;
+}
+
+@media only screen and (min-width: 600px) {
+  body {
+    overflow-x: hidden;
+  }
+  body .editor-block-list__layout,
+  body .editor-post-title {
+    padding-left: 0;
+    padding-right: 0;
+  }
   body .wp-block[data-align="full"] {
-    width: calc( 100% + 90px);
-    max-width: calc( 100% + 90px);
+    position: relative;
+    left: 45px;
   }
 }
 
 @media only screen and (min-width: 768px) {
-  body {
-    overflow-x: hidden;
+  body .editor-block-list__layout,
+  body .editor-post-title {
+    padding-left: 46px;
+    padding-right: 46px;
   }
   body .editor-writing-flow {
     max-width: 80%;

diff --git a/style-editor.scss b/style-editor.scss
@@ -12,16 +12,32 @@ Twenty Nineteen Editor Styles
 
 body {
 
-	// Non-standard media query necessary to override a Gutenberg breakpoint style. 
-	@media screen and (min-width: 600px) {
+	.wp-block[data-align="full"] {
+		width: 100%;
+	}
+
+	@include media(mobile) {
+		overflow-x: hidden;
+
+		.editor-block-list__layout,
+		.editor-post-title {
+			padding-left: 0;
+			padding-right: 0;
+		}
+
 		.wp-block[data-align="full"] {
-			width: calc( 100% + 90px );
-			max-width: calc( 100% + 90px );
+			position: relative;
+			left: 45px;
 		}
 	}
 
 	@include media(tablet) {
-		overflow-x: hidden;
+
+		.editor-block-list__layout,
+		.editor-post-title {
+			padding-left: 46px;
+			padding-right: 46px;
+		}
 
 		.editor-writing-flow {
 			max-width: 80%;

diff --git a/style-rtl.css b/style-rtl.css
@@ -1130,14 +1130,6 @@ body.page .main-navigation {
   margin-left: calc( .25 * 1rem);
 }
 
-.main-navigation .main-menu .menu-item-has-children[focus-within] > .sub-menu {
-  display: block;
-  right: 0;
-  margin-top: 0;
-  opacity: 1;
-  width: calc( 100vw - 2rem);
-}
-
 .main-navigation .main-menu .menu-item-has-children:focus-within > .sub-menu {
   display: block;
   right: 0;
@@ -1146,26 +1138,13 @@ body.page .main-navigation {
   width: calc( 100vw - 2rem);
 }
 
-.main-navigation .main-menu .menu-item-has-children[focus-within] > .sub-menu .sub-menu {
-  margin-top: inherit;
-  position: relative;
-  padding-right: 1rem;
-}
-
 .main-navigation .main-menu .menu-item-has-children:focus-within > .sub-menu .sub-menu {
   margin-top: inherit;
   position: relative;
   padding-right: 1rem;
 }
 
 @media only screen and (min-width: 768px) {
-  .main-navigation .main-menu .menu-item-has-children[focus-within] > .sub-menu .sub-menu {
-    padding-right: 0;
-    position: absolute;
-    right: 100%;
-    width: max-content;
-    top: 0;
-  }
   .main-navigation .main-menu .menu-item-has-children:focus-within > .sub-menu .sub-menu {
     padding-right: 0;
     position: absolute;
@@ -3168,7 +3147,8 @@ body.page .main-navigation {
   .entry .entry-content > *.alignright,
   .entry .entry-summary > *.alignright {
     max-width: calc(4 * (100vw / 12));
-    margin-right: 0;
+    margin-left: calc(2 * 1rem);
+    margin-left: 0;
   }
 }
 
@@ -3210,7 +3190,7 @@ body.page .main-navigation {
 
 .entry .entry-content .wp-block-audio.alignleft audio,
 .entry .entry-content .wp-block-audio.alignright audio {
-  max-width: 190px;
+  max-width: 198px;
 }
 
 @media only screen and (min-width: 768px) {

diff --git a/style.css b/style.css
@@ -1138,6 +1138,14 @@ body.page .main-navigation {
   width: calc( 100vw - 2rem);
 }
 
+.main-navigation .main-menu .menu-item-has-children[focus-within] > .sub-menu {
+  display: block;
+  left: 0;
+  margin-top: 0;
+  opacity: 1;
+  width: calc( 100vw - 2rem);
+}
+
 .main-navigation .main-menu .menu-item-has-children:focus-within > .sub-menu {
   display: block;
   left: 0;
@@ -1152,13 +1160,26 @@ body.page .main-navigation {
   padding-left: 1rem;
 }
 
+.main-navigation .main-menu .menu-item-has-children[focus-within] > .sub-menu .sub-menu {
+  margin-top: inherit;
+  position: relative;
+  padding-left: 1rem;
+}
+
 .main-navigation .main-menu .menu-item-has-children:focus-within > .sub-menu .sub-menu {
   margin-top: inherit;
   position: relative;
   padding-left: 1rem;
 }
 
 @media only screen and (min-width: 768px) {
+  .main-navigation .main-menu .menu-item-has-children[focus-within] > .sub-menu .sub-menu {
+    padding-left: 0;
+    position: absolute;
+    left: 100%;
+    width: max-content;
+    top: 0;
+  }
   .main-navigation .main-menu .menu-item-has-children[focus-within] > .sub-menu .sub-menu {
     padding-left: 0;
     position: absolute;
@@ -3219,7 +3240,7 @@ body.page .main-navigation {
 
 .entry .entry-content .wp-block-audio.alignleft audio,
 .entry .entry-content .wp-block-audio.alignright audio {
-  max-width: 190px;
+  max-width: 198px;
 }
 
 @media only screen and (min-width: 768px) {