WordPress.org

Make WordPress Core


Ignore:
Timestamp:
07/07/2019 08:10:55 PM (12 months 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.

File:
1 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
Note: See TracChangeset for help on using the changeset viewer.