WordPress.org
Get WordPress

Make WordPress Core


Ignore:
Timestamp:
07/24/2020 05:46:20 PM (5 years ago)
Author:
whyisjake
Message:

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

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.

File:
1 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-content/themes/twentynineteen/style-editor.scss

    r48047 r48602  
    1212body {
    1313
    14     .wp-block[data-align="full"] {
    15         width: calc(100% + 28px);
    16         max-width: calc(100% + 28px);
    17     }
    18 
    19     @include media(mobile) {
    20 
    21         .wp-block[data-align="full"] {
    22             width: calc( 100% + 116px );
    23             max-width: calc( 100% + 115px );
    24         }
     14    .wp-block[data-align="full"],
     15    .wp-block.alignfull {
     16        width: calc(100% + 20px);
     17        max-width: calc(100% + 20px);
     18    }
     19
     20    .wp-block[data-align="left"],
     21    .wp-block.alignleft, {
     22        margin-right: $size__spacing-unit;
     23        width: inherit;
     24    }
     25
     26    .wp-block[data-align="right"],
     27    .wp-block.alignright, {
     28        margin-left: $size__spacing-unit;
     29        width: inherit;
     30    }
     31
     32    .wp-block[data-align="center"],
     33    .wp-block.aligncenter, {
     34        margin-left: 0;
    2535    }
    2636
    2737    @include media(tablet) {
    2838
    29         .editor-writing-flow {
     39        .block-editor-writing-flow {
    3040            max-width: 80%;
    3141            margin: 0 10%;
    3242        }
    3343
    34         .editor-default-block-appender,
    35         .editor-block-list__block {
     44        .block-editor-default-block-appender,
     45        .block-editor-block-list__block {
    3646            margin-left: 0;
    3747            margin-right: 0;
    3848        }
    3949
    40         .wp-block[data-align="wide"] {
     50        .wp-block[data-align="wide"],
     51        .wp-block.alignwide {
    4152            width: 100%;
    4253        }
    4354
    44         .wp-block[data-align="right"] {
    45             max-width: 125%;
     55        .wp-block[data-align="full"],
     56        .wp-block.alignfull {
     57            width: calc( 125% + 20px );
     58            max-width: calc( 125% + 20px );
     59            position: relative;
     60            left: -12.5%;
    4661        }
    4762    }
    … …  
    191206
    192207.editor-post-title__block {
     208    width: 100%;
    193209    @include post-section-dash;
    194210
    … …  
    780796$group-block-background__padding: $font__size_base;
    781797
    782 .wp-block[data-type="core/group"] {
    783 
    784     // Group block base styles
    785     > .wp-block-group {
     798.wp-block-group {
     799
     800    // Child: Full alignment
     801    > .wp-block-group__inner-container > .wp-block[data-align="full"],
     802    > .wp-block-group__inner-container > .wp-block.alignfull {
     803        margin-left: 0;
     804        margin-right: 0;
     805        left: 0;
     806    }
     807
     808    // Group block with background color
     809    &.has-background {
     810        padding: $group-block-background__padding;
    786811
    787812        // Child: Full alignment
    788         > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block[data-align="full"] {
    789             margin-left: 0;
    790             margin-right: 0;
    791         }
    792     }
    793 
    794     // Group block with background color
    795     > .wp-block-group.has-background {
    796         padding: $group-block-background__padding;
    797 
    798         // Child: Full alignment
    799         > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block[data-align="full"] {
     813        > .wp-block-group__inner-container > .wp-block[data-align="full"],
     814        > .wp-block-group__inner-container > .wp-block.alignfull {
    800815            margin-left: -$group-block-background__padding;
    801816            width: calc(100% + #{$group-block-background__padding * 2});
    … …  
    803818        }
    804819    }
    805 
    806     // Wide and full alignments
    807     &[data-align="wide"] > .is-block-content {
    808 
    809         // Group block base styles.
    810         > .wp-block-group {
    811 
    812             // Child blocks: Default alignments
    813             > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block:not([data-align="wide"]):not([data-align="full"]) {
     820}
     821
     822// Wide and full alignments
     823.wp-block[data-align="wide"] > .wp-block-group {
     824
     825    > .wp-block-group__inner-container > .wp-block:not([data-align="wide"]):not([data-align="full"]):not(.alignwide):not(.alignfull) {
     826        @include media(tablet) {
     827            width: calc(8 * (100vw / 12));
     828        }
     829
     830        @include media(desktop) {
     831            width: calc(6 * (100vw / 12 ));
     832        }
     833    }
     834
     835    // Child blocks: Full alignment
     836    > .wp-block-group__inner-container > .wp-block[data-align="full"],
     837    > .wp-block-group__inner-container > .wp-block.alignfull {
     838        padding-left: 0;
     839        padding-right: 0;
     840    }
     841
     842
     843    // Group block with background color
     844    &.has-background {
     845       
     846        // Child blocks: Default alignments
     847        > .wp-block-group__inner-container > .wp-block:not([data-align="wide"]):not([data-align="full"]):not(.alignwide):not(.alignfull) {
     848            @include media(tablet) {
     849                width: calc(8 * (100vw / 12) - #{$group-block-background__padding * 2});
     850            }
     851
     852            @include media(desktop) {
     853                width: calc(6 * (100vw / 12 ) - #{$group-block-background__padding * 2});
     854            }
     855        }
     856    }
     857}
     858
     859// Full alignment
     860.wp-block[data-align="full"] > .wp-block-group {
     861
     862        // Margins & padding are added to this container to mimic
     863        // the style + spacing of the .editor-writing-flow global
     864        // container. This way, child items sync up with the placement
     865        // and size of other top-level blocks.
     866        > .wp-block-group__inner-container {
     867
     868            // 2px of extra padding are added to each side here
     869            // To better match up with the spacing of the whole
     870            // document.
     871            @include media(tablet) {
     872                width: 80%;
     873                margin-left: 10%;
     874                margin-right: 10%;
     875                padding-left: 10px;
     876                padding-right: 10px;
     877            }
     878
     879            // Child blocks: Normal Alignments
     880            > .wp-block:not([data-align="wide"]):not(.alignwide):not([data-align="full"]):not(.alignfull) {
     881
    814882                @include media(tablet) {
    815                     width: calc(8 * (100vw / 12));
     883                    max-width: calc(8 * (100vw / 12));
    816884                }
    817885
    818886                @include media(desktop) {
    819                     width: calc(6 * (100vw / 12 ));
     887                    max-width: calc(6 * (100vw / 12));
    820888                }
    821889            }
    822890
    823             // Child blocks: Full alignment
    824             > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block[data-align="full"] {
    825                 padding-left: 0;
    826                 padding-right: 0;
     891            // Child blocks: Not Full Alignments
     892            > .wp-block:not([data-align="full"]):not(.alignfull) {
     893                padding-left: 10px;
     894                padding-right: 10px;
     895
     896                @include media(tablet) {
     897                    padding-left: 0;
     898                    padding-right: 0;
     899                }
     900            }
     901
     902            // Child blocks: Right alignments
     903            > .wp-block[data-align="right"] {
     904
     905                @include media(tablet) {
     906                    max-width: 125%;
     907                }
     908            }
     909
     910            // Child blocks: Wide alignments
     911            > .wp-block[data-align="wide"],
     912            > .wp-block.alignwide {
     913
     914                @include media(tablet) {
     915                    width: 100%;
     916                    max-width: 100%;
     917                }
     918            }
     919
     920            // Child blocks: Full alignments
     921            > .wp-block[data-align=full],
     922            > .wp-block.alignfull {
     923
     924                @include media(tablet) {
     925                    left: calc( -12.5% - 13px );
     926                    width: calc( 125% + 26px );
     927                    max-width: calc( 125% + 25px );
     928                }
    827929            }
    828930        }
    829931
    830932        // Group block with background color
    831         > .wp-block-group.has-background {
    832            
    833             // Child blocks: Default alignments
    834             > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block:not([data-align="wide"]):not([data-align="full"]) {
    835                 @include media(tablet) {
    836                     width: calc(8 * (100vw / 12) - #{$group-block-background__padding * 2});
    837                 }
    838 
    839                 @include media(desktop) {
    840                     width: calc(6 * (100vw / 12 ) - #{$group-block-background__padding * 2});
    841                 }
    842             }
    843         }
    844     }
    845 
    846     // Full alignment
    847     &[data-align="full"] {
    848 
    849         // Group block base styles
    850         > .is-block-content > .wp-block-group {
    851 
    852             // Margins & padding are added to this container to mimic
    853             // the style + spacing of the .editor-writing-flow global
    854             // container. This way, child items sync up with the placement
    855             // and size of other top-level blocks.
    856             > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout {
    857 
    858                 @include media(mobile) {
    859                     padding-left: 46px;
    860                     padding-right: 46px;
    861                 }
    862 
    863                 // 2px of extra padding are added to each side here
    864                 // To better match up with the spacing of the whole
    865                 // document.
    866                 @include media(tablet) {
    867                     width: 80%;
    868                     margin-left: 10%;
    869                     margin-right: 10%;
    870                     padding-left: 48px;
    871                     padding-right: 48px;
    872                 }
    873 
    874                 // Child blocks: All alignments except full
    875                  > .wp-block:not([data-align="full"]) {
    876                     max-width: calc(100vw - (2 * 1rem));
    877 
    878                     @include media(tablet) {
    879                         max-width: calc(8 * (100vw / 12));
    880                     }
    881 
    882                     @include media(desktop) {
    883                         max-width: calc(6 * (100vw / 12));
    884                     }
    885                 }
    886 
    887                 // Child blocks: Right alignments
    888                 > .wp-block[data-align="right"] {
    889 
    890                     @include media(tablet) {
    891                         max-width: 125%;
    892                     }
    893                 }
    894 
    895                 // Child blocks: Wide alignments
    896                 > .wp-block[data-align="wide"] {
    897 
    898                     @include media(tablet) {
    899                         width: calc(100% + 4px);
    900                         max-width: calc(100% + 4px);
    901                     }
    902                 }
    903 
    904                 // Child blocks: Full alignments
    905                 > .wp-block[data-align=full] {
    906                     max-width: calc(100vw + (2 * 1rem));
    907 
    908                     @include media(mobile) {
    909                         width: calc(100% + 92px);
    910                         left: -46px;
    911                     }
    912 
    913                     @include media(tablet) {
    914                         left: calc(-12.5% - 58px);
    915                         width: calc(125% + 120px);
    916                         max-width: calc(125% + 119px);
    917                     }
    918                 }
    919             }
    920         }
    921 
    922         // Group block with background color
    923         > .is-block-content > .wp-block-group.has-background {
    924 
    925             // When the Group block is full width, we can remove the left/right padding
    926             // and let this inherit the
     933        &.has-background {
     934
     935            // When the Group block is full width, we can remove the left/right padding.
    927936            padding: $group-block-background__padding 0;
    928937
    … …  
    933942
    934943            // Child blocks: Full alignment
    935             > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block[data-align="full"] {
     944            > .wp-block-group__inner-container > .wp-block[data-align="full"],
     945            > .wp-block-group__inner-container > .wp-block.alignfull {
    936946                margin-left: 0;
    937947                width: 100%;
    … …  
    947957        }
    948958    }
    949 }
Note: See TracChangeset for help on using the changeset viewer.