vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2026-08-11 12:20:22 +00:00
Code Issues Actions 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
Download Patch File Download Diff File Expand all files Collapse all files
src/wp-content/themes/twentynineteen/style-editor.css
+21 -4
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%;
}
src/wp-content/themes/twentynineteen/style-editor.scss
+25 -4
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%;
}
}