From a5cfb704bd937e15886f76dae04691caff713085 Mon Sep 17 00:00:00 2001 From: ianbelanger Date: Thu, 20 Feb 2020 16:40:06 +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. Built from https://develop.svn.wordpress.org/trunk@47327 git-svn-id: http://core.svn.wordpress.org/trunk@47121 1a063a9b-81f0-0310-95a4-ce76da25c4cd --- .../themes/twentynineteen/style-editor.css | 89 +++++++++---------- .../themes/twentynineteen/style-editor.scss | 67 +++++++------- wp-includes/version.php | 2 +- 3 files changed, 73 insertions(+), 85 deletions(-) diff --git a/wp-content/themes/twentynineteen/style-editor.css b/wp-content/themes/twentynineteen/style-editor.css index a229b79ea3..247aef680b 100644 --- a/wp-content/themes/twentynineteen/style-editor.css +++ b/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/wp-content/themes/twentynineteen/style-editor.scss b/wp-content/themes/twentynineteen/style-editor.scss index 1c6c4de53d..b5c422fa72 100644 --- a/wp-content/themes/twentynineteen/style-editor.scss +++ b/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%; diff --git a/wp-includes/version.php b/wp-includes/version.php index 73fbcf2aca..6b432ebdde 100644 --- a/wp-includes/version.php +++ b/wp-includes/version.php @@ -13,7 +13,7 @@ * * @global string $wp_version */ -$wp_version = '5.4-beta2-47326'; +$wp_version = '5.4-beta2-47327'; /** * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.