WordPress.org

Make WordPress Core

Ticket #46750: 46750.2.patch

File 46750.2.patch, 36.7 KB (added by kjellr, 4 months ago)
  • src/wp-content/themes/twentynineteen/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
     
    1117                margin: 32px 0;
    1218        }
    1319
    14         > *:first-child {
    15                 margin-top: 0;
    16         }
    17 
    18         > *:last-child {
    19                 margin-bottom: 0;
    20         }
    21 
    2220        &.alignwide {
    2321                margin-left: auto;
    2422                margin-right: auto;
     
    9189        }
    9290}
    9391
     92.entry .entry-content > *,
     93.entry .entry-summary > * {
     94
     95        > *:first-child {
     96                margin-top: 0;
     97        }
     98
     99        > *:last-child {
     100                margin-bottom: 0;
     101        }
     102}
     103
    94104/*
    95105 * Unset nested content selector styles
    96106 * - Prevents layout styles from cascading too deeply
     
    512522                        display: block;
    513523                }
    514524
     525                // If an image does not have a left/center/right alignment,
     526                // it's a direct child of .wp-block-img.  If it has no other
     527                // alignment added, we want to make sure the image does not
     528                // extend beyond the width of the text column.
     529                &:not(.alignwide):not(.alignfull) > img {
     530                        @include postContentMaxWidth();
     531                }
     532
    515533                .aligncenter {
    516534
    517535                        @include postContentMaxWidth();
     
    752770                        }
    753771                }
    754772
     773                // Ensure images do not expand beyond the column.
     774                .wp-block-image > img:not(.alignwide):not(.alignfull) {
     775
     776                        @include media(tablet) {
     777                                max-width: 100%;
     778                        }
     779
     780                        @include media(desktop) {
     781                                max-width: 100%;
     782                        }
     783                }
     784
    755785                @include media(tablet) {
    756786                        flex-wrap: nowrap;
    757787
     
    761791                }
    762792        }
    763793
     794        //! Group
     795        .wp-block-group {
     796
     797                // When the Group block is standard/wide, we need to prevent full-aligned
     798                // child blocks from expanding out of their container.
     799                &:not(.alignfull) > .wp-block-group__inner-container > .alignfull,
     800                &:not(.alignfull) > .wp-block-group__inner-container > .wp-block-image > img {
     801
     802                        @include media(tablet) {
     803                                left: 0;
     804                                max-width: 100%;
     805                        }
     806                }
     807
     808                // The full-width Group block's inner container should mimic .entry-content styles.
     809                &.alignfull > .wp-block-group__inner-container {
     810                        max-width: calc(100% - (2 * #{ $size__spacing-unit }));
     811                        margin: 0 $size__spacing-unit;
     812
     813                        @include media(tablet) {
     814                                max-width: 80%;
     815                                margin: 0 10%;
     816                                padding: 0 60px;
     817                        }
     818                }
     819
     820                // Group block with a colored background.
     821                &.has-background {
     822                        padding: $size__spacing-unit;
     823
     824                        // Remove the top and bottom margins of inner blocks.
     825                        .wp-block-group__inner-container {
     826
     827                                > *:first-child {
     828                                        margin-top: 0;
     829                                }
     830
     831                                > *:last-child {
     832                                        margin-bottom: 0;
     833                                }
     834                        }
     835
     836                        // If the Group block is full-width, it does not need this extra padding.
     837                        &.alignfull {
     838                                padding-left: 0;
     839                                padding-right: 0;
     840
     841                                @include media(tablet) {
     842                                        padding-top: $size__spacing-unit;
     843                                        padding-bottom: $size__spacing-unit;
     844                                }
     845                        }
     846
     847                        // Full-aligned child blocks should take up the maximum width available in their container.
     848                        &:not(.alignfull) > .wp-block-group__inner-container > .alignfull {
     849                                width: 100%;
     850                                max-width: 100%;
     851                               
     852                                @include media(tablet) {
     853                                        width: calc( 100% + #{$size__spacing-unit * 2} );
     854                                        max-width: calc( 100% + #{$size__spacing-unit * 2} );
     855                                        margin-left: -#{$size__spacing-unit};
     856                                }
     857                        }
     858                }
     859               
     860        }
     861
    764862        //! Latest Comments
    765863        .wp-block-latest-comments {
    766864
  • src/wp-content/themes/twentynineteen/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}
  • src/wp-content/themes/twentynineteen/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}
  • src/wp-content/themes/twentynineteen/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
    5215 .entry .entry-content > * > *:first-child,
    5216 .entry .entry-summary > * > *:first-child {
    5217   margin-top: 0;
    5218 }
    5219 
    5220 .entry .entry-content > * > *:last-child,
    5221 .entry .entry-summary > * > *:last-child {
    5222   margin-bottom: 0;
    5223 }
    5224 
    52255223.entry .entry-content > *.alignwide,
    5226 .entry .entry-summary > *.alignwide {
     5224.entry .entry-summary > *.alignwide,
     5225.entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.alignwide,
     5226.entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.alignwide {
    52275227  margin-right: auto;
    52285228  margin-left: auto;
    52295229  clear: both;
     
    52315231
    52325232@media only screen and (min-width: 768px) {
    52335233  .entry .entry-content > *.alignwide,
    5234   .entry .entry-summary > *.alignwide {
     5234  .entry .entry-summary > *.alignwide,
     5235  .entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.alignwide,
     5236  .entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.alignwide {
    52355237    width: 100%;
    52365238    max-width: 100%;
    52375239  }
     
    52385240}
    52395241
    52405242.entry .entry-content > *.alignfull,
    5241 .entry .entry-summary > *.alignfull {
     5243.entry .entry-summary > *.alignfull,
     5244.entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.alignfull,
     5245.entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.alignfull {
    52425246  position: relative;
    52435247  right: -1rem;
    52445248  width: calc( 100% + (2 * 1rem));
     
    52485252
    52495253@media only screen and (min-width: 768px) {
    52505254  .entry .entry-content > *.alignfull,
    5251   .entry .entry-summary > *.alignfull {
     5255  .entry .entry-summary > *.alignfull,
     5256  .entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.alignfull,
     5257  .entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.alignfull {
    52525258    margin-top: calc(2 * 1rem);
    52535259    margin-bottom: calc(2 * 1rem);
    52545260    right: calc( -12.5% - 75px);
     
    52585264}
    52595265
    52605266.entry .entry-content > *.alignleft,
    5261 .entry .entry-summary > *.alignleft {
     5267.entry .entry-summary > *.alignleft,
     5268.entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.alignleft,
     5269.entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.alignleft {
    52625270  float: left;
    52635271  max-width: calc(5 * (100vw / 12));
    52645272  margin-top: 0;
     
    52685276
    52695277@media only screen and (min-width: 768px) {
    52705278  .entry .entry-content > *.alignleft,
    5271   .entry .entry-summary > *.alignleft {
     5279  .entry .entry-summary > *.alignleft,
     5280  .entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.alignleft,
     5281  .entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.alignleft {
    52725282    max-width: calc(4 * (100vw / 12));
    52735283    margin-right: calc(2 * 1rem);
    52745284  }
     
    52755285}
    52765286
    52775287.entry .entry-content > *.alignright,
    5278 .entry .entry-summary > *.alignright {
     5288.entry .entry-summary > *.alignright,
     5289.entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.alignright,
     5290.entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.alignright {
    52795291  float: right;
    52805292  max-width: calc(5 * (100vw / 12));
    52815293  margin-top: 0;
     
    52855297
    52865298@media only screen and (min-width: 768px) {
    52875299  .entry .entry-content > *.alignright,
    5288   .entry .entry-summary > *.alignright {
     5300  .entry .entry-summary > *.alignright,
     5301  .entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.alignright,
     5302  .entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.alignright {
    52895303    max-width: calc(4 * (100vw / 12));
    52905304    margin-left: 0;
    52915305    margin-left: calc(2 * 1rem);
     
    52935307}
    52945308
    52955309.entry .entry-content > *.aligncenter,
    5296 .entry .entry-summary > *.aligncenter {
     5310.entry .entry-summary > *.aligncenter,
     5311.entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.aligncenter,
     5312.entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.aligncenter {
    52975313  margin-right: auto;
    52985314  margin-left: auto;
    52995315}
     
    53005316
    53015317@media only screen and (min-width: 768px) {
    53025318  .entry .entry-content > *.aligncenter,
    5303   .entry .entry-summary > *.aligncenter {
     5319  .entry .entry-summary > *.aligncenter,
     5320  .entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.aligncenter,
     5321  .entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.aligncenter {
    53045322    max-width: calc(8 * (100vw / 12) - 28px);
    53055323  }
    53065324}
     
    53075325
    53085326@media only screen and (min-width: 1168px) {
    53095327  .entry .entry-content > *.aligncenter,
    5310   .entry .entry-summary > *.aligncenter {
     5328  .entry .entry-summary > *.aligncenter,
     5329  .entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.aligncenter,
     5330  .entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.aligncenter {
    53115331    max-width: calc(6 * (100vw / 12) - 28px);
    53125332  }
    53135333}
     
    53145334
    53155335@media only screen and (min-width: 768px) {
    53165336  .entry .entry-content > *.aligncenter,
    5317   .entry .entry-summary > *.aligncenter {
     5337  .entry .entry-summary > *.aligncenter,
     5338  .entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.aligncenter,
     5339  .entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.aligncenter {
    53185340    margin-right: 0;
    53195341    margin-left: 0;
    53205342  }
    53215343}
    53225344
     5345.entry .entry-content > * > *:first-child,
     5346.entry .entry-summary > * > *:first-child {
     5347  margin-top: 0;
     5348}
     5349
     5350.entry .entry-content > * > *:last-child,
     5351.entry .entry-summary > * > *:last-child {
     5352  margin-bottom: 0;
     5353}
     5354
    53235355/*
    53245356 * Unset nested content selector styles
    53255357 * - Prevents layout styles from cascading too deeply
     
    57395771}
    57405772
    57415773@media only screen and (min-width: 768px) {
     5774  .entry .entry-content .wp-block-image:not(.alignwide):not(.alignfull) > img {
     5775    max-width: calc(8 * (100vw / 12) - 28px);
     5776  }
     5777}
     5778
     5779@media only screen and (min-width: 1168px) {
     5780  .entry .entry-content .wp-block-image:not(.alignwide):not(.alignfull) > img {
     5781    max-width: calc(6 * (100vw / 12) - 28px);
     5782  }
     5783}
     5784
     5785@media only screen and (min-width: 768px) {
    57425786  .entry .entry-content .wp-block-image .aligncenter {
    57435787    max-width: calc(8 * (100vw / 12) - 28px);
    57445788  }
     
    60386082}
    60396083
    60406084@media only screen and (min-width: 768px) {
     6085  .entry .entry-content .wp-block-columns .wp-block-image > img:not(.alignwide):not(.alignfull) {
     6086    max-width: 100%;
     6087  }
     6088}
     6089
     6090@media only screen and (min-width: 1168px) {
     6091  .entry .entry-content .wp-block-columns .wp-block-image > img:not(.alignwide):not(.alignfull) {
     6092    max-width: 100%;
     6093  }
     6094}
     6095
     6096@media only screen and (min-width: 768px) {
    60416097  .entry .entry-content .wp-block-columns {
    60426098    flex-wrap: nowrap;
    60436099  }
     
    60466102  }
    60476103}
    60486104
     6105@media only screen and (min-width: 768px) {
     6106  .entry .entry-content .wp-block-group:not(.alignfull) > .wp-block-group__inner-container > .alignfull,
     6107  .entry .entry-content .wp-block-group:not(.alignfull) > .wp-block-group__inner-container > .wp-block-image > img {
     6108    right: 0;
     6109    max-width: 100%;
     6110  }
     6111}
     6112
     6113.entry .entry-content .wp-block-group.alignfull > .wp-block-group__inner-container {
     6114  max-width: calc(100% - (2 * 1rem));
     6115  margin: 0 1rem;
     6116}
     6117
     6118@media only screen and (min-width: 768px) {
     6119  .entry .entry-content .wp-block-group.alignfull > .wp-block-group__inner-container {
     6120    max-width: 80%;
     6121    margin: 0 10%;
     6122    padding: 0 60px;
     6123  }
     6124}
     6125
     6126.entry .entry-content .wp-block-group.has-background {
     6127  padding: 1rem;
     6128}
     6129
     6130.entry .entry-content .wp-block-group.has-background .wp-block-group__inner-container > *:first-child {
     6131  margin-top: 0;
     6132}
     6133
     6134.entry .entry-content .wp-block-group.has-background .wp-block-group__inner-container > *:last-child {
     6135  margin-bottom: 0;
     6136}
     6137
     6138.entry .entry-content .wp-block-group.has-background.alignfull {
     6139  padding-right: 0;
     6140  padding-left: 0;
     6141}
     6142
     6143@media only screen and (min-width: 768px) {
     6144  .entry .entry-content .wp-block-group.has-background.alignfull {
     6145    padding-top: 1rem;
     6146    padding-bottom: 1rem;
     6147  }
     6148}
     6149
     6150.entry .entry-content .wp-block-group.has-background:not(.alignfull) > .wp-block-group__inner-container > .alignfull {
     6151  width: 100%;
     6152  max-width: 100%;
     6153}
     6154
     6155@media only screen and (min-width: 768px) {
     6156  .entry .entry-content .wp-block-group.has-background:not(.alignfull) > .wp-block-group__inner-container > .alignfull {
     6157    width: calc( 100% + 2rem);
     6158    max-width: calc( 100% + 2rem);
     6159    margin-right: -1rem;
     6160  }
     6161}
     6162
    60496163.entry .entry-content .wp-block-latest-comments .wp-block-latest-comments__comment-meta {
    60506164  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    60516165  font-weight: bold;
  • src/wp-content/themes/twentynineteen/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
    5221 .entry .entry-content > * > *:first-child,
    5222 .entry .entry-summary > * > *:first-child {
    5223   margin-top: 0;
    5224 }
    5225 
    5226 .entry .entry-content > * > *:last-child,
    5227 .entry .entry-summary > * > *:last-child {
    5228   margin-bottom: 0;
    5229 }
    5230 
    52315229.entry .entry-content > *.alignwide,
    5232 .entry .entry-summary > *.alignwide {
     5230.entry .entry-summary > *.alignwide,
     5231.entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.alignwide,
     5232.entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.alignwide {
    52335233  margin-left: auto;
    52345234  margin-right: auto;
    52355235  clear: both;
     
    52375237
    52385238@media only screen and (min-width: 768px) {
    52395239  .entry .entry-content > *.alignwide,
    5240   .entry .entry-summary > *.alignwide {
     5240  .entry .entry-summary > *.alignwide,
     5241  .entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.alignwide,
     5242  .entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.alignwide {
    52415243    width: 100%;
    52425244    max-width: 100%;
    52435245  }
     
    52445246}
    52455247
    52465248.entry .entry-content > *.alignfull,
    5247 .entry .entry-summary > *.alignfull {
     5249.entry .entry-summary > *.alignfull,
     5250.entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.alignfull,
     5251.entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.alignfull {
    52485252  position: relative;
    52495253  left: -1rem;
    52505254  width: calc( 100% + (2 * 1rem));
     
    52545258
    52555259@media only screen and (min-width: 768px) {
    52565260  .entry .entry-content > *.alignfull,
    5257   .entry .entry-summary > *.alignfull {
     5261  .entry .entry-summary > *.alignfull,
     5262  .entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.alignfull,
     5263  .entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.alignfull {
    52585264    margin-top: calc(2 * 1rem);
    52595265    margin-bottom: calc(2 * 1rem);
    52605266    left: calc( -12.5% - 75px);
     
    52645270}
    52655271
    52665272.entry .entry-content > *.alignleft,
    5267 .entry .entry-summary > *.alignleft {
     5273.entry .entry-summary > *.alignleft,
     5274.entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.alignleft,
     5275.entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.alignleft {
    52685276  /*rtl:ignore*/
    52695277  float: left;
    52705278  max-width: calc(5 * (100vw / 12));
     
    52765284
    52775285@media only screen and (min-width: 768px) {
    52785286  .entry .entry-content > *.alignleft,
    5279   .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 {
    52805290    max-width: calc(4 * (100vw / 12));
    52815291    /*rtl:ignore*/
    52825292    margin-right: calc(2 * 1rem);
     
    52845294}
    52855295
    52865296.entry .entry-content > *.alignright,
    5287 .entry .entry-summary > *.alignright {
     5297.entry .entry-summary > *.alignright,
     5298.entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.alignright,
     5299.entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.alignright {
    52885300  /*rtl:ignore*/
    52895301  float: right;
    52905302  max-width: calc(5 * (100vw / 12));
     
    52965308
    52975309@media only screen and (min-width: 768px) {
    52985310  .entry .entry-content > *.alignright,
    5299   .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 {
    53005314    max-width: calc(4 * (100vw / 12));
    53015315    margin-right: 0;
    53025316    /*rtl:ignore*/
     
    53055319}
    53065320
    53075321.entry .entry-content > *.aligncenter,
    5308 .entry .entry-summary > *.aligncenter {
     5322.entry .entry-summary > *.aligncenter,
     5323.entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.aligncenter,
     5324.entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.aligncenter {
    53095325  margin-left: auto;
    53105326  margin-right: auto;
    53115327}
     
    53125328
    53135329@media only screen and (min-width: 768px) {
    53145330  .entry .entry-content > *.aligncenter,
    5315   .entry .entry-summary > *.aligncenter {
     5331  .entry .entry-summary > *.aligncenter,
     5332  .entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.aligncenter,
     5333  .entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.aligncenter {
    53165334    max-width: calc(8 * (100vw / 12) - 28px);
    53175335  }
    53185336}
     
    53195337
    53205338@media only screen and (min-width: 1168px) {
    53215339  .entry .entry-content > *.aligncenter,
    5322   .entry .entry-summary > *.aligncenter {
     5340  .entry .entry-summary > *.aligncenter,
     5341  .entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.aligncenter,
     5342  .entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.aligncenter {
    53235343    max-width: calc(6 * (100vw / 12) - 28px);
    53245344  }
    53255345}
     
    53265346
    53275347@media only screen and (min-width: 768px) {
    53285348  .entry .entry-content > *.aligncenter,
    5329   .entry .entry-summary > *.aligncenter {
     5349  .entry .entry-summary > *.aligncenter,
     5350  .entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.aligncenter,
     5351  .entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.aligncenter {
    53305352    margin-left: 0;
    53315353    margin-right: 0;
    53325354  }
    53335355}
    53345356
     5357.entry .entry-content > * > *:first-child,
     5358.entry .entry-summary > * > *:first-child {
     5359  margin-top: 0;
     5360}
     5361
     5362.entry .entry-content > * > *:last-child,
     5363.entry .entry-summary > * > *:last-child {
     5364  margin-bottom: 0;
     5365}
     5366
    53355367/*
    53365368 * Unset nested content selector styles
    53375369 * - Prevents layout styles from cascading too deeply
     
    57515783}
    57525784
    57535785@media only screen and (min-width: 768px) {
     5786  .entry .entry-content .wp-block-image:not(.alignwide):not(.alignfull) > img {
     5787    max-width: calc(8 * (100vw / 12) - 28px);
     5788  }
     5789}
     5790
     5791@media only screen and (min-width: 1168px) {
     5792  .entry .entry-content .wp-block-image:not(.alignwide):not(.alignfull) > img {
     5793    max-width: calc(6 * (100vw / 12) - 28px);
     5794  }
     5795}
     5796
     5797@media only screen and (min-width: 768px) {
    57545798  .entry .entry-content .wp-block-image .aligncenter {
    57555799    max-width: calc(8 * (100vw / 12) - 28px);
    57565800  }
     
    60506094}
    60516095
    60526096@media only screen and (min-width: 768px) {
     6097  .entry .entry-content .wp-block-columns .wp-block-image > img:not(.alignwide):not(.alignfull) {
     6098    max-width: 100%;
     6099  }
     6100}
     6101
     6102@media only screen and (min-width: 1168px) {
     6103  .entry .entry-content .wp-block-columns .wp-block-image > img:not(.alignwide):not(.alignfull) {
     6104    max-width: 100%;
     6105  }
     6106}
     6107
     6108@media only screen and (min-width: 768px) {
    60536109  .entry .entry-content .wp-block-columns {
    60546110    flex-wrap: nowrap;
    60556111  }
     
    60586114  }
    60596115}
    60606116
     6117@media only screen and (min-width: 768px) {
     6118  .entry .entry-content .wp-block-group:not(.alignfull) > .wp-block-group__inner-container > .alignfull,
     6119  .entry .entry-content .wp-block-group:not(.alignfull) > .wp-block-group__inner-container > .wp-block-image > img {
     6120    left: 0;
     6121    max-width: 100%;
     6122  }
     6123}
     6124
     6125.entry .entry-content .wp-block-group.alignfull > .wp-block-group__inner-container {
     6126  max-width: calc(100% - (2 * 1rem));
     6127  margin: 0 1rem;
     6128}
     6129
     6130@media only screen and (min-width: 768px) {
     6131  .entry .entry-content .wp-block-group.alignfull > .wp-block-group__inner-container {
     6132    max-width: 80%;
     6133    margin: 0 10%;
     6134    padding: 0 60px;
     6135  }
     6136}
     6137
     6138.entry .entry-content .wp-block-group.has-background {
     6139  padding: 1rem;
     6140}
     6141
     6142.entry .entry-content .wp-block-group.has-background .wp-block-group__inner-container > *:first-child {
     6143  margin-top: 0;
     6144}
     6145
     6146.entry .entry-content .wp-block-group.has-background .wp-block-group__inner-container > *:last-child {
     6147  margin-bottom: 0;
     6148}
     6149
     6150.entry .entry-content .wp-block-group.has-background.alignfull {
     6151  padding-left: 0;
     6152  padding-right: 0;
     6153}
     6154
     6155@media only screen and (min-width: 768px) {
     6156  .entry .entry-content .wp-block-group.has-background.alignfull {
     6157    padding-top: 1rem;
     6158    padding-bottom: 1rem;
     6159  }
     6160}
     6161
     6162.entry .entry-content .wp-block-group.has-background:not(.alignfull) > .wp-block-group__inner-container > .alignfull {
     6163  width: 100%;
     6164  max-width: 100%;
     6165}
     6166
     6167@media only screen and (min-width: 768px) {
     6168  .entry .entry-content .wp-block-group.has-background:not(.alignfull) > .wp-block-group__inner-container > .alignfull {
     6169    width: calc( 100% + 2rem);
     6170    max-width: calc( 100% + 2rem);
     6171    margin-left: -1rem;
     6172  }
     6173}
     6174
    60616175.entry .entry-content .wp-block-latest-comments .wp-block-latest-comments__comment-meta {
    60626176  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    60636177  font-weight: bold;