WordPress.org
Get WordPress

Make WordPress Core

Changeset 45605


Ignore:
Timestamp:
07/07/2019 08:10:55 PM (5 years ago)
Author:
laurelfulford
Message:

Twenty Nineteen: Add styles for the new Group block.

Add styles for the new Group block to the theme, to make sure nested blocks display correctly when using the wide and full alignments.

Props @kjellr, @dianeco.
Fixes #46750.

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

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-content/themes/twentynineteen/sass/blocks/_blocks.scss

    r45264 r45605  
    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%;
    … …  
    1016    @include media(tablet) {
    1117        margin: 32px 0;
    12     }
    13 
    14     > *:first-child {
    15         margin-top: 0;
    16     }
    17 
    18     > *:last-child {
    19         margin-bottom: 0;
    2018    }
    2119
    … …  
    8987            margin-right: 0;
    9088        }
     89    }
     90}
     91
     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;
    91101    }
    92102}
    … …  
    511521        img {
    512522            display: block;
     523        }
     524
     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();
    513531        }
    514532
    … …  
    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;
    … …  
    760790            }
    761791        }
     792    }
     793
     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            margin-top: 0;
     824            margin-bottom: 0;
     825
     826            // Remove the top and bottom margins of inner blocks.
     827            .wp-block-group__inner-container {
     828
     829                > *:first-child {
     830                    margin-top: 0;
     831                }
     832
     833                > *:last-child {
     834                    margin-bottom: 0;
     835                }
     836            }
     837
     838            // If the Group block is full-width, it does not need this extra padding.
     839            &.alignfull {
     840                padding-left: 0;
     841                padding-right: 0;
     842
     843                @include media(tablet) {
     844                    padding-top: $size__spacing-unit;
     845                    padding-bottom: $size__spacing-unit;
     846                }
     847            }
     848
     849            // Full-aligned child blocks should take up the maximum width available in their container.
     850            &:not(.alignfull) > .wp-block-group__inner-container > .alignfull {
     851                width: 100%;
     852                max-width: 100%;
     853               
     854                @include media(tablet) {
     855                    width: calc( 100% + #{$size__spacing-unit * 2} );
     856                    max-width: calc( 100% + #{$size__spacing-unit * 2} );
     857                    margin-left: -#{$size__spacing-unit};
     858                }
     859            }
     860        }
     861       
    762862    }
    763863

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

    r44739 r45605  
    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}

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

    r44739 r45605  
    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}

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

    r45289 r45605  
    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%;
    … …  
    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  }
    … …  
    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  }
    … …  
    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;
    … …  
    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%;
    … …  
    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;
    … …  
    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);
    … …  
    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));
    … …  
    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);
    … …  
    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));
    … …  
    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;
    … …  
    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;
    … …  
    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  }
    … …  
    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  }
    … …  
    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  }
     5343}
     5344
     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;
    53215353}
    53225354
    … …  
    57375769.entry .entry-content .wp-block-image img {
    57385770  display: block;
     5771}
     5772
     5773@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  }
    57395783}
    57405784
    … …  
    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;
    … …  
    60446100  .entry .entry-content .wp-block-columns .wp-block-column:not(:first-child) {
    60456101    margin-right: 32px;
     6102  }
     6103}
     6104
     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  margin-top: 0;
     6129  margin-bottom: 0;
     6130}
     6131
     6132.entry .entry-content .wp-block-group.has-background .wp-block-group__inner-container > *:first-child {
     6133  margin-top: 0;
     6134}
     6135
     6136.entry .entry-content .wp-block-group.has-background .wp-block-group__inner-container > *:last-child {
     6137  margin-bottom: 0;
     6138}
     6139
     6140.entry .entry-content .wp-block-group.has-background.alignfull {
     6141  padding-right: 0;
     6142  padding-left: 0;
     6143}
     6144
     6145@media only screen and (min-width: 768px) {
     6146  .entry .entry-content .wp-block-group.has-background.alignfull {
     6147    padding-top: 1rem;
     6148    padding-bottom: 1rem;
     6149  }
     6150}
     6151
     6152.entry .entry-content .wp-block-group.has-background:not(.alignfull) > .wp-block-group__inner-container > .alignfull {
     6153  width: 100%;
     6154  max-width: 100%;
     6155}
     6156
     6157@media only screen and (min-width: 768px) {
     6158  .entry .entry-content .wp-block-group.has-background:not(.alignfull) > .wp-block-group__inner-container > .alignfull {
     6159    width: calc( 100% + 2rem);
     6160    max-width: calc( 100% + 2rem);
     6161    margin-right: -1rem;
    60466162  }
    60476163}

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

    r45289 r45605  
    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%;
    … …  
    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  }
    … …  
    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  }
    … …  
    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;
    … …  
    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%;
    … …  
    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;
    … …  
    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);
    … …  
    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;
    … …  
    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*/
    … …  
    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;
    … …  
    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;
    … …  
    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;
    … …  
    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  }
    … …  
    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  }
    … …  
    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  }
     5355}
     5356
     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;
    53335365}
    53345366
    … …  
    57495781.entry .entry-content .wp-block-image img {
    57505782  display: block;
     5783}
     5784
     5785@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  }
    57515795}
    57525796
    … …  
    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;
    … …  
    60566112  .entry .entry-content .wp-block-columns .wp-block-column:not(:first-child) {
    60576113    margin-left: 32px;
     6114  }
     6115}
     6116
     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  margin-top: 0;
     6141  margin-bottom: 0;
     6142}
     6143
     6144.entry .entry-content .wp-block-group.has-background .wp-block-group__inner-container > *:first-child {
     6145  margin-top: 0;
     6146}
     6147
     6148.entry .entry-content .wp-block-group.has-background .wp-block-group__inner-container > *:last-child {
     6149  margin-bottom: 0;
     6150}
     6151
     6152.entry .entry-content .wp-block-group.has-background.alignfull {
     6153  padding-left: 0;
     6154  padding-right: 0;
     6155}
     6156
     6157@media only screen and (min-width: 768px) {
     6158  .entry .entry-content .wp-block-group.has-background.alignfull {
     6159    padding-top: 1rem;
     6160    padding-bottom: 1rem;
     6161  }
     6162}
     6163
     6164.entry .entry-content .wp-block-group.has-background:not(.alignfull) > .wp-block-group__inner-container > .alignfull {
     6165  width: 100%;
     6166  max-width: 100%;
     6167}
     6168
     6169@media only screen and (min-width: 768px) {
     6170  .entry .entry-content .wp-block-group.has-background:not(.alignfull) > .wp-block-group__inner-container > .alignfull {
     6171    width: calc( 100% + 2rem);
     6172    max-width: calc( 100% + 2rem);
     6173    margin-left: -1rem;
    60586174  }
    60596175}
Note: See TracChangeset for help on using the changeset viewer.