WordPress.org

Make WordPress Core


Ignore:
Timestamp:
11/12/2018 11:19:13 PM (10 months 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/site/header/_site-featured-image.scss

    r43860 r43892  
    22
    33.site-header.featured-image {
     4
     5    /* Hide overflow for overflowing featured image */
     6    overflow: hidden;
    47
    58    /* Need relative positioning to properly align layers. */
     
    710
    811    /* Add text shadow to text, to increase readability. */
    9     text-shadow: 0 1px 2px rgba(black, 0.35);
     12    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    1013
    1114    /* Set white text color when featured image is set. */
     
    5558    .site-featured-image svg {
    5659        /* Use -webkit- only if supporting: Chrome < 54, iOS < 9.3, Android < 4.4.4 */
    57         -webkit-filter: drop-shadow(0 1px 2px rgba(black, 0.35) );
    58                 filter: drop-shadow(0 1px 2px rgba(black, 0.35) );
     60        -webkit-filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35) );
     61                filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35) );
    5962    }
    6063
    6164    /* Entry header */
    62 
    63     .site-featured-image .entry-header {
    64         margin-top: calc( 4 * #{$size__spacing-unit});
    65         margin-bottom: 0;
    66         margin-left: 0;
    67         margin-right: 0;
    68 
    69         @include media (tablet) {
    70 
    71             margin-left: calc(2 * (100vw / 12));
    72             margin-right: calc(2 * (100vw / 12));
    73         }
    74 
    75         .entry-title {
    76 
    77             &:before {
    78                 background: $color__background-body;
    79             }
    80         }
    81 
    82         /* Entry meta */
    83 
    84         .entry-meta {
    85 
    86             font-weight: 500;
    87 
    88             > span {
    89 
    90                 margin-right: $size__spacing-unit;
    91                 display: inline-block;
    92 
    93                 &:last-child {
    94                     margin-right: 0;
    95                 }
    96             }
    97 
    98             a {
    99 
    100                 @include link-transition;
    101                 color: currentColor;
    102 
    103                 &:hover {
    104                     text-decoration: none;
    105                 }
    106             }
    107 
    108             .svg-icon {
    109                 position: relative;
    110                 display: inline-block;
    111                 vertical-align: middle;
    112                 margin-right: 0.5em;
    113             }
    114 
    115             .discussion-avatar-list {
    116                 display: none;
    117             }
    118         }
    119 
    120         &.has-discussion {
     65    .site-featured-image {
     66
     67        /* First layer: grayscale. */
     68        .post-thumbnail img {
     69            height: auto;
     70            left: 50%;
     71            max-width: 1000%;
     72            min-height: 100%;
     73            min-width: 100vw;
     74            position: absolute;
     75            top: 50%;
     76            transform: translateX(-50%) translateY(-50%);
     77            width: auto;
     78            z-index: 1;
     79
     80            @supports ( object-fit: cover ) {
     81                height: 100%;
     82                left: 0;
     83                object-fit: cover;
     84                top: 0;
     85                transform: none;
     86                width: 100%;
     87            }
     88
     89            /* When image filters are active, make it grayscale to colorize it blue. */
     90            .image-filters-enabled & {
     91                filter: grayscale(100%);
     92            }
     93        }
     94
     95        .entry-header {
     96
     97            margin-top: calc( 4 * #{$size__spacing-unit});
     98            margin-bottom: 0;
     99            margin-left: 0;
     100            margin-right: 0;
    121101
    122102            @include media (tablet) {
    123103
    124                 .entry-meta {
    125                     display: flex;
     104                margin-left: $size__site-margins;
     105                margin-right: $size__site-margins;
     106            }
     107
     108            .entry-title {
     109
     110                &:before {
     111                    background: $color__background-body;
     112                }
     113            }
     114
     115            /* Entry meta */
     116
     117            .entry-meta {
     118
     119                font-weight: 500;
     120
     121                > span {
     122
     123                    margin-right: $size__spacing-unit;
     124                    display: inline-block;
     125
     126                    &:last-child {
     127                        margin-right: 0;
     128                    }
     129                }
     130
     131                a {
     132
     133                    @include link-transition;
     134                    color: currentColor;
     135
     136                    &:hover {
     137                        text-decoration: none;
     138                    }
     139                }
     140
     141                .svg-icon {
    126142                    position: relative;
    127                 }
    128 
    129                 .entry-title {
    130                     padding-right: calc(1 * (100vw / 12) + #{$size__spacing-unit});
    131                 }
    132 
    133                 .entry-meta .comment-count {
    134                     position: absolute;
    135                     right: 0;
    136                 }
    137 
    138                 .entry-meta .discussion-avatar-list {
    139                     display: block;
    140                     position: absolute;
    141                     bottom: 100%;
     143                    display: inline-block;
     144                    vertical-align: middle;
     145                    margin-right: 0.5em;
     146                }
     147
     148                .discussion-avatar-list {
     149                    display: none;
     150                }
     151            }
     152
     153            &.has-discussion {
     154
     155                @include media (tablet) {
     156
     157                    .entry-meta {
     158                        display: flex;
     159                        position: relative;
     160                    }
     161
     162                    .entry-title {
     163                        padding-right: calc(1 * (100vw / 12) + #{$size__spacing-unit});
     164                    }
     165
     166                    .entry-meta .comment-count {
     167                        position: absolute;
     168                        right: 0;
     169                    }
     170
     171                    .entry-meta .discussion-avatar-list {
     172                        display: block;
     173                        position: absolute;
     174                        bottom: 100%;
     175                    }
    142176                }
    143177            }
     
    171205
    172206    /* Set up image filter layer positioning */
    173     .site-branding-container:before,
    174207    .site-branding-container:after,
    175208    .site-featured-image:before,
     
    185218
    186219    /* Background & Effects */
    187     /* Shared background settings between pseudo elements. See .site-branding-container */
     220    /* Shared background settings between pseudo elements. */
    188221    background-position: center;
    189222    background-repeat: no-repeat;
     
    191224
    192225    /* The intensity of each blend mode is controlled via layer opacity. */
    193 
    194     /* First layer: grayscale. */
    195     .site-branding-container:before {
    196         background-position: center;
    197         background-repeat: no-repeat;
    198         background-size: cover;
    199         z-index: 1;
    200 
    201         /* When image filters are active, make it grayscale to colorize it blue. */
    202         .image-filters-enabled & {
    203             filter: grayscale(100%);
    204         }
    205     }
    206226
    207227    /* Second layer: screen. */
     
    213233
    214234    /* Third layer: multiply. */
    215     /* When image filters are inactive, a black overlay is added. */
    216     .site-featured-image:after {
     235    /* When image filters are inactive, a black overlay is added. */
     236    .site-featured-image:after {
    217237        background: #000;
    218238        mix-blend-mode: multiply;
     
    234254    /* Fourth layer: overlay. */
    235255    .image-filters-enabled & .site-branding-container:after {
    236         background: rgba(#000, 0.35);
     256        background: rgba(0, 0, 0, 0.35);
    237257        mix-blend-mode: overlay;
    238258        opacity: 0.5;
     
    253273         */
    254274        transition: opacity 1200ms ease-in-out;
    255         opacity: 0.7;
     275        opacity: 0.7;
    256276        z-index: 5;
    257277
Note: See TracChangeset for help on using the changeset viewer.