WordPress.org

Make WordPress Core


Ignore:
Timestamp:
02/20/2020 04:38:38 PM (19 months ago)
Author:
ianbelanger
Message:

Bundled Themes: Twenty Nineteen Update margins in editor styles to address upcoming block editor margin changes.

Fixes the margins in the block editor to address recent changes in block margins.

Props Joen, SergeyBiryukov, kjellr, jffng, allancole.
Fixes #48526.

File:
1 edited

Legend:

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

    r46587 r47327  
    1313
    1414    .wp-block[data-align="full"] {
    15         width: 100%;
     15        width: calc(100% + 28px);
     16        max-width: calc(100% + 28px);
    1617    }
    1718
     
    1920
    2021        .wp-block[data-align="full"] {
    21             width: calc( 100% + 90px );
    22             max-width: calc( 100% + 90px );
     22            width: calc( 100% + 116px );
     23            max-width: calc( 100% + 115px );
    2324        }
    2425    }
     
    3132        }
    3233
    33         .editor-post-title__block,
    3434        .editor-default-block-appender,
    3535        .editor-block-list__block {
     
    4242        }
    4343
    44         .wp-block[data-align="full"] {
    45             position: relative;
    46             left: calc( -12.5% - 14px );
    47             width: calc( 125% + 116px );
    48             max-width: calc( 125% + 115px ); // Subtract 1px here to avoid the rounding errors that happen due to the usage of percentages.
    49         }
    50 
    5144        .wp-block[data-align="right"] {
    5245            max-width: 125%;
     
    5851
    5952.wp-block {
    60     width: calc(100vw - (2 * #{$size__spacing-unit}));
    6153    max-width: 100%;
    6254
     
    205197        margin-top: 0;
    206198        margin-bottom: 0;
    207         margin-left: 1em;
     199        margin-left: 1rem;
    208200        position: relative;
    209201        top: 0.5em;
     202
     203        @include media(mobile) {
     204            margin-left: 0;
     205        }
    210206    }
    211207
     
    219215/** === Default Appender === */
    220216
    221 .editor-default-block-appender .editor-default-block-appender__content {
     217.block-editor-default-block-appender textarea.block-editor-default-block-appender__content {
    222218    @include font-family( $font__body );
    223219    font-size: $font__size_base;
     
    781777
    782778    // Group block base styles
    783     > .editor-block-list__block-edit > div > .wp-block-group {
     779    > .wp-block-group {
    784780
    785781        // Child: Full alignment
    786         > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] {
    787             left: 0;
     782        > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block[data-align="full"] {
     783            margin-left: 0;
     784            margin-right: 0;
    788785        }
    789786    }
    790787
    791788    // Group block with background color
    792     > .editor-block-list__block-edit > div > .wp-block-group.has-background {
     789    > .wp-block-group.has-background {
    793790        padding: $group-block-background__padding;
    794791
    795792        // Child: Full alignment
    796         > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] {
     793        > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block[data-align="full"] {
    797794            margin-left: -$group-block-background__padding;
    798795            width: calc(100% + #{$group-block-background__padding * 2});
     
    802799
    803800    // Wide and full alignments
    804     &[data-align="wide"] {
     801    &[data-align="wide"] > .is-block-content {
    805802
    806803        // Group block base styles.
    807         > .editor-block-list__block-edit > div > .wp-block-group {
     804        > .wp-block-group {
    808805
    809806            // Child blocks: Default alignments
    810             > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block:not([data-align="wide"]):not([data-align="full"]) {
     807            > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block:not([data-align="wide"]):not([data-align="full"]) {
    811808                @include media(tablet) {
    812809                    width: calc(8 * (100vw / 12));
     
    817814                }
    818815            }
     816
     817            // Child blocks: Full alignment
     818            > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block[data-align="full"] {
     819                padding-left: 0;
     820                padding-right: 0;
     821            }
    819822        }
    820823
    821824        // Group block with background color
    822         > .editor-block-list__block-edit > div > .wp-block-group.has-background {
     825        > .wp-block-group.has-background {
    823826           
    824827            // Child blocks: Default alignments
    825             > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block:not([data-align="wide"]):not([data-align="full"]) {
     828            > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block:not([data-align="wide"]):not([data-align="full"]) {
    826829                @include media(tablet) {
    827830                    width: calc(8 * (100vw / 12) - #{$group-block-background__padding * 2});
     
    838841    &[data-align="full"] {
    839842
    840         // Max-width needs to be a pixel narrower than usual to prevent horizontal scrolling.
    841         @include media(mobile) {
    842             max-width: calc(100% + 89px);
    843         }
    844         @include media(tablet) {
    845             max-width: calc(125% + 114px);
    846         }
    847 
    848843        // Group block base styles
    849         > .editor-block-list__block-edit > div > .wp-block-group {
     844        > .is-block-content > .wp-block-group {
    850845
    851846            // Margins & padding are added to this container to mimic
     
    853848            // container. This way, child items sync up with the placement
    854849            // and size of other top-level blocks.
    855             > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout {
     850            > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout {
    856851
    857852                @include media(mobile) {
     
    920915
    921916        // Group block with background color
    922         > .editor-block-list__block-edit > div > .wp-block-group.has-background {
     917        > .is-block-content > .wp-block-group.has-background {
    923918
    924919            // When the Group block is full width, we can remove the left/right padding
     
    932927
    933928            // Child blocks: Full alignment
    934             > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] {
     929            > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block[data-align="full"] {
    935930                margin-left: 0;
    936931                width: 100%;
Note: See TracChangeset for help on using the changeset viewer.