From b55695b189d95318bf4a4545da09bd6c51b12a97 Mon Sep 17 00:00:00 2001 From: laurelfulford Date: Sun, 7 Jul 2019 20:10:55 +0000 Subject: [PATCH] Twenty Nineteen: Add styles for the new Group block. Add styles for the new Group block to the theme, to make sure nested blocks display correctly when using the wide and full alignments. Props @kjellr, @dianeco. Fixes #46750. git-svn-id: https://develop.svn.wordpress.org/trunk@45605 602fd350-edb4-49c9-b593-d223f7449a82 --- .../twentynineteen/sass/blocks/_blocks.scss | 118 ++++++- .../themes/twentynineteen/style-editor.css | 144 ++++++++ .../themes/twentynineteen/style-editor.scss | 177 ++++++++++ .../themes/twentynineteen/style-rtl.css | 320 ++++++++++++------ .../themes/twentynineteen/style.css | 168 +++++++-- 5 files changed, 790 insertions(+), 137 deletions(-) diff --git a/src/wp-content/themes/twentynineteen/sass/blocks/_blocks.scss b/src/wp-content/themes/twentynineteen/sass/blocks/_blocks.scss index 034a16378a..6312f46ffd 100644 --- a/src/wp-content/themes/twentynineteen/sass/blocks/_blocks.scss +++ b/src/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/src/wp-content/themes/twentynineteen/style-editor.css b/src/wp-content/themes/twentynineteen/style-editor.css index 51a0f4e7ab..3138c3c780 100644 --- a/src/wp-content/themes/twentynineteen/style-editor.css +++ b/src/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/src/wp-content/themes/twentynineteen/style-editor.scss b/src/wp-content/themes/twentynineteen/style-editor.scss index 43ce4a94b6..bdd311fe8f 100644 --- a/src/wp-content/themes/twentynineteen/style-editor.scss +++ b/src/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/src/wp-content/themes/twentynineteen/style-rtl.css b/src/wp-content/themes/twentynineteen/style-rtl.css index a626c385bb..0867a64b00 100644 --- a/src/wp-content/themes/twentynineteen/style-rtl.css +++ b/src/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/src/wp-content/themes/twentynineteen/style.css b/src/wp-content/themes/twentynineteen/style.css index ccf9014fa4..43ecbf1fda 100644 --- a/src/wp-content/themes/twentynineteen/style.css +++ b/src/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;