Index: src/wp-content/themes/twentynineteen/sass/blocks/_blocks.scss =================================================================== --- src/wp-content/themes/twentynineteen/sass/blocks/_blocks.scss (revision 45494) +++ src/wp-content/themes/twentynineteen/sass/blocks/_blocks.scss (working copy) @@ -1,7 +1,13 @@ /* !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,14 +17,6 @@ margin: 32px 0; } - > *:first-child { - margin-top: 0; - } - - > *:last-child { - margin-bottom: 0; - } - &.alignwide { margin-left: auto; margin-right: auto; @@ -91,6 +89,18 @@ } } +.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,6 +522,14 @@ 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,6 +770,18 @@ } } + // 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,6 +791,76 @@ } } + //! 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}; + } + } + } + + } + //! Latest Comments .wp-block-latest-comments { Index: src/wp-content/themes/twentynineteen/style-editor.css =================================================================== --- src/wp-content/themes/twentynineteen/style-editor.css (revision 45494) +++ src/wp-content/themes/twentynineteen/style-editor.css (working copy) @@ -1293,3 +1293,147 @@ 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); + } +} Index: src/wp-content/themes/twentynineteen/style-editor.scss =================================================================== --- src/wp-content/themes/twentynineteen/style-editor.scss (revision 45494) +++ src/wp-content/themes/twentynineteen/style-editor.scss (working copy) @@ -739,3 +739,180 @@ } } } + +/** === 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); + } + } + } + } +} Index: src/wp-content/themes/twentynineteen/style-rtl.css =================================================================== --- src/wp-content/themes/twentynineteen/style-rtl.css (revision 45494) +++ src/wp-content/themes/twentynineteen/style-rtl.css (working copy) @@ -5186,7 +5186,9 @@ /* 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,7 +5195,9 @@ @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,7 +5204,9 @@ @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,23 +5213,17 @@ @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,7 +5231,9 @@ @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,7 +5240,9 @@ } .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,7 +5252,9 @@ @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,7 +5264,9 @@ } .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,7 +5276,9 @@ @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,7 +5285,9 @@ } .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,7 +5297,9 @@ @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,7 +5307,9 @@ } .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,7 +5316,9 @@ @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,7 +5325,9 @@ @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,12 +5334,24 @@ @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,6 +5771,18 @@ } @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,6 +6082,18 @@ } @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,6 +6102,66 @@ } } +@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; + margin-top: 0; + margin-bottom: 0; +} + +.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; Index: src/wp-content/themes/twentynineteen/style.css =================================================================== --- src/wp-content/themes/twentynineteen/style.css (revision 45494) +++ src/wp-content/themes/twentynineteen/style.css (working copy) @@ -5192,7 +5192,9 @@ /* 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,7 +5201,9 @@ @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,7 +5210,9 @@ @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,23 +5219,17 @@ @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,7 +5237,9 @@ @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,7 +5246,9 @@ } .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,7 +5258,9 @@ @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,7 +5270,9 @@ } .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,7 +5284,9 @@ @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,7 +5294,9 @@ } .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,7 +5308,9 @@ @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,7 +5319,9 @@ } .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,7 +5328,9 @@ @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,7 +5337,9 @@ @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,12 +5346,24 @@ @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,6 +5783,18 @@ } @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,6 +6094,18 @@ } @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,6 +6114,66 @@ } } +@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; + margin-top: 0; + margin-bottom: 0; +} + +.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;