mirror_php/wordpress
1
0
Fork 0
mirror of git://develop.git.wordpress.org/ synced 2025-03-21 04:20:01 +01:00
Code Issues Actions 12 Packages Projects Releases Wiki Activity

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

Browse Source 
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.



git-svn-id: https://develop.svn.wordpress.org/trunk@51209 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Kelly Choyce-Dwan 2021-06-22 22:14:08 +00:00
parent 83c7cad248
commit d6db890e1c
2 changed files with 46 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -583,8 +583,8 @@ h6:lang(vi), figcaption:lang(vi),
/** === Editor Frame === */
body .wp-block[data-align="full"],
body .wp-block.alignfull {
width: calc(100% + 20px);
max-width: calc(100% + 20px);
max-width: calc(100% + 16px);
width: calc(100% + 16px);
}
body .wp-block[data-align="left"],
@ -620,11 +620,19 @@ body .wp-block.aligncenter {
}
body .wp-block[data-align="full"],
body .wp-block.alignfull {
width: calc( 125% + 20px);
max-width: calc( 125% + 20px);
width: calc(125% + 16px);
max-width: calc(125% + 16px);
position: relative;
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 === */
@ -1560,3 +1568,12 @@ ul.wp-block-archives li ul,
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%;
}

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

@ -13,8 +13,8 @@ body {
.wp-block[data-align="full"],
.wp-block.alignfull {
width: calc(100% + 20px);
max-width: calc(100% + 20px);
max-width: calc(100% + 16px);
width: calc(100% + 16px);
}
.wp-block[data-align="left"],
@ -54,11 +54,20 @@ body {
.wp-block[data-align="full"],
.wp-block.alignfull {
width: calc( 125% + 20px );
max-width: calc( 125% + 20px );
width: calc(125% + 16px);
max-width: calc(125% + 16px);
position: relative;
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%;
}
}