Index: src/wp-content/themes/twentynineteen/sass/blocks/_blocks.scss =================================================================== --- src/wp-content/themes/twentynineteen/sass/blocks/_blocks.scss (revision 45268) +++ src/wp-content/themes/twentynineteen/sass/blocks/_blocks.scss (working copy) @@ -512,6 +512,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(); @@ -761,6 +769,122 @@ } } + //! Group + .wp-block-group { + + // Inner blocks don't inherit our default margins, so we need to add them here. + > * { + margin-top: 32px; + margin-bottom: 32px; + + &:first-child { + margin-top: 0; + } + + &:last-child { + margin-bottom: 0; + } + } + + // Child blocks: Full alignment + > .alignfull { + + &.wp-block-image img { + max-width: 100%; + } + } + + // Wide alignment + &.alignwide { + + // Child blocks: Default alignments + > *:not(.alignwide):not(.alignfull) { + @include postContentMaxWidth(); + } + } + + // Full Alignment + &.alignfull { + width: 100vw; + max-width: 100vw; + + // Child blocks: All alignments except full + > *:not(.alignfull) { + margin-left: $size__spacing-unit; + margin-right: $size__spacing-unit; + @include postContentMaxWidth(); + + // Resets the width of cover blocks to prevent overflow + &.wp-block-cover { + width: initial; + } + + // Allows alignright images to extend beyond the text column + &.wp-block-image { + max-width: 100%; + } + + // Slightly slimmer margins than $size__site-margins to prevent overflow + @include media(tablet) { + margin-left: calc( 10vw + 58px); + margin-right: calc( 10vw + 58px); + } + } + + // Child blocks: Wide alignments + > .alignwide { + @include media(tablet) { + max-width: calc( 80vw - #{$size__spacing-unit * 6}); + + &.wp-block-image img { + margin-left: 0; + max-width: 100%; + } + } + } + } + + &.has-background { + padding: $size__spacing-unit; + + // Child blocks: Full alignment + > .alignfull { + width: calc( 100% + #{$size__spacing-unit * 2} ); + max-width: calc( 100% + #{$size__spacing-unit * 2} ); + margin-left: -#{$size__spacing-unit}; + } + + // Wide alignment + &.alignwide { + + // Child blocks: Default alignments + > *:not(.alignwide):not(.alignfull) { + @include media(tablet) { + max-width: calc( #{$size__site-tablet-content} - #{$size__spacing-unit * 2} ); + } + + @include media(desktop) { + max-width: calc( #{$size__site-desktop-content} - #{$size__spacing-unit * 2} ); + } + } + } + + // Full Alignment + &.alignfull { + + // Child blocks: All alignments except full + > *:not(.alignfull) { + + @include media(tablet) { + margin-left: calc( 10vw + #{$size__spacing-unit * 2} - 6px); + margin-right: calc( 10vw + #{$size__spacing-unit * 2} - 6px); + } + } + } + } + + } + //! Latest Comments .wp-block-latest-comments { Index: src/wp-content/themes/twentynineteen/style-editor.css =================================================================== --- src/wp-content/themes/twentynineteen/style-editor.css (revision 45268) +++ 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 > .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 > .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 > .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 > .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 > .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 > .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 > .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 > .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 > .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 > .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 > .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 > .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 > .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 > .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 > .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 > .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 > .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 > .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 > .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 45268) +++ 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 + > .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 + > .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 + > .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 + > .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. + > .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 + > .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 45268) +++ src/wp-content/themes/twentynineteen/style-rtl.css (working copy) @@ -5739,6 +5739,18 @@ } @media only screen and (min-width: 768px) { + .entry .entry-content .wp-block-image > img { + max-width: calc(8 * (100vw / 12) - 28px); + } +} + +@media only screen and (min-width: 1168px) { + .entry .entry-content .wp-block-image > 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); } @@ -6046,6 +6058,111 @@ } } +.entry .entry-content .wp-block-group > * { + margin-top: 32px; + margin-bottom: 32px; +} + +.entry .entry-content .wp-block-group > *:first-child { + margin-top: 0; +} + +.entry .entry-content .wp-block-group > *:last-child { + margin-bottom: 0; +} + +.entry .entry-content .wp-block-group > .alignfull.wp-block-image img { + max-width: 100%; +} + +@media only screen and (min-width: 768px) { + .entry .entry-content .wp-block-group.alignwide > *:not(.alignwide):not(.alignfull) { + max-width: calc(8 * (100vw / 12) - 28px); + } +} + +@media only screen and (min-width: 1168px) { + .entry .entry-content .wp-block-group.alignwide > *:not(.alignwide):not(.alignfull) { + max-width: calc(6 * (100vw / 12) - 28px); + } +} + +.entry .entry-content .wp-block-group.alignfull { + width: 100vw; + max-width: 100vw; +} + +.entry .entry-content .wp-block-group.alignfull > *:not(.alignfull) { + margin-right: 1rem; + margin-left: 1rem; +} + +@media only screen and (min-width: 768px) { + .entry .entry-content .wp-block-group.alignfull > *:not(.alignfull) { + max-width: calc(8 * (100vw / 12) - 28px); + } +} + +@media only screen and (min-width: 1168px) { + .entry .entry-content .wp-block-group.alignfull > *:not(.alignfull) { + max-width: calc(6 * (100vw / 12) - 28px); + } +} + +.entry .entry-content .wp-block-group.alignfull > *:not(.alignfull).wp-block-cover { + width: initial; +} + +.entry .entry-content .wp-block-group.alignfull > *:not(.alignfull).wp-block-image { + max-width: 100%; +} + +@media only screen and (min-width: 768px) { + .entry .entry-content .wp-block-group.alignfull > *:not(.alignfull) { + margin-right: calc( 10vw + 58px); + margin-left: calc( 10vw + 58px); + } +} + +@media only screen and (min-width: 768px) { + .entry .entry-content .wp-block-group.alignfull > .alignwide { + max-width: calc( 80vw - 6rem); + } + .entry .entry-content .wp-block-group.alignfull > .alignwide.wp-block-image img { + margin-right: 0; + max-width: 100%; + } +} + +.entry .entry-content .wp-block-group.has-background { + padding: 1rem; +} + +.entry .entry-content .wp-block-group.has-background > .alignfull { + width: calc( 100% + 2rem); + max-width: calc( 100% + 2rem); + margin-right: -1rem; +} + +@media only screen and (min-width: 768px) { + .entry .entry-content .wp-block-group.has-background.alignwide > *:not(.alignwide):not(.alignfull) { + max-width: calc( calc(8 * (100vw / 12) - 28px) - 2rem); + } +} + +@media only screen and (min-width: 1168px) { + .entry .entry-content .wp-block-group.has-background.alignwide > *:not(.alignwide):not(.alignfull) { + max-width: calc( calc(6 * (100vw / 12) - 28px) - 2rem); + } +} + +@media only screen and (min-width: 768px) { + .entry .entry-content .wp-block-group.has-background.alignfull > *:not(.alignfull) { + margin-right: calc( 10vw + 2rem - 6px); + margin-left: calc( 10vw + 2rem - 6px); + } +} + .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 45268) +++ src/wp-content/themes/twentynineteen/style.css (working copy) @@ -5751,6 +5751,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); } @@ -6058,6 +6070,111 @@ } } +.entry .entry-content .wp-block-group > * { + margin-top: 32px; + margin-bottom: 32px; +} + +.entry .entry-content .wp-block-group > *:first-child { + margin-top: 0; +} + +.entry .entry-content .wp-block-group > *:last-child { + margin-bottom: 0; +} + +.entry .entry-content .wp-block-group > .alignfull.wp-block-image img { + max-width: 100%; +} + +@media only screen and (min-width: 768px) { + .entry .entry-content .wp-block-group.alignwide > *:not(.alignwide):not(.alignfull) { + max-width: calc(8 * (100vw / 12) - 28px); + } +} + +@media only screen and (min-width: 1168px) { + .entry .entry-content .wp-block-group.alignwide > *:not(.alignwide):not(.alignfull) { + max-width: calc(6 * (100vw / 12) - 28px); + } +} + +.entry .entry-content .wp-block-group.alignfull { + width: 100vw; + max-width: 100vw; +} + +.entry .entry-content .wp-block-group.alignfull > *:not(.alignfull) { + margin-left: 1rem; + margin-right: 1rem; +} + +@media only screen and (min-width: 768px) { + .entry .entry-content .wp-block-group.alignfull > *:not(.alignfull) { + max-width: calc(8 * (100vw / 12) - 28px); + } +} + +@media only screen and (min-width: 1168px) { + .entry .entry-content .wp-block-group.alignfull > *:not(.alignfull) { + max-width: calc(6 * (100vw / 12) - 28px); + } +} + +.entry .entry-content .wp-block-group.alignfull > *:not(.alignfull).wp-block-cover { + width: initial; +} + +.entry .entry-content .wp-block-group.alignfull > *:not(.alignfull).wp-block-image { + max-width: 100%; +} + +@media only screen and (min-width: 768px) { + .entry .entry-content .wp-block-group.alignfull > *:not(.alignfull) { + margin-left: calc( 10vw + 58px); + margin-right: calc( 10vw + 58px); + } +} + +@media only screen and (min-width: 768px) { + .entry .entry-content .wp-block-group.alignfull > .alignwide { + max-width: calc( 80vw - 6rem); + } + .entry .entry-content .wp-block-group.alignfull > .alignwide.wp-block-image img { + margin-left: 0; + max-width: 100%; + } +} + +.entry .entry-content .wp-block-group.has-background { + padding: 1rem; +} + +.entry .entry-content .wp-block-group.has-background > .alignfull { + width: calc( 100% + 2rem); + max-width: calc( 100% + 2rem); + margin-left: -1rem; +} + +@media only screen and (min-width: 768px) { + .entry .entry-content .wp-block-group.has-background.alignwide > *:not(.alignwide):not(.alignfull) { + max-width: calc( calc(8 * (100vw / 12) - 28px) - 2rem); + } +} + +@media only screen and (min-width: 1168px) { + .entry .entry-content .wp-block-group.has-background.alignwide > *:not(.alignwide):not(.alignfull) { + max-width: calc( calc(6 * (100vw / 12) - 28px) - 2rem); + } +} + +@media only screen and (min-width: 768px) { + .entry .entry-content .wp-block-group.has-background.alignfull > *:not(.alignfull) { + margin-left: calc( 10vw + 2rem - 6px); + margin-right: calc( 10vw + 2rem - 6px); + } +} + .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;