Make WordPress Core

Ticket #49843: 49843.3.patch

File 49843.3.patch, 21.9 KB (added by kjellr, 5 years ago)
  • src/wp-content/themes/twentynineteen/style-editor.css

     
    550550}
    551551
    552552/** === Editor Frame === */
    553 body .wp-block[data-align="full"] {
    554   width: calc(100% + 28px);
    555   max-width: calc(100% + 28px);
     553body .wp-block[data-align="full"],
     554body .wp-block.alignfull {
     555  width: calc(100% + 20px);
     556  max-width: calc(100% + 20px);
    556557}
    557558
     559body .wp-block[data-align="left"],
     560body .wp-block.alignleft {
     561  margin-right: 1rem;
     562}
     563
     564body .wp-block[data-align="right"],
     565body .wp-block.alignright {
     566  margin-left: 1rem;
     567}
     568
     569body .wp-block[data-align="center"],
     570body .wp-block.aligncenter {
     571  margin-left: auto;
     572  margin-right: auto;
     573}
     574
    558575@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);
     576  body .wp-block[data-align="full"],
     577  body .wp-block.alignfull {
     578    width: calc( 125% + 20px);
     579    max-width: calc( 125% + 20px);
     580    position: relative;
     581    left: -12.5%;
    562582  }
    563583}
    564584
    565585@media only screen and (min-width: 768px) {
    566   body .editor-writing-flow {
     586  body .block-editor-writing-flow {
    567587    max-width: 80%;
    568588    margin: 0 10%;
    569589  }
    570   body .editor-default-block-appender,
    571   body .editor-block-list__block {
     590  body .block-editor-default-block-appender,
     591  body .block-editor-block-list__block {
    572592    margin-left: 0;
    573593    margin-right: 0;
    574594  }
    575   body .wp-block[data-align="wide"] {
     595  body .wp-block[data-align="wide"],
     596  body .wp-block.alignwide {
    576597    width: 100%;
    577598  }
    578   body .wp-block[data-align="right"] {
    579     max-width: 125%;
    580   }
    581599}
    582600
    583601/** === Content Width === */
     
    777795}
    778796
    779797/** === Post Title === */
     798.editor-post-title__block {
     799  width: 100%;
     800}
     801
    780802.editor-post-title__block:before {
    781803  background: #767676;
    782804  content: "\020";
     
    13461368}
    13471369
    13481370/** === 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"] {
     1371.wp-block-group > .wp-block-group__inner-container > .wp-block[data-align="full"],
     1372.wp-block-group > .wp-block-group__inner-container > .wp-block.alignfull {
    13501373  margin-left: 0;
    13511374  margin-right: 0;
     1375  left: 0;
    13521376}
    13531377
    1354 .wp-block[data-type="core/group"] > .wp-block-group.has-background {
     1378.wp-block-group .has-background {
    13551379  padding: 22px;
    13561380}
    13571381
    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"] {
     1382.wp-block-group .has-background > .wp-block-group__inner-container > .wp-block[data-align="full"],
     1383.wp-block-group .has-background > .wp-block-group__inner-container > .wp-block.alignfull {
    13591384  margin-left: -22px;
    13601385  width: calc(100% + 44px);
    13611386  max-width: calc(100% + 44px);
     
    13621387}
    13631388
    13641389@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"]) {
     1390  .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) {
    13661391    width: calc(8 * (100vw / 12));
    13671392  }
    13681393}
    13691394
    13701395@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"]) {
     1396  .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) {
    13721397    width: calc(6 * (100vw / 12 ));
    13731398  }
    13741399}
    13751400
    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"] {
     1401.wp-block[data-align="wide"] > .wp-block-group > .wp-block-group__inner-container > .wp-block[data-align="full"],
     1402.wp-block[data-align="wide"] > .wp-block-group > .wp-block-group__inner-container > .wp-block.alignfull {
    13771403  padding-left: 0;
    13781404  padding-right: 0;
    13791405}
    13801406
    13811407@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"]) {
     1408  .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) {
    13831409    width: calc(8 * (100vw / 12) - 44px);
    13841410  }
    13851411}
    13861412
    13871413@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"]) {
     1414  .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) {
    13891415    width: calc(6 * (100vw / 12 ) - 44px);
    13901416  }
    13911417}
    13921418
    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 
    14001419@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 {
     1420  .wp-block[data-align="full"] > .wp-block-group > .wp-block-group__inner-container {
    14021421    width: 80%;
    14031422    margin-left: 10%;
    14041423    margin-right: 10%;
    1405     padding-left: 48px;
    1406     padding-right: 48px;
     1424    padding-left: 10px;
     1425    padding-right: 10px;
    14071426  }
    14081427}
    14091428
    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 
    14141429@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"]) {
     1430  .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) {
    14161431    max-width: calc(8 * (100vw / 12));
    14171432  }
    14181433}
    14191434
    14201435@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"]) {
     1436  .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) {
    14221437    max-width: calc(6 * (100vw / 12));
    14231438  }
    14241439}
    14251440
    14261441@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"] {
     1442  .wp-block[data-align="full"] > .wp-block-group > .wp-block-group__inner-container > .wp-block[data-align="right"] {
    14281443    max-width: 125%;
    14291444  }
    14301445}
    14311446
    14321447@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);
     1448  .wp-block[data-align="full"] > .wp-block-group > .wp-block-group__inner-container > .wp-block[data-align="wide"],
     1449  .wp-block[data-align="full"] > .wp-block-group > .wp-block-group__inner-container > .wp-block.alignwide {
     1450    width: 100%;
     1451    max-width: 100%;
    14361452  }
    14371453}
    14381454
    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 
    14431455@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;
     1456  .wp-block[data-align="full"] > .wp-block-group > .wp-block-group__inner-container > .wp-block[data-align=full],
     1457  .wp-block[data-align="full"] > .wp-block-group > .wp-block-group__inner-container > .wp-block.alignfull {
     1458    width: calc(100% + 20px);
     1459    left: -10px;
    14471460  }
    14481461}
    14491462
    14501463@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);
     1464  .wp-block[data-align="full"] > .wp-block-group > .wp-block-group__inner-container > .wp-block[data-align=full],
     1465  .wp-block[data-align="full"] > .wp-block-group > .wp-block-group__inner-container > .wp-block.alignfull {
     1466    left: calc( -12.5% - 13px);
     1467    width: calc( 125% + 26px);
     1468    max-width: calc( 125% + 25px);
    14551469  }
    14561470}
    14571471
    1458 .wp-block[data-type="core/group"][data-align="full"] > .is-block-content > .wp-block-group.has-background {
     1472.wp-block[data-align="full"] > .wp-block-group > .wp-block-group.has-background {
    14591473  padding: 22px 0;
    14601474}
    14611475
    14621476@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 {
     1477  .wp-block[data-align="full"] > .wp-block-group > .wp-block-group.has-background {
    14641478    padding-left: 0;
    14651479    padding-right: 0;
    14661480  }
    14671481}
    14681482
    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"] {
     1483.wp-block[data-align="full"] > .wp-block-group > .wp-block-group.has-background > .wp-block-group__inner-container > .wp-block[data-align="full"],
     1484.wp-block[data-align="full"] > .wp-block-group > .wp-block-group.has-background > .wp-block-group__inner-container > .wp-block.alignfull {
    14701485  margin-left: 0;
    14711486  width: 100%;
    14721487}
    14731488
    14741489@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"] {
     1490  .wp-block[data-align="full"] > .wp-block-group > .wp-block-group.has-background > .wp-block-group__inner-container > .wp-block[data-align="full"],
     1491  .wp-block[data-align="full"] > .wp-block-group > .wp-block-group.has-background > .wp-block-group__inner-container > .wp-block.alignfull {
    14761492    width: calc(100% + 92px);
    14771493  }
    14781494}
    14791495
    14801496@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"] {
     1497  .wp-block[data-align="full"] > .wp-block-group > .wp-block-group.has-background > .wp-block-group__inner-container > .wp-block[data-align="full"],
     1498  .wp-block[data-align="full"] > .wp-block-group > .wp-block-group.has-background > .wp-block-group__inner-container > .wp-block.alignfull {
    14821499    width: calc(125% + 120px);
    14831500  }
    14841501}
  • src/wp-content/themes/twentynineteen/style-editor.scss

     
    1111
    1212body {
    1313
    14         .wp-block[data-align="full"] {
    15                 width: calc(100% + 28px);
    16                 max-width: calc(100% + 28px);
     14        .wp-block[data-align="full"],
     15        .wp-block.alignfull {
     16                width: calc(100% + 20px);
     17                max-width: calc(100% + 20px);
    1718        }
    1819
     20        .wp-block[data-align="left"],
     21        .wp-block.alignleft, {
     22                margin-right: $size__spacing-unit;
     23        }
     24
     25        .wp-block[data-align="right"],
     26        .wp-block.alignright, {
     27                margin-left: $size__spacing-unit;
     28        }
     29
     30        .wp-block[data-align="center"],
     31        .wp-block.aligncenter, {
     32                margin-left: auto;
     33                margin-right: auto;
     34        }
     35
    1936        @include media(mobile) {
    2037
    21                 .wp-block[data-align="full"] {
    22                         width: calc( 100% + 116px );
    23                         max-width: calc( 100% + 115px );
     38                .wp-block[data-align="full"],
     39                .wp-block.alignfull {
     40                        width: calc( 125% + 20px );
     41                        max-width: calc( 125% + 20px );
     42                        position: relative;
     43                        left: -12.5%;
    2444                }
    2545        }
    2646
    2747        @include media(tablet) {
    2848
    29                 .editor-writing-flow {
     49                .block-editor-writing-flow {
    3050                        max-width: 80%;
    3151                        margin: 0 10%;
    3252                }
    3353
    34                 .editor-default-block-appender,
    35                 .editor-block-list__block {
     54                .block-editor-default-block-appender,
     55                .block-editor-block-list__block {
    3656                        margin-left: 0;
    3757                        margin-right: 0;
    3858                }
    3959
    40                 .wp-block[data-align="wide"] {
     60                .wp-block[data-align="wide"],
     61                .wp-block.alignwide {
    4162                        width: 100%;
    4263                }
    43 
    44                 .wp-block[data-align="right"] {
    45                         max-width: 125%;
    46                 }
    4764        }
    4865}
    4966
     
    190207/** === Post Title === */
    191208
    192209.editor-post-title__block {
     210        width: 100%;
    193211        @include post-section-dash;
    194212
    195213        &:before {
     
    779797// size is different here.
    780798$group-block-background__padding: $font__size_base;
    781799
    782 .wp-block[data-type="core/group"] {
     800.wp-block-group {
    783801
    784         // Group block base styles
    785         > .wp-block-group {
    786 
    787                 // 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                 }
     802        // Child: Full alignment
     803        > .wp-block-group__inner-container > .wp-block[data-align="full"],
     804        > .wp-block-group__inner-container > .wp-block.alignfull {
     805                margin-left: 0;
     806                margin-right: 0;
     807                left: 0;
    792808        }
    793809
    794810        // Group block with background color
    795         > .wp-block-group.has-background {
     811        .has-background {
    796812                padding: $group-block-background__padding;
    797813
    798814                // Child: Full alignment
    799                 > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block[data-align="full"] {
     815                > .wp-block-group__inner-container > .wp-block[data-align="full"],
     816                > .wp-block-group__inner-container > .wp-block.alignfull {
    800817                        margin-left: -$group-block-background__padding;
    801818                        width: calc(100% + #{$group-block-background__padding * 2});
    802819                        max-width: calc(100% + #{$group-block-background__padding * 2});
    803820                }
    804821        }
     822}
    805823
    806         // Wide and full alignments
    807         &[data-align="wide"] > .is-block-content {
     824// Wide and full alignments
     825.wp-block[data-align="wide"] > .wp-block-group {
    808826
    809                 // Group block base styles.
    810                 > .wp-block-group {
     827        > .wp-block-group__inner-container > .wp-block:not([data-align="wide"]):not([data-align="full"]):not(.alignwide):not(.alignfull) {
     828                @include media(tablet) {
     829                        width: calc(8 * (100vw / 12));
     830                }
    811831
    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"]) {
    814                                 @include media(tablet) {
    815                                         width: calc(8 * (100vw / 12));
    816                                 }
     832                @include media(desktop) {
     833                        width: calc(6 * (100vw / 12 ));
     834                }
     835        }
    817836
    818                                 @include media(desktop) {
    819                                         width: calc(6 * (100vw / 12 ));
    820                                 }
    821                         }
     837        // Child blocks: Full alignment
     838        > .wp-block-group__inner-container > .wp-block[data-align="full"],
     839        > .wp-block-group__inner-container > .wp-block.alignfull {
     840                padding-left: 0;
     841                padding-right: 0;
     842        }
    822843
    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;
     844
     845        // Group block with background color
     846        &.has-background {
     847               
     848                // Child blocks: Default alignments
     849                > .wp-block-group__inner-container > .wp-block:not([data-align="wide"]):not([data-align="full"]):not(.alignwide):not(.alignfull) {
     850                        @include media(tablet) {
     851                                width: calc(8 * (100vw / 12) - #{$group-block-background__padding * 2});
    827852                        }
    828                 }
    829853
    830                 // 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                                 }
     854                        @include media(desktop) {
     855                                width: calc(6 * (100vw / 12 ) - #{$group-block-background__padding * 2});
    842856                        }
    843857                }
    844858        }
     859}
    845860
    846         // Full alignment
    847         &[data-align="full"] {
     861// Full alignment
     862.wp-block[data-align="full"] > .wp-block-group {
    848863
    849                 // Group block base styles
    850                 > .is-block-content > .wp-block-group {
     864                // Margins & padding are added to this container to mimic
     865                // the style + spacing of the .editor-writing-flow global
     866                // container. This way, child items sync up with the placement
     867                // and size of other top-level blocks.
     868                > .wp-block-group__inner-container {
    851869
    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 {
     870                        // 2px of extra padding are added to each side here
     871                        // To better match up with the spacing of the whole
     872                        // document.
     873                        @include media(tablet) {
     874                                width: 80%;
     875                                margin-left: 10%;
     876                                margin-right: 10%;
     877                                padding-left: 10px;
     878                                padding-right: 10px;
     879                        }
    857880
    858                                 @include media(mobile) {
    859                                         padding-left: 46px;
    860                                         padding-right: 46px;
    861                                 }
     881                        // Child blocks: Normal Alignments
     882                        > .wp-block:not([data-align="wide"]):not(.alignwide):not([data-align="full"]):not(.alignfull) {
    862883
    863                                 // 2px of extra padding are added to each side here
    864                                 // To better match up with the spacing of the whole
    865                                 // document.
    866884                                @include media(tablet) {
    867                                         width: 80%;
    868                                         margin-left: 10%;
    869                                         margin-right: 10%;
    870                                         padding-left: 48px;
    871                                         padding-right: 48px;
     885                                        max-width: calc(8 * (100vw / 12));
    872886                                }
    873887
    874                                 // Child blocks: All alignments except full
    875                                  > .wp-block:not([data-align="full"]) {
    876                                         max-width: calc(100vw - (2 * 1rem));
     888                                @include media(desktop) {
     889                                        max-width: calc(6 * (100vw / 12));
     890                                }
     891                        }
    877892
    878                                         @include media(tablet) {
    879                                                 max-width: calc(8 * (100vw / 12));
    880                                         }
     893                        // Child blocks: Right alignments
     894                        > .wp-block[data-align="right"] {
    881895
    882                                         @include media(desktop) {
    883                                                 max-width: calc(6 * (100vw / 12));
    884                                         }
     896                                @include media(tablet) {
     897                                        max-width: 125%;
    885898                                }
     899                        }
    886900
    887                                 // Child blocks: Right alignments
    888                                 > .wp-block[data-align="right"] {
     901                        // Child blocks: Wide alignments
     902                        > .wp-block[data-align="wide"],
     903                        > .wp-block.alignwide {
    889904
    890                                         @include media(tablet) {
    891                                                 max-width: 125%;
    892                                         }
     905                                @include media(tablet) {
     906                                        width: 100%;
     907                                        max-width: 100%;
    893908                                }
     909                        }
    894910
    895                                 // Child blocks: Wide alignments
    896                                 > .wp-block[data-align="wide"] {
     911                        // Child blocks: Full alignments
     912                        > .wp-block[data-align=full],
     913                        > .wp-block.alignfull {
    897914
    898                                         @include media(tablet) {
    899                                                 width: calc(100% + 4px);
    900                                                 max-width: calc(100% + 4px);
    901                                         }
     915                                @include media(mobile) {
     916                                        width: calc(100% + 20px);
     917                                        left: -10px;
    902918                                }
    903919
    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                                         }
     920                                @include media(tablet) {
     921                                        left: calc( -12.5% - 13px );
     922                                        width: calc( 125% + 26px );
     923                                        max-width: calc( 125% + 25px );
    918924                                }
    919925                        }
    920926                }
    921927
    922928                // Group block with background color
    923                 > .is-block-content > .wp-block-group.has-background {
     929                > .wp-block-group.has-background {
    924930
    925                         // When the Group block is full width, we can remove the left/right padding
    926                         // and let this inherit the
     931                        // When the Group block is full width, we can remove the left/right padding.
    927932                        padding: $group-block-background__padding 0;
    928933
    929934                        @include media(mobile) {
     
    932937                        }
    933938
    934939                        // Child blocks: Full alignment
    935                         > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block[data-align="full"] {
     940                        > .wp-block-group__inner-container > .wp-block[data-align="full"],
     941                        > .wp-block-group__inner-container > .wp-block.alignfull {
    936942                                margin-left: 0;
    937943                                width: 100%;
    938944
     
    946952                        }
    947953                }
    948954        }
    949 }