WordPress.org
Get WordPress

Make WordPress Core


Ignore:
Timestamp:
11/12/2018 11:19:13 PM (6 years ago)
Author:
allancole
Message:

Updating Twenty Nineteen, our new default theme for 2019, set for 5.0.

This update applies the following changes:

  • Improve menu UI to support keyboard, click and touch interactions
  • Improve variable scoping and js performance in menu interaction javascript
  • Improve custom-colors for selected text, buttons and menu hover styles
  • Improve margins structure for more consistency between editor and frontend
  • Improve discussion avatars for simpler wording and better performance
  • Improve fonts in list widgets and list blocks
  • Improve comment responsive spacing and avatar display
  • Improve various block styles to make them consistent between the editor and frontend
  • Add tabbed browsing support for ie11
  • Add backwards compatibility support for older versions of WordPress
  • Add fallback styles for older versions of WP where Gutenberg is activated and then deactivated (backwards compatibility)
  • Add sizes attribute for featured images to improve responsive performance
  • Add focus-within polyfill
  • Add a footer menu for secondary page links
  • Fix editor styles to prevent conflicts with plugins that add meta boxes to the editor
  • Fix columns block issues on small screens
  • Fix empty-space font text cursor issue in Gutenberg editor
  • Fix RTL floating styles so that left/right floats are honored
  • Fix cover image block margins/padding
  • Fix invalid rgba style
  • Fix php warning when returning attributes
  • Fix gallery widget margins to improve gallery grids
  • Fix .entry-content selectors to prevent shortcodes, plugins and other unknown content from breaking the layout
  • Remove translation escaping to follow code standards in previous default themes
  • Remove custom color output in the fronten header when default color is selected
  • Remove fly-out sub-sub-sub-menu behavior on desktop to prevent sub-menus from falling off the screen
  • General code clean up and coding standards improvements

Initial development occurred on GitHub. See: ​https://github.com/WordPress/twentynineteen

Props allancole, karmatosed, kjellr, yingling017, mrasharirfan, milana_cap, fabiankaegy, westonruter, aaronjorbin, netweb, b-07, khleomix, blowery, dereksmart, jasmussen, audrasjb, nielslange, mmaumio, dimadin, joyously, anevins12, peterwilsoncc, dannycooper, icaleb, siriokun, technosiren, travel_girl, azchughtai, ianbelanger, nadim1992, ismailelkorchi, nativeinside, chetan200891, icaleb, grapplerulrich, ocean90, joshfeck, frankew, abdulwahab610, mendezcode, eliorivero, melchoyce, joen, laurelfulford, mdawaffe, kraftbj, dsmart, mukeshpanchal27, burhandodhy, crunnells, Ismail-elkorchi, aryaprakasa, @tlxo, @themeroots, @whizbangik, @yingles, @youthkee, @brentswisher, @smy315, @ahmadawais, @desi-developer.

File:
1 edited

Legend:

Unmodified
Added
Removed

  • branches/5.0/src/wp-content/themes/twentynineteen/sass/navigation/_menu-main-navigation.scss

    r43860 r43892  
    1616    .main-menu {
    1717
    18         display: inline;
     18        display: inline-block;
    1919        margin: 0;
    2020        padding: 0;
    … …  
    2424            color: $color__link;
    2525            display: inline;
    26 
    27             @include media(tablet) {
    28                 position: relative;
    29             }
     26            position: relative;
    3027
    3128            > a {
    … …  
    4845
    4946                display: inline-block;
     47                position: inherit;
     48
     49                @include media(tablet) {
     50                    position: relative;
     51                }
    5052
    5153                > a {
    … …  
    6264                }
    6365
    64                 .mobile-submenu-expand svg,
    65                 .desktop-submenu-expand svg {
    66                     position: relative;
    67                     top: 0.2rem;
    68                 }
    69 
    70                 .mobile-submenu-expand,
    71                 .desktop-submenu-expand {
     66                .submenu-expand {
     67                    display: inline-block;
    7268                    margin-right: #{0.5 * $size__spacing-unit};
    73                 }
    74             }
    75 
    76             &:last-child > a {
     69
     70                    /* Priority+ Menu */
     71                    &.main-menu-more-toggle {
     72
     73                        position: relative;
     74                        height: 24px;
     75                        line-height: $font__line-height-heading;
     76                        width: 24px;
     77                        padding: 0;
     78                        margin-left: #{0.5 * $size__spacing-unit};
     79
     80                        svg {
     81                            height: 24px;
     82                            width: 24px;
     83                            top: #{-0.125 * $size__spacing-unit};
     84                            vertical-align: text-bottom;
     85                        }
     86                    }
     87
     88                    svg {
     89                        position: relative;
     90                        top: 0.2rem;
     91                    }
     92                }
     93            }
     94
     95            &:last-child > a,
     96            &:last-child.menu-item-has-children .submenu-expand {
    7797                margin-right: 0;
    7898            }
    7999        }
     100
     101        .is-hidden {
     102            display: none;
     103        }
    80104    }
    81105
    82106    .sub-menu {
    83107
    84         background: $color__link;
     108        background-color: $color__link;
    85109        color: $color__background-body;
    86110        list-style: none;
    … …  
    88112
    89113        display: none;
    90         float: left;
    91114        position: absolute;
    92115        opacity: 0;
    … …  
    95118
    96119        @include media(tablet) {
    97             width: max-content;
    98             max-width: calc(3 * (100vw / 12));
     120            width: auto;
     121            min-width: -moz-max-content;
     122            min-width: -webkit-max-content;
     123            min-width: max-content;
    99124        }
    100125
    101126        > li {
    102127
    103             clear: both;
    104128            display: block;
    105129            float: none;
    106130            position: relative;
    107             word-break: break-word;
    108131
    109132            &.menu-item-has-children {
    110133
    111                 .mobile-submenu-expand,
    112                 .desktop-submenu-expand {
     134                .submenu-expand {
     135                    display: inline-block;
    113136                    position: absolute;
    114137                    width: calc( 24px + #{$size__spacing-unit} );
    … …  
    125148                }
    126149
    127                 .mobile-submenu-expand,
    128                 .desktop-submenu-expand {
     150                .submenu-expand {
    129151                    margin-right: 0;
    130152                }
    131153
    132154                @include media(tablet) {
     155
    133156                    .menu-item-has-children > a {
    134157
    … …  
    140163            }
    141164
    142             > a:not(.mobile-submenu-expand) {
     165            > a,
     166            > .menu-item-link-return {
     167
    143168                color: $color__background-body;
    144169                display: block;
    145170                line-height: $font__line-height-heading;
    146171                padding: calc( .5 * #{$size__spacing-unit} ) calc( 24px + #{$size__spacing-unit} ) calc( .5 * #{$size__spacing-unit} ) $size__spacing-unit;
     172                white-space: nowrap;
    147173
    148174                &:hover,
    … …  
    157183
    158184            &.mobile-parent-nav-menu-item {
     185
    159186                display: none;
    160187                font-size: $font__size-sm;
    … …  
    171198
    172199    /*
     200     * Sub-menu styles
     201     *
    173202     * :focus-within needs its own selector so other similar
    174203     * selectors don’t get ignored if a browser doesn’t recognize it
    175204     */
    176     .main-menu .menu-item-has-children:focus-within > .sub-menu {
     205    .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu {
     206
    177207        display: block;
    178208        left: 0;
    179209        margin-top: 0;
    180210        opacity: 1;
    181         width: calc( 100vw - #{$size__spacing-unit * 2});
    182 
    183         .sub-menu {
    184 
    185             margin-top: inherit;
    186             position: relative;
    187             padding-left: $size__spacing-unit;
    188 
    189             @include media(tablet) {
    190                 padding-left: 0;
    191                 position: absolute;
    192                 left: 100%;
    193                 width: max-content;
    194                 top: 0;
    195             }
    196         }
    197     }
    198 
    199     .main-menu .menu-item-has-children:hover > .sub-menu,
    200     .main-menu .menu-item-has-children:focus > .sub-menu,
    201     .main-menu .menu-item-has-children .sub-menu:hover,
    202     .main-menu .menu-item-has-children .sub-menu:focus {
     211        width: auto;
     212        min-width: 100%;
     213
     214
    203215        /* Non-mobile position */
    204216        @include media(tablet) {
    205             display: table;
     217            display: block;
    206218            margin-top: 0;
    207219            opacity: 1;
    … …  
    212224            bottom: auto;
    213225            height: auto;
    214             width: max-content;
     226            min-width: -moz-max-content;
     227            min-width: -webkit-max-content;
     228            min-width: max-content;
    215229            transform: none;
    216             animation: fade_in 0.1s forwards;
     230        }
     231
     232        &.hidden-links {
     233            left: 0;
     234            width: 100%;
     235            display: table;
     236            position: absolute;
     237
     238            @include media(tablet) {
     239                right: 0;
     240                left: auto;
     241                display: block;
     242                width: max-content;
     243            }
     244        }
     245
     246        .submenu-expand {
     247            display: none;
    217248        }
    218249
    219250        .sub-menu {
    220 
     251            display: block;
     252            margin-top: inherit;
     253            position: relative;
     254            width: 100%;
     255            left: 0;
     256            opacity: 1;
     257
     258            /* Non-mobile position */
    221259            @include media(tablet) {
    222                 margin-top: inherit;
    223                 padding-left: 0;
    224                 position: absolute;
    225                 left: 100%;
    226                 top: 0;
    227             }
    228         }
    229     }
    230 
    231     .main-menu .menu-item-has-children.focus .sub-menu.expanded-true {
    232 
    233         display: table;
     260                float: none;
     261                max-width: 100%;
     262            }
     263        }
     264
     265        /* Nested sub-menu padding: 10 levels deep */
     266        .sub-menu li > a:before {
     267            font-family: $font__body;
     268            font-weight: normal;
     269        }
     270        .sub-menu > li > a:before {
     271            content: "\2013\00a0";
     272        }
     273        .sub-menu .sub-menu li > a:before {
     274            content: "\2013\00a0\2013\00a0";
     275        }
     276        .sub-menu .sub-menu .sub-menu li > a:before {
     277            content: "\2013\00a0\2013\00a0\2013\00a0";
     278        }
     279        .sub-menu .sub-menu .sub-menu .sub-menu li > a:before {
     280            content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0";
     281        }
     282        .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li > a:before {
     283            content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0";
     284        }
     285        .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li > a:before {
     286            content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0";
     287        }
     288        .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li > a:before {
     289            content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0";
     290        }
     291        .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li > a:before {
     292            content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0";
     293        }
     294        .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li > a:before {
     295            content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0";
     296        }
     297    }
     298
     299    .main-menu .menu-item-has-children:not(.off-canvas):hover > .sub-menu,
     300    .main-menu .menu-item-has-children:not(.off-canvas):focus > .sub-menu,
     301    .main-menu .menu-item-has-children.is-focused:not(.off-canvas) > .sub-menu {
     302
     303        display: block;
     304        left: 0;
    234305        margin-top: 0;
    235306        opacity: 1;
    236         padding-left: 0;
    237 
    238         /* Mobile position */
    239         left: 0;
    240         top: 0;
    241         right: 0;
    242         bottom: 0;
    243         position: fixed;
    244         z-index: 100000; /* Make sure appears above mobile admin bar */
    245         width: 100%;
    246         height:  100%;
    247         transform: translateX(+100%);
    248         animation: slide_in_right 0.3s forwards;
    249 
    250         > .mobile-parent-nav-menu-item {
    251             display: inline-block;
    252         }
    253     }
    254 
    255     /* Only show one submenu expand button at a time (desktop vs mobile) */
    256     .desktop-submenu-expand {
    257         display: none;
    258 
     307        width: auto;
     308        min-width: 100%;
     309
     310
     311        /* Non-mobile position */
    259312        @include media(tablet) {
    260             display: inline-block;
    261         }
    262     }
    263 
    264     .mobile-submenu-expand {
    265         display: inline-block;
    266 
    267         @include media(tablet) {
     313            display: block;
     314            float: none;
     315            margin-top: 0;
     316            opacity: 1;
     317            position: absolute;
     318            left: 0;
     319            right: auto;
     320            top: auto;
     321            bottom: auto;
     322            height: auto;
     323            min-width: -moz-max-content;
     324            min-width: -webkit-max-content;
     325            min-width: max-content;
     326            transform: none;
     327        }
     328
     329        &.hidden-links {
     330            left: 0;
     331            width: 100%;
     332            display: table;
     333            position: absolute;
     334
     335            @include media(tablet) {
     336                right: 0;
     337                left: auto;
     338                display: table;
     339                width: max-content;
     340            }
     341        }
     342
     343        .submenu-expand {
    268344            display: none;
    269345        }
    270     }
    271 
     346
     347        .sub-menu {
     348            display: block;
     349            margin-top: inherit;
     350            position: relative;
     351            width: 100%;
     352            left: 0;
     353            opacity: 1;
     354
     355            /* Non-mobile position */
     356            @include media(tablet) {
     357                float: none;
     358                max-width: 100%;
     359            }
     360        }
     361
     362        /* Nested sub-menu padding: 10 levels deep */
     363        .sub-menu li > a:before {
     364            font-family: $font__body;
     365            font-weight: normal;
     366        }
     367        .sub-menu > li > a:before {
     368            content: "\2013\00a0";
     369        }
     370        .sub-menu .sub-menu li > a:before {
     371            content: "\2013\00a0\2013\00a0";
     372        }
     373        .sub-menu .sub-menu .sub-menu li > a:before {
     374            content: "\2013\00a0\2013\00a0\2013\00a0";
     375        }
     376        .sub-menu .sub-menu .sub-menu .sub-menu li > a:before {
     377            content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0";
     378        }
     379        .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li > a:before {
     380            content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0";
     381        }
     382        .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li > a:before {
     383            content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0";
     384        }
     385        .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li > a:before {
     386            content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0";
     387        }
     388        .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li > a:before {
     389            content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0";
     390        }
     391        .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li > a:before {
     392            content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0";
     393        }
     394    }
     395
     396    /**
     397     * Full-screen touch device styles
     398     */
     399    .main-menu .menu-item-has-children.off-canvas .sub-menu {
     400
     401        animation: fade_in 0.1s forwards;
     402
     403        .submenu-expand .svg-icon {
     404            transform: rotate(270deg);
     405        }
     406
     407        .sub-menu {
     408            opacity: 0;
     409            position: absolute;
     410            z-index: 0;
     411            transform: translateX(-100%);
     412        }
     413
     414        li:hover,
     415        li:focus,
     416        li > a:hover,
     417        li > a:focus {
     418            background-color: transparent;
     419        }
     420
     421        &.expanded-true {
     422
     423            display: table;
     424            margin-top: 0;
     425            opacity: 1;
     426            padding-left: 0;
     427
     428            /* Mobile position */
     429            left: 0;
     430            top: 0;
     431            right: 0;
     432            bottom: 0;
     433            position: fixed;
     434            z-index: 100000; /* Make sure appears above mobile admin bar */
     435            width: 100vw;
     436            height:  100vh;
     437            max-width: 100vw;
     438            transform: translateX(+100%);
     439            animation: slide_in_right 0.3s forwards;
     440
     441            > .mobile-parent-nav-menu-item {
     442                display: block;
     443            }
     444
     445            /* Prevent menu from being blocked by admin bar */
     446            .admin-bar & {
     447                top: 46px;
     448                height: calc( 100vh - 46px );
     449
     450                .sub-menu.expanded-true {
     451                    top: 0;
     452                }
     453
     454                /* WP core breakpoint */
     455                @media only screen and ( min-width: 782px ) {
     456                    top: 32px;
     457                    height: calc( 100vh - 32px );
     458
     459                    .sub-menu.expanded-true {
     460                        top: 0;
     461                    }
     462                }
     463            }
     464        }
     465    }
    272466}
    273467
    274 /* Menu Animation */
     468/* Menu animation */
    275469
    276470@keyframes slide_in_right {
Note: See TracChangeset for help on using the changeset viewer.