diff --git a/wp-content/themes/twentynineteen/sass/blocks/_blocks.scss b/wp-content/themes/twentynineteen/sass/blocks/_blocks.scss index 034a16378a..6312f46ffd 100644 --- a/wp-content/themes/twentynineteen/sass/blocks/_blocks.scss +++ b/wp-content/themes/twentynineteen/sass/blocks/_blocks.scss @@ -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 { diff --git a/wp-content/themes/twentynineteen/style-editor.css b/wp-content/themes/twentynineteen/style-editor.css index 51a0f4e7ab..3138c3c780 100644 --- a/wp-content/themes/twentynineteen/style-editor.css +++ b/wp-content/themes/twentynineteen/style-editor.css @@ -1293,3 +1293,147 @@ ul.wp-block-archives li ul, 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); + } +} diff --git a/wp-content/themes/twentynineteen/style-editor.scss b/wp-content/themes/twentynineteen/style-editor.scss index 43ce4a94b6..bdd311fe8f 100644 --- a/wp-content/themes/twentynineteen/style-editor.scss +++ b/wp-content/themes/twentynineteen/style-editor.scss @@ -739,3 +739,180 @@ ul.wp-block-archives, } } } + +/** === 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); + } + } + } + } +} diff --git a/wp-content/themes/twentynineteen/style-rtl.css b/wp-content/themes/twentynineteen/style-rtl.css index a626c385bb..0867a64b00 100644 --- a/wp-content/themes/twentynineteen/style-rtl.css +++ b/wp-content/themes/twentynineteen/style-rtl.css @@ -5186,32 +5186,162 @@ body.page .main-navigation { /* 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%; } @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); } } @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); } } @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 > *.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; +} + +@media only screen and (min-width: 768px) { + .entry .entry-content > *.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%; + } +} + +.entry .entry-content > *.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)); + max-width: calc( 100% + (2 * 1rem)); + clear: both; +} + +@media only screen and (min-width: 768px) { + .entry .entry-content > *.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); + width: calc( 125% + 150px); + max-width: calc( 125% + 150px); + } +} + +.entry .entry-content > *.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; + margin-right: 0; + margin-right: 1rem; +} + +@media only screen and (min-width: 768px) { + .entry .entry-content > *.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); + } +} + +.entry .entry-content > *.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; + margin-left: 0; + margin-left: 1rem; +} + +@media only screen and (min-width: 768px) { + .entry .entry-content > *.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); + } +} + +.entry .entry-content > *.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; +} + +@media only screen and (min-width: 768px) { + .entry .entry-content > *.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); + } +} + +@media only screen and (min-width: 1168px) { + .entry .entry-content > *.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); + } +} + +@media only screen and (min-width: 768px) { + .entry .entry-content > *.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; @@ -5222,104 +5352,6 @@ body.page .main-navigation { margin-bottom: 0; } -.entry .entry-content > *.alignwide, -.entry .entry-summary > *.alignwide { - margin-right: auto; - margin-left: auto; - clear: both; -} - -@media only screen and (min-width: 768px) { - .entry .entry-content > *.alignwide, - .entry .entry-summary > *.alignwide { - width: 100%; - max-width: 100%; - } -} - -.entry .entry-content > *.alignfull, -.entry .entry-summary > *.alignfull { - position: relative; - right: -1rem; - width: calc( 100% + (2 * 1rem)); - max-width: calc( 100% + (2 * 1rem)); - clear: both; -} - -@media only screen and (min-width: 768px) { - .entry .entry-content > *.alignfull, - .entry .entry-summary > *.alignfull { - margin-top: calc(2 * 1rem); - margin-bottom: calc(2 * 1rem); - right: calc( -12.5% - 75px); - width: calc( 125% + 150px); - max-width: calc( 125% + 150px); - } -} - -.entry .entry-content > *.alignleft, -.entry .entry-summary > *.alignleft { - float: left; - max-width: calc(5 * (100vw / 12)); - margin-top: 0; - margin-right: 0; - margin-right: 1rem; -} - -@media only screen and (min-width: 768px) { - .entry .entry-content > *.alignleft, - .entry .entry-summary > *.alignleft { - max-width: calc(4 * (100vw / 12)); - margin-right: calc(2 * 1rem); - } -} - -.entry .entry-content > *.alignright, -.entry .entry-summary > *.alignright { - float: right; - max-width: calc(5 * (100vw / 12)); - margin-top: 0; - margin-left: 0; - margin-left: 1rem; -} - -@media only screen and (min-width: 768px) { - .entry .entry-content > *.alignright, - .entry .entry-summary > *.alignright { - max-width: calc(4 * (100vw / 12)); - margin-left: 0; - margin-left: calc(2 * 1rem); - } -} - -.entry .entry-content > *.aligncenter, -.entry .entry-summary > *.aligncenter { - margin-right: auto; - margin-left: auto; -} - -@media only screen and (min-width: 768px) { - .entry .entry-content > *.aligncenter, - .entry .entry-summary > *.aligncenter { - max-width: calc(8 * (100vw / 12) - 28px); - } -} - -@media only screen and (min-width: 1168px) { - .entry .entry-content > *.aligncenter, - .entry .entry-summary > *.aligncenter { - max-width: calc(6 * (100vw / 12) - 28px); - } -} - -@media only screen and (min-width: 768px) { - .entry .entry-content > *.aligncenter, - .entry .entry-summary > *.aligncenter { - margin-right: 0; - margin-left: 0; - } -} - /* * Unset nested content selector styles * - Prevents layout styles from cascading too deeply @@ -5738,6 +5770,18 @@ body.page .main-navigation { display: block; } +@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); @@ -6037,6 +6081,18 @@ body.page .main-navigation { margin-bottom: 0; } +@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 @@ body.page .main-navigation { } } +@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; diff --git a/wp-content/themes/twentynineteen/style.css b/wp-content/themes/twentynineteen/style.css index ccf9014fa4..43ecbf1fda 100644 --- a/wp-content/themes/twentynineteen/style.css +++ b/wp-content/themes/twentynineteen/style.css @@ -5192,44 +5192,44 @@ body.page .main-navigation { /* 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%; } @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); } } @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); } } @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,14 +5237,18 @@ body.page .main-navigation { @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%; } } .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 @@ body.page .main-navigation { @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 @@ body.page .main-navigation { } .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 @@ body.page .main-navigation { @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 @@ body.page .main-navigation { } .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 @@ body.page .main-navigation { @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,33 +5319,51 @@ body.page .main-navigation { } .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; } @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); } } @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); } } @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 @@ -5750,6 +5782,18 @@ body.page .main-navigation { display: block; } +@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); @@ -6049,6 +6093,18 @@ body.page .main-navigation { margin-bottom: 0; } +@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 @@ body.page .main-navigation { } } +@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; diff --git a/wp-includes/version.php b/wp-includes/version.php index dc15f54699..d09fceba6c 100644 --- a/wp-includes/version.php +++ b/wp-includes/version.php @@ -13,7 +13,7 @@ * * @global string $wp_version */ -$wp_version = '5.3-alpha-45604'; +$wp_version = '5.3-alpha-45605'; /** * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.