From 6194b3c5d2a124c7047778306844f0da9d9bf26d Mon Sep 17 00:00:00 2001 From: Ian Belanger Date: Thu, 20 Feb 2020 16:38:38 +0000 Subject: [PATCH] Bundled Themes: Twenty Nineteen Update margins in editor styles to address upcoming block editor margin changes. Fixes the margins in the block editor to address recent changes in block margins. Props Joen, SergeyBiryukov, kjellr, jffng, allancole. Fixes #48526. git-svn-id: https://develop.svn.wordpress.org/trunk@47327 602fd350-edb4-49c9-b593-d223f7449a82 --- .../themes/twentynineteen/style-editor.css | 89 +++++++++---------- .../themes/twentynineteen/style-editor.scss | 67 +++++++------- 2 files changed, 72 insertions(+), 84 deletions(-) diff --git a/src/wp-content/themes/twentynineteen/style-editor.css b/src/wp-content/themes/twentynineteen/style-editor.css index a229b79ea3..247aef680b 100644 --- a/src/wp-content/themes/twentynineteen/style-editor.css +++ b/src/wp-content/themes/twentynineteen/style-editor.css @@ -551,13 +551,14 @@ h6:lang(vi), figcaption:lang(vi), /** === Editor Frame === */ body .wp-block[data-align="full"] { - width: 100%; + width: calc(100% + 28px); + max-width: calc(100% + 28px); } @media only screen and (min-width: 600px) { body .wp-block[data-align="full"] { - width: calc( 100% + 90px); - max-width: calc( 100% + 90px); + width: calc( 100% + 116px); + max-width: calc( 100% + 115px); } } @@ -566,7 +567,6 @@ body .wp-block[data-align="full"] { max-width: 80%; margin: 0 10%; } - body .editor-post-title__block, body .editor-default-block-appender, body .editor-block-list__block { margin-left: 0; @@ -575,12 +575,6 @@ body .wp-block[data-align="full"] { body .wp-block[data-align="wide"] { width: 100%; } - body .wp-block[data-align="full"] { - position: relative; - left: calc( -12.5% - 14px); - width: calc( 125% + 116px); - max-width: calc( 125% + 115px); - } body .wp-block[data-align="right"] { max-width: 125%; } @@ -588,7 +582,6 @@ body .wp-block[data-align="full"] { /** === Content Width === */ .wp-block { - width: calc(100vw - (2 * 1rem)); max-width: 100%; } @@ -779,11 +772,17 @@ figcaption, width: 2.8125em; margin-top: 0; margin-bottom: 0; - margin-left: 1em; + margin-left: 1rem; position: relative; top: 0.5em; } +@media only screen and (min-width: 600px) { + .editor-post-title__block:before { + margin-left: 0; + } +} + .editor-post-title__block .editor-post-title__input { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; font-size: 2.8125em; @@ -791,7 +790,7 @@ figcaption, } /** === Default Appender === */ -.editor-default-block-appender .editor-default-block-appender__content { +.block-editor-default-block-appender textarea.block-editor-default-block-appender__content { font-family: "NonBreakingSpaceOverride", "Hoefler Text", Garamond, "Times New Roman", serif; font-size: 22px; } @@ -1314,65 +1313,59 @@ ul.wp-block-archives li ul, } /** === 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"] > .wp-block-group > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block[data-align="full"] { + margin-left: 0; + margin-right: 0; } -.wp-block[data-type="core/group"] > .editor-block-list__block-edit > div > .wp-block-group.has-background { +.wp-block[data-type="core/group"] > .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"] { +.wp-block[data-type="core/group"] > .wp-block-group.has-background > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-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"]) { + .wp-block[data-type="core/group"][data-align="wide"] > .is-block-content > .wp-block-group > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-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"]) { + .wp-block[data-type="core/group"][data-align="wide"] > .is-block-content > .wp-block-group > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block:not([data-align="wide"]):not([data-align="full"]) { width: calc(6 * (100vw / 12 )); } } +.wp-block[data-type="core/group"][data-align="wide"] > .is-block-content > .wp-block-group > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block[data-align="full"] { + padding-left: 0; + padding-right: 0; +} + @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"]) { + .wp-block[data-type="core/group"][data-align="wide"] > .is-block-content > .wp-block-group.has-background > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-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"]) { + .wp-block[data-type="core/group"][data-align="wide"] > .is-block-content > .wp-block-group.has-background > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-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 { + .wp-block[data-type="core/group"][data-align="full"] > .is-block-content > .wp-block-group > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-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 { + .wp-block[data-type="core/group"][data-align="full"] > .is-block-content > .wp-block-group > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout { width: 80%; margin-left: 10%; margin-right: 10%; @@ -1381,78 +1374,78 @@ ul.wp-block-archives li ul, } } -.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"]) { +.wp-block[data-type="core/group"][data-align="full"] > .is-block-content > .wp-block-group > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-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"]) { + .wp-block[data-type="core/group"][data-align="full"] > .is-block-content > .wp-block-group > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-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"]) { + .wp-block[data-type="core/group"][data-align="full"] > .is-block-content > .wp-block-group > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-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"] { + .wp-block[data-type="core/group"][data-align="full"] > .is-block-content > .wp-block-group > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-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"] { + .wp-block[data-type="core/group"][data-align="full"] > .is-block-content > .wp-block-group > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-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] { +.wp-block[data-type="core/group"][data-align="full"] > .is-block-content > .wp-block-group > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-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] { + .wp-block[data-type="core/group"][data-align="full"] > .is-block-content > .wp-block-group > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-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] { + .wp-block[data-type="core/group"][data-align="full"] > .is-block-content > .wp-block-group > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-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 { +.wp-block[data-type="core/group"][data-align="full"] > .is-block-content > .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 { + .wp-block[data-type="core/group"][data-align="full"] > .is-block-content > .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"] { +.wp-block[data-type="core/group"][data-align="full"] > .is-block-content > .wp-block-group.has-background > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-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"] { + .wp-block[data-type="core/group"][data-align="full"] > .is-block-content > .wp-block-group.has-background > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-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"] { + .wp-block[data-type="core/group"][data-align="full"] > .is-block-content > .wp-block-group.has-background > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-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 1c6c4de53d..b5c422fa72 100644 --- a/src/wp-content/themes/twentynineteen/style-editor.scss +++ b/src/wp-content/themes/twentynineteen/style-editor.scss @@ -12,14 +12,15 @@ Twenty Nineteen Editor Styles body { .wp-block[data-align="full"] { - width: 100%; + width: calc(100% + 28px); + max-width: calc(100% + 28px); } @include media(mobile) { .wp-block[data-align="full"] { - width: calc( 100% + 90px ); - max-width: calc( 100% + 90px ); + width: calc( 100% + 116px ); + max-width: calc( 100% + 115px ); } } @@ -30,7 +31,6 @@ body { margin: 0 10%; } - .editor-post-title__block, .editor-default-block-appender, .editor-block-list__block { margin-left: 0; @@ -41,13 +41,6 @@ body { width: 100%; } - .wp-block[data-align="full"] { - position: relative; - left: calc( -12.5% - 14px ); - width: calc( 125% + 116px ); - max-width: calc( 125% + 115px ); // Subtract 1px here to avoid the rounding errors that happen due to the usage of percentages. - } - .wp-block[data-align="right"] { max-width: 125%; } @@ -57,7 +50,6 @@ body { /** === Content Width === */ .wp-block { - width: calc(100vw - (2 * #{$size__spacing-unit})); max-width: 100%; @include media(tablet) { @@ -204,9 +196,13 @@ figcaption, width: $font__size-xxl; margin-top: 0; margin-bottom: 0; - margin-left: 1em; + margin-left: 1rem; position: relative; top: 0.5em; + + @include media(mobile) { + margin-left: 0; + } } .editor-post-title__input { @@ -218,7 +214,7 @@ figcaption, /** === Default Appender === */ -.editor-default-block-appender .editor-default-block-appender__content { +.block-editor-default-block-appender textarea.block-editor-default-block-appender__content { @include font-family( $font__body ); font-size: $font__size_base; } @@ -780,20 +776,21 @@ $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 { + > .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; + > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block[data-align="full"] { + margin-left: 0; + margin-right: 0; } } // Group block with background color - > .editor-block-list__block-edit > div > .wp-block-group.has-background { + > .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"] { + > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-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}); @@ -801,13 +798,13 @@ $group-block-background__padding: $font__size_base; } // Wide and full alignments - &[data-align="wide"] { + &[data-align="wide"] > .is-block-content { // Group block base styles. - > .editor-block-list__block-edit > div > .wp-block-group { + > .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"]) { + > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block:not([data-align="wide"]):not([data-align="full"]) { @include media(tablet) { width: calc(8 * (100vw / 12)); } @@ -816,13 +813,19 @@ $group-block-background__padding: $font__size_base; width: calc(6 * (100vw / 12 )); } } + + // Child blocks: Full alignment + > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block[data-align="full"] { + padding-left: 0; + padding-right: 0; + } } // Group block with background color - > .editor-block-list__block-edit > div > .wp-block-group.has-background { + > .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"]) { + > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-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}); } @@ -837,22 +840,14 @@ $group-block-background__padding: $font__size_base; // 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 { + > .is-block-content > .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 { + > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout { @include media(mobile) { padding-left: 46px; @@ -919,7 +914,7 @@ $group-block-background__padding: $font__size_base; } // Group block with background color - > .editor-block-list__block-edit > div > .wp-block-group.has-background { + > .is-block-content > .wp-block-group.has-background { // When the Group block is full width, we can remove the left/right padding // and let this inherit the @@ -931,7 +926,7 @@ $group-block-background__padding: $font__size_base; } // Child blocks: Full alignment - > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] { + > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block[data-align="full"] { margin-left: 0; width: 100%;