Twenty Nineteen: Update margins on full- and wide-aligned blocks in the editor.

Previously, full width blocks would cause a horizontal scrollbar, and nesting full width blocks would cause the content to be pulled off the screen. Now wide and full width blocks can be nested without any visual issues.

Props aleperez92, Boniu91, onemaggie, hellofromTonya.
Fixes #53428.


Built from https://develop.svn.wordpress.org/trunk@51209


git-svn-id: http://core.svn.wordpress.org/trunk@50818 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
ryelle 2021-06-22 22:15:57 +00:00
parent 479e9847ed
commit 0638de4c60
3 changed files with 47 additions and 9 deletions

View File

@ -583,8 +583,8 @@ h6:lang(vi), figcaption:lang(vi),
/** === Editor Frame === */ /** === Editor Frame === */
body .wp-block[data-align="full"], body .wp-block[data-align="full"],
body .wp-block.alignfull { body .wp-block.alignfull {
width: calc(100% + 20px); max-width: calc(100% + 16px);
max-width: calc(100% + 20px); width: calc(100% + 16px);
} }
body .wp-block[data-align="left"], body .wp-block[data-align="left"],
@ -620,11 +620,19 @@ body .wp-block.aligncenter {
} }
body .wp-block[data-align="full"], body .wp-block[data-align="full"],
body .wp-block.alignfull { body .wp-block.alignfull {
width: calc( 125% + 20px); width: calc(125% + 16px);
max-width: calc( 125% + 20px); max-width: calc(125% + 16px);
position: relative; position: relative;
left: -12.5%; left: -12.5%;
} }
body .wp-block[data-align="wide"] .wp-block[data-align="full"],
body .wp-block[data-align="full"] .wp-block[data-align="full"],
body .wp-block.alignwide .wp-block.alignfull,
body .wp-block.alignfull .wp-block.alignfull {
left: 0;
margin-left: 0;
margin-right: 0;
}
} }
/** === Content Width === */ /** === Content Width === */
@ -1560,3 +1568,12 @@ ul.wp-block-archives li ul,
width: calc(125% + 120px); width: calc(125% + 120px);
} }
} }
.wp-block-post-template .wp-block[data-align="full"],
.wp-block-post-template .wp-block.alignfull {
left: 0;
max-width: 100%;
padding-left: 0;
padding-right: 0;
width: 100%;
}

View File

@ -13,8 +13,8 @@ body {
.wp-block[data-align="full"], .wp-block[data-align="full"],
.wp-block.alignfull { .wp-block.alignfull {
width: calc(100% + 20px); max-width: calc(100% + 16px);
max-width: calc(100% + 20px); width: calc(100% + 16px);
} }
.wp-block[data-align="left"], .wp-block[data-align="left"],
@ -54,11 +54,20 @@ body {
.wp-block[data-align="full"], .wp-block[data-align="full"],
.wp-block.alignfull { .wp-block.alignfull {
width: calc( 125% + 20px ); width: calc(125% + 16px);
max-width: calc( 125% + 20px ); max-width: calc(125% + 16px);
position: relative; position: relative;
left: -12.5%; left: -12.5%;
} }
.wp-block[data-align="wide"] .wp-block[data-align="full"],
.wp-block[data-align="full"] .wp-block[data-align="full"],
.wp-block.alignwide .wp-block.alignfull,
.wp-block.alignfull .wp-block.alignfull {
left: 0;
margin-left: 0;
margin-right: 0;
}
} }
} }
@ -971,3 +980,15 @@ $group-block-background__padding: $font__size_base;
} }
} }
} }
.wp-block-post-template {
.wp-block[data-align="full"],
.wp-block.alignfull {
left: 0;
max-width: 100%;
padding-left: 0;
padding-right: 0;
width: 100%;
}
}

View File

@ -13,7 +13,7 @@
* *
* @global string $wp_version * @global string $wp_version
*/ */
$wp_version = '5.8-beta2-51208'; $wp_version = '5.8-beta2-51209';
/** /**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema. * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.