Changeset 45264

Timestamp:

04/24/2019 06:36:58 PM (5 years ago)

Author:

SergeyBiryukov

Message:

Twenty Nineteen: Fix padding discrepancies in responsive styles for Column block.

Props kjellr, dianeco.
Fixes #46643, #46999.

Location:

trunk/src/wp-content/themes/twentynineteen

Files:

• sass/blocks/_blocks.scss (modified) (1 diff)
• style-rtl.css (modified) (1 diff)
• style.css (modified) (1 diff)

trunk/src/wp-content/themes/twentynineteen/sass/blocks/_blocks.scss

@@ -742 +742 @@
     .wp-block-columns {
 
-        &.alignfull {
-            padding-left: $size__spacing-unit;
-            padding-right: $size__spacing-unit;
-        }
-
-        @include media(mobile) {
+        .wp-block-column > * {
+
+            &:first-child {
+                margin-top: 0;
+            }
+
+            &:last-child {
+                margin-bottom: 0;
+            }
+        }
+
+        @include media(tablet) {
             flex-wrap: nowrap;
-        }
-
-        @include media(tablet) {
-            .wp-block-column > * {
-
-                &:first-child {
-                    margin-top: 0;
-                }
-
-                &:last-child {
-                    margin-bottom: 0;
-                }
-            }
-
-            &[class*='has-'] > * {
-                margin-right: $size__spacing-unit;
-
-                &:last-child {
-                    margin-right: 0;
-                }
-            }
-
-            &.alignfull,
-            &.alignfull .wp-block-column {
-                padding-left: calc(2 * #{$size__spacing-unit});
-                padding-right: calc(2 * #{$size__spacing-unit});
+
+            .wp-block-column:not(:first-child) {
+                margin-left: 32px;
             }
         }

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

@@ -6030 +6030 @@
 }
 
-.entry .entry-content .wp-block-columns.alignfull {
-  padding-right: 1rem;
-  padding-left: 1rem;
-}
-
-@media only screen and (min-width: 600px) {
+.entry .entry-content .wp-block-columns .wp-block-column > *:first-child {
+  margin-top: 0;
+}
+
+.entry .entry-content .wp-block-columns .wp-block-column > *:last-child {
+  margin-bottom: 0;
+}
+
+@media only screen and (min-width: 768px) {
   .entry .entry-content .wp-block-columns {
     flex-wrap: nowrap;
   }
-}
-
-@media only screen and (min-width: 768px) {
-  .entry .entry-content .wp-block-columns .wp-block-column > *:first-child {
-    margin-top: 0;
-  }
-  .entry .entry-content .wp-block-columns .wp-block-column > *:last-child {
-    margin-bottom: 0;
-  }
-  .entry .entry-content .wp-block-columns[class*='has-'] > * {
-    margin-left: 1rem;
-  }
-  .entry .entry-content .wp-block-columns[class*='has-'] > *:last-child {
-    margin-left: 0;
-  }
-  .entry .entry-content .wp-block-columns.alignfull,
-  .entry .entry-content .wp-block-columns.alignfull .wp-block-column {
-    padding-right: calc(2 * 1rem);
-    padding-left: calc(2 * 1rem);
+  .entry .entry-content .wp-block-columns .wp-block-column:not(:first-child) {
+    margin-right: 32px;
   }
 }

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

@@ -6042 +6042 @@
 }
 
-.entry .entry-content .wp-block-columns.alignfull {
-  padding-left: 1rem;
-  padding-right: 1rem;
-}
-
-@media only screen and (min-width: 600px) {
+.entry .entry-content .wp-block-columns .wp-block-column > *:first-child {
+  margin-top: 0;
+}
+
+.entry .entry-content .wp-block-columns .wp-block-column > *:last-child {
+  margin-bottom: 0;
+}
+
+@media only screen and (min-width: 768px) {
   .entry .entry-content .wp-block-columns {
     flex-wrap: nowrap;
   }
-}
-
-@media only screen and (min-width: 768px) {
-  .entry .entry-content .wp-block-columns .wp-block-column > *:first-child {
-    margin-top: 0;
-  }
-  .entry .entry-content .wp-block-columns .wp-block-column > *:last-child {
-    margin-bottom: 0;
-  }
-  .entry .entry-content .wp-block-columns[class*='has-'] > * {
-    margin-right: 1rem;
-  }
-  .entry .entry-content .wp-block-columns[class*='has-'] > *:last-child {
-    margin-right: 0;
-  }
-  .entry .entry-content .wp-block-columns.alignfull,
-  .entry .entry-content .wp-block-columns.alignfull .wp-block-column {
-    padding-left: calc(2 * 1rem);
-    padding-right: calc(2 * 1rem);
+  .entry .entry-content .wp-block-columns .wp-block-column:not(:first-child) {
+    margin-left: 32px;
   }
 }