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

Timestamp:

07/07/2019 08:10:55 PM (5 years ago)

Author:

laurelfulford

Message:

Twenty Nineteen: Add styles for the new Group block.

Add styles for the new Group block to the theme, to make sure nested blocks display correctly when using the wide and full alignments.

Props @kjellr, @dianeco.
Fixes #46750.

File:

• trunk/src/wp-content/themes/twentynineteen/sass/blocks/_blocks.scss (modified) (6 diffs)

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

@@ -1 +1 @@
 /* !Block styles */
 
+
+// Default block margin and alignment rules.
+// These are replicated inside of the Group block
+// so that child blocks in there appear the same way.
 .entry .entry-content > *,
-.entry .entry-summary > * {
+.entry .entry-summary > *,
+.entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *,
+.entry .entry-content > .wp-block-group > .wp-block-group__inner-container > * {
     margin: 32px 0;
     max-width: 100%;
@@ -10 +16 @@
     @include media(tablet) {
         margin: 32px 0;
-    }
-
-    > *:first-child {
-        margin-top: 0;
-    }
-
-    > *:last-child {
-        margin-bottom: 0;
     }
 
@@ -89 +87 @@
             margin-right: 0;
         }
+    }
+}
+
+.entry .entry-content > *,
+.entry .entry-summary > * {
+
+    > *:first-child {
+        margin-top: 0;
+    }
+
+    > *:last-child {
+        margin-bottom: 0;
     }
 }
@@ -511 +521 @@
         img {
             display: block;
+        }
+
+        // If an image does not have a left/center/right alignment, 
+        // it's a direct child of .wp-block-img.  If it has no other 
+        // alignment added, we want to make sure the image does not 
+        // extend beyond the width of the text column.
+        &:not(.alignwide):not(.alignfull) > img {
+            @include postContentMaxWidth();
         }
 
@@ -753 +771 @@
         }
 
+        // Ensure images do not expand beyond the column.
+        .wp-block-image > img:not(.alignwide):not(.alignfull) {
+
+            @include media(tablet) {
+                max-width: 100%;
+            }
+
+            @include media(desktop) {
+                max-width: 100%;
+            }
+        }
+
         @include media(tablet) {
             flex-wrap: nowrap;
@@ -760 +790 @@
             }
         }
+    }
+
+    //! Group
+    .wp-block-group {
+
+        // When the Group block is standard/wide, we need to prevent full-aligned 
+        // child blocks from expanding out of their container.
+        &:not(.alignfull) > .wp-block-group__inner-container > .alignfull,
+        &:not(.alignfull) > .wp-block-group__inner-container > .wp-block-image > img {
+
+            @include media(tablet) {
+                left: 0;
+                max-width: 100%;
+            }
+        }
+
+        // The full-width Group block's inner container should mimic .entry-content styles.
+        &.alignfull > .wp-block-group__inner-container {
+            max-width: calc(100% - (2 * #{ $size__spacing-unit }));
+            margin: 0 $size__spacing-unit;
+
+            @include media(tablet) {
+                max-width: 80%;
+                margin: 0 10%;
+                padding: 0 60px;
+            }
+        }
+
+        // Group block with a colored background.
+        &.has-background {
+            padding: $size__spacing-unit;
+            margin-top: 0;
+            margin-bottom: 0;
+
+            // Remove the top and bottom margins of inner blocks.
+            .wp-block-group__inner-container {
+
+                > *:first-child {
+                    margin-top: 0;
+                }
+
+                > *:last-child {
+                    margin-bottom: 0;
+                }
+            }
+
+            // If the Group block is full-width, it does not need this extra padding. 
+            &.alignfull {
+                padding-left: 0;
+                padding-right: 0;
+
+                @include media(tablet) {
+                    padding-top: $size__spacing-unit;
+                    padding-bottom: $size__spacing-unit;
+                }
+            }
+
+            // Full-aligned child blocks should take up the maximum width available in their container.
+            &:not(.alignfull) > .wp-block-group__inner-container > .alignfull {
+                width: 100%;
+                max-width: 100%;
+                
+                @include media(tablet) {
+                    width: calc( 100% + #{$size__spacing-unit * 2} );
+                    max-width: calc( 100% + #{$size__spacing-unit * 2} );
+                    margin-left: -#{$size__spacing-unit};
+                }
+            }
+        }
+        
     }