Upstream/WordPress
1
0
Fork 0
mirror of https://github.com/WordPress/WordPress.git synced 2024-09-26 14:23:00 +02:00
Code Issues Projects Releases Wiki Activity

Bundled Themes: Twenty Nineteen Update margins in editor styles to address upcoming block editor margin changes.

Browse Source 
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
This commit is contained in:
ianbelanger 2020-02-20 16:40:06 +00:00
parent 450d49183b
commit a5cfb704bd
3 changed files with 73 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
wp-content/themes/twentynineteen/style-editor.css
View File

@ -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);
}
}

67
wp-content/themes/twentynineteen/style-editor.scss
View File

@ -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%;

2
wp-includes/version.php
View File

@ -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.