WordPress.org

Make WordPress Core


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

File:
1 edited

Legend:

Unmodified
Added
Removed
  • 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}
Note: See TracChangeset for help on using the changeset viewer.