Changeset 51209

Timestamp:

06/22/2021 10:14:08 PM (4 years ago)

Author:

ryelle

Message:

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.

Location:

trunk/src/wp-content/themes/twentynineteen

Files:

• style-editor.css (modified) (3 diffs)
• style-editor.scss (modified) (3 diffs)

trunk/src/wp-content/themes/twentynineteen/style-editor.css

@@ -584 +584 @@
 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);
 }
 
@@ -621 +621 @@
   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;
   }
 }
@@ -1561 +1569 @@
   }
 }
+
+.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%;
+}

trunk/src/wp-content/themes/twentynineteen/style-editor.scss

@@ -14 +14 @@
     .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);
     }
 
@@ -55 +55 @@
         .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;
         }
     }
@@ -972 +981 @@
         }
     }
+
+.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%;
+    }
+}