WordPress.org
Get WordPress

Make WordPress Core

Changeset 44752


Ignore:
Timestamp:
02/19/2019 02:01:27 AM (6 years ago)
Author:
pento
Message:

Admin: Update the About page design to match mockups.

This commit also moves the images to s.w.org, removes the old "Gutenberg has been deactivated" warning, as well as removing some old JS from About pages of years gone past.

Merges [44749] to the 5.1 branch.

Props melchoyce, ryelle, paaljoachim, karmatosed, pento.
Fixes #46161.

Location:
branches/5.1
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • branches/5.1

  • branches/5.1/src/wp-admin/about.php

    r44735 r44752  
    2626        <p class="about-text"><?php printf( __( 'Thank you for updating to the latest version!' ), $display_version ); ?></p>
    2727
    28         <?php
    29         if (
    30             // Was the Gutenberg plugin installed before upgrading to 5.0.x?
    31             get_option( 'upgrade_500_was_gutenberg_active' ) == '1' &&
    32             current_user_can( 'activate_plugins' ) &&
    33             // Has it not been reactivated since?
    34             is_plugin_inactive( 'gutenberg/gutenberg.php' ) &&
    35             // Is it still installed?
    36             file_exists( WP_PLUGIN_DIR . '/gutenberg/gutenberg.php' )
    37         ) :
    38             ?>
    39             <div class="about-text" style="font-style:italic;">
    40                 <?php
    41                 printf(
    42                     /* translators: 1: WordPress version, 2: HTML start tag of link, 3: HTML end tag of link */
    43                     __( 'The Gutenberg plugin has been deactivated, as the features are now included in WordPress %1$s by default. If you&#8217;d like to continue to test the upcoming changes in the WordPress editing experience, please %2$sreactivate the Gutenberg plugin%3$s.' ),
    44                     $display_version,
    45                     '<a href="' . esc_url( self_admin_url( 'plugins.php?s=gutenberg&plugin_status=all' ) ) . '">',
    46                     '</a>'
    47                 );
    48                 ?>
    49             </div>
    50         <?php elseif ( ! file_exists( WP_PLUGIN_DIR . '/classic-editor/classic-editor.php' ) ) : ?>
    51             <p class="about-text">
    52                 &#x2139; <a href="#classic-editor"><?php _e( 'Learn how to keep using the old editor.' ); ?></a>
    53             </p>
    54         <?php endif; ?>
    55 
    5628        <div class="wp-badge"><?php printf( __( 'Version %s' ), $display_version ); ?></div>
    5729
    … …  
    6335        </h2>
    6436
    65         <div class="feature-section one-col">
    66             <div class="col">
    67                 <h2><?php _e( 'A Little Better Every Day' ); ?></h2>
    68             </div>
    69         </div>
    70 
    71         <div class="feature-section one-col">
    72             <div class="col">
    73                 <picture>
    74                     <img src="https://make.wordpress.org/core/files/2019/01/Servehappy-Notice-with-custom-link.png" alt="" width="200">
    75                 </picture>
     37        <h2 class="feature-section-header"><?php _e( 'A Little Better Every Day' ); ?></h2>
     38
     39        <div class="feature-section headline-feature one-col">
     40            <div class="col">
     41                <div class="inline-svg">
     42                    <img src="https://s.w.org/images/core/5.1/update.svg" alt="">
     43                </div>
    7644                <p><?php _e( 'You&#8217;ve successfully upgraded to WordPress 5.1! Following WordPress 5.0&#8212;a major release which introduced the new block editor&#8212;5.1 focuses on polish, in particular by improving overall performance of the editor. In addition, this release paves the way for a better, faster, and more secure WordPress with some essential tools for site administrators and developers.' ); ?></p>
    7745            </div>
    7846        </div>
    7947
    80         <div class="feature-section one-col">
    81             <div class="col">
    82                 <h2><?php _e( 'Site Health' ); ?></h2>
     48        <div class="feature-section one-col is-wide wp-clearfix">
     49            <div class="col">
     50                <h3><?php _e( 'Site Health' ); ?></h2>
     51                <div class="inline-svg alignright">
     52                    <img src="https://s.w.org/images/core/5.1/site-health.svg" alt="">
     53                </div>
    8354                <p><?php printf( __( 'With security and speed in mind, this release introduces WordPress&#8217;s first <a href="%s">Site Health</a> features. WordPress will start showing notices to administrators of sites that run long-outdated versions of PHP, which is the programming language that powers WordPress.' ), 'https://make.wordpress.org/core/2019/01/14/php-site-health-mechanisms-in-5-1/' ); ?></p>
    8455
    8556                <p><?php _e( 'When installing new plugins, WordPress&#8217;s Site Health features will check whether a plugin requires a version of PHP incompatible with your site. If so, WordPress will prevent you from installing that plugin.' ); ?></p>
    86             </div>
    87         </div>
    88 
    89 
    90         <div class="feature-section one-col cta">
    91             <?php
    92             $response = wp_check_php_version();
    93             if ( $response && isset( $response['is_acceptable'] ) && ! $response['is_acceptable'] && current_user_can( 'update_php' ) ) :
    94                 ?>
    95                 <p><em><?php _e( 'WordPress has detected your site is running an outdated version of PHP. You will see this notice on your dashboard with instructions for contacting your host.' ); ?></em></p>
    96             <?php endif; ?>
    97 
    98             <div class="col">
    99                 <a class="button button-primary button-hero" href=""><?php _e( 'Learn more about updating PHP' ); ?></a>
    100             </div>
    101         </div>
    102 
    103         <div class="feature-section one-col">
    104             <div class="col">
    105                 <h2><?php _e( 'Editor Performance' ); ?></h2>
     57
     58                <?php
     59                $response = wp_check_php_version();
     60                if ( $response && isset( $response['is_acceptable'] ) && ! $response['is_acceptable'] && current_user_can( 'update_php' ) ) :
     61                    ?>
     62                    <p><em><?php _e( 'WordPress has detected your site is running an outdated version of PHP. You will see this notice on your dashboard with instructions for contacting your host.' ); ?></em></p>
     63                <?php endif; ?>
     64
     65                <p><a class="button button-default button-hero" href="<?php echo esc_url( wp_get_update_php_url() ); ?>"><?php _e( 'Learn more about updating PHP' ); ?></a></p>
     66            </div>
     67        </div>
     68
     69        <div class="feature-section one-col is-wide wp-clearfix">
     70            <div class="col">
     71                <h3><?php _e( 'Editor Performance' ); ?></h2>
     72                <div class="inline-svg alignright">
     73                    <img src="https://s.w.org/images/core/5.1/editor-performance.svg" alt="">
     74                </div>
    10675                <p><?php _e( 'Introduced in WordPress 5.0, the new block editor continues to improve. Most significantly, WordPress 5.1 includes solid performance improvements within the editor. The editor should feel a little quicker to start, and typing should feel smoother. Nevertheless, expect more performance improvements in the next releases.' ); ?></p>
    107             </div>
    108         </div>
    109 
    110         <?php if ( current_user_can( 'edit_posts' ) ) { ?>
    111             <div class="feature-section one-col cta">
    112                 <div class="col">
    113                     <a class="button button-primary button-hero" href="<?php echo esc_url( admin_url( 'post-new.php' ) ); ?>"><?php _e( 'Build your first post' ); ?></a>
    114                 </div>
    115             </div>
    116         <?php } ?>
     76                <?php if ( current_user_can( 'edit_posts' ) ) : ?>
     77                    <p><a class="button button-default button-hero" href="<?php echo esc_url( admin_url( 'post-new.php' ) ); ?>"><?php _e( 'Build your first post' ); ?></a></p>
     78                <?php endif; ?>
     79            </div>
     80        </div>
    11781
    11882        <hr />
    11983
    120         <div class="under-the-hood feature-section">
    121             <div class="col">
    122                 <h2><?php _e( 'Developer Happiness' ); ?></h2>
    123             </div>
    124         </div>
     84        <h3 class="under-the-hood-header"><?php _e( 'Developer Happiness' ); ?></h3>
    12585
    12686        <div class="under-the-hood feature-section three-col">
    12787            <div class="col">
    128                 <h3><?php _e( 'Multisite Metadata' ); ?></h3>
     88                <h4><?php _e( 'Multisite Metadata' ); ?></h4>
    12989                <p>
    13090                    <?php _e( '5.1 introduces a new database table to store metadata associated with sites and allows for the storage of arbitrary site data relevant in a multisite / network context.' ); ?>
    … …  
    13494            </div>
    13595            <div class="col">
    136                 <h3><?php _e( 'Cron API' ); ?></h3>
     96                <h4><?php _e( 'Cron API' ); ?></h4>
    13797                <p>
    13898                    <?php _e( 'The Cron API has been updated with new functions to assist with returning data and includes new filters for modifying cron storage. Other changes in behavior affect cron spawning on servers running FastCGI and PHP-FPM versions 7.0.16 and above.' ); ?>
    … …  
    142102            </div>
    143103            <div class="col">
    144                 <h3><?php _e( 'New JS Build Processes' ); ?></h3>
     104                <h4><?php _e( 'New JS Build Processes' ); ?></h4>
    145105                <p>
    146106                    <?php _e( 'WordPress 5.1 features a new JavaScript build option, following the large reorganization of code started in the 5.0 release.' ); ?>
    … …  
    149109                </p>
    150110            </div>
    151             <div class="col">
    152                 <h3><?php _e( 'Other Developer Goodness' ); ?></h3>
     111        </div>
     112
     113        <div class="under-the-hood feature-section two-col">
     114            <div class="col is-span-two">
     115                <h4><?php _e( 'Other Developer Goodness' ); ?></h4>
    153116                <p>
    154117                    <?php _e( 'Miscellaneous improvements include updates to values for the <code>WP_DEBUG_LOG</code> constant, new test config file constant in the test suite, new plugin action hooks, short-circuit filters for <code>wp_unique_post_slug()</code> and <code>WP_User_Query</code> and <code>count_users()</code>, a new <code>human_readable_duration</code> function, improved taxonomy metabox sanitization, limited <code>LIKE</code> support for meta keys when using <code>WP_Meta_Query</code>, a new “doing it wrong” notice when registering REST API endpoints, and more!' ); ?>
    … …  
    156119                    <?php printf( __( '<a href="%s">Read more.</a>' ), 'https://make.wordpress.org/core/2019/01/23/miscellaneous-developer-focused-changes-in-5-1/' ); ?>
    157120                </p>
    158             </div>
    159         </div>
    160 
    161         <div class="under-the-hood feature-section one-col cta">
    162             <div class="col">
    163                 <a class="button button-primary button-hero" href="<?php echo esc_url( 'https://developer.wordpress.org/' ); ?>"><?php _e( 'Learn how to get started' ); ?></a>
     121                <p>
     122                    <a class="button button-default button-hero" href="<?php echo esc_url( 'https://developer.wordpress.org/' ); ?>"><?php _e( 'Learn how to get started' ); ?></a>
     123                </p>
     124            </div>
     125            <div class="col">
     126                <div class="inline-svg">
     127                    <img src="https://s.w.org/images/core/5.1/under-the-hood.svg" alt="">
     128                </div>
    164129            </div>
    165130        </div>
    … …  
    168133
    169134        <?php if ( ! file_exists( WP_PLUGIN_DIR . '/classic-editor/classic-editor.php' ) ) : ?>
     135            <h2 class="feature-section-header"><?php _e( 'Keep it Classic' ); ?></h2>
     136
    170137            <div class="feature-section one-col" id="classic-editor">
    171                 <div class="col">
    172                     <h2><?php _e( 'Keep it Classic' ); ?></h2>
    173                 </div>
    174             </div>
    175 
    176             <div class="full-width">
    177                 <picture>
    178                     <source type="image/webp" media="(max-width: 782px)" srcset="https://s.w.org/images/core/5.0/classic/Classic%20Mobile1x.webp 1x, https://s.w.org/images/core/5.0/classic/Classic%20Mobile.webp 2x" />
    179                     <source media="(max-width: 782px)" srcset="https://s.w.org/images/core/5.0/classic/Classic%20Mobile1x.jpg 1x, https://s.w.org/images/core/5.0/classic/Classic%20Mobile.jpg 2x" />
    180                     <source type="image/webp" srcset="https://s.w.org/images/core/5.0/classic/Classic@1x.webp 1x, https://s.w.org/images/core/5.0/classic/Classic.webp 2x" />
    181                     <img src="https://s.w.org/images/core/5.0/classic/Classic@1x.jpg" srcset="https://s.w.org/images/core/5.0/classic/Classic@1x.jpg 1x, https://s.w.org/images/core/5.0/header/Classic.jpg 2x" alt="">
    182                 </picture>
    183             </div>
    184 
    185             <div class="feature-section one-col">
    186138                <div class="col">
    187139                    <p><?php _e( 'Prefer to stick with the familiar Classic Editor? No problem! Support for the Classic Editor plugin will remain in WordPress through 2021.' ); ?></p>
    … …  
    208160        </div>
    209161    </div>
    210 
    211     <script>
    212         (function( $ ) {
    213             $( function() {
    214                 var $window = $( window );
    215                 var $adminbar = $( '#wpadminbar' );
    216                 var $sections = $( '.floating-header-section' );
    217                 var offset = 0;
    218 
    219                 // Account for Admin bar.
    220                 if ( $adminbar.length ) {
    221                     offset += $adminbar.height();
    222                 }
    223 
    224                 function setup() {
    225                     $sections.each( function( i, section ) {
    226                         var $section = $( section );
    227                         // If the title is long, switch the layout
    228                         var $title = $section.find( 'h2' );
    229                         if ( $title.innerWidth() > 300 ) {
    230                             $section.addClass( 'has-long-title' );
    231                         }
    232                     } );
    233                 }
    234 
    235                 var adjustScrollPosition = _.throttle( function adjustScrollPosition() {
    236                     $sections.each( function( i, section ) {
    237                         var $section = $( section );
    238                         var $header = $section.find( 'h2' );
    239                         var width = $header.innerWidth();
    240                         var height = $header.innerHeight();
    241 
    242                         if ( $section.hasClass( 'has-long-title' ) ) {
    243                             return;
    244                         }
    245 
    246                         var sectionStart = $section.offset().top - offset;
    247                         var sectionEnd = sectionStart + $section.innerHeight();
    248                         var scrollPos = $window.scrollTop();
    249 
    250                         // If we're scrolled into a section, stick the header
    251                         if ( scrollPos >= sectionStart && scrollPos < sectionEnd - height ) {
    252                             $header.css( {
    253                                 position: 'fixed',
    254                                 top: offset + 'px',
    255                                 bottom: 'auto',
    256                                 width: width + 'px'
    257                             } );
    258                         // If we're at the end of the section, stick the header to the bottom
    259                         } else if ( scrollPos >= sectionEnd - height && scrollPos < sectionEnd ) {
    260                             $header.css( {
    261                                 position: 'absolute',
    262                                 top: 'auto',
    263                                 bottom: 0,
    264                                 width: width + 'px'
    265                             } );
    266                         // Unstick the header
    267                         } else {
    268                             $header.css( {
    269                                 position: 'static',
    270                                 top: 'auto',
    271                                 bottom: 'auto',
    272                                 width: 'auto'
    273                             } );
    274                         }
    275                     } );
    276                 }, 100 );
    277 
    278                 function enableFixedHeaders() {
    279                     if ( $window.width() > 782 ) {
    280                         setup();
    281                         adjustScrollPosition();
    282                         $window.on( 'scroll', adjustScrollPosition );
    283                     } else {
    284                         $window.off( 'scroll', adjustScrollPosition );
    285                         $sections.find( '.section-header' )
    286                             .css( {
    287                                 width: 'auto'
    288                             } );
    289                         $sections.find( 'h2' )
    290                             .css( {
    291                                 position: 'static',
    292                                 top: 'auto',
    293                                 bottom: 'auto',
    294                                 width: 'auto'
    295                             } );
    296                     }
    297                 }
    298                 $( window ).resize( enableFixedHeaders );
    299                 enableFixedHeaders();
    300             } );
    301         })( jQuery );
    302     </script>
    303 
    304162<?php
    305163

  • branches/5.1/src/wp-admin/css/about.css

    r44637 r44752  
    150150}
    151151
     152.about-wrap .under-the-hood-header {
     153    margin: 40px 0 0;
     154    text-align: center;
     155}
     156
    152157.about-wrap h4 {
    153158    color: #23282d;
    … …  
    188193}
    189194
    190 .about-wrap .feature-section.one-col {
     195.about-wrap .one-col {
    191196    margin: 0 auto;
    192197    max-width: 680px;
     198}
     199
     200.about-wrap .one-col.is-wide {
     201    max-width: 760px;
     202}
     203
     204.about-wrap .under-the-hood {
     205    margin: auto;
     206    max-width: 1020px;
    193207}
    194208
    … …  
    203217}
    204218
     219.about-wrap .under-the-hood .inline-svg {
     220    margin-left: 100px;
     221}
     222
    205223.about-wrap [class$="-col"] .col {
    206224    flex: 1;
    207 }
    208 
    209 .about-wrap .two-col .col {
    210     min-width: 47%;
    211     max-width: 47%;
    212 }
    213 
    214 .about-wrap .three-col,
    215 .about-wrap .four-col {
    216     margin: auto;
    217     max-width: 1020px;
    218 }
    219 
    220 .about-wrap .three-col .col {
    221225    align-self: flex-start;
    222     min-width: 31%;
    223     max-width: 31%;
    224 }
    225 
    226 .about-wrap .four-col .col {
    227     align-self: flex-start;
    228     min-width: 23%;
    229     max-width: 23%;
    230 }
    231 
    232 .about-wrap .feature-section.eight-col .col {
    233     align-self: flex-start;
    234     margin-top: 6px;
    235     min-width: 12%;
    236     max-width: 12%;
     226}
     227
     228.about-wrap [class$="-col"] .col + .col {
     229    margin-left: 20px;
     230}
     231
     232.about-wrap [class$="-col"] .is-span-two {
     233    flex: 2;
    237234}
    238235
    … …  
    241238}
    242239
     240.about-wrap .one-col .alignright img {
     241    margin-top: 0;
     242}
     243
    243244.about-wrap .two-col img {
    244245    margin-bottom: 1.5em;
    … …  
    257258}
    258259
     260.about-wrap .inline-svg.alignright {
     261    margin-left: 80px;
     262}
     263
    259264.about-wrap .cta {
    260265    text-align: center;
    261266}
     267
    262268.about-wrap .cta .button {
    263269    margin: 0 auto 5px;
    … …  
    265271}
    266272
     273.about-wrap .feature-section .button {
     274    margin-top: 1.5em;
     275    font-weight: 600;
     276}
     277
    267278/* 1.3 - Point Releases */
    268279
    … …  
    286297/* 2.1 - Typography */
    287298
     299.about-wrap .feature-section-header {
     300    margin: 50px 0 0;
     301}
     302
    288303.about-wrap .feature-section.two-col h3 {
    289304    margin-top: 0;
    … …  
    324339/* 2.2 - Structure */
    325340
    326 .about-wrap .headline-feature.feature-video {
    327     position: relative;
    328     margin: 40px 0;
    329     padding-bottom: 56.25%;
    330     width: 100%;
    331     max-width: 100%;
    332     height: 0;
    333     text-align: center;
    334 }
    335 
    336 .about-wrap .feature-video embed {
    337     position: absolute;
    338     top: 0;
    339     left: 0;
    340     width: 100%;
    341     height: 100%;
     341.about-wrap .headline-feature {
     342    margin-bottom: 40px;
    342343}
    343344
    … …  
    501502------------------------------------------------------------------------------*/
    502503
    503 @media screen and (max-width: 1250px) {
    504     .about-wrap .floating-header-section.has-long-title .section-item:nth-child(1),
    505     .about-wrap .floating-header-section.has-long-title .section-item:nth-child(2) {
    506         margin: 0 0 60px;
    507     }
    508 
    509     .about-wrap .floating-header-section.has-long-title .section-item:nth-child(3),
    510     .about-wrap .floating-header-section.has-long-title .section-item:nth-child(4) {
    511         margin: 0;
    512     }
    513 
    514     .about-wrap .floating-header-section.has-long-title .section-item:nth-child(2),
    515     .about-wrap .floating-header-section.has-long-title .section-item:nth-child(4) {
    516         margin-left: 60px;
    517     }
    518 }
    519 
    520504@media screen and (max-width: 782px) {
    521505    .about-wrap .two-col-text {
    522506        column-count: 1;
     507    }
     508
     509    .about-wrap .one-col .alignright {
     510        margin-left: 20px;
     511        max-width: 150px;
    523512    }
    524513
    … …  
    527516    .about-wrap .four-col .col {
    528517        min-width: 48% !important;
     518        max-width: 48% !important;
     519        margin-left: 0 !important;
    529520    }
    530521
    … …  
    550541    }
    551542
    552     .about-wrap .floating-header-section {
    553         display: block;
    554     }
    555 
    556     .about-wrap .floating-header-section .section-header,
    557     .about-wrap .floating-header-section .section-content {
    558         max-width: 100%;
    559     }
    560 
    561     .about-wrap .floating-header-section h2 {
    562         position: static;
    563         margin-bottom: 60px;
     543    .about-wrap .under-the-hood .inline-svg {
     544        margin-left: 40px;
    564545    }
    565546}
    … …  
    584565        margin-bottom: 1.5em;
    585566        width: 100%;
     567    }
     568
     569    .about-wrap .one-col .alignright {
     570        max-width: 120px;
    586571    }
    587572
    … …  
    617602    }
    618603
    619     .about-wrap .floating-header-section {
    620         margin-bottom: 60px;
    621         grid-gap: 30px 0;
     604    .about-wrap .under-the-hood .inline-svg {
     605        display: none;
    622606    }
    623607
    … …  
    625609        margin-bottom: 60px;
    626610    }
    627 
    628     .about-wrap .floating-header-section h2 {
    629         word-break: break-all;
    630         -webkit-hyphens: auto;
    631         -ms-hyphens: auto;
    632         hyphens: auto;
    633     }
    634 
    635     .about-wrap .floating-header-section .section-content .section-item {
    636         max-width: 100%;
    637         margin: 0 0 60px;
    638     }
    639 }
     611}
     612
     613@media only screen and (max-width: 320px) {
     614    .about-wrap .one-col .alignright {
     615        float: none;
     616        margin: 0 auto;
     617    }
     618    .about-wrap .one-col .alignright img {
     619        margin: 0 0 1em;
     620    }
     621}
Note: See TracChangeset for help on using the changeset viewer.