WordPress.org
Get WordPress

Make WordPress Core

Changeset 47327


Ignore:
Timestamp:
02/20/2020 04:38:38 PM (5 years 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.

Location:
trunk/src/wp-content/themes/twentynineteen
Files:
2 edited

Legend:

Unmodified
Added
Removed

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

    r46586 r47327  
    552552/** === Editor Frame === */
    553553body .wp-block[data-align="full"] {
    554   width: 100%;
     554  width: calc(100% + 28px);
     555  max-width: calc(100% + 28px);
    555556}
    556557
    557558@media only screen and (min-width: 600px) {
    558559  body .wp-block[data-align="full"] {
    559     width: calc( 100% + 90px);
    560     max-width: calc( 100% + 90px);
     560    width: calc( 100% + 116px);
     561    max-width: calc( 100% + 115px);
    561562  }
    562563}
    … …  
    567568    margin: 0 10%;
    568569  }
    569   body .editor-post-title__block,
    570570  body .editor-default-block-appender,
    571571  body .editor-block-list__block {
    … …  
    576576    width: 100%;
    577577  }
    578   body .wp-block[data-align="full"] {
    579     position: relative;
    580     left: calc( -12.5% - 14px);
    581     width: calc( 125% + 116px);
    582     max-width: calc( 125% + 115px);
    583   }
    584578  body .wp-block[data-align="right"] {
    585579    max-width: 125%;
    … …  
    589583/** === Content Width === */
    590584.wp-block {
    591   width: calc(100vw - (2 * 1rem));
    592585  max-width: 100%;
    593586}
    … …  
    780773  margin-top: 0;
    781774  margin-bottom: 0;
    782   margin-left: 1em;
     775  margin-left: 1rem;
    783776  position: relative;
    784777  top: 0.5em;
     778}
     779
     780@media only screen and (min-width: 600px) {
     781  .editor-post-title__block:before {
     782    margin-left: 0;
     783  }
    785784}
    786785
    … …  
    792791
    793792/** === Default Appender === */
    794 .editor-default-block-appender .editor-default-block-appender__content {
     793.block-editor-default-block-appender textarea.block-editor-default-block-appender__content {
    795794  font-family: "NonBreakingSpaceOverride", "Hoefler Text", Garamond, "Times New Roman", serif;
    796795  font-size: 22px;
    … …  
    13151314
    13161315/** === Group Block === */
    1317 .wp-block[data-type="core/group"] > .editor-block-list__block-edit > div > .wp-block-group > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] {
    1318   left: 0;
    1319 }
    1320 
    1321 .wp-block[data-type="core/group"] > .editor-block-list__block-edit > div > .wp-block-group.has-background {
     1316.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"] {
     1317  margin-left: 0;
     1318  margin-right: 0;
     1319}
     1320
     1321.wp-block[data-type="core/group"] > .wp-block-group.has-background {
    13221322  padding: 22px;
    13231323}
    13241324
    1325 .wp-block[data-type="core/group"] > .editor-block-list__block-edit > div > .wp-block-group.has-background > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] {
     1325.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"] {
    13261326  margin-left: -22px;
    13271327  width: calc(100% + 44px);
    … …  
    13301330
    13311331@media only screen and (min-width: 768px) {
    1332   .wp-block[data-type="core/group"][data-align="wide"] > .editor-block-list__block-edit > div > .wp-block-group > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block:not([data-align="wide"]):not([data-align="full"]) {
     1332  .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"]) {
    13331333    width: calc(8 * (100vw / 12));
    13341334  }
    … …  
    13361336
    13371337@media only screen and (min-width: 1168px) {
    1338   .wp-block[data-type="core/group"][data-align="wide"] > .editor-block-list__block-edit > div > .wp-block-group > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block:not([data-align="wide"]):not([data-align="full"]) {
     1338  .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"]) {
    13391339    width: calc(6 * (100vw / 12 ));
    13401340  }
    13411341}
    13421342
    1343 @media only screen and (min-width: 768px) {
    1344   .wp-block[data-type="core/group"][data-align="wide"] > .editor-block-list__block-edit > div > .wp-block-group.has-background > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block:not([data-align="wide"]):not([data-align="full"]) {
     1343.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"] {
     1344  padding-left: 0;
     1345  padding-right: 0;
     1346}
     1347
     1348@media only screen and (min-width: 768px) {
     1349  .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"]) {
    13451350    width: calc(8 * (100vw / 12) - 44px);
    13461351  }
    … …  
    13481353
    13491354@media only screen and (min-width: 1168px) {
    1350   .wp-block[data-type="core/group"][data-align="wide"] > .editor-block-list__block-edit > div > .wp-block-group.has-background > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block:not([data-align="wide"]):not([data-align="full"]) {
     1355  .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"]) {
    13511356    width: calc(6 * (100vw / 12 ) - 44px);
    13521357  }
    … …  
    13541359
    13551360@media only screen and (min-width: 600px) {
    1356   .wp-block[data-type="core/group"][data-align="full"] {
    1357     max-width: calc(100% + 89px);
    1358   }
    1359 }
    1360 
    1361 @media only screen and (min-width: 768px) {
    1362   .wp-block[data-type="core/group"][data-align="full"] {
    1363     max-width: calc(125% + 114px);
    1364   }
    1365 }
    1366 
    1367 @media only screen and (min-width: 600px) {
    1368   .wp-block[data-type="core/group"][data-align="full"] > .editor-block-list__block-edit > div > .wp-block-group > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout {
     1361  .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 {
    13691362    padding-left: 46px;
    13701363    padding-right: 46px;
    … …  
    13731366
    13741367@media only screen and (min-width: 768px) {
    1375   .wp-block[data-type="core/group"][data-align="full"] > .editor-block-list__block-edit > div > .wp-block-group > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout {
     1368  .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 {
    13761369    width: 80%;
    13771370    margin-left: 10%;
    … …  
    13821375}
    13831376
    1384 .wp-block[data-type="core/group"][data-align="full"] > .editor-block-list__block-edit > div > .wp-block-group > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block:not([data-align="full"]) {
     1377.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"]) {
    13851378  max-width: calc(100vw - (2 * 1rem));
    13861379}
    13871380
    13881381@media only screen and (min-width: 768px) {
    1389   .wp-block[data-type="core/group"][data-align="full"] > .editor-block-list__block-edit > div > .wp-block-group > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block:not([data-align="full"]) {
     1382  .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"]) {
    13901383    max-width: calc(8 * (100vw / 12));
    13911384  }
    … …  
    13931386
    13941387@media only screen and (min-width: 1168px) {
    1395   .wp-block[data-type="core/group"][data-align="full"] > .editor-block-list__block-edit > div > .wp-block-group > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block:not([data-align="full"]) {
     1388  .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"]) {
    13961389    max-width: calc(6 * (100vw / 12));
    13971390  }
    … …  
    13991392
    14001393@media only screen and (min-width: 768px) {
    1401   .wp-block[data-type="core/group"][data-align="full"] > .editor-block-list__block-edit > div > .wp-block-group > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="right"] {
     1394  .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"] {
    14021395    max-width: 125%;
    14031396  }
    … …  
    14051398
    14061399@media only screen and (min-width: 768px) {
    1407   .wp-block[data-type="core/group"][data-align="full"] > .editor-block-list__block-edit > div > .wp-block-group > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="wide"] {
     1400  .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"] {
    14081401    width: calc(100% + 4px);
    14091402    max-width: calc(100% + 4px);
    … …  
    14111404}
    14121405
    1413 .wp-block[data-type="core/group"][data-align="full"] > .editor-block-list__block-edit > div > .wp-block-group > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align=full] {
     1406.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] {
    14141407  max-width: calc(100vw + (2 * 1rem));
    14151408}
    14161409
    14171410@media only screen and (min-width: 600px) {
    1418   .wp-block[data-type="core/group"][data-align="full"] > .editor-block-list__block-edit > div > .wp-block-group > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align=full] {
     1411  .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] {
    14191412    width: calc(100% + 92px);
    14201413    left: -46px;
    … …  
    14231416
    14241417@media only screen and (min-width: 768px) {
    1425   .wp-block[data-type="core/group"][data-align="full"] > .editor-block-list__block-edit > div > .wp-block-group > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align=full] {
     1418  .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] {
    14261419    left: calc(-12.5% - 58px);
    14271420    width: calc(125% + 120px);
    … …  
    14301423}
    14311424
    1432 .wp-block[data-type="core/group"][data-align="full"] > .editor-block-list__block-edit > div > .wp-block-group.has-background {
     1425.wp-block[data-type="core/group"][data-align="full"] > .is-block-content > .wp-block-group.has-background {
    14331426  padding: 22px 0;
    14341427}
    14351428
    14361429@media only screen and (min-width: 600px) {
    1437   .wp-block[data-type="core/group"][data-align="full"] > .editor-block-list__block-edit > div > .wp-block-group.has-background {
     1430  .wp-block[data-type="core/group"][data-align="full"] > .is-block-content > .wp-block-group.has-background {
    14381431    padding-left: 0;
    14391432    padding-right: 0;
    … …  
    14411434}
    14421435
    1443 .wp-block[data-type="core/group"][data-align="full"] > .editor-block-list__block-edit > div > .wp-block-group.has-background > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] {
     1436.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"] {
    14441437  margin-left: 0;
    14451438  width: 100%;
    … …  
    14471440
    14481441@media only screen and (min-width: 600px) {
    1449   .wp-block[data-type="core/group"][data-align="full"] > .editor-block-list__block-edit > div > .wp-block-group.has-background > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] {
     1442  .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"] {
    14501443    width: calc(100% + 92px);
    14511444  }
    … …  
    14531446
    14541447@media only screen and (min-width: 768px) {
    1455   .wp-block[data-type="core/group"][data-align="full"] > .editor-block-list__block-edit > div > .wp-block-group.has-background > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] {
     1448  .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"] {
    14561449    width: calc(125% + 120px);
    14571450  }

  • 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.