WordPress.org

Make WordPress Core

Changeset 48602


Ignore:
Timestamp:
07/24/2020 05:46:20 PM (2 months 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.

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

Legend:

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

    r48047 r48602  
    551551
    552552/** === Editor Frame === */
    553 body .wp-block[data-align="full"] {
    554   width: calc(100% + 28px);
    555   max-width: calc(100% + 28px);
    556 }
    557 
    558 @media only screen and (min-width: 600px) {
    559   body .wp-block[data-align="full"] {
    560     width: calc( 100% + 116px);
    561     max-width: calc( 100% + 115px);
    562   }
    563 }
    564 
    565 @media only screen and (min-width: 768px) {
    566   body .editor-writing-flow {
     553body .wp-block[data-align="full"],
     554body .wp-block.alignfull {
     555  width: calc(100% + 20px);
     556  max-width: calc(100% + 20px);
     557}
     558
     559body .wp-block[data-align="left"],
     560body .wp-block.alignleft {
     561  margin-right: 1rem;
     562  width: inherit;
     563}
     564
     565body .wp-block[data-align="right"],
     566body .wp-block.alignright {
     567  margin-left: 1rem;
     568  width: inherit;
     569}
     570
     571body .wp-block[data-align="center"],
     572body .wp-block.aligncenter {
     573  margin-left: 0;
     574}
     575
     576@media only screen and (min-width: 768px) {
     577  body .block-editor-writing-flow {
    567578    max-width: 80%;
    568579    margin: 0 10%;
    569580  }
    570   body .editor-default-block-appender,
    571   body .editor-block-list__block {
     581  body .block-editor-default-block-appender,
     582  body .block-editor-block-list__block {
    572583    margin-left: 0;
    573584    margin-right: 0;
    574585  }
    575   body .wp-block[data-align="wide"] {
     586  body .wp-block[data-align="wide"],
     587  body .wp-block.alignwide {
    576588    width: 100%;
    577589  }
    578   body .wp-block[data-align="right"] {
    579     max-width: 125%;
     590  body .wp-block[data-align="full"],
     591  body .wp-block.alignfull {
     592    width: calc( 125% + 20px);
     593    max-width: calc( 125% + 20px);
     594    position: relative;
     595    left: -12.5%;
    580596  }
    581597}
     
    778794
    779795/** === Post Title === */
     796.editor-post-title__block {
     797  width: 100%;
     798}
     799
    780800.editor-post-title__block:before {
    781801  background: #767676;
     
    13471367
    13481368/** === Group Block === */
    1349 .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"] {
     1369.wp-block-group > .wp-block-group__inner-container > .wp-block[data-align="full"],
     1370.wp-block-group > .wp-block-group__inner-container > .wp-block.alignfull {
    13501371  margin-left: 0;
    13511372  margin-right: 0;
    1352 }
    1353 
    1354 .wp-block[data-type="core/group"] > .wp-block-group.has-background {
     1373  left: 0;
     1374}
     1375
     1376.wp-block-group.has-background {
    13551377  padding: 22px;
    13561378}
    13571379
    1358 .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"] {
     1380.wp-block-group.has-background > .wp-block-group__inner-container > .wp-block[data-align="full"],
     1381.wp-block-group.has-background > .wp-block-group__inner-container > .wp-block.alignfull {
    13591382  margin-left: -22px;
    13601383  width: calc(100% + 44px);
     
    13631386
    13641387@media only screen and (min-width: 768px) {
    1365   .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"]) {
     1388  .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) {
    13661389    width: calc(8 * (100vw / 12));
    13671390  }
     
    13691392
    13701393@media only screen and (min-width: 1168px) {
    1371   .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"]) {
     1394  .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) {
    13721395    width: calc(6 * (100vw / 12 ));
    13731396  }
    13741397}
    13751398
    1376 .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"] {
     1399.wp-block[data-align="wide"] > .wp-block-group > .wp-block-group__inner-container > .wp-block[data-align="full"],
     1400.wp-block[data-align="wide"] > .wp-block-group > .wp-block-group__inner-container > .wp-block.alignfull {
    13771401  padding-left: 0;
    13781402  padding-right: 0;
     
    13801404
    13811405@media only screen and (min-width: 768px) {
    1382   .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"]) {
     1406  .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) {
    13831407    width: calc(8 * (100vw / 12) - 44px);
    13841408  }
     
    13861410
    13871411@media only screen and (min-width: 1168px) {
    1388   .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"]) {
     1412  .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) {
    13891413    width: calc(6 * (100vw / 12 ) - 44px);
    13901414  }
    13911415}
    13921416
    1393 @media only screen and (min-width: 600px) {
    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 {
    1395     padding-left: 46px;
    1396     padding-right: 46px;
    1397   }
    1398 }
    1399 
    1400 @media only screen and (min-width: 768px) {
    1401   .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 {
     1417@media only screen and (min-width: 768px) {
     1418  .wp-block[data-align="full"] > .wp-block-group > .wp-block-group__inner-container {
    14021419    width: 80%;
    14031420    margin-left: 10%;
    14041421    margin-right: 10%;
    1405     padding-left: 48px;
    1406     padding-right: 48px;
    1407   }
    1408 }
    1409 
    1410 .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"]) {
    1411   max-width: calc(100vw - (2 * 1rem));
    1412 }
    1413 
    1414 @media only screen and (min-width: 768px) {
    1415   .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"]) {
     1422    padding-left: 10px;
     1423    padding-right: 10px;
     1424  }
     1425}
     1426
     1427@media only screen and (min-width: 768px) {
     1428  .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) {
    14161429    max-width: calc(8 * (100vw / 12));
    14171430  }
     
    14191432
    14201433@media only screen and (min-width: 1168px) {
    1421   .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"]) {
     1434  .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) {
    14221435    max-width: calc(6 * (100vw / 12));
    14231436  }
    14241437}
    14251438
    1426 @media only screen and (min-width: 768px) {
    1427   .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"] {
    1428     max-width: 125%;
    1429   }
    1430 }
    1431 
    1432 @media only screen and (min-width: 768px) {
    1433   .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"] {
    1434     width: calc(100% + 4px);
    1435     max-width: calc(100% + 4px);
    1436   }
    1437 }
    1438 
    1439 .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] {
    1440   max-width: calc(100vw + (2 * 1rem));
    1441 }
    1442 
    1443 @media only screen and (min-width: 600px) {
    1444   .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] {
    1445     width: calc(100% + 92px);
    1446     left: -46px;
    1447   }
    1448 }
    1449 
    1450 @media only screen and (min-width: 768px) {
    1451   .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] {
    1452     left: calc(-12.5% - 58px);
    1453     width: calc(125% + 120px);
    1454     max-width: calc(125% + 119px);
    1455   }
    1456 }
    1457 
    1458 .wp-block[data-type="core/group"][data-align="full"] > .is-block-content > .wp-block-group.has-background {
    1459   padding: 22px 0;
    1460 }
    1461 
    1462 @media only screen and (min-width: 600px) {
    1463   .wp-block[data-type="core/group"][data-align="full"] > .is-block-content > .wp-block-group.has-background {
     1439.wp-block[data-align="full"] > .wp-block-group > .wp-block-group__inner-container > .wp-block:not([data-align="full"]):not(.alignfull) {
     1440  padding-left: 10px;
     1441  padding-right: 10px;
     1442}
     1443
     1444@media only screen and (min-width: 768px) {
     1445  .wp-block[data-align="full"] > .wp-block-group > .wp-block-group__inner-container > .wp-block:not([data-align="full"]):not(.alignfull) {
    14641446    padding-left: 0;
    14651447    padding-right: 0;
     
    14671449}
    14681450
    1469 .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"] {
     1451@media only screen and (min-width: 768px) {
     1452  .wp-block[data-align="full"] > .wp-block-group > .wp-block-group__inner-container > .wp-block[data-align="right"] {
     1453    max-width: 125%;
     1454  }
     1455}
     1456
     1457@media only screen and (min-width: 768px) {
     1458  .wp-block[data-align="full"] > .wp-block-group > .wp-block-group__inner-container > .wp-block[data-align="wide"],
     1459  .wp-block[data-align="full"] > .wp-block-group > .wp-block-group__inner-container > .wp-block.alignwide {
     1460    width: 100%;
     1461    max-width: 100%;
     1462  }
     1463}
     1464
     1465@media only screen and (min-width: 768px) {
     1466  .wp-block[data-align="full"] > .wp-block-group > .wp-block-group__inner-container > .wp-block[data-align=full],
     1467  .wp-block[data-align="full"] > .wp-block-group > .wp-block-group__inner-container > .wp-block.alignfull {
     1468    left: calc( -12.5% - 13px);
     1469    width: calc( 125% + 26px);
     1470    max-width: calc( 125% + 25px);
     1471  }
     1472}
     1473
     1474.wp-block[data-align="full"] > .wp-block-group.has-background {
     1475  padding: 22px 0;
     1476}
     1477
     1478@media only screen and (min-width: 600px) {
     1479  .wp-block[data-align="full"] > .wp-block-group.has-background {
     1480    padding-left: 0;
     1481    padding-right: 0;
     1482  }
     1483}
     1484
     1485.wp-block[data-align="full"] > .wp-block-group.has-background > .wp-block-group__inner-container > .wp-block[data-align="full"],
     1486.wp-block[data-align="full"] > .wp-block-group.has-background > .wp-block-group__inner-container > .wp-block.alignfull {
    14701487  margin-left: 0;
    14711488  width: 100%;
     
    14731490
    14741491@media only screen and (min-width: 600px) {
    1475   .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"] {
     1492  .wp-block[data-align="full"] > .wp-block-group.has-background > .wp-block-group__inner-container > .wp-block[data-align="full"],
     1493  .wp-block[data-align="full"] > .wp-block-group.has-background > .wp-block-group__inner-container > .wp-block.alignfull {
    14761494    width: calc(100% + 92px);
    14771495  }
     
    14791497
    14801498@media only screen and (min-width: 768px) {
    1481   .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"] {
     1499  .wp-block[data-align="full"] > .wp-block-group.has-background > .wp-block-group__inner-container > .wp-block[data-align="full"],
     1500  .wp-block[data-align="full"] > .wp-block-group.has-background > .wp-block-group__inner-container > .wp-block.alignfull {
    14821501    width: calc(125% + 120px);
    14831502  }
  • 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 }
  • trunk/src/wp-content/themes/twentynineteen/style-rtl.css

    r48514 r48602  
    56415641
    56425642@-moz-document url-prefix() {
    5643   .entry .entry-content .has-drop-cap:not(:focus):first-letter {
     5643  .entry .entry-content .has-drop-cap:not(:focus)::first-letter {
    56445644    margin-top: 0.2em;
    56455645  }
     
    60226022  /* Remove duplicate rule-line when a separator
    60236023         * is followed by an H1, or H2 */
    6024 }
    6025 
    6026 .entry .entry-content .wp-block-separator:not(.wp-block-separator),
    6027 .entry .entry-content hr:not(.wp-block-separator) {
    6028   max-width: 100%;
    6029 }
    6030 
    6031 @media only screen and (min-width: 768px) {
    6032   .entry .entry-content .wp-block-separator:not(.wp-block-separator),
    6033   .entry .entry-content hr:not(.wp-block-separator) {
    6034     max-width: calc(8 * (100vw / 12) - 28px);
    6035   }
    6036 }
    6037 
    6038 @media only screen and (min-width: 1168px) {
    6039   .entry .entry-content .wp-block-separator:not(.wp-block-separator),
    6040   .entry .entry-content hr:not(.wp-block-separator) {
    6041     max-width: calc(6 * (100vw / 12) - 28px);
    6042   }
    60436024}
    60446025
Note: See TracChangeset for help on using the changeset viewer.