WordPress.org
Get WordPress

Make WordPress Core

Ticket #46750: 46750.1.patch

File 46750.1.patch, 33.4 KB (added by kjellr, 6 years ago)

  • sass/blocks/_blocks.scss

     
    11/* !Block styles */
    22
     3
     4// Default block margin and alignment rules.
     5// These are replicated inside of the Group block
     6// so that child blocks in there appear the same way.
    37.entry .entry-content > *,
    4 .entry .entry-summary > * {
     8.entry .entry-summary > *,
     9.entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *,
     10.entry .entry-content > .wp-block-group > .wp-block-group__inner-container > * {
    511        margin: 32px 0;
    612        max-width: 100%;
    713
    … …  
    512518                        display: block;
    513519                }
    514520
     521                // If an image does not have a left/center/right alignment,
     522                // it's a direct child of .wp-block-img.  If it has no other
     523                // alignment added, we want to make sure the image does not
     524                // extend beyond the width of the text column.
     525                &:not(.alignwide):not(.alignfull) > img {
     526                        @include postContentMaxWidth();
     527                }
     528
    515529                .aligncenter {
    516530
    517531                        @include postContentMaxWidth();
    … …  
    761775                }
    762776        }
    763777
     778        //! Group
     779        .wp-block-group {
     780
     781                // When the Group block is standard/wide, we need to prevent full-aligned
     782                // child blocks from expanding out of their container.
     783                &:not(.alignfull) > .wp-block-group__inner-container > .alignfull,
     784                &:not(.alignfull) > .wp-block-group__inner-container > .wp-block-image > img {
     785
     786                        @include media(tablet) {
     787                                left: 0;
     788                                max-width: 100%;
     789                        }
     790                }
     791
     792                // The full-width Group block's inner container should mimic .entry-content styles.
     793                &.alignfull > .wp-block-group__inner-container {
     794                        max-width: calc(100% - (2 * #{ $size__spacing-unit }));
     795                        margin: 0 $size__spacing-unit;
     796
     797                        @include media(tablet) {
     798                                max-width: 80%;
     799                                margin: 0 10%;
     800                                padding: 0 60px;
     801                        }
     802                }
     803
     804                // Group block with a colored background.
     805                &.has-background {
     806                        padding: $size__spacing-unit;
     807
     808                        // If the Group block is full-width, it does not need this extra padding.
     809                        &.alignfull {
     810                                padding: 0;
     811                        }
     812
     813                        // Full-aligned child blocks should take up the maximum width available in their container.
     814                        &:not(.alignfull) > .wp-block-group__inner-container > .alignfull {
     815                                width: 100%;
     816                                max-width: 100%;
     817                               
     818                                @include media(tablet) {
     819                                        width: calc( 100% + #{$size__spacing-unit * 2} );
     820                                        max-width: calc( 100% + #{$size__spacing-unit * 2} );
     821                                        margin-left: -#{$size__spacing-unit};
     822                                }
     823                        }
     824                }
     825               
     826        }
     827
    764828        //! Latest Comments
    765829        .wp-block-latest-comments {
    766830

  • style-editor.css

     
    12931293  line-height: 1.6;
    12941294  color: #767676;
    12951295}
     1296
     1297/** === Group Block === */
     1298.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"] {
     1299  left: 0;
     1300}
     1301
     1302.wp-block[data-type="core/group"] > .editor-block-list__block-edit > div > .wp-block-group.has-background {
     1303  padding: 22px;
     1304}
     1305
     1306.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"] {
     1307  margin-left: -22px;
     1308  width: calc(100% + 44px);
     1309  max-width: calc(100% + 44px);
     1310}
     1311
     1312@media only screen and (min-width: 768px) {
     1313  .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"]) {
     1314    width: calc(8 * (100vw / 12));
     1315  }
     1316}
     1317
     1318@media only screen and (min-width: 1168px) {
     1319  .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"]) {
     1320    width: calc(6 * (100vw / 12 ));
     1321  }
     1322}
     1323
     1324@media only screen and (min-width: 768px) {
     1325  .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"]) {
     1326    width: calc(8 * (100vw / 12) - 44px);
     1327  }
     1328}
     1329
     1330@media only screen and (min-width: 1168px) {
     1331  .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"]) {
     1332    width: calc(6 * (100vw / 12 ) - 44px);
     1333  }
     1334}
     1335
     1336@media only screen and (min-width: 600px) {
     1337  .wp-block[data-type="core/group"][data-align="full"] {
     1338    max-width: calc(100% + 89px);
     1339  }
     1340}
     1341
     1342@media only screen and (min-width: 768px) {
     1343  .wp-block[data-type="core/group"][data-align="full"] {
     1344    max-width: calc(125% + 114px);
     1345  }
     1346}
     1347
     1348@media only screen and (min-width: 600px) {
     1349  .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 {
     1350    padding-left: 46px;
     1351    padding-right: 46px;
     1352  }
     1353}
     1354
     1355@media only screen and (min-width: 768px) {
     1356  .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 {
     1357    width: 80%;
     1358    margin-left: 10%;
     1359    margin-right: 10%;
     1360    padding-left: 48px;
     1361    padding-right: 48px;
     1362  }
     1363}
     1364
     1365.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"]) {
     1366  max-width: calc(100vw - (2 * 1rem));
     1367}
     1368
     1369@media only screen and (min-width: 768px) {
     1370  .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"]) {
     1371    max-width: calc(8 * (100vw / 12));
     1372  }
     1373}
     1374
     1375@media only screen and (min-width: 1168px) {
     1376  .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    max-width: calc(6 * (100vw / 12));
     1378  }
     1379}
     1380
     1381@media only screen and (min-width: 768px) {
     1382  .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"] {
     1383    max-width: 125%;
     1384  }
     1385}
     1386
     1387@media only screen and (min-width: 768px) {
     1388  .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"] {
     1389    width: calc(100% + 4px);
     1390    max-width: calc(100% + 4px);
     1391  }
     1392}
     1393
     1394.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] {
     1395  max-width: calc(100vw + (2 * 1rem));
     1396}
     1397
     1398@media only screen and (min-width: 600px) {
     1399  .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] {
     1400    width: calc(100% + 92px);
     1401    left: -46px;
     1402  }
     1403}
     1404
     1405@media only screen and (min-width: 768px) {
     1406  .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] {
     1407    left: calc(-12.5% - 58px);
     1408    width: calc(125% + 120px);
     1409    max-width: calc(125% + 119px);
     1410  }
     1411}
     1412
     1413.wp-block[data-type="core/group"][data-align="full"] > .editor-block-list__block-edit > div > .wp-block-group.has-background {
     1414  padding: 22px 0;
     1415}
     1416
     1417@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.has-background {
     1419    padding-left: 0;
     1420    padding-right: 0;
     1421  }
     1422}
     1423
     1424.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"] {
     1425  margin-left: 0;
     1426  width: 100%;
     1427}
     1428
     1429@media only screen and (min-width: 600px) {
     1430  .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"] {
     1431    width: calc(100% + 92px);
     1432  }
     1433}
     1434
     1435@media only screen and (min-width: 768px) {
     1436  .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"] {
     1437    width: calc(125% + 120px);
     1438  }
     1439}

  • style-editor.scss

     
    739739                }
    740740        }
    741741}
     742
     743/** === Group Block === */
     744
     745// This matches the 22px value for 1rem that used on the front end.
     746// It must be specified in pixels for the editor, since the root font
     747// size is different here.
     748$group-block-background__padding: $font__size_base;
     749
     750.wp-block[data-type="core/group"] {
     751
     752        // Group block base styles
     753        > .editor-block-list__block-edit > div > .wp-block-group {
     754
     755                // Child: Full alignment
     756                > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] {
     757                        left: 0;
     758                }
     759        }
     760
     761        // Group block with background color
     762        > .editor-block-list__block-edit > div > .wp-block-group.has-background {
     763                padding: $group-block-background__padding;
     764
     765                // Child: Full alignment
     766                > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] {
     767                        margin-left: -$group-block-background__padding;
     768                        width: calc(100% + #{$group-block-background__padding * 2});
     769                        max-width: calc(100% + #{$group-block-background__padding * 2});
     770                }
     771        }
     772
     773        // Wide and full alignments
     774        &[data-align="wide"] {
     775
     776                // Group block base styles.
     777                > .editor-block-list__block-edit > div > .wp-block-group {
     778
     779                        // Child blocks: Default alignments
     780                        > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block:not([data-align="wide"]):not([data-align="full"]) {
     781                                @include media(tablet) {
     782                                        width: calc(8 * (100vw / 12));
     783                                }
     784
     785                                @include media(desktop) {
     786                                        width: calc(6 * (100vw / 12 ));
     787                                }
     788                        }
     789                }
     790
     791                // Group block with background color
     792                > .editor-block-list__block-edit > div > .wp-block-group.has-background {
     793                       
     794                        // Child blocks: Default alignments
     795                        > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block:not([data-align="wide"]):not([data-align="full"]) {
     796                                @include media(tablet) {
     797                                        width: calc(8 * (100vw / 12) - #{$group-block-background__padding * 2});
     798                                }
     799
     800                                @include media(desktop) {
     801                                        width: calc(6 * (100vw / 12 ) - #{$group-block-background__padding * 2});
     802                                }
     803                        }
     804                }
     805        }
     806
     807        // Full alignment
     808        &[data-align="full"] {
     809
     810                // Max-width needs to be a pixel narrower than usual to prevent horizontal scrolling.
     811                @include media(mobile) {
     812                        max-width: calc(100% + 89px);
     813                }
     814                @include media(tablet) {
     815                        max-width: calc(125% + 114px);
     816                }
     817
     818                // Group block base styles
     819                > .editor-block-list__block-edit > div > .wp-block-group {
     820
     821                        // Margins & padding are added to this container to mimic
     822                        // the style + spacing of the .editor-writing-flow global
     823                        // container. This way, child items sync up with the placement
     824                        // and size of other top-level blocks.
     825                        > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout {
     826
     827                                @include media(mobile) {
     828                                        padding-left: 46px;
     829                                        padding-right: 46px;
     830                                }
     831
     832                                // 2px of extra padding are added to each side here
     833                                // To better match up with the spacing of the whole
     834                                // document.
     835                                @include media(tablet) {
     836                                        width: 80%;
     837                                        margin-left: 10%;
     838                                        margin-right: 10%;
     839                                        padding-left: 48px;
     840                                        padding-right: 48px;
     841                                }
     842
     843                                // Child blocks: All alignments except full
     844                                 > .wp-block:not([data-align="full"]) {
     845                                        max-width: calc(100vw - (2 * 1rem));
     846
     847                                        @include media(tablet) {
     848                                                max-width: calc(8 * (100vw / 12));
     849                                        }
     850
     851                                        @include media(desktop) {
     852                                                max-width: calc(6 * (100vw / 12));
     853                                        }
     854                                }
     855
     856                                // Child blocks: Right alignments
     857                                > .wp-block[data-align="right"] {
     858
     859                                        @include media(tablet) {
     860                                                max-width: 125%;
     861                                        }
     862                                }
     863
     864                                // Child blocks: Wide alignments
     865                                > .wp-block[data-align="wide"] {
     866
     867                                        @include media(tablet) {
     868                                                width: calc(100% + 4px);
     869                                                max-width: calc(100% + 4px);
     870                                        }
     871                                }
     872
     873                                // Child blocks: Full alignments
     874                                > .wp-block[data-align=full] {
     875                                        max-width: calc(100vw + (2 * 1rem));
     876
     877                                        @include media(mobile) {
     878                                                width: calc(100% + 92px);
     879                                                left: -46px;
     880                                        }
     881
     882                                        @include media(tablet) {
     883                                                left: calc(-12.5% - 58px);
     884                                                width: calc(125% + 120px);
     885                                                max-width: calc(125% + 119px);
     886                                        }
     887                                }
     888                        }
     889                }
     890
     891                // Group block with background color
     892                > .editor-block-list__block-edit > div > .wp-block-group.has-background {
     893
     894                        // When the Group block is full width, we can remove the left/right padding
     895                        // and let this inherit the
     896                        padding: $group-block-background__padding 0;
     897
     898                        @include media(mobile) {
     899                                padding-left: 0;
     900                                padding-right: 0;
     901                        }
     902
     903                        // Child blocks: Full alignment
     904                        > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] {
     905                                margin-left: 0;
     906                                width: 100%;
     907
     908                                @include media(mobile) {
     909                                        width: calc(100% + 92px);
     910                                }
     911
     912                                @include media(tablet) {
     913                                        width: calc(125% + 120px);
     914                                }
     915                        }
     916                }
     917        }
     918}

  • style-rtl.css

     
    51865186/* Blocks */
    51875187/* !Block styles */
    51885188.entry .entry-content > *,
    5189 .entry .entry-summary > * {
     5189.entry .entry-summary > *,
     5190.entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *,
     5191.entry .entry-content > .wp-block-group > .wp-block-group__inner-container > * {
    51905192  margin: 32px 0;
    51915193  max-width: 100%;
    51925194}
    … …  
    51935195
    51945196@media only screen and (min-width: 768px) {
    51955197  .entry .entry-content > *,
    5196   .entry .entry-summary > * {
     5198  .entry .entry-summary > *,
     5199  .entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *,
     5200  .entry .entry-content > .wp-block-group > .wp-block-group__inner-container > * {
    51975201    max-width: calc(8 * (100vw / 12) - 28px);
    51985202  }
    51995203}
    … …  
    52005204
    52015205@media only screen and (min-width: 1168px) {
    52025206  .entry .entry-content > *,
    5203   .entry .entry-summary > * {
     5207  .entry .entry-summary > *,
     5208  .entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *,
     5209  .entry .entry-content > .wp-block-group > .wp-block-group__inner-container > * {
    52045210    max-width: calc(6 * (100vw / 12) - 28px);
    52055211  }
    52065212}
    … …  
    52075213
    52085214@media only screen and (min-width: 768px) {
    52095215  .entry .entry-content > *,
    5210   .entry .entry-summary > * {
     5216  .entry .entry-summary > *,
     5217  .entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *,
     5218  .entry .entry-content > .wp-block-group > .wp-block-group__inner-container > * {
    52115219    margin: 32px 0;
    52125220  }
    52135221}
    52145222
    52155223.entry .entry-content > * > *:first-child,
    5216 .entry .entry-summary > * > *:first-child {
     5224.entry .entry-summary > * > *:first-child,
     5225.entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > * > *:first-child,
     5226.entry .entry-content > .wp-block-group > .wp-block-group__inner-container > * > *:first-child {
    52175227  margin-top: 0;
    52185228}
    52195229
    52205230.entry .entry-content > * > *:last-child,
    5221 .entry .entry-summary > * > *:last-child {
     5231.entry .entry-summary > * > *:last-child,
     5232.entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > * > *:last-child,
     5233.entry .entry-content > .wp-block-group > .wp-block-group__inner-container > * > *:last-child {
    52225234  margin-bottom: 0;
    52235235}
    52245236
    52255237.entry .entry-content > *.alignwide,
    5226 .entry .entry-summary > *.alignwide {
     5238.entry .entry-summary > *.alignwide,
     5239.entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.alignwide,
     5240.entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.alignwide {
    52275241  margin-right: auto;
    52285242  margin-left: auto;
    52295243  clear: both;
    … …  
    52315245
    52325246@media only screen and (min-width: 768px) {
    52335247  .entry .entry-content > *.alignwide,
    5234   .entry .entry-summary > *.alignwide {
     5248  .entry .entry-summary > *.alignwide,
     5249  .entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.alignwide,
     5250  .entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.alignwide {
    52355251    width: 100%;
    52365252    max-width: 100%;
    52375253  }
    … …  
    52385254}
    52395255
    52405256.entry .entry-content > *.alignfull,
    5241 .entry .entry-summary > *.alignfull {
     5257.entry .entry-summary > *.alignfull,
     5258.entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.alignfull,
     5259.entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.alignfull {
    52425260  position: relative;
    52435261  right: -1rem;
    52445262  width: calc( 100% + (2 * 1rem));
    … …  
    52485266
    52495267@media only screen and (min-width: 768px) {
    52505268  .entry .entry-content > *.alignfull,
    5251   .entry .entry-summary > *.alignfull {
     5269  .entry .entry-summary > *.alignfull,
     5270  .entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.alignfull,
     5271  .entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.alignfull {
    52525272    margin-top: calc(2 * 1rem);
    52535273    margin-bottom: calc(2 * 1rem);
    52545274    right: calc( -12.5% - 75px);
    … …  
    52585278}
    52595279
    52605280.entry .entry-content > *.alignleft,
    5261 .entry .entry-summary > *.alignleft {
     5281.entry .entry-summary > *.alignleft,
     5282.entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.alignleft,
     5283.entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.alignleft {
    52625284  float: left;
    52635285  max-width: calc(5 * (100vw / 12));
    52645286  margin-top: 0;
    … …  
    52685290
    52695291@media only screen and (min-width: 768px) {
    52705292  .entry .entry-content > *.alignleft,
    5271   .entry .entry-summary > *.alignleft {
     5293  .entry .entry-summary > *.alignleft,
     5294  .entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.alignleft,
     5295  .entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.alignleft {
    52725296    max-width: calc(4 * (100vw / 12));
    52735297    margin-right: calc(2 * 1rem);
    52745298  }
    … …  
    52755299}
    52765300
    52775301.entry .entry-content > *.alignright,
    5278 .entry .entry-summary > *.alignright {
     5302.entry .entry-summary > *.alignright,
     5303.entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.alignright,
     5304.entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.alignright {
    52795305  float: right;
    52805306  max-width: calc(5 * (100vw / 12));
    52815307  margin-top: 0;
    … …  
    52855311
    52865312@media only screen and (min-width: 768px) {
    52875313  .entry .entry-content > *.alignright,
    5288   .entry .entry-summary > *.alignright {
     5314  .entry .entry-summary > *.alignright,
     5315  .entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.alignright,
     5316  .entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.alignright {
    52895317    max-width: calc(4 * (100vw / 12));
    52905318    margin-left: 0;
    52915319    margin-left: calc(2 * 1rem);
    … …  
    52935321}
    52945322
    52955323.entry .entry-content > *.aligncenter,
    5296 .entry .entry-summary > *.aligncenter {
     5324.entry .entry-summary > *.aligncenter,
     5325.entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.aligncenter,
     5326.entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.aligncenter {
    52975327  margin-right: auto;
    52985328  margin-left: auto;
    52995329}
    … …  
    53005330
    53015331@media only screen and (min-width: 768px) {
    53025332  .entry .entry-content > *.aligncenter,
    5303   .entry .entry-summary > *.aligncenter {
     5333  .entry .entry-summary > *.aligncenter,
     5334  .entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.aligncenter,
     5335  .entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.aligncenter {
    53045336    max-width: calc(8 * (100vw / 12) - 28px);
    53055337  }
    53065338}
    … …  
    53075339
    53085340@media only screen and (min-width: 1168px) {
    53095341  .entry .entry-content > *.aligncenter,
    5310   .entry .entry-summary > *.aligncenter {
     5342  .entry .entry-summary > *.aligncenter,
     5343  .entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.aligncenter,
     5344  .entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.aligncenter {
    53115345    max-width: calc(6 * (100vw / 12) - 28px);
    53125346  }
    53135347}
    … …  
    53145348
    53155349@media only screen and (min-width: 768px) {
    53165350  .entry .entry-content > *.aligncenter,
    5317   .entry .entry-summary > *.aligncenter {
     5351  .entry .entry-summary > *.aligncenter,
     5352  .entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.aligncenter,
     5353  .entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.aligncenter {
    53185354    margin-right: 0;
    53195355    margin-left: 0;
    53205356  }
    … …  
    57395775}
    57405776
    57415777@media only screen and (min-width: 768px) {
     5778  .entry .entry-content .wp-block-image:not(.alignwide):not(.alignfull) > img {
     5779    max-width: calc(8 * (100vw / 12) - 28px);
     5780  }
     5781}
     5782
     5783@media only screen and (min-width: 1168px) {
     5784  .entry .entry-content .wp-block-image:not(.alignwide):not(.alignfull) > img {
     5785    max-width: calc(6 * (100vw / 12) - 28px);
     5786  }
     5787}
     5788
     5789@media only screen and (min-width: 768px) {
    57425790  .entry .entry-content .wp-block-image .aligncenter {
    57435791    max-width: calc(8 * (100vw / 12) - 28px);
    57445792  }
    … …  
    60466094  }
    60476095}
    60486096
     6097@media only screen and (min-width: 768px) {
     6098  .entry .entry-content .wp-block-group:not(.alignfull) > .wp-block-group__inner-container > .alignfull,
     6099  .entry .entry-content .wp-block-group:not(.alignfull) > .wp-block-group__inner-container > .wp-block-image > img {
     6100    right: 0;
     6101    max-width: 100%;
     6102  }
     6103}
     6104
     6105.entry .entry-content .wp-block-group.alignfull > .wp-block-group__inner-container {
     6106  max-width: calc(100% - (2 * 1rem));
     6107  margin: 0 1rem;
     6108}
     6109
     6110@media only screen and (min-width: 768px) {
     6111  .entry .entry-content .wp-block-group.alignfull > .wp-block-group__inner-container {
     6112    max-width: 80%;
     6113    margin: 0 10%;
     6114    padding: 0 60px;
     6115  }
     6116}
     6117
     6118.entry .entry-content .wp-block-group.has-background {
     6119  padding: 1rem;
     6120}
     6121
     6122.entry .entry-content .wp-block-group.has-background.alignfull {
     6123  padding: 0;
     6124}
     6125
     6126.entry .entry-content .wp-block-group.has-background:not(.alignfull) > .wp-block-group__inner-container > .alignfull {
     6127  width: 100%;
     6128  max-width: 100%;
     6129}
     6130
     6131@media only screen and (min-width: 768px) {
     6132  .entry .entry-content .wp-block-group.has-background:not(.alignfull) > .wp-block-group__inner-container > .alignfull {
     6133    width: calc( 100% + 2rem);
     6134    max-width: calc( 100% + 2rem);
     6135    margin-right: -1rem;
     6136  }
     6137}
     6138
    60496139.entry .entry-content .wp-block-latest-comments .wp-block-latest-comments__comment-meta {
    60506140  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    60516141  font-weight: bold;

  • style.css

     
    51925192/* Blocks */
    51935193/* !Block styles */
    51945194.entry .entry-content > *,
    5195 .entry .entry-summary > * {
     5195.entry .entry-summary > *,
     5196.entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *,
     5197.entry .entry-content > .wp-block-group > .wp-block-group__inner-container > * {
    51965198  margin: 32px 0;
    51975199  max-width: 100%;
    51985200}
    … …  
    51995201
    52005202@media only screen and (min-width: 768px) {
    52015203  .entry .entry-content > *,
    5202   .entry .entry-summary > * {
     5204  .entry .entry-summary > *,
     5205  .entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *,
     5206  .entry .entry-content > .wp-block-group > .wp-block-group__inner-container > * {
    52035207    max-width: calc(8 * (100vw / 12) - 28px);
    52045208  }
    52055209}
    … …  
    52065210
    52075211@media only screen and (min-width: 1168px) {
    52085212  .entry .entry-content > *,
    5209   .entry .entry-summary > * {
     5213  .entry .entry-summary > *,
     5214  .entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *,
     5215  .entry .entry-content > .wp-block-group > .wp-block-group__inner-container > * {
    52105216    max-width: calc(6 * (100vw / 12) - 28px);
    52115217  }
    52125218}
    … …  
    52135219
    52145220@media only screen and (min-width: 768px) {
    52155221  .entry .entry-content > *,
    5216   .entry .entry-summary > * {
     5222  .entry .entry-summary > *,
     5223  .entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *,
     5224  .entry .entry-content > .wp-block-group > .wp-block-group__inner-container > * {
    52175225    margin: 32px 0;
    52185226  }
    52195227}
    52205228
    52215229.entry .entry-content > * > *:first-child,
    5222 .entry .entry-summary > * > *:first-child {
     5230.entry .entry-summary > * > *:first-child,
     5231.entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > * > *:first-child,
     5232.entry .entry-content > .wp-block-group > .wp-block-group__inner-container > * > *:first-child {
    52235233  margin-top: 0;
    52245234}
    52255235
    52265236.entry .entry-content > * > *:last-child,
    5227 .entry .entry-summary > * > *:last-child {
     5237.entry .entry-summary > * > *:last-child,
     5238.entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > * > *:last-child,
     5239.entry .entry-content > .wp-block-group > .wp-block-group__inner-container > * > *:last-child {
    52285240  margin-bottom: 0;
    52295241}
    52305242
    52315243.entry .entry-content > *.alignwide,
    5232 .entry .entry-summary > *.alignwide {
     5244.entry .entry-summary > *.alignwide,
     5245.entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.alignwide,
     5246.entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.alignwide {
    52335247  margin-left: auto;
    52345248  margin-right: auto;
    52355249  clear: both;
    … …  
    52375251
    52385252@media only screen and (min-width: 768px) {
    52395253  .entry .entry-content > *.alignwide,
    5240   .entry .entry-summary > *.alignwide {
     5254  .entry .entry-summary > *.alignwide,
     5255  .entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.alignwide,
     5256  .entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.alignwide {
    52415257    width: 100%;
    52425258    max-width: 100%;
    52435259  }
    … …  
    52445260}
    52455261
    52465262.entry .entry-content > *.alignfull,
    5247 .entry .entry-summary > *.alignfull {
     5263.entry .entry-summary > *.alignfull,
     5264.entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.alignfull,
     5265.entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.alignfull {
    52485266  position: relative;
    52495267  left: -1rem;
    52505268  width: calc( 100% + (2 * 1rem));
    … …  
    52545272
    52555273@media only screen and (min-width: 768px) {
    52565274  .entry .entry-content > *.alignfull,
    5257   .entry .entry-summary > *.alignfull {
     5275  .entry .entry-summary > *.alignfull,
     5276  .entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.alignfull,
     5277  .entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.alignfull {
    52585278    margin-top: calc(2 * 1rem);
    52595279    margin-bottom: calc(2 * 1rem);
    52605280    left: calc( -12.5% - 75px);
    … …  
    52645284}
    52655285
    52665286.entry .entry-content > *.alignleft,
    5267 .entry .entry-summary > *.alignleft {
     5287.entry .entry-summary > *.alignleft,
     5288.entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.alignleft,
     5289.entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.alignleft {
    52685290  /*rtl:ignore*/
    52695291  float: left;
    52705292  max-width: calc(5 * (100vw / 12));
    … …  
    52765298
    52775299@media only screen and (min-width: 768px) {
    52785300  .entry .entry-content > *.alignleft,
    5279   .entry .entry-summary > *.alignleft {
     5301  .entry .entry-summary > *.alignleft,
     5302  .entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.alignleft,
     5303  .entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.alignleft {
    52805304    max-width: calc(4 * (100vw / 12));
    52815305    /*rtl:ignore*/
    52825306    margin-right: calc(2 * 1rem);
    … …  
    52845308}
    52855309
    52865310.entry .entry-content > *.alignright,
    5287 .entry .entry-summary > *.alignright {
     5311.entry .entry-summary > *.alignright,
     5312.entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.alignright,
     5313.entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.alignright {
    52885314  /*rtl:ignore*/
    52895315  float: right;
    52905316  max-width: calc(5 * (100vw / 12));
    … …  
    52965322
    52975323@media only screen and (min-width: 768px) {
    52985324  .entry .entry-content > *.alignright,
    5299   .entry .entry-summary > *.alignright {
     5325  .entry .entry-summary > *.alignright,
     5326  .entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.alignright,
     5327  .entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.alignright {
    53005328    max-width: calc(4 * (100vw / 12));
    53015329    margin-right: 0;
    53025330    /*rtl:ignore*/
    … …  
    53055333}
    53065334
    53075335.entry .entry-content > *.aligncenter,
    5308 .entry .entry-summary > *.aligncenter {
     5336.entry .entry-summary > *.aligncenter,
     5337.entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.aligncenter,
     5338.entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.aligncenter {
    53095339  margin-left: auto;
    53105340  margin-right: auto;
    53115341}
    … …  
    53125342
    53135343@media only screen and (min-width: 768px) {
    53145344  .entry .entry-content > *.aligncenter,
    5315   .entry .entry-summary > *.aligncenter {
     5345  .entry .entry-summary > *.aligncenter,
     5346  .entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.aligncenter,
     5347  .entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.aligncenter {
    53165348    max-width: calc(8 * (100vw / 12) - 28px);
    53175349  }
    53185350}
    … …  
    53195351
    53205352@media only screen and (min-width: 1168px) {
    53215353  .entry .entry-content > *.aligncenter,
    5322   .entry .entry-summary > *.aligncenter {
     5354  .entry .entry-summary > *.aligncenter,
     5355  .entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.aligncenter,
     5356  .entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.aligncenter {
    53235357    max-width: calc(6 * (100vw / 12) - 28px);
    53245358  }
    53255359}
    … …  
    53265360
    53275361@media only screen and (min-width: 768px) {
    53285362  .entry .entry-content > *.aligncenter,
    5329   .entry .entry-summary > *.aligncenter {
     5363  .entry .entry-summary > *.aligncenter,
     5364  .entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.aligncenter,
     5365  .entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.aligncenter {
    53305366    margin-left: 0;
    53315367    margin-right: 0;
    53325368  }
    … …  
    57515787}
    57525788
    57535789@media only screen and (min-width: 768px) {
     5790  .entry .entry-content .wp-block-image:not(.alignwide):not(.alignfull) > img {
     5791    max-width: calc(8 * (100vw / 12) - 28px);
     5792  }
     5793}
     5794
     5795@media only screen and (min-width: 1168px) {
     5796  .entry .entry-content .wp-block-image:not(.alignwide):not(.alignfull) > img {
     5797    max-width: calc(6 * (100vw / 12) - 28px);
     5798  }
     5799}
     5800
     5801@media only screen and (min-width: 768px) {
    57545802  .entry .entry-content .wp-block-image .aligncenter {
    57555803    max-width: calc(8 * (100vw / 12) - 28px);
    57565804  }
    … …  
    60586106  }
    60596107}
    60606108
     6109@media only screen and (min-width: 768px) {
     6110  .entry .entry-content .wp-block-group:not(.alignfull) > .wp-block-group__inner-container > .alignfull,
     6111  .entry .entry-content .wp-block-group:not(.alignfull) > .wp-block-group__inner-container > .wp-block-image > img {
     6112    left: 0;
     6113    max-width: 100%;
     6114  }
     6115}
     6116
     6117.entry .entry-content .wp-block-group.alignfull > .wp-block-group__inner-container {
     6118  max-width: calc(100% - (2 * 1rem));
     6119  margin: 0 1rem;
     6120}
     6121
     6122@media only screen and (min-width: 768px) {
     6123  .entry .entry-content .wp-block-group.alignfull > .wp-block-group__inner-container {
     6124    max-width: 80%;
     6125    margin: 0 10%;
     6126    padding: 0 60px;
     6127  }
     6128}
     6129
     6130.entry .entry-content .wp-block-group.has-background {
     6131  padding: 1rem;
     6132}
     6133
     6134.entry .entry-content .wp-block-group.has-background.alignfull {
     6135  padding: 0;
     6136}
     6137
     6138.entry .entry-content .wp-block-group.has-background:not(.alignfull) > .wp-block-group__inner-container > .alignfull {
     6139  width: 100%;
     6140  max-width: 100%;
     6141}
     6142
     6143@media only screen and (min-width: 768px) {
     6144  .entry .entry-content .wp-block-group.has-background:not(.alignfull) > .wp-block-group__inner-container > .alignfull {
     6145    width: calc( 100% + 2rem);
     6146    max-width: calc( 100% + 2rem);
     6147    margin-left: -1rem;
     6148  }
     6149}
     6150
    60616151.entry .entry-content .wp-block-latest-comments .wp-block-latest-comments__comment-meta {
    60626152  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    60636153  font-weight: bold;