Make WordPress Core

Ticket #42087: 42087.6.diff

File 42087.6.diff, 30.3 KB (added by ryelle, 7 years ago)
  • src/wp-admin/about.php

     
    99/** WordPress Administration Bootstrap */
    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 }
     12wp_enqueue_script( 'underscore' );
    2313
    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 }
    30 
    3114$title = __( 'About' );
    3215
    3316list( $display_version ) = explode( '-', get_bloginfo( 'version' ) );
     
    3417
    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
    4023                <p class="about-text"><?php printf( __( 'Thank you for updating to the latest version! WordPress %s will smooth your design workflow and keep you safe from coding errors.' ), $display_version ); ?></p>
     
    6245                        </div>
    6346                </div>
    6447
    65                 <hr />
     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>
    6654
    67                 <h2>
    68                         <?php
    69                                 printf(
    70                                         /* translators: %s: wrench emoji */
    71                                         __( 'Customizer Workflow Improved %s' ),
    72                                         '&#x1F527'
    73                                 );
    74                         ?>
    75                 </h2>
     55                <div class="floating-header-section">
     56                        <h2><?php _e( 'Customizer Workflow Improved' ); ?></h2>
    7657
    77                 <div class="headline-feature one-col">
    78                         <div class="col">
    79                                
     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>
    8087                        </div>
    8188                </div>
    8289
    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>
     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>
    87115                        </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>
    100116                </div>
    101117
    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>
     118                <div class="floating-header-section">
     119                        <h2><?php _e( 'Even More Widget Updates' ); ?></h2>
    113120
    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>
     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>
    118136                        </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>
    127137                </div>
    128138
    129                 <hr />
     139                <div class="floating-header-section">
     140                        <h2><?php _e( 'Site Building Improvements' ); ?></h2>
    130141
    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>
     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>
    145157                        </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>
    150158                </div>
    151159
    152                 <hr />
     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>
    153166
    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>
     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>
    173181                </div>
    174182
    175183                <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                
    195                 <hr />
    196184
    197185                <div class="changelog">
    198186                        <h2><?php
     
    203191                                );
    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>
     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>
    222216                                </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>
    230                                 </div>
    231217                        </div>
    232218                </div>
    233219
     
    241227                        <?php endif; ?>
    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>
     230        </div>
    244231
    245         </div>
     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
    248283include( ABSPATH . 'wp-admin/admin-footer.php' );
  • src/wp-admin/credits.php

     
    1616
    1717include( ABSPATH . 'wp-admin/admin-header.php' );
    1818?>
    19 <div class="wrap about-wrap">
     19<div class="wrap about-wrap full-width-layout">
    2020
    2121<h1><?php printf( __( 'Welcome to WordPress %s' ), $display_version ); ?></h1>
    2222
     
    3131        <a href="privacy.php" class="nav-tab"><?php _e( 'Privacy' ); ?></a>
    3232</h2>
    3333
     34<div class="about-wrap-content">
    3435<?php
    3536
    3637$credits = wp_credits();
     
    4445        );
    4546        echo '</p>';
    4647        echo '</div>';
     48        echo '</div>';
    4749        include( ABSPATH . 'wp-admin/admin-footer.php' );
    4850        exit;
    4951}
     
    107109?></p>
    108110
    109111</div>
     112</div>
    110113<?php
    111114
    112115include( ABSPATH . 'wp-admin/admin-footer.php' );
  • src/wp-admin/css/about.css

     
    88   2.0 About Page
    99    2.1 Typography
    1010    2.2 Structure
     11    2.3 Floating Header Layout
    1112   3.0 Credits & Freedoms Pages
    1213------------------------------------------------------------------------------*/
    1314
     
    2223        font-size: 15px;
    2324}
    2425
     26.about-wrap.full-width-layout {
     27        max-width: 1200px;
     28}
     29
     30.about-wrap-content {
     31        max-width: 1050px;
     32}
     33
    2534.about-wrap div.updated,
    2635.about-wrap div.error,
    2736.about-wrap .notice {
     
    173182        max-width: 700px;
    174183}
    175184
     185.about-wrap .inline-svg img {
     186        max-width: 100%;
     187        width: 100%;
     188        height: auto;
     189}
     190
     191.about-wrap .inline-svg.full-width {
     192        margin-bottom: 120px;
     193}
     194
    176195.about-wrap [class$="-col"] .col {
    177196        -webkit-box-flex: 1;
    178197        flex: 1;
     
    335354        padding: 0 5px;
    336355}
    337356
     357/* 2.3 Floating Header Layout */
     358
     359.about-wrap .floating-header-section {
     360        display: grid;
     361        grid-gap: 0 60px;
     362        grid-template-columns: 5fr 11fr;
     363        max-width: 1020px;
     364        margin: 0 auto 120px;
     365}
     366
     367.about-wrap .floating-header-section h2 {
     368        grid-column: 1;
     369        text-align: left;
     370        margin: 0;
     371}
     372
     373.about-wrap .floating-header-section .header-fixed {
     374        position: fixed;
     375        width: 300px;
     376}
     377
     378.about-wrap .floating-header-section .section-content {
     379        display: grid;
     380        grid-gap: 60px;
     381        grid-template-columns: 5fr 5fr;
     382        grid-column: 2;
     383}
     384
     385.about-wrap .floating-header-section .section-item:nth-of-type(odd) {
     386        grid-column: 1;
     387}
     388
     389.about-wrap .floating-header-section .section-item:nth-of-type(even) {
     390        grid-column: 2;
     391}
     392
    338393/*------------------------------------------------------------------------------
    339394  3.0 - Credits & Freedoms Pages
    340395------------------------------------------------------------------------------*/
     
    441496                display: block;
    442497                margin: 0 auto;
    443498        }
     499
     500        .about-wrap .floating-header-section {
     501                grid-template-columns: 1fr;
     502                grid-gap: 60px 0;
     503        }
     504
     505        .about-wrap .floating-header-section h2,
     506        .about-wrap .floating-header-section .section-content {
     507                grid-column: 1;
     508        }
    444509}
    445510
    446511@media only screen and (max-width: 500px) {
     
    485550        .about-wrap .under-the-hood:nth-of-type(3n) h3 {
    486551                margin-top: 0;
    487552        }
     553
     554        .about-wrap .floating-header-section {
     555                margin-bottom: 60px;
     556                grid-gap: 30px 0;
     557        }
     558
     559        .about-wrap .inline-svg.full-width {
     560                margin-bottom: 60px;
     561        }
     562
     563        .about-wrap .floating-header-section .section-content {
     564                grid-template-columns: 1fr;
     565                grid-gap: 60px 0;
     566        }
     567
     568        .about-wrap .floating-header-section .section-content .section-item {
     569                grid-column: 1;
     570        }
    488571}
  • src/wp-admin/freedoms.php

     
    1515
    1616include( ABSPATH . 'wp-admin/admin-header.php' );
    1717?>
    18 <div class="wrap about-wrap">
     18<div class="wrap about-wrap full-width-layout">
    1919
    2020<h1><?php printf( __( 'Welcome to WordPress %s' ), $display_version ); ?></h1>
    2121
     
    3030        <a href="privacy.php" class="nav-tab"><?php _e( 'Privacy' ); ?></a>
    3131</h2>
    3232
    33 <p class="about-description"><?php printf( __( 'WordPress is Free and open source software, built by a distributed community of mostly volunteer developers from around the world. WordPress comes with some awesome, worldview-changing rights courtesy of its <a href="%s">license</a>, the GPL.' ), 'https://wordpress.org/about/license/' ); ?></p>
     33<div class="about-wrap-content">
     34        <p class="about-description"><?php printf( __( 'WordPress is Free and open source software, built by a distributed community of mostly volunteer developers from around the world. WordPress comes with some awesome, worldview-changing rights courtesy of its <a href="%s">license</a>, the GPL.' ), 'https://wordpress.org/about/license/' ); ?></p>
    3435
    35 <ol start="0">
    36         <li><p><?php _e( 'You have the freedom to run the program, for any purpose.' ); ?></p></li>
    37         <li><p><?php _e( 'You have access to the source code, the freedom to study how the program works, and the freedom to change it to make it do what you wish.' ); ?></p></li>
    38         <li><p><?php _e( 'You have the freedom to redistribute copies of the original program so you can help your neighbor.' ); ?></p></li>
    39         <li><p><?php _e( 'You have the freedom to distribute copies of your modified versions to others. By doing this you can give the whole community a chance to benefit from your changes.' ); ?></p></li>
    40 </ol>
     36        <ol start="0">
     37                <li><p><?php _e( 'You have the freedom to run the program, for any purpose.' ); ?></p></li>
     38                <li><p><?php _e( 'You have access to the source code, the freedom to study how the program works, and the freedom to change it to make it do what you wish.' ); ?></p></li>
     39                <li><p><?php _e( 'You have the freedom to redistribute copies of the original program so you can help your neighbor.' ); ?></p></li>
     40                <li><p><?php _e( 'You have the freedom to distribute copies of your modified versions to others. By doing this you can give the whole community a chance to benefit from your changes.' ); ?></p></li>
     41        </ol>
    4142
    42 <p><?php printf( __( 'WordPress grows when people like you tell their friends about it, and the thousands of businesses and services that are built on and around WordPress share that fact with their users. We&#8217;re flattered every time someone spreads the good word, just make sure to <a href="%s">check out our trademark guidelines</a> first.' ), 'https://wordpressfoundation.org/trademark-policy/' ); ?></p>
     43        <p><?php printf( __( 'WordPress grows when people like you tell their friends about it, and the thousands of businesses and services that are built on and around WordPress share that fact with their users. We&#8217;re flattered every time someone spreads the good word, just make sure to <a href="%s">check out our trademark guidelines</a> first.' ), 'https://wordpressfoundation.org/trademark-policy/' ); ?></p>
    4344
    44 <p><?php
     45        <p><?php
    4546
    46 $plugins_url = current_user_can( 'activate_plugins' ) ? admin_url( 'plugins.php' ) : __( 'https://wordpress.org/plugins/' );
    47 $themes_url = current_user_can( 'switch_themes' ) ? admin_url( 'themes.php' ) : __( 'https://wordpress.org/themes/' );
     47        $plugins_url = current_user_can( 'activate_plugins' ) ? admin_url( 'plugins.php' ) : __( 'https://wordpress.org/plugins/' );
     48        $themes_url = current_user_can( 'switch_themes' ) ? admin_url( 'themes.php' ) : __( 'https://wordpress.org/themes/' );
    4849
    49 printf( __( 'Every plugin and theme in WordPress.org&#8217;s directory is 100%% GPL or a similarly free and compatible license, so you can feel safe finding <a href="%1$s">plugins</a> and <a href="%2$s">themes</a> there. If you get a plugin or theme from another source, make sure to <a href="%3$s">ask them if it&#8217;s GPL</a> first. If they don&#8217;t respect the WordPress license, we don&#8217;t recommend them.' ), $plugins_url, $themes_url, 'https://wordpress.org/about/license/' ); ?></p>
     50        printf( __( 'Every plugin and theme in WordPress.org&#8217;s directory is 100%% GPL or a similarly free and compatible license, so you can feel safe finding <a href="%1$s">plugins</a> and <a href="%2$s">themes</a> there. If you get a plugin or theme from another source, make sure to <a href="%3$s">ask them if it&#8217;s GPL</a> first. If they don&#8217;t respect the WordPress license, we don&#8217;t recommend them.' ), $plugins_url, $themes_url, 'https://wordpress.org/about/license/' ); ?></p>
    5051
    51 <p><?php _e( 'Don&#8217;t you wish all software came with these freedoms? So do we! For more information, check out the <a href="https://www.fsf.org/">Free Software Foundation</a>.' ); ?></p>
     52        <p><?php _e( 'Don&#8217;t you wish all software came with these freedoms? So do we! For more information, check out the <a href="https://www.fsf.org/">Free Software Foundation</a>.' ); ?></p>
     53</div>
    5254
    5355</div>
    5456<?php include( ABSPATH . 'wp-admin/admin-footer.php' ); ?>
  • src/wp-admin/privacy.php

     
    1515
    1616include( ABSPATH . 'wp-admin/admin-header.php' );
    1717?>
    18 <div class="wrap about-wrap">
     18<div class="wrap about-wrap full-width-layout">
    1919
    2020<h1><?php printf( __( 'Welcome to WordPress %s' ), $display_version ); ?></h1>
    2121
     
    3030        <a href="privacy.php" class="nav-tab nav-tab-active"><?php _e( 'Privacy' ); ?></a>
    3131</h2>
    3232
    33 <p class="about-description"><?php _e( 'From time to time, your WordPress site may send data to WordPress.org &#8212; including, but not limited to &#8212; the version of WordPress you are using, and a list of installed plugins and themes.' ); ?></p>
     33<div class="about-wrap-content">
     34        <p class="about-description"><?php _e( 'From time to time, your WordPress site may send data to WordPress.org &#8212; including, but not limited to &#8212; the version of WordPress you are using, and a list of installed plugins and themes.' ); ?></p>
    3435
    35 <p><?php printf( __( 'This data is used to provide general enhancements to WordPress, which includes helping to protect your site by finding and automatically installing new updates. It is also used to calculate statistics, such as those shown on the <a href="%s">WordPress.org stats page</a>.' ), 'https://wordpress.org/about/stats/' ); ?></p>
     36        <p><?php printf( __( 'This data is used to provide general enhancements to WordPress, which includes helping to protect your site by finding and automatically installing new updates. It is also used to calculate statistics, such as those shown on the <a href="%s">WordPress.org stats page</a>.' ), 'https://wordpress.org/about/stats/' ); ?></p>
    3637
    37 <p><?php printf( __( 'We take privacy and transparency very seriously. To learn more about what data we collect, and how we use it, please visit <a href="%s">WordPress.org/about/privacy</a>.' ), 'https://wordpress.org/about/privacy/' ); ?></p>
     38        <p><?php printf( __( 'We take privacy and transparency very seriously. To learn more about what data we collect, and how we use it, please visit <a href="%s">WordPress.org/about/privacy</a>.' ), 'https://wordpress.org/about/privacy/' ); ?></p>
     39</div>
    3840
    3941</div>
    4042<?php include( ABSPATH . 'wp-admin/admin-footer.php' ); ?>