WordPress.org
Get WordPress

Make WordPress Core


Ignore:
Timestamp:
11/07/2017 04:10:41 AM (6 years ago)
Author:
melchoyce
Message:

About Page: Implement design.

Props ryelle, karmatosed, transl8or, obenland, melchoyce.
See #42087.

File:
1 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-admin/about.php

    r42044 r42121  
    1010require_once( dirname( __FILE__ ) . '/admin.php' );
    1111
    12 if ( ! wp_is_mobile() ) {
    13     wp_enqueue_style( 'wp-mediaelement' );
    14     wp_enqueue_script( 'mediaelement-vimeo' );
    15     wp_enqueue_script( 'wp-mediaelement' );
    16     wp_localize_script( 'mediaelement', '_wpmejsSettings', array(
    17         'pluginPath'        => includes_url( 'js/mediaelement/', 'relative' ),
    18         'classPrefix'       => 'mejs-',
    19         'stretching'        => 'responsive',
    20         'pauseOtherPlayers' => '',
    21     ) );
    22 }
    23 
    24 $video_url = 'https://videopress.com/embed/AHz0Ca46?hd=true';
    25 $lang_code = str_replace( '_', '-', get_user_locale() );
    26 list( $lang_code ) = explode( '-', $lang_code );
    27 if ( 'en' !== $lang_code ) {
    28     $video_url = add_query_arg( 'defaultLangCode', $lang_code, $video_url );
    29 }
     12wp_enqueue_script( 'underscore' );
    3013
    3114$title = __( 'About' );
    … …  
    3518include( ABSPATH . 'wp-admin/admin-header.php' );
    3619?>
    37     <div class="wrap about-wrap">
     20    <div class="wrap about-wrap full-width-layout">
    3821        <h1><?php printf( __( 'Welcome to WordPress&nbsp;%s' ), $display_version ); ?></h1>
    3922
    … …  
    6346        </div>
    6447
    65         <hr />
    66 
    67         <h2>
    68             <?php
    69                 printf(
    70                     /* translators: %s: wrench emoji */
    71                     __( 'Customizer Workflow Improved %s' ),
    72                     '&#x1F527'
    73                 );
    74             ?>
    75         </h2>
    76 
    77         <div class="headline-feature one-col">
    78             <div class="col">
    79                
    80             </div>
    81         </div>
    82 
    83         <div class="feature-section two-col">
    84             <div class="col">
    85                 <h3><?php _e( 'Draft and Schedule Site Design Customizations' ); ?></h3>
    86                 <p><?php _e( 'Yes, you read that right. Just like you can draft and revise posts and schedule them to go live on the date and time you choose, you can now tinker with your site&#8217;s design and schedule those design changes to go live as you please.' ); ?></p>
    87             </div>
    88             <div class="col">
    89                 <h3><?php _e( 'Collaborate with Design Preview Links' ); ?></h3>
    90                 <p><?php _e( 'Need to get some feedback on proposed site design changes? WordPress 4.9 gives you a preview link you can send to your team and customers so that you can collect and integrate feedback before you schedule the changes to go live. Can we say collaboration&#43;&#43;?' ); ?></p>
    91             </div>
    92             <div class="col">
    93                 <h3><?php _e( 'Design Locking To Guard Your Changes' ); ?></h3>
    94                 <p><?php _e( 'Ever encounter a scenario where two designers walk into a project and designer A overrides designer B&#8217;s beautiful changes? WordPress 4.9&#8217;s design lock feature (similar to post locking) secures your draft design so that no one can make changes to it or erase all your hard work.' );?></p>
    95             </div>
    96             <div class="col">
    97                 <h3><?php _e( 'A Prompt to Protect Your Work' ); ?></h3>
    98                 <p><?php _e( 'Were you lured away from your desk before you saved your new draft design? Fear not, when you return, WordPress 4.9 will politely ask whether or not you&#8217;d like to save your unsaved changes.' ); ?></p>
    99             </div>
    100         </div>
    101 
    102         <hr />
    103        
    104         <h2>
    105             <?php
    106                 printf(
    107                     /* translators: %s: technologist (woman) emoji */
    108                     __( 'Coding Enhancements %s' ),
    109                     '&#x1F469;&#x1F3FE;&#x200D;&#x1F4BB'
    110                 );
    111             ?>
    112         </h2>
    113 
    114         <div class="feature-section three-col">
    115             <div class="col">
    116                 <h3><?php _e( 'Syntax Highlighting and Error Checking? Yes, Please!' ); ?></h3>
    117                 <p><?php _e( 'You&#8217;ve got a display problem but can&#8217;t quite figure out exactly what went wrong in the CSS you lovingly wrote. With syntax highlighting and error checking for CSS editing and the Custom HTML widget introduced in WordPress 4.8.1, you&#8217;ll pinpoint coding errors quickly. Practically guaranteed to help you scan code more easily and suss out and fix code errors quickly.' ); ?></p>
    118             </div>
    119             <div class="col">
    120                 <h3><?php _e( 'Sandbox for Safety' ); ?></h3>
    121                 <p><?php _e( 'The dreaded white screen. You&#8217;ll avoid it when working on themes and plugin code because WordPress 4.9 will warn you about saving an error. You&#8217;ll sleep better at night.' ); ?></p>
    122             </div>
    123             <div class="col">
    124                 <h3><?php _e( 'Warning: Potential Danger Ahead!' ); ?></h3>
    125                 <p><?php _e( 'When you edit themes and plugins directly, WordPress 4.9 will politely warn you that this is a dangerous practice. It will recommend that you backup your files before saving, so they don&#8217;t get overwritten by the next update. Take the safe route: your future self will thank you. Your team and customers will thank you.' );?></p>
    126             </div>
    127         </div>
    128 
    129         <hr />
    130 
    131         <h2>
    132             <?php
    133                 printf(
    134                     /* translators: %s: frame with picture emoji */
    135                     __( 'Even More Widget Updates %s' ),
    136                     '&#x1F5BC'
    137                 );
    138             ?>
    139         </h2>
    140 
    141         <div class="feature-section two-col">
    142             <div class="col">
    143                 <h3><?php _e( 'The New Gallery Widget' ); ?></h3>
    144                 <p><?php _e( 'An incremental improvement to the media changes hatched in WordPress 4.8, you can now add a gallery via widget. Yes!' ); ?></p>
    145             </div>
    146             <div class="col">
    147                 <h3><?php _e( 'Press a Button, Add Media' ); ?></h3>
    148                 <p><?php _e( 'Want to add media to your text widget? Embed images, video, and audio directly into the widget along with your text, with our simple but useful Add Media button. Woo!' ); ?></p>
    149             </div>
    150         </div>
    151 
    152         <hr />
    153 
    154         <h2>
    155             <?php
    156                 printf(
    157                     /* translators: %s: hammer emoji */
    158                     __( 'Site Building Improvements %s' ),
    159                     '&#x1F528'
    160                 );
    161             ?> 
    162         </h2>
    163 
    164         <div class="feature-section two-col">
    165             <div class="col">
    166                 <h3><?php _e( 'More Reliable Theme Switching' ); ?></h3>
    167                 <p><?php _e( 'When you switch themes, widgets sometimes think they can just up and move location. Improvements in WordPress 4.9 offer more persistent menu and widget placement when you decide it&#8217;s time for a new theme. Additionally, you can preview installed themes or download, install, and preview new themes right. Nothing says handy like being able to preview before you deploy. ' ); ?></p>
    168             </div>
    169             <div class="col">
    170                 <h3><?php _e( 'Better Menu Instructions = Less Confusion' ); ?></h3>
    171                 <p><?php _e( 'Were you confused by the steps to create a new menu? Perhaps no longer! We&#8217;ve ironed out the UX for a smoother menu creation process. Newly updated copy will guide you.' ); ?></p>
    172             </div>
    173         </div>
    174 
    175         <hr />
    176        
    177         <div class="feature-section one-col">
    178             <div class="col">
    179                 <h2>
    180                     <?php
    181                         printf(
    182                             /* translators: %s: handshake emoji */
    183                             __( 'Lend a Hand with Gutenberg %s' ),
    184                             '&#x1F91D'
    185                         );
    186                     ?>
    187                 </h2>
    188                 <p><?php printf(
    189                     __( 'WordPress is working on a new way to create and control your content and we&#8217;d love to have your help. Interested in being an <a href="%s">early tester</a> or getting involved with the Gutenberg project? <a href="%s">Contribute on GitHub</a>.' ),
    190                     __( 'https://wordpress.org/plugins/gutenberg/' ),
    191                     'https://github.com/WordPress/gutenberg' ); ?></p>
    192             </div>
    193         </div>
    194        
     48        <div class="inline-svg full-width">
     49            <picture>
     50                <source media="(max-width: 500px)" srcset="<?php echo 'https://s.w.org/images/core/4.9/banner-mobile.svg'; ?>">
     51                <img src="<?php echo 'https://s.w.org/images/core/4.9/banner.svg'; ?>" alt="">
     52            </picture>
     53        </div>
     54
     55        <div class="floating-header-section">
     56            <h2><?php _e( 'Customizer Workflow Improved' ); ?></h2>
     57
     58            <div class="section-content">
     59                <div class="section-item">
     60                    <div class="inline-svg">
     61                        <img src="<?php echo 'https://s.w.org/images/core/4.9/draft-and-schedule.svg'; ?>" alt="">
     62                    </div>
     63                    <h3><?php _e( 'Draft and Schedule Site Design Customizations' ); ?></h3>
     64                    <p><?php _e( 'Yes, you read that right. Just like you can draft and revise posts and schedule them to go live on the date and time you choose, you can now tinker with your site&#8217;s design and schedule those design changes to go live as you please.' ); ?></p>
     65                </div>
     66                <div class="section-item">
     67                    <div class="inline-svg">
     68                        <img src="<?php echo 'https://s.w.org/images/core/4.9/design-preview-links.svg'; ?>" alt="">
     69                    </div>
     70                    <h3><?php _e( 'Collaborate with Design Preview Links' ); ?></h3>
     71                    <p><?php _e( 'Need to get some feedback on proposed site design changes? WordPress 4.9 gives you a preview link you can send to your team and customers so that you can collect and integrate feedback before you schedule the changes to go live. Can we say collaboration&#43;&#43;?' ); ?></p>
     72                </div>
     73                <div class="section-item">
     74                    <div class="inline-svg">
     75                        <img src="<?php echo 'https://s.w.org/images/core/4.9/locking.svg'; ?>" alt="">
     76                    </div>
     77                    <h3><?php _e( 'Design Locking To Guard Your Changes' ); ?></h3>
     78                    <p><?php _e( 'Ever encounter a scenario where two designers walk into a project and designer A overrides designer B&#8217;s beautiful changes? WordPress 4.9&#8217;s design lock feature (similar to post locking) secures your draft design so that no one can make changes to it or erase all your hard work.' );?></p>
     79                </div>
     80                <div class="section-item">
     81                    <div class="inline-svg">
     82                        <img src="<?php echo 'https://s.w.org/images/core/4.9/prompt.svg'; ?>" alt="">
     83                    </div>
     84                    <h3><?php _e( 'A Prompt to Protect Your Work' ); ?></h3>
     85                    <p><?php _e( 'Were you lured away from your desk before you saved your new draft design? Fear not, when you return, WordPress 4.9 will politely ask whether or not you&#8217;d like to save your unsaved changes.' ); ?></p>
     86                </div>
     87            </div>
     88        </div>
     89
     90        <div class="floating-header-section">
     91            <h2><?php _e( 'Coding Enhancements' ); ?></h2>
     92
     93            <div class="section-content">
     94                <div class="section-item">
     95                    <div class="inline-svg">
     96                        <img src="<?php echo 'https://s.w.org/images/core/4.9/syntax-highlighting.svg'; ?>" alt="">
     97                    </div>
     98                    <h3><?php _e( 'Syntax Highlighting and Error Checking? Yes, Please!' ); ?></h3>
     99                    <p><?php _e( 'You&#8217;ve got a display problem but can&#8217;t quite figure out exactly what went wrong in the CSS you lovingly wrote. With syntax highlighting and error checking for CSS editing and the Custom HTML widget introduced in WordPress 4.8.1, you&#8217;ll pinpoint coding errors quickly. Practically guaranteed to help you scan code more easily and suss out and fix code errors quickly.' ); ?></p>
     100                </div>
     101                <div class="section-item">
     102                    <div class="inline-svg">
     103                        <img src="<?php echo 'https://s.w.org/images/core/4.9/sandbox.svg'; ?>" alt="">
     104                    </div>
     105                    <h3><?php _e( 'Sandbox for Safety' ); ?></h3>
     106                    <p><?php _e( 'The dreaded white screen. You&#8217;ll avoid it when working on themes and plugin code because WordPress 4.9 will warn you about saving an error. You&#8217;ll sleep better at night.' ); ?></p>
     107                </div>
     108                <div class="section-item">
     109                    <div class="inline-svg">
     110                        <img src="<?php echo 'https://s.w.org/images/core/4.9/warning.svg'; ?>" alt="">
     111                    </div>
     112                    <h3><?php _e( 'Warning: Potential Danger Ahead!' ); ?></h3>
     113                    <p><?php _e( 'When you edit themes and plugins directly, WordPress 4.9 will politely warn you that this is a dangerous practice. It will recommend that you backup your files before saving, so they don&#8217;t get overwritten by the next update. Take the safe route: your future self will thank you. Your team and customers will thank you.' );?></p>
     114                </div>
     115            </div>
     116        </div>
     117
     118        <div class="floating-header-section">
     119            <h2><?php _e( 'Even More Widget Updates' ); ?></h2>
     120
     121            <div class="section-content">
     122                <div class="section-item">
     123                    <div class="inline-svg">
     124                        <img src="<?php echo 'https://s.w.org/images/core/4.9/gallery-widget.svg'; ?>" alt="">
     125                    </div>
     126                    <h3><?php _e( 'The New Gallery Widget' ); ?></h3>
     127                    <p><?php _e( 'An incremental improvement to the media changes hatched in WordPress 4.8, you can now add a gallery via widget. Yes!' ); ?></p>
     128                </div>
     129                <div class="section-item">
     130                    <div class="inline-svg">
     131                        <img src="<?php echo 'https://s.w.org/images/core/4.9/media-button.svg'; ?>" alt="">
     132                    </div>
     133                    <h3><?php _e( 'Press a Button, Add Media' ); ?></h3>
     134                    <p><?php _e( 'Want to add media to your text widget? Embed images, video, and audio directly into the widget along with your text, with our simple but useful Add Media button. Woo!' ); ?></p>
     135                </div>
     136            </div>
     137        </div>
     138
     139        <div class="floating-header-section">
     140            <h2><?php _e( 'Site Building Improvements' ); ?></h2>
     141
     142            <div class="section-content">
     143                <div class="section-item">
     144                    <div class="inline-svg">
     145                        <img src="<?php echo 'https://s.w.org/images/core/4.9/theme-switching.svg'; ?>" alt="">
     146                    </div>
     147                    <h3><?php _e( 'More Reliable Theme Switching' ); ?></h3>
     148                    <p><?php _e( 'When you switch themes, widgets sometimes think they can just up and move location. Improvements in WordPress 4.9 offer more persistent menu and widget placement when you decide it&#8217;s time for a new theme. Additionally, you can preview installed themes or download, install, and preview new themes right. Nothing says handy like being able to preview before you deploy. ' ); ?></p>
     149                </div>
     150                <div class="section-item">
     151                    <div class="inline-svg">
     152                        <img src="<?php echo 'https://s.w.org/images/core/4.9/menu-flow.svg'; ?>" alt="">
     153                    </div>
     154                    <h3><?php _e( 'Better Menu Instructions = Less Confusion' ); ?></h3>
     155                    <p><?php _e( 'Were you confused by the steps to create a new menu? Perhaps no longer! We&#8217;ve ironed out the UX for a smoother menu creation process. Newly updated copy will guide you.' ); ?></p>
     156                </div>
     157            </div>
     158        </div>
     159
     160        <div class="inline-svg">
     161            <picture>
     162                <source media="(max-width: 500px)" srcset="<?php echo 'https://s.w.org/images/core/4.9/gutenberg-mobile.svg'; ?>">
     163                <img src="<?php echo 'https://s.w.org/images/core/4.9/gutenberg.svg'; ?>" alt="">
     164            </picture>
     165        </div>
     166
     167        <div class="feature-section">
     168            <h2>
     169                <?php
     170                    printf(
     171                        /* translators: %s: handshake emoji */
     172                        __( 'Lend a Hand with Gutenberg %s' ),
     173                        '&#x1F91D'
     174                    );
     175                ?>
     176            </h2>
     177            <p><?php printf(
     178                __( 'WordPress is working on a new way to create and control your content and we&#8217;d love to have your help. Interested in being an <a href="%s">early tester</a> or getting involved with the Gutenberg project? <a href="%s">Contribute on GitHub</a>.' ),
     179                __( 'https://wordpress.org/plugins/gutenberg/' ),
     180                'https://github.com/WordPress/gutenberg' ); ?></p>
     181        </div>
     182
    195183        <hr />
    196184
    … …  
    204192            ?></h2>
    205193
    206             <div class="under-the-hood three-col">
     194            <div class="under-the-hood two-col">
    207195                <div class="col">
    208                     <h3><a href="#"><?php _e( 'Heading' ); ?></a></h3>
    209                     <p><?php _e( 'Paragraph' ); ?></p>
     196                    <h3><a href="https://make.wordpress.org/core/2017/11/01/improvements-to-the-customize-js-api-in-4-9/"><?php _e( 'Customizer JS API Improvements' ); ?></a></h3>
     197                    <p><?php
     198                        printf(
     199                            /* translators: %s: https://make.wordpress.org/core/2017/11/01/improvements-to-the-customize-js-api-in-4-9/  */
     200                            __( 'We&#8217;ve made numerous improvements to the Customizer JS API in WordPress 4.9, eliminating many pain points and making it just as easy to work with as the PHP API. There are also new base control templates, a date/time control, and section/panel/global notifications to name a few. <a href="%s">Check out the full list.</a>' ),
     201                            'https://make.wordpress.org/core/2017/11/01/improvements-to-the-customize-js-api-in-4-9/'
     202                        );
     203                    ?></p>
    210204                </div>
    211205                <div class="col">
    212                     <h3><a href="#"><?php _e( 'Heading' ); ?></a></h3>
    213                     <p><?php _e( 'Paragraph' ); ?></p>
     206                    <h3><a href="https://make.wordpress.org/core/2017/10/22/code-editing-improvements-in-wordpress-4-9/"><?php _e( 'CodeMirror available for use in your themes and plugins' ); ?></a></h3>
     207                    <p><?php _e( 'We&#8217;ve introduced a new code editing library, CodeMirror, for use within core. Use it to improve any code writing or editing experiences within your plugins, like CSS or JavaScript include fields.' ); ?></p>
    214208                </div>
    215209                <div class="col">
    216                     <h3><a href="#"><?php _e( 'Heading' ); ?></a></h3>
    217                     <p><?php _e( 'Paragraph' ); ?></p>
     210                    <h3><a href="https://make.wordpress.org/core/2017/10/30/mediaelement-upgrades-in-wordpress-4-9/"><?php _e( 'MediaElement.js upgraded to 4.2.6' ); ?></a></h3>
     211                    <p><?php _e( 'WordPress 4.9 includes an upgraded version of MediaElement.js, which removes dependencies on jQuery, improves accessibility, modernizes the UI, and fixes many bugs.' ); ?></p>
    218212                </div>
    219213                <div class="col">
    220                     <h3><a href="#"><?php _e( 'Heading' ); ?></a></h3>
    221                     <p><?php _e( 'Paragraph' ); ?></p>
    222                 </div>
    223                 <div class="col">
    224                     <h3><a href="#"><?php _e( 'Heading' ); ?></a></h3>
    225                     <p><?php _e( 'Paragraph' ); ?></p>
    226                 </div>
    227                 <div class="col">
    228                     <h3><a href="#"><?php _e( 'Heading' ); ?></a></h3>
    229                     <p><?php _e( 'Paragraph' ); ?></p>
     214                    <h3><a href="https://make.wordpress.org/core/2017/10/15/improvements-for-roles-and-capabilities-in-4-9/"><?php _e( 'Roles and Capability Improvements' ); ?></a></h3>
     215                    <p><?php _e( 'New capabilities have been introduced that allow granular management of plugins and translation files. In addition, the site switching process in multisite has been fine-tuned to update the available roles and capabilities in a more reliable and coherent way.' ); ?></p>
    230216                </div>
    231217            </div>
    … …  
    242228            <a href="<?php echo esc_url( self_admin_url() ); ?>"><?php is_blog_admin() ? _e( 'Go to Dashboard &rarr; Home' ) : _e( 'Go to Dashboard' ); ?></a>
    243229        </div>
    244 
    245230    </div>
     231
     232    <script>
     233        (function( $ ) {
     234            $( function() {
     235                var $window = $( window );
     236                var $adminbar = $( '#wpadminbar' );
     237                var $sections = $( '.floating-header-section' );
     238                var offset = 0;
     239
     240                // Account for Admin bar.
     241                if ( $adminbar.length ) {
     242                    offset += $adminbar.height();
     243                }
     244
     245                var adjustScrollClass = _.throttle( function adjustScrollClass() {
     246                    $sections.each( function( i, section ) {
     247                        var $section = $( section );
     248                        var $header = $section.find( 'h2' );
     249                        var width = $header.innerWidth();
     250
     251                        var sectionStart = $section.offset().top - offset;
     252                        var sectionEnd = sectionStart + $section.innerHeight() - 60;
     253
     254                        // If we're scrolled into a section, stick the header
     255                        if ( $window.scrollTop() >= sectionStart && $window.scrollTop() < sectionEnd ) {
     256                            $header.addClass( 'header-fixed' );
     257                            $header.css( { top: offset + 'px', width: width + 'px' } );
     258                        } else {
     259                            $header.removeClass( 'header-fixed' );
     260                            $header.css( { top: 0, width: 'auto' } );
     261                        }
     262                    } );
     263                }, 100 );
     264                function enableFixedHeaders() {
     265                    if ( $window.width() > 782 ) {
     266                        adjustScrollClass();
     267                        $window.on( 'scroll', adjustScrollClass );
     268                    } else {
     269                        $window.off( 'scroll', adjustScrollClass );
     270                        $sections.find( 'h2' )
     271                            .removeClass( 'header-fixed' )
     272                            .css( { top: 0, width: 'auto' } );
     273                    }
     274                }
     275                $( window ).resize( enableFixedHeaders );
     276                enableFixedHeaders();
     277            } );
     278        })( jQuery );
     279    </script>
     280
    246281<?php
    247282
Note: See TracChangeset for help on using the changeset viewer.