Ticket #46750: 46750.2.patch

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%;
 
@@ -11 +17 @@
                 margin: 32px 0;
         }
 
-        > *:first-child {
-                margin-top: 0;
-        }
-
-        > *:last-child {
-                margin-bottom: 0;
-        }
-
         &.alignwide {
                 margin-left: auto;
                 margin-right: auto;
@@ -91 +89 @@
         }
 }
 
+.entry .entry-content > *,
+.entry .entry-summary > * {
+
+        > *:first-child {
+                margin-top: 0;
+        }
+
+        > *:last-child {
+                margin-bottom: 0;
+        }
+}
+
 /*
  * Unset nested content selector styles
  * - Prevents layout styles from cascading too deeply
@@ -512 +522 @@
                         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();
+                }
+
                 .aligncenter {
 
                         @include postContentMaxWidth();
@@ -752 +770 @@
                         }
                 }
 
+                // 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;
 
@@ -761 +791 @@
                 }
         }
 
+        //! 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;
+
+                        // 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};
+                                }
+                        }
+                }
+                
+        }
+
         //! Latest Comments
         .wp-block-latest-comments {
 

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

@@ -1293 +1293 @@
   line-height: 1.6;
   color: #767676;
 }
+
+/** === Group Block === */
+.wp-block[data-type="core/group"] > .editor-block-list__block-edit > div > .wp-block-group > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] {
+  left: 0;
+}
+
+.wp-block[data-type="core/group"] > .editor-block-list__block-edit > div > .wp-block-group.has-background {
+  padding: 22px;
+}
+
+.wp-block[data-type="core/group"] > .editor-block-list__block-edit > div > .wp-block-group.has-background > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] {
+  margin-left: -22px;
+  width: calc(100% + 44px);
+  max-width: calc(100% + 44px);
+}
+
+@media only screen and (min-width: 768px) {
+  .wp-block[data-type="core/group"][data-align="wide"] > .editor-block-list__block-edit > div > .wp-block-group > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block:not([data-align="wide"]):not([data-align="full"]) {
+    width: calc(8 * (100vw / 12));
+  }
+}
+
+@media only screen and (min-width: 1168px) {
+  .wp-block[data-type="core/group"][data-align="wide"] > .editor-block-list__block-edit > div > .wp-block-group > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block:not([data-align="wide"]):not([data-align="full"]) {
+    width: calc(6 * (100vw / 12 ));
+  }
+}
+
+@media only screen and (min-width: 768px) {
+  .wp-block[data-type="core/group"][data-align="wide"] > .editor-block-list__block-edit > div > .wp-block-group.has-background > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block:not([data-align="wide"]):not([data-align="full"]) {
+    width: calc(8 * (100vw / 12) - 44px);
+  }
+}
+
+@media only screen and (min-width: 1168px) {
+  .wp-block[data-type="core/group"][data-align="wide"] > .editor-block-list__block-edit > div > .wp-block-group.has-background > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block:not([data-align="wide"]):not([data-align="full"]) {
+    width: calc(6 * (100vw / 12 ) - 44px);
+  }
+}
+
+@media only screen and (min-width: 600px) {
+  .wp-block[data-type="core/group"][data-align="full"] {
+    max-width: calc(100% + 89px);
+  }
+}
+
+@media only screen and (min-width: 768px) {
+  .wp-block[data-type="core/group"][data-align="full"] {
+    max-width: calc(125% + 114px);
+  }
+}
+
+@media only screen and (min-width: 600px) {
+  .wp-block[data-type="core/group"][data-align="full"] > .editor-block-list__block-edit > div > .wp-block-group > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout {
+    padding-left: 46px;
+    padding-right: 46px;
+  }
+}
+
+@media only screen and (min-width: 768px) {
+  .wp-block[data-type="core/group"][data-align="full"] > .editor-block-list__block-edit > div > .wp-block-group > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout {
+    width: 80%;
+    margin-left: 10%;
+    margin-right: 10%;
+    padding-left: 48px;
+    padding-right: 48px;
+  }
+}
+
+.wp-block[data-type="core/group"][data-align="full"] > .editor-block-list__block-edit > div > .wp-block-group > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block:not([data-align="full"]) {
+  max-width: calc(100vw - (2 * 1rem));
+}
+
+@media only screen and (min-width: 768px) {
+  .wp-block[data-type="core/group"][data-align="full"] > .editor-block-list__block-edit > div > .wp-block-group > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block:not([data-align="full"]) {
+    max-width: calc(8 * (100vw / 12));
+  }
+}
+
+@media only screen and (min-width: 1168px) {
+  .wp-block[data-type="core/group"][data-align="full"] > .editor-block-list__block-edit > div > .wp-block-group > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block:not([data-align="full"]) {
+    max-width: calc(6 * (100vw / 12));
+  }
+}
+
+@media only screen and (min-width: 768px) {
+  .wp-block[data-type="core/group"][data-align="full"] > .editor-block-list__block-edit > div > .wp-block-group > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="right"] {
+    max-width: 125%;
+  }
+}
+
+@media only screen and (min-width: 768px) {
+  .wp-block[data-type="core/group"][data-align="full"] > .editor-block-list__block-edit > div > .wp-block-group > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="wide"] {
+    width: calc(100% + 4px);
+    max-width: calc(100% + 4px);
+  }
+}
+
+.wp-block[data-type="core/group"][data-align="full"] > .editor-block-list__block-edit > div > .wp-block-group > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align=full] {
+  max-width: calc(100vw + (2 * 1rem));
+}
+
+@media only screen and (min-width: 600px) {
+  .wp-block[data-type="core/group"][data-align="full"] > .editor-block-list__block-edit > div > .wp-block-group > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align=full] {
+    width: calc(100% + 92px);
+    left: -46px;
+  }
+}
+
+@media only screen and (min-width: 768px) {
+  .wp-block[data-type="core/group"][data-align="full"] > .editor-block-list__block-edit > div > .wp-block-group > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align=full] {
+    left: calc(-12.5% - 58px);
+    width: calc(125% + 120px);
+    max-width: calc(125% + 119px);
+  }
+}
+
+.wp-block[data-type="core/group"][data-align="full"] > .editor-block-list__block-edit > div > .wp-block-group.has-background {
+  padding: 22px 0;
+}
+
+@media only screen and (min-width: 600px) {
+  .wp-block[data-type="core/group"][data-align="full"] > .editor-block-list__block-edit > div > .wp-block-group.has-background {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+
+.wp-block[data-type="core/group"][data-align="full"] > .editor-block-list__block-edit > div > .wp-block-group.has-background > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] {
+  margin-left: 0;
+  width: 100%;
+}
+
+@media only screen and (min-width: 600px) {
+  .wp-block[data-type="core/group"][data-align="full"] > .editor-block-list__block-edit > div > .wp-block-group.has-background > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] {
+    width: calc(100% + 92px);
+  }
+}
+
+@media only screen and (min-width: 768px) {
+  .wp-block[data-type="core/group"][data-align="full"] > .editor-block-list__block-edit > div > .wp-block-group.has-background > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] {
+    width: calc(125% + 120px);
+  }
+}

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

@@ -739 +739 @@
                 }
         }
 }
+
+/** === Group Block === */
+
+// This matches the 22px value for 1rem that used on the front end.
+// It must be specified in pixels for the editor, since the root font 
+// size is different here. 
+$group-block-background__padding: $font__size_base;
+
+.wp-block[data-type="core/group"] {
+
+        // Group block base styles
+        > .editor-block-list__block-edit > div > .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;
+                }
+        }
+
+        // Group block with background color
+        > .editor-block-list__block-edit > div > .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"] {
+                        margin-left: -$group-block-background__padding;
+                        width: calc(100% + #{$group-block-background__padding * 2});
+                        max-width: calc(100% + #{$group-block-background__padding * 2});
+                }
+        }
+
+        // Wide and full alignments
+        &[data-align="wide"] {
+
+                // Group block base styles.
+                > .editor-block-list__block-edit > div > .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"]) {
+                                @include media(tablet) {
+                                        width: calc(8 * (100vw / 12));
+                                }
+
+                                @include media(desktop) {
+                                        width: calc(6 * (100vw / 12 ));
+                                }
+                        }
+                }
+
+                // Group block with background color
+                > .editor-block-list__block-edit > div > .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"]) {
+                                @include media(tablet) {
+                                        width: calc(8 * (100vw / 12) - #{$group-block-background__padding * 2});
+                                }
+
+                                @include media(desktop) {
+                                        width: calc(6 * (100vw / 12 ) - #{$group-block-background__padding * 2});
+                                }
+                        }
+                }
+        }
+
+        // Full alignment
+        &[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 {
+
+                        // Margins & padding are added to this container to mimic 
+                        // the style + spacing of the .editor-writing-flow global 
+                        // 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 {
+
+                                @include media(mobile) {
+                                        padding-left: 46px;
+                                        padding-right: 46px;
+                                }
+
+                                // 2px of extra padding are added to each side here
+                                // To better match up with the spacing of the whole 
+                                // document. 
+                                @include media(tablet) {
+                                        width: 80%;
+                                        margin-left: 10%;
+                                        margin-right: 10%;
+                                        padding-left: 48px;
+                                        padding-right: 48px; 
+                                }
+
+                                // Child blocks: All alignments except full
+                                 > .wp-block:not([data-align="full"]) {
+                                        max-width: calc(100vw - (2 * 1rem));
+
+                                        @include media(tablet) {
+                                                max-width: calc(8 * (100vw / 12));
+                                        }
+
+                                        @include media(desktop) {
+                                                max-width: calc(6 * (100vw / 12));
+                                        }
+                                }
+
+                                // Child blocks: Right alignments
+                                > .wp-block[data-align="right"] {
+
+                                        @include media(tablet) {
+                                                max-width: 125%;
+                                        }
+                                }
+
+                                // Child blocks: Wide alignments
+                                > .wp-block[data-align="wide"] {
+
+                                        @include media(tablet) {
+                                                width: calc(100% + 4px);
+                                                max-width: calc(100% + 4px);
+                                        }
+                                }
+
+                                // Child blocks: Full alignments
+                                > .wp-block[data-align=full] {
+                                        max-width: calc(100vw + (2 * 1rem));
+
+                                        @include media(mobile) {
+                                                width: calc(100% + 92px);
+                                                left: -46px;
+                                        }
+
+                                        @include media(tablet) {
+                                                left: calc(-12.5% - 58px);
+                                                width: calc(125% + 120px);
+                                                max-width: calc(125% + 119px);
+                                        }
+                                }
+                        }
+                }
+
+                // Group block with background color
+                > .editor-block-list__block-edit > div > .wp-block-group.has-background {
+
+                        // When the Group block is full width, we can remove the left/right padding
+                        // and let this inherit the 
+                        padding: $group-block-background__padding 0;
+
+                        @include media(mobile) {
+                                padding-left: 0;
+                                padding-right: 0;
+                        }
+
+                        // Child blocks: Full alignment
+                        > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] {
+                                margin-left: 0;
+                                width: 100%;
+
+                                @include media(mobile) {
+                                        width: calc(100% + 92px);
+                                }
+
+                                @include media(tablet) {
+                                        width: calc(125% + 120px);
+                                }
+                        }
+                }
+        }
+}

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

@@ -5186 +5186 @@
 /* Blocks */
 /* !Block styles */
 .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%;
 }
@@ -5193 +5195 @@
 
 @media only screen and (min-width: 768px) {
   .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 > * {
     max-width: calc(8 * (100vw / 12) - 28px);
   }
 }
@@ -5200 +5204 @@
 
 @media only screen and (min-width: 1168px) {
   .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 > * {
     max-width: calc(6 * (100vw / 12) - 28px);
   }
 }
@@ -5207 +5213 @@
 
 @media only screen and (min-width: 768px) {
   .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;
   }
 }
 
-.entry .entry-content > * > *:first-child,
-.entry .entry-summary > * > *:first-child {
-  margin-top: 0;
-}
-
-.entry .entry-content > * > *:last-child,
-.entry .entry-summary > * > *:last-child {
-  margin-bottom: 0;
-}
-
 .entry .entry-content > *.alignwide,
-.entry .entry-summary > *.alignwide {
+.entry .entry-summary > *.alignwide,
+.entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.alignwide,
+.entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.alignwide {
   margin-right: auto;
   margin-left: auto;
   clear: both;
@@ -5231 +5231 @@
 
 @media only screen and (min-width: 768px) {
   .entry .entry-content > *.alignwide,
-  .entry .entry-summary > *.alignwide {
+  .entry .entry-summary > *.alignwide,
+  .entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.alignwide,
+  .entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.alignwide {
     width: 100%;
     max-width: 100%;
   }
@@ -5238 +5240 @@
 }
 
 .entry .entry-content > *.alignfull,
-.entry .entry-summary > *.alignfull {
+.entry .entry-summary > *.alignfull,
+.entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.alignfull,
+.entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.alignfull {
   position: relative;
   right: -1rem;
   width: calc( 100% + (2 * 1rem));
@@ -5248 +5252 @@
 
 @media only screen and (min-width: 768px) {
   .entry .entry-content > *.alignfull,
-  .entry .entry-summary > *.alignfull {
+  .entry .entry-summary > *.alignfull,
+  .entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.alignfull,
+  .entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.alignfull {
     margin-top: calc(2 * 1rem);
     margin-bottom: calc(2 * 1rem);
     right: calc( -12.5% - 75px);
@@ -5258 +5264 @@
 }
 
 .entry .entry-content > *.alignleft,
-.entry .entry-summary > *.alignleft {
+.entry .entry-summary > *.alignleft,
+.entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.alignleft,
+.entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.alignleft {
   float: left;
   max-width: calc(5 * (100vw / 12));
   margin-top: 0;
@@ -5268 +5276 @@
 
 @media only screen and (min-width: 768px) {
   .entry .entry-content > *.alignleft,
-  .entry .entry-summary > *.alignleft {
+  .entry .entry-summary > *.alignleft,
+  .entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.alignleft,
+  .entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.alignleft {
     max-width: calc(4 * (100vw / 12));
     margin-right: calc(2 * 1rem);
   }
@@ -5275 +5285 @@
 }
 
 .entry .entry-content > *.alignright,
-.entry .entry-summary > *.alignright {
+.entry .entry-summary > *.alignright,
+.entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.alignright,
+.entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.alignright {
   float: right;
   max-width: calc(5 * (100vw / 12));
   margin-top: 0;
@@ -5285 +5297 @@
 
 @media only screen and (min-width: 768px) {
   .entry .entry-content > *.alignright,
-  .entry .entry-summary > *.alignright {
+  .entry .entry-summary > *.alignright,
+  .entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.alignright,
+  .entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.alignright {
     max-width: calc(4 * (100vw / 12));
     margin-left: 0;
     margin-left: calc(2 * 1rem);
@@ -5293 +5307 @@
 }
 
 .entry .entry-content > *.aligncenter,
-.entry .entry-summary > *.aligncenter {
+.entry .entry-summary > *.aligncenter,
+.entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.aligncenter,
+.entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.aligncenter {
   margin-right: auto;
   margin-left: auto;
 }
@@ -5300 +5316 @@
 
 @media only screen and (min-width: 768px) {
   .entry .entry-content > *.aligncenter,
-  .entry .entry-summary > *.aligncenter {
+  .entry .entry-summary > *.aligncenter,
+  .entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.aligncenter,
+  .entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.aligncenter {
     max-width: calc(8 * (100vw / 12) - 28px);
   }
 }
@@ -5307 +5325 @@
 
 @media only screen and (min-width: 1168px) {
   .entry .entry-content > *.aligncenter,
-  .entry .entry-summary > *.aligncenter {
+  .entry .entry-summary > *.aligncenter,
+  .entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.aligncenter,
+  .entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.aligncenter {
     max-width: calc(6 * (100vw / 12) - 28px);
   }
 }
@@ -5314 +5334 @@
 
 @media only screen and (min-width: 768px) {
   .entry .entry-content > *.aligncenter,
-  .entry .entry-summary > *.aligncenter {
+  .entry .entry-summary > *.aligncenter,
+  .entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.aligncenter,
+  .entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.aligncenter {
     margin-right: 0;
     margin-left: 0;
   }
 }
 
+.entry .entry-content > * > *:first-child,
+.entry .entry-summary > * > *:first-child {
+  margin-top: 0;
+}
+
+.entry .entry-content > * > *:last-child,
+.entry .entry-summary > * > *:last-child {
+  margin-bottom: 0;
+}
+
 /*
  * Unset nested content selector styles
  * - Prevents layout styles from cascading too deeply
@@ -5739 +5771 @@
 }
 
 @media only screen and (min-width: 768px) {
+  .entry .entry-content .wp-block-image:not(.alignwide):not(.alignfull) > img {
+    max-width: calc(8 * (100vw / 12) - 28px);
+  }
+}
+
+@media only screen and (min-width: 1168px) {
+  .entry .entry-content .wp-block-image:not(.alignwide):not(.alignfull) > img {
+    max-width: calc(6 * (100vw / 12) - 28px);
+  }
+}
+
+@media only screen and (min-width: 768px) {
   .entry .entry-content .wp-block-image .aligncenter {
     max-width: calc(8 * (100vw / 12) - 28px);
   }
@@ -6038 +6082 @@
 }
 
 @media only screen and (min-width: 768px) {
+  .entry .entry-content .wp-block-columns .wp-block-image > img:not(.alignwide):not(.alignfull) {
+    max-width: 100%;
+  }
+}
+
+@media only screen and (min-width: 1168px) {
+  .entry .entry-content .wp-block-columns .wp-block-image > img:not(.alignwide):not(.alignfull) {
+    max-width: 100%;
+  }
+}
+
+@media only screen and (min-width: 768px) {
   .entry .entry-content .wp-block-columns {
     flex-wrap: nowrap;
   }
@@ -6046 +6102 @@
   }
 }
 
+@media only screen and (min-width: 768px) {
+  .entry .entry-content .wp-block-group:not(.alignfull) > .wp-block-group__inner-container > .alignfull,
+  .entry .entry-content .wp-block-group:not(.alignfull) > .wp-block-group__inner-container > .wp-block-image > img {
+    right: 0;
+    max-width: 100%;
+  }
+}
+
+.entry .entry-content .wp-block-group.alignfull > .wp-block-group__inner-container {
+  max-width: calc(100% - (2 * 1rem));
+  margin: 0 1rem;
+}
+
+@media only screen and (min-width: 768px) {
+  .entry .entry-content .wp-block-group.alignfull > .wp-block-group__inner-container {
+    max-width: 80%;
+    margin: 0 10%;
+    padding: 0 60px;
+  }
+}
+
+.entry .entry-content .wp-block-group.has-background {
+  padding: 1rem;
+}
+
+.entry .entry-content .wp-block-group.has-background .wp-block-group__inner-container > *:first-child {
+  margin-top: 0;
+}
+
+.entry .entry-content .wp-block-group.has-background .wp-block-group__inner-container > *:last-child {
+  margin-bottom: 0;
+}
+
+.entry .entry-content .wp-block-group.has-background.alignfull {
+  padding-right: 0;
+  padding-left: 0;
+}
+
+@media only screen and (min-width: 768px) {
+  .entry .entry-content .wp-block-group.has-background.alignfull {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+  }
+}
+
+.entry .entry-content .wp-block-group.has-background:not(.alignfull) > .wp-block-group__inner-container > .alignfull {
+  width: 100%;
+  max-width: 100%;
+}
+
+@media only screen and (min-width: 768px) {
+  .entry .entry-content .wp-block-group.has-background:not(.alignfull) > .wp-block-group__inner-container > .alignfull {
+    width: calc( 100% + 2rem);
+    max-width: calc( 100% + 2rem);
+    margin-right: -1rem;
+  }
+}
+
 .entry .entry-content .wp-block-latest-comments .wp-block-latest-comments__comment-meta {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
   font-weight: bold;

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

@@ -5192 +5192 @@
 /* Blocks */
 /* !Block styles */
 .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%;
 }
@@ -5199 +5201 @@
 
 @media only screen and (min-width: 768px) {
   .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 > * {
     max-width: calc(8 * (100vw / 12) - 28px);
   }
 }
@@ -5206 +5210 @@
 
 @media only screen and (min-width: 1168px) {
   .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 > * {
     max-width: calc(6 * (100vw / 12) - 28px);
   }
 }
@@ -5213 +5219 @@
 
 @media only screen and (min-width: 768px) {
   .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;
   }
 }
 
-.entry .entry-content > * > *:first-child,
-.entry .entry-summary > * > *:first-child {
-  margin-top: 0;
-}
-
-.entry .entry-content > * > *:last-child,
-.entry .entry-summary > * > *:last-child {
-  margin-bottom: 0;
-}
-
 .entry .entry-content > *.alignwide,
-.entry .entry-summary > *.alignwide {
+.entry .entry-summary > *.alignwide,
+.entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.alignwide,
+.entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.alignwide {
   margin-left: auto;
   margin-right: auto;
   clear: both;
@@ -5237 +5237 @@
 
 @media only screen and (min-width: 768px) {
   .entry .entry-content > *.alignwide,
-  .entry .entry-summary > *.alignwide {
+  .entry .entry-summary > *.alignwide,
+  .entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.alignwide,
+  .entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.alignwide {
     width: 100%;
     max-width: 100%;
   }
@@ -5244 +5246 @@
 }
 
 .entry .entry-content > *.alignfull,
-.entry .entry-summary > *.alignfull {
+.entry .entry-summary > *.alignfull,
+.entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.alignfull,
+.entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.alignfull {
   position: relative;
   left: -1rem;
   width: calc( 100% + (2 * 1rem));
@@ -5254 +5258 @@
 
 @media only screen and (min-width: 768px) {
   .entry .entry-content > *.alignfull,
-  .entry .entry-summary > *.alignfull {
+  .entry .entry-summary > *.alignfull,
+  .entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.alignfull,
+  .entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.alignfull {
     margin-top: calc(2 * 1rem);
     margin-bottom: calc(2 * 1rem);
     left: calc( -12.5% - 75px);
@@ -5264 +5270 @@
 }
 
 .entry .entry-content > *.alignleft,
-.entry .entry-summary > *.alignleft {
+.entry .entry-summary > *.alignleft,
+.entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.alignleft,
+.entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.alignleft {
   /*rtl:ignore*/
   float: left;
   max-width: calc(5 * (100vw / 12));
@@ -5276 +5284 @@
 
 @media only screen and (min-width: 768px) {
   .entry .entry-content > *.alignleft,
-  .entry .entry-summary > *.alignleft {
+  .entry .entry-summary > *.alignleft,
+  .entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.alignleft,
+  .entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.alignleft {
     max-width: calc(4 * (100vw / 12));
     /*rtl:ignore*/
     margin-right: calc(2 * 1rem);
@@ -5284 +5294 @@
 }
 
 .entry .entry-content > *.alignright,
-.entry .entry-summary > *.alignright {
+.entry .entry-summary > *.alignright,
+.entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.alignright,
+.entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.alignright {
   /*rtl:ignore*/
   float: right;
   max-width: calc(5 * (100vw / 12));
@@ -5296 +5308 @@
 
 @media only screen and (min-width: 768px) {
   .entry .entry-content > *.alignright,
-  .entry .entry-summary > *.alignright {
+  .entry .entry-summary > *.alignright,
+  .entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.alignright,
+  .entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.alignright {
     max-width: calc(4 * (100vw / 12));
     margin-right: 0;
     /*rtl:ignore*/
@@ -5305 +5319 @@
 }
 
 .entry .entry-content > *.aligncenter,
-.entry .entry-summary > *.aligncenter {
+.entry .entry-summary > *.aligncenter,
+.entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.aligncenter,
+.entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.aligncenter {
   margin-left: auto;
   margin-right: auto;
 }
@@ -5312 +5328 @@
 
 @media only screen and (min-width: 768px) {
   .entry .entry-content > *.aligncenter,
-  .entry .entry-summary > *.aligncenter {
+  .entry .entry-summary > *.aligncenter,
+  .entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.aligncenter,
+  .entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.aligncenter {
     max-width: calc(8 * (100vw / 12) - 28px);
   }
 }
@@ -5319 +5337 @@
 
 @media only screen and (min-width: 1168px) {
   .entry .entry-content > *.aligncenter,
-  .entry .entry-summary > *.aligncenter {
+  .entry .entry-summary > *.aligncenter,
+  .entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.aligncenter,
+  .entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.aligncenter {
     max-width: calc(6 * (100vw / 12) - 28px);
   }
 }
@@ -5326 +5346 @@
 
 @media only screen and (min-width: 768px) {
   .entry .entry-content > *.aligncenter,
-  .entry .entry-summary > *.aligncenter {
+  .entry .entry-summary > *.aligncenter,
+  .entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.aligncenter,
+  .entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.aligncenter {
     margin-left: 0;
     margin-right: 0;
   }
 }
 
+.entry .entry-content > * > *:first-child,
+.entry .entry-summary > * > *:first-child {
+  margin-top: 0;
+}
+
+.entry .entry-content > * > *:last-child,
+.entry .entry-summary > * > *:last-child {
+  margin-bottom: 0;
+}
+
 /*
  * Unset nested content selector styles
  * - Prevents layout styles from cascading too deeply
@@ -5751 +5783 @@
 }
 
 @media only screen and (min-width: 768px) {
+  .entry .entry-content .wp-block-image:not(.alignwide):not(.alignfull) > img {
+    max-width: calc(8 * (100vw / 12) - 28px);
+  }
+}
+
+@media only screen and (min-width: 1168px) {
+  .entry .entry-content .wp-block-image:not(.alignwide):not(.alignfull) > img {
+    max-width: calc(6 * (100vw / 12) - 28px);
+  }
+}
+
+@media only screen and (min-width: 768px) {
   .entry .entry-content .wp-block-image .aligncenter {
     max-width: calc(8 * (100vw / 12) - 28px);
   }
@@ -6050 +6094 @@
 }
 
 @media only screen and (min-width: 768px) {
+  .entry .entry-content .wp-block-columns .wp-block-image > img:not(.alignwide):not(.alignfull) {
+    max-width: 100%;
+  }
+}
+
+@media only screen and (min-width: 1168px) {
+  .entry .entry-content .wp-block-columns .wp-block-image > img:not(.alignwide):not(.alignfull) {
+    max-width: 100%;
+  }
+}
+
+@media only screen and (min-width: 768px) {
   .entry .entry-content .wp-block-columns {
     flex-wrap: nowrap;
   }
@@ -6058 +6114 @@
   }
 }
 
+@media only screen and (min-width: 768px) {
+  .entry .entry-content .wp-block-group:not(.alignfull) > .wp-block-group__inner-container > .alignfull,
+  .entry .entry-content .wp-block-group:not(.alignfull) > .wp-block-group__inner-container > .wp-block-image > img {
+    left: 0;
+    max-width: 100%;
+  }
+}
+
+.entry .entry-content .wp-block-group.alignfull > .wp-block-group__inner-container {
+  max-width: calc(100% - (2 * 1rem));
+  margin: 0 1rem;
+}
+
+@media only screen and (min-width: 768px) {
+  .entry .entry-content .wp-block-group.alignfull > .wp-block-group__inner-container {
+    max-width: 80%;
+    margin: 0 10%;
+    padding: 0 60px;
+  }
+}
+
+.entry .entry-content .wp-block-group.has-background {
+  padding: 1rem;
+}
+
+.entry .entry-content .wp-block-group.has-background .wp-block-group__inner-container > *:first-child {
+  margin-top: 0;
+}
+
+.entry .entry-content .wp-block-group.has-background .wp-block-group__inner-container > *:last-child {
+  margin-bottom: 0;
+}
+
+.entry .entry-content .wp-block-group.has-background.alignfull {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+@media only screen and (min-width: 768px) {
+  .entry .entry-content .wp-block-group.has-background.alignfull {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+  }
+}
+
+.entry .entry-content .wp-block-group.has-background:not(.alignfull) > .wp-block-group__inner-container > .alignfull {
+  width: 100%;
+  max-width: 100%;
+}
+
+@media only screen and (min-width: 768px) {
+  .entry .entry-content .wp-block-group.has-background:not(.alignfull) > .wp-block-group__inner-container > .alignfull {
+    width: calc( 100% + 2rem);
+    max-width: calc( 100% + 2rem);
+    margin-left: -1rem;
+  }
+}
+
 .entry .entry-content .wp-block-latest-comments .wp-block-latest-comments__comment-meta {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
   font-weight: bold;