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

Timestamp:

02/20/2020 04:38:38 PM (6 years ago)

Author:

ianbelanger

Message:

Bundled Themes: Twenty Nineteen Update margins in editor styles to address upcoming block editor margin changes.

Fixes the margins in the block editor to address recent changes in block margins.

Props Joen, SergeyBiryukov, kjellr, jffng, allancole.
Fixes #48526.

File:

• trunk/src/wp-content/themes/twentynineteen/style-editor.scss (modified) (14 diffs)

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

@@ -13 +13 @@
 
     .wp-block[data-align="full"] {
-        width: 100%;
+        width: calc(100% + 28px);
+        max-width: calc(100% + 28px);
     }
 
@@ -19 +20 @@
 
         .wp-block[data-align="full"] {
-            width: calc( 100% + 90px );
-            max-width: calc( 100% + 90px );
+            width: calc( 100% + 116px );
+            max-width: calc( 100% + 115px );
         }
     }
@@ -31 +32 @@
         }
 
-        .editor-post-title__block,
         .editor-default-block-appender,
         .editor-block-list__block {
@@ -42 +42 @@
         }
 
-        .wp-block[data-align="full"] {
-            position: relative;
-            left: calc( -12.5% - 14px );
-            width: calc( 125% + 116px );
-            max-width: calc( 125% + 115px ); // Subtract 1px here to avoid the rounding errors that happen due to the usage of percentages.
-        }
-
         .wp-block[data-align="right"] {
             max-width: 125%;
@@ -58 +51 @@
 
 .wp-block {
-    width: calc(100vw - (2 * #{$size__spacing-unit}));
     max-width: 100%;
 
@@ -205 +197 @@
         margin-top: 0;
         margin-bottom: 0;
-        margin-left: 1em;
+        margin-left: 1rem;
         position: relative;
         top: 0.5em;
+
+        @include media(mobile) {
+            margin-left: 0;
+        }
     }
 
@@ -219 +215 @@
 /** === Default Appender === */
 
-.editor-default-block-appender .editor-default-block-appender__content {
+.block-editor-default-block-appender textarea.block-editor-default-block-appender__content {
     @include font-family( $font__body );
     font-size: $font__size_base;
@@ -781 +777 @@
 
     // Group block base styles
-    > .editor-block-list__block-edit > div > .wp-block-group {
+    > .wp-block-group {
 
         // Child: Full alignment
-        > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] {
-            left: 0;
+        > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block[data-align="full"] {
+            margin-left: 0;
+            margin-right: 0;
         }
     }
 
     // Group block with background color
-    > .editor-block-list__block-edit > div > .wp-block-group.has-background {
+    > .wp-block-group.has-background {
         padding: $group-block-background__padding;
 
         // Child: Full alignment
-        > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] {
+        > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block[data-align="full"] {
             margin-left: -$group-block-background__padding;
             width: calc(100% + #{$group-block-background__padding * 2});
@@ -802 +799 @@
 
     // Wide and full alignments
-    &[data-align="wide"] {
+    &[data-align="wide"] > .is-block-content {
 
         // Group block base styles.
-        > .editor-block-list__block-edit > div > .wp-block-group {
+        > .wp-block-group {
 
             // Child blocks: Default alignments
-            > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block:not([data-align="wide"]):not([data-align="full"]) {
+            > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block:not([data-align="wide"]):not([data-align="full"]) {
                 @include media(tablet) {
                     width: calc(8 * (100vw / 12));
@@ -817 +814 @@
                 }
             }
+
+            // Child blocks: Full alignment
+            > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block[data-align="full"] {
+                padding-left: 0;
+                padding-right: 0;
+            }
         }
 
         // Group block with background color
-        > .editor-block-list__block-edit > div > .wp-block-group.has-background {
+        > .wp-block-group.has-background {
             
             // Child blocks: Default alignments
-            > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block:not([data-align="wide"]):not([data-align="full"]) {
+            > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block:not([data-align="wide"]):not([data-align="full"]) {
                 @include media(tablet) {
                     width: calc(8 * (100vw / 12) - #{$group-block-background__padding * 2});
@@ -838 +841 @@
     &[data-align="full"] {
 
-        // Max-width needs to be a pixel narrower than usual to prevent horizontal scrolling.
-        @include media(mobile) {
-            max-width: calc(100% + 89px);
-        }
-        @include media(tablet) {
-            max-width: calc(125% + 114px);
-        }
-
         // Group block base styles
-        > .editor-block-list__block-edit > div > .wp-block-group {
+        > .is-block-content > .wp-block-group {
 
             // Margins & padding are added to this container to mimic 
@@ -853 +848 @@
             // container. This way, child items sync up with the placement 
             // and size of other top-level blocks. 
-            > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout {
+            > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout {
 
                 @include media(mobile) {
@@ -920 +915 @@
 
         // Group block with background color
-        > .editor-block-list__block-edit > div > .wp-block-group.has-background {
+        > .is-block-content > .wp-block-group.has-background {
 
             // When the Group block is full width, we can remove the left/right padding
@@ -932 +927 @@
 
             // Child blocks: Full alignment
-            > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] {
+            > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block[data-align="full"] {
                 margin-left: 0;
                 width: 100%;