sergiotarxz/Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Bundled Theme: Ensure parity between the block editor and the front-end in twentynineteen.

Browse Source 
Alignments and blocks were not always appearing as they should in the admin.

- Wide alignments sometimes appear only as wide as the text column.
- Full and wide appear centered on the text column
- Full-width blocks sometimes do not take up the full width of the page, and other times they cause a horizontal scroll.
- Wide and full group block children take up the full width of the block by default.

Fixes #49843.
Props kjellr, Joen, poena.


git-svn-id: https://develop.svn.wordpress.org/trunk@48602 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Jake Spurlock 2020-07-24 17:46:20 +00:00
parent 75048987d8
commit 2f98829e41
3 changed files with 224 additions and 215 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -550,33 +550,49 @@ h6:lang(vi), figcaption:lang(vi),
}
/** === Editor Frame === */
body .wp-block[data-align="full"] {
width: calc(100% + 28px);
max-width: calc(100% + 28px);
body .wp-block[data-align="full"],
body .wp-block.alignfull {
width: calc(100% + 20px);
max-width: calc(100% + 20px);
}
@media only screen and (min-width: 600px) {
body .wp-block[data-align="full"] {
width: calc( 100% + 116px);
max-width: calc( 100% + 115px);
}
body .wp-block[data-align="left"],
body .wp-block.alignleft {
margin-right: 1rem;
width: inherit;
}
body .wp-block[data-align="right"],
body .wp-block.alignright {
margin-left: 1rem;
width: inherit;
}
body .wp-block[data-align="center"],
body .wp-block.aligncenter {
margin-left: 0;
}
@media only screen and (min-width: 768px) {
body .editor-writing-flow {
body .block-editor-writing-flow {
max-width: 80%;
margin: 0 10%;
}
body .editor-default-block-appender,
body .editor-block-list__block {
body .block-editor-default-block-appender,
body .block-editor-block-list__block {
margin-left: 0;
margin-right: 0;
}
body .wp-block[data-align="wide"] {
body .wp-block[data-align="wide"],
body .wp-block.alignwide {
width: 100%;
}
body .wp-block[data-align="right"] {
max-width: 125%;
body .wp-block[data-align="full"],
body .wp-block.alignfull {
width: calc( 125% + 20px);
max-width: calc( 125% + 20px);
position: relative;
left: -12.5%;
}
}
@ -777,6 +793,10 @@ figcaption,
}
/** === Post Title === */
.editor-post-title__block {
width: 100%;
}
.editor-post-title__block:before {
background: #767676;
content: "\020";
@ -1346,139 +1366,138 @@ ul.wp-block-archives li ul,
}
/** === Group Block === */
.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"] {
.wp-block-group > .wp-block-group__inner-container > .wp-block[data-align="full"],
.wp-block-group > .wp-block-group__inner-container > .wp-block.alignfull {
margin-left: 0;
margin-right: 0;
left: 0;
}
.wp-block[data-type="core/group"] > .wp-block-group.has-background {
.wp-block-group.has-background {
padding: 22px;
}
.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"] {
.wp-block-group.has-background > .wp-block-group__inner-container > .wp-block[data-align="full"],
.wp-block-group.has-background > .wp-block-group__inner-container > .wp-block.alignfull {
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"] > .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"]) {
.wp-block[data-align="wide"] > .wp-block-group > .wp-block-group__inner-container > .wp-block:not([data-align="wide"]):not([data-align="full"]):not(.alignwide):not(.alignfull) {
width: calc(8 * (100vw / 12));
}
}
@media only screen and (min-width: 1168px) {
.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"]) {
.wp-block[data-align="wide"] > .wp-block-group > .wp-block-group__inner-container > .wp-block:not([data-align="wide"]):not([data-align="full"]):not(.alignwide):not(.alignfull) {
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"] {
.wp-block[data-align="wide"] > .wp-block-group > .wp-block-group__inner-container > .wp-block[data-align="full"],
.wp-block[data-align="wide"] > .wp-block-group > .wp-block-group__inner-container > .wp-block.alignfull {
padding-left: 0;
padding-right: 0;
}
@media only screen and (min-width: 768px) {
.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"]) {
.wp-block[data-align="wide"] > .wp-block-group.has-background > .wp-block-group__inner-container > .wp-block:not([data-align="wide"]):not([data-align="full"]):not(.alignwide):not(.alignfull) {
width: calc(8 * (100vw / 12) - 44px);
}
}
@media only screen and (min-width: 1168px) {
.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"]) {
.wp-block[data-align="wide"] > .wp-block-group.has-background > .wp-block-group__inner-container > .wp-block:not([data-align="wide"]):not([data-align="full"]):not(.alignwide):not(.alignfull) {
width: calc(6 * (100vw / 12 ) - 44px);
}
}
@media only screen and (min-width: 600px) {
.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"] > .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"] > .wp-block-group > .wp-block-group__inner-container {
width: 80%;
margin-left: 10%;
margin-right: 10%;
padding-left: 48px;
padding-right: 48px;
padding-left: 10px;
padding-right: 10px;
}
}
.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"] > .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"]) {
.wp-block[data-align="full"] > .wp-block-group > .wp-block-group__inner-container > .wp-block:not([data-align="wide"]):not(.alignwide):not([data-align="full"]):not(.alignfull) {
max-width: calc(8 * (100vw / 12));
}
}
@media only screen and (min-width: 1168px) {
.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"]) {
.wp-block[data-align="full"] > .wp-block-group > .wp-block-group__inner-container > .wp-block:not([data-align="wide"]):not(.alignwide):not([data-align="full"]):not(.alignfull) {
max-width: calc(6 * (100vw / 12));
}
}
@media only screen and (min-width: 768px) {
.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%;
}
.wp-block[data-align="full"] > .wp-block-group > .wp-block-group__inner-container > .wp-block:not([data-align="full"]):not(.alignfull) {
padding-left: 10px;
padding-right: 10px;
}
@media only screen and (min-width: 768px) {
.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"] > .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"] > .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"] > .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"] > .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"] > .is-block-content > .wp-block-group.has-background {
.wp-block[data-align="full"] > .wp-block-group > .wp-block-group__inner-container > .wp-block:not([data-align="full"]):not(.alignfull) {
padding-left: 0;
padding-right: 0;
}
}
.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"] {
@media only screen and (min-width: 768px) {
.wp-block[data-align="full"] > .wp-block-group > .wp-block-group__inner-container > .wp-block[data-align="right"] {
max-width: 125%;
}
}
@media only screen and (min-width: 768px) {
.wp-block[data-align="full"] > .wp-block-group > .wp-block-group__inner-container > .wp-block[data-align="wide"],
.wp-block[data-align="full"] > .wp-block-group > .wp-block-group__inner-container > .wp-block.alignwide {
width: 100%;
max-width: 100%;
}
}
@media only screen and (min-width: 768px) {
.wp-block[data-align="full"] > .wp-block-group > .wp-block-group__inner-container > .wp-block[data-align=full],
.wp-block[data-align="full"] > .wp-block-group > .wp-block-group__inner-container > .wp-block.alignfull {
left: calc( -12.5% - 13px);
width: calc( 125% + 26px);
max-width: calc( 125% + 25px);
}
}
.wp-block[data-align="full"] > .wp-block-group.has-background {
padding: 22px 0;
}
@media only screen and (min-width: 600px) {
.wp-block[data-align="full"] > .wp-block-group.has-background {
padding-left: 0;
padding-right: 0;
}
}
.wp-block[data-align="full"] > .wp-block-group.has-background > .wp-block-group__inner-container > .wp-block[data-align="full"],
.wp-block[data-align="full"] > .wp-block-group.has-background > .wp-block-group__inner-container > .wp-block.alignfull {
margin-left: 0;
width: 100%;
}
@media only screen and (min-width: 600px) {
.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"] {
.wp-block[data-align="full"] > .wp-block-group.has-background > .wp-block-group__inner-container > .wp-block[data-align="full"],
.wp-block[data-align="full"] > .wp-block-group.has-background > .wp-block-group__inner-container > .wp-block.alignfull {
width: calc(100% + 92px);
}
}
@media only screen and (min-width: 768px) {
.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"] {
.wp-block[data-align="full"] > .wp-block-group.has-background > .wp-block-group__inner-container > .wp-block[data-align="full"],
.wp-block[data-align="full"] > .wp-block-group.has-background > .wp-block-group__inner-container > .wp-block.alignfull {
width: calc(125% + 120px);
}
}

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

@ -11,38 +11,53 @@ Twenty Nineteen Editor Styles
body {
.wp-block[data-align="full"] {
width: calc(100% + 28px);
max-width: calc(100% + 28px);
.wp-block[data-align="full"],
.wp-block.alignfull {
width: calc(100% + 20px);
max-width: calc(100% + 20px);
}
@include media(mobile) {
.wp-block[data-align="left"],
.wp-block.alignleft, {
margin-right: $size__spacing-unit;
width: inherit;
}
.wp-block[data-align="full"] {
width: calc( 100% + 116px );
max-width: calc( 100% + 115px );
}
.wp-block[data-align="right"],
.wp-block.alignright, {
margin-left: $size__spacing-unit;
width: inherit;
}
.wp-block[data-align="center"],
.wp-block.aligncenter, {
margin-left: 0;
}
@include media(tablet) {
.editor-writing-flow {
.block-editor-writing-flow {
max-width: 80%;
margin: 0 10%;
}
.editor-default-block-appender,
.editor-block-list__block {
.block-editor-default-block-appender,
.block-editor-block-list__block {
margin-left: 0;
margin-right: 0;
}
.wp-block[data-align="wide"] {
.wp-block[data-align="wide"],
.wp-block.alignwide {
width: 100%;
}
.wp-block[data-align="right"] {
max-width: 125%;
.wp-block[data-align="full"],
.wp-block.alignfull {
width: calc( 125% + 20px );
max-width: calc( 125% + 20px );
position: relative;
left: -12.5%;
}
}
}
@ -190,6 +205,7 @@ figcaption,
/** === Post Title === */
.editor-post-title__block {
width: 100%;
@include post-section-dash;
&:before {
@ -779,151 +795,144 @@ ul.wp-block-archives,
// size is different here.
$group-block-background__padding: $font__size_base;
.wp-block[data-type="core/group"] {
.wp-block-group {
// Group block base styles
> .wp-block-group {
// Child: Full alignment
> .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;
}
// Child: Full alignment
> .wp-block-group__inner-container > .wp-block[data-align="full"],
> .wp-block-group__inner-container > .wp-block.alignfull {
margin-left: 0;
margin-right: 0;
left: 0;
}
// Group block with background color
> .wp-block-group.has-background {
&.has-background {
padding: $group-block-background__padding;
// Child: Full alignment
> .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block[data-align="full"] {
> .wp-block-group__inner-container > .wp-block[data-align="full"],
> .wp-block-group__inner-container > .wp-block.alignfull {
margin-left: -$group-block-background__padding;
width: calc(100% + #{$group-block-background__padding * 2});
max-width: calc(100% + #{$group-block-background__padding * 2});
}
}
}
// Wide and full alignments
&[data-align="wide"] > .is-block-content {
// Wide and full alignments
.wp-block[data-align="wide"] > .wp-block-group {
// Group block base styles.
> .wp-block-group {
// Child blocks: Default alignments
> .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));
}
@include media(desktop) {
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;
}
> .wp-block-group__inner-container > .wp-block:not([data-align="wide"]):not([data-align="full"]):not(.alignwide):not(.alignfull) {
@include media(tablet) {
width: calc(8 * (100vw / 12));
}
// Group block with background color
> .wp-block-group.has-background {
// Child blocks: Default alignments
> .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});
}
@include media(desktop) {
width: calc(6 * (100vw / 12 ) - #{$group-block-background__padding * 2});
}
}
@include media(desktop) {
width: calc(6 * (100vw / 12 ));
}
}
// Full alignment
&[data-align="full"] {
// Child blocks: Full alignment
> .wp-block-group__inner-container > .wp-block[data-align="full"],
> .wp-block-group__inner-container > .wp-block.alignfull {
padding-left: 0;
padding-right: 0;
}
// Group block base styles
> .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 > .block-editor-inner-blocks > .block-editor-block-list__layout {
// Group block with background color
&.has-background {
// Child blocks: Default alignments
> .wp-block-group__inner-container > .wp-block:not([data-align="wide"]):not([data-align="full"]):not(.alignwide):not(.alignfull) {
@include media(tablet) {
width: calc(8 * (100vw / 12) - #{$group-block-background__padding * 2});
}
@include media(mobile) {
padding-left: 46px;
padding-right: 46px;
}
@include media(desktop) {
width: calc(6 * (100vw / 12 ) - #{$group-block-background__padding * 2});
}
}
}
}
// Full alignment
.wp-block[data-align="full"] > .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 {
// 2px of extra padding are added to each side here
// To better match up with the spacing of the whole
// document.
@include media(tablet) {
width: 80%;
margin-left: 10%;
margin-right: 10%;
padding-left: 10px;
padding-right: 10px;
}
// Child blocks: Normal Alignments
> .wp-block:not([data-align="wide"]):not(.alignwide):not([data-align="full"]):not(.alignfull) {
// 2px of extra padding are added to each side here
// To better match up with the spacing of the whole
// document.
@include media(tablet) {
width: 80%;
margin-left: 10%;
margin-right: 10%;
padding-left: 48px;
padding-right: 48px;
max-width: calc(8 * (100vw / 12));
}
// Child blocks: All alignments except full
> .wp-block:not([data-align="full"]) {
max-width: calc(100vw - (2 * 1rem));
@include media(tablet) {
max-width: calc(8 * (100vw / 12));
}
@include media(desktop) {
max-width: calc(6 * (100vw / 12));
}
@include media(desktop) {
max-width: calc(6 * (100vw / 12));
}
}
// Child blocks: Right alignments
> .wp-block[data-align="right"] {
// Child blocks: Not Full Alignments
> .wp-block:not([data-align="full"]):not(.alignfull) {
padding-left: 10px;
padding-right: 10px;
@include media(tablet) {
max-width: 125%;
}
@include media(tablet) {
padding-left: 0;
padding-right: 0;
}
}
// Child blocks: Wide alignments
> .wp-block[data-align="wide"] {
// Child blocks: Right alignments
> .wp-block[data-align="right"] {
@include media(tablet) {
width: calc(100% + 4px);
max-width: calc(100% + 4px);
}
@include media(tablet) {
max-width: 125%;
}
}
// Child blocks: Full alignments
> .wp-block[data-align=full] {
max-width: calc(100vw + (2 * 1rem));
// Child blocks: Wide alignments
> .wp-block[data-align="wide"],
> .wp-block.alignwide {
@include media(mobile) {
width: calc(100% + 92px);
left: -46px;
}
@include media(tablet) {
width: 100%;
max-width: 100%;
}
}
@include media(tablet) {
left: calc(-12.5% - 58px);
width: calc(125% + 120px);
max-width: calc(125% + 119px);
}
// Child blocks: Full alignments
> .wp-block[data-align=full],
> .wp-block.alignfull {
@include media(tablet) {
left: calc( -12.5% - 13px );
width: calc( 125% + 26px );
max-width: calc( 125% + 25px );
}
}
}
// Group block with background color
> .is-block-content > .wp-block-group.has-background {
&.has-background {
// When the Group block is full width, we can remove the left/right padding
// and let this inherit the
// When the Group block is full width, we can remove the left/right padding.
padding: $group-block-background__padding 0;
@include media(mobile) {
@ -932,7 +941,8 @@ $group-block-background__padding: $font__size_base;
}
// Child blocks: Full alignment
> .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block[data-align="full"] {
> .wp-block-group__inner-container > .wp-block[data-align="full"],
> .wp-block-group__inner-container > .wp-block.alignfull {
margin-left: 0;
width: 100%;
@ -946,4 +956,3 @@ $group-block-background__padding: $font__size_base;
}
}
}
}

21
src/wp-content/themes/twentynineteen/style-rtl.css
View File

@ -5640,7 +5640,7 @@ body.page .main-navigation {
}
@-moz-document url-prefix() {
.entry .entry-content .has-drop-cap:not(:focus):first-letter {
.entry .entry-content .has-drop-cap:not(:focus)::first-letter {
margin-top: 0.2em;
}
}
@ -6023,25 +6023,6 @@ body.page .main-navigation {
* is followed by an H1, or H2 */
}
.entry .entry-content .wp-block-separator:not(.wp-block-separator),
.entry .entry-content hr:not(.wp-block-separator) {
max-width: 100%;
}
@media only screen and (min-width: 768px) {
.entry .entry-content .wp-block-separator:not(.wp-block-separator),
.entry .entry-content hr:not(.wp-block-separator) {
max-width: calc(8 * (100vw / 12) - 28px);
}
}
@media only screen and (min-width: 1168px) {
.entry .entry-content .wp-block-separator:not(.wp-block-separator),
.entry .entry-content hr:not(.wp-block-separator) {
max-width: calc(6 * (100vw / 12) - 28px);
}
}
.entry .entry-content .wp-block-separator.is-style-wide,
.entry .entry-content hr.is-style-wide {
max-width: 100%;