WordPress.org

Make WordPress Core

Ticket #45178: 45178.3.diff

File 45178.3.diff, 29.6 KB (added by melchoyce, 9 months ago)

Made some markup and style edits, and added in some initial Twenty Nineteen images, courtesy of @kjellr. Still a WIP.

  • src/wp-admin/about.php

     
    1616
    1717list( $display_version ) = explode( '-', get_bloginfo( 'version' ) );
    1818
     19wp_enqueue_style( 'wp-block-library' );
     20
    1921include( ABSPATH . 'wp-admin/admin-header.php' );
    2022?>
    2123        <div class="wrap about-wrap full-width-layout">
    2224                <h1><?php printf( __( 'Welcome to WordPress&nbsp;%s' ), $display_version ); ?></h1>
    2325
    24                 <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>
     26                <p class="about-text"><?php printf( __( 'Thank you for updating to the latest version! WordPress %s introduces a robust new content creation experience.' ), $display_version ); ?></p>
     27                <p class="about-text"><?php printf( __( 'Need to use the old editor? <a href="%s">Learn how</a>.' ), 'https://wordpress.org/plugins/classic-editor' ); ?></p>
    2528                <div class="wp-badge"><?php printf( __( 'Version %s' ), $display_version ); ?></div>
    2629
    2730                <h2 class="nav-tab-wrapper wp-clearfix">
    … …  
    3134                        <a href="freedoms.php?privacy-notice" class="nav-tab"><?php _e( 'Privacy' ); ?></a>
    3235                </h2>
    3336
    34                 <div class="changelog point-releases">
    35                         <h3><?php _e( 'Maintenance and Security Releases' ); ?></h3>
    36                         <p>
    37                                 <?php
    38                                 printf(
    39                                         /* translators: 1: WordPress version number, 2: plural number of bugs. */
    40                                         _n(
    41                                                 '<strong>Version %1$s</strong> addressed %2$s bug.',
    42                                                 '<strong>Version %1$s</strong> addressed %2$s bugs.',
    43                                                 46
    44                                         ),
    45                                         '4.9.8',
    46                                         number_format_i18n( 46 )
    47                                 );
    48                                 ?>
    49                                 <?php
    50                                 /* translators: %s: Codex URL */
    51                                 printf( __( 'For more information, see <a href="%s">the release notes</a>.' ), 'https://codex.wordpress.org/Version_4.9.8' );
    52                                 ?>
    53                         </p>
    54                         <p>
    55                                 <?php
    56                                 printf(
    57                                         /* translators: 1: WordPress version number, 2: plural number of bugs. */
    58                                         _n(
    59                                                 '<strong>Version %1$s</strong> addressed some security issues and fixed %2$s bug.',
    60                                                 '<strong>Version %1$s</strong> addressed some security issues and fixed %2$s bugs.',
    61                                                 17
    62                                         ),
    63                                         '4.9.7',
    64                                         number_format_i18n( 17 )
    65                                 );
    66                                 ?>
    67                                 <?php
    68                                 /* translators: %s: Codex URL */
    69                                 printf( __( 'For more information, see <a href="%s">the release notes</a>.' ), 'https://codex.wordpress.org/Version_4.9.7' );
    70                                 ?>
    71                         </p>
    72                         <p>
    73                                 <?php
    74                                 printf(
    75                                         /* translators: 1: WordPress version number, 2: plural number of bugs. */
    76                                         _n(
    77                                                 '<strong>Version %1$s</strong> addressed %2$s bug.',
    78                                                 '<strong>Version %1$s</strong> addressed %2$s bugs.',
    79                                                 18
    80                                         ),
    81                                         '4.9.6',
    82                                         number_format_i18n( 18 )
    83                                 );
    84                                 ?>
    85                                 <?php
    86                                 /* translators: %s: Codex URL */
    87                                 printf( __( 'For more information, see <a href="%s">the release notes</a>.' ), 'https://codex.wordpress.org/Version_4.9.6' );
    88                                 ?>
    89                         </p>
    90                         <p>
    91                                 <?php
    92                                 printf(
    93                                         /* translators: 1: WordPress version number, 2: plural number of bugs. */
    94                                         _n(
    95                                                 '<strong>Version %1$s</strong> addressed some security issues and fixed %2$s bug.',
    96                                                 '<strong>Version %1$s</strong> addressed some security issues and fixed %2$s bugs.',
    97                                                 28
    98                                         ),
    99                                         '4.9.5',
    100                                         number_format_i18n( 28 )
    101                                 );
    102                                 ?>
    103                                 <?php
    104                                 /* translators: %s: Codex URL */
    105                                 printf( __( 'For more information, see <a href="%s">the release notes</a>.' ), 'https://codex.wordpress.org/Version_4.9.5' );
    106                                 ?>
    107                         </p>
    108                         <p>
    109                                 <?php
    110                                 printf(
    111                                         /* translators: 1: WordPress version number, 2: plural number of bugs. */
    112                                         _n(
    113                                                 '<strong>Version %1$s</strong> addressed %2$s bug.',
    114                                                 '<strong>Version %1$s</strong> addressed %2$s bugs.',
    115                                                 1
    116                                         ),
    117                                         '4.9.4',
    118                                         number_format_i18n( 1 )
    119                                 );
    120                                 ?>
    121                                 <?php
    122                                 /* translators: %s: Codex URL */
    123                                 printf( __( 'For more information, see <a href="%s">the release notes</a>.' ), 'https://codex.wordpress.org/Version_4.9.4' );
    124                                 ?>
    125                         </p>
    126                         <p>
    127                                 <?php
    128                                 printf(
    129                                         /* translators: 1: WordPress version number, 2: plural number of bugs. */
    130                                         _n(
    131                                                 '<strong>Version %1$s</strong> addressed %2$s bug.',
    132                                                 '<strong>Version %1$s</strong> addressed %2$s bugs.',
    133                                                 34
    134                                         ),
    135                                         '4.9.3',
    136                                         number_format_i18n( 34 )
    137                                 );
    138                                 ?>
    139                                 <?php
    140                                 /* translators: %s: Codex URL */
    141                                 printf( __( 'For more information, see <a href="%s">the release notes</a>.' ), 'https://codex.wordpress.org/Version_4.9.3' );
    142                                 ?>
    143                         </p>
    144                         <p>
    145                                 <?php
    146                                 printf(
    147                                         /* translators: 1: WordPress version number, 2: plural number of bugs. */
    148                                         _n(
    149                                                 '<strong>Version %1$s</strong> addressed some security issues and fixed %2$s bug.',
    150                                                 '<strong>Version %1$s</strong> addressed some security issues and fixed %2$s bugs.',
    151                                                 22
    152                                         ),
    153                                         '4.9.2',
    154                                         number_format_i18n( 22 )
    155                                 );
    156                                 ?>
    157                                 <?php
    158                                 /* translators: %s: Codex URL */
    159                                 printf( __( 'For more information, see <a href="%s">the release notes</a>.' ), 'https://codex.wordpress.org/Version_4.9.2' );
    160                                 ?>
    161                         </p>
    162                         <p>
    163                                 <?php
    164                                 printf(
    165                                         /* translators: 1: WordPress version number, 2: plural number of bugs. */
    166                                         _n(
    167                                                 '<strong>Version %1$s</strong> addressed some security issues and fixed %2$s bug.',
    168                                                 '<strong>Version %1$s</strong> addressed some security issues and fixed %2$s bugs.',
    169                                                 11
    170                                         ),
    171                                         '4.9.1',
    172                                         number_format_i18n( 11 )
    173                                 );
    174                                 ?>
    175                                 <?php
    176                                 /* translators: %s: Codex URL */
    177                                 printf( __( 'For more information, see <a href="%s">the release notes</a>.' ), 'https://codex.wordpress.org/Version_4.9.1' );
    178                                 ?>
    179                         </p>
    180                 </div>
    181 
    18237                <div class="feature-section one-col">
    18338                        <div class="col">
    184                                 <h2>
    185                                         <?php
    186                                                 printf(
    187                                                         /* translators: %s: party popper emoji */
    188                                                         __( 'Major Customizer Improvements, Code Error Checking, and More! %s' ),
    189                                                         '&#x1F389'
    190                                                 );
    191                                         ?>
    192                                 </h2>
    193                                 <p><?php _e( 'Welcome to an improved Customizer workflow with design drafts, locking, scheduling, and preview links. What&#8217;s more, code syntax highlighting and error checking will make for a clean and smooth site building experience. Finally, if all that wasn&#8217;t pretty great, we&#8217;ve got a great new Gallery widget and improvements to theme browsing and switching.' ); ?></p>
     39                                <h2><?php _e( 'Say Hello to the New Editor' ); ?></h2>
    19440                        </div>
    19541                </div>
    19642
    197                 <div class="inline-svg full-width">
    198                         <picture>
    199                                 <source media="(max-width: 500px)" srcset="<?php echo 'https://s.w.org/images/core/4.9/banner-mobile.svg'; ?>">
    200                                 <img src="https://s.w.org/images/core/4.9/banner.svg" alt="">
    201                         </picture>
     43                <div class="full-width">
     44                        <img src="https://wordpress.org/gutenberg/files/2018/11/Gutenberg-Screenshot.png" alt="">
    20245                </div>
    20346
    204                 <div class="floating-header-section">
    205                         <div class="section-header">
    206                                 <h2><?php _e( 'Customizer Workflow Improved' ); ?></h2>
     47                <div class="feature-section one-col">
     48                        <div class="col">
     49                                <p><?php _e( 'We call the new editor Gutenberg. The entire editing experience has been rebuilt for media rich pages and posts. Experience the flexibility that blocks will bring, whether you are building your first site, or write code for a living.' ); ?></p>
    20750                        </div>
     51                </div>
    20852
    209                         <div class="section-content">
    210                                 <div class="section-item">
    211                                         <div class="inline-svg">
    212                                                 <img src="https://s.w.org/images/core/4.9/draft-and-schedule.svg" alt="">
    213                                         </div>
    214                                         <h3><?php _e( 'Draft and Schedule Site Design Customizations' ); ?></h3>
    215                                         <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>
    216                                 </div>
    217                                 <div class="section-item">
    218                                         <div class="inline-svg">
    219                                                 <img src="https://s.w.org/images/core/4.9/design-preview-links.svg" alt="">
    220                                         </div>
    221                                         <h3><?php _e( 'Collaborate with Design Preview Links' ); ?></h3>
    222                                         <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>
    223                                 </div>
    224                                 <div class="section-item">
    225                                         <div class="inline-svg">
    226                                                 <img src="https://s.w.org/images/core/4.9/locking.svg" alt="">
    227                                         </div>
    228                                         <h3><?php _e( 'Design Locking To Guard Your Changes' ); ?></h3>
    229                                         <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>
    230                                 </div>
    231                                 <div class="section-item">
    232                                         <div class="inline-svg">
    233                                                 <img src="https://s.w.org/images/core/4.9/prompt.svg" alt="">
    234                                         </div>
    235                                         <h3><?php _e( 'A Prompt to Protect Your Work' ); ?></h3>
    236                                         <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>
    237                                 </div>
     53                <div class="feature-section four-col">
     54                        <div class="col">
     55                                <figure>
     56                                        <img src="https://wordpress.org/gutenberg/files/2018/07/Plugin-1-1.gif" alt=""/>
     57                                        <figcaption><?php _e( 'Do more with fewer plugins.' ); ?></figcaption>
     58                                </figure>
    23859                        </div>
     60                        <div class="col">
     61                                <figure>
     62                                        <img src="https://wordpress.org/gutenberg/files/2018/07/Layout-3.gif" alt=""/>
     63                                        <figcaption><?php _e( 'Create modern, multimedia-heavy layouts.' ); ?></figcaption>
     64                                </figure>
     65                        </div>
     66                        <div class="col">
     67                                <figure>
     68                                        <img src="https://wordpress.org/gutenberg/files/2018/07/Devices-1-1.gif" alt=""/>
     69                                        <figcaption><?php _e( 'Work across all screen sizes and devices.' ); ?></figcaption>
     70                                </figure>
     71                        </div>
     72                        <div class="col">
     73                                <figure>
     74                                        <img src="https://wordpress.org/gutenberg/files/2018/07/Visual-1.gif" alt=""/>
     75                                        <figcaption><?php _e( 'Trust that your editor looks like your website.' ); ?></figcaption>
     76                                </figure>
     77                        </div>
    23978                </div>
    24079
    241                 <div class="floating-header-section">
    242                         <div class="section-header">
    243                                 <h2><?php _e( 'Coding Enhancements' ); ?></h2>
     80                <div class="feature-section one-col">
     81                        <div class="col">
     82                                <h2><?php _e( 'Meet your new best friends, Blocks' ); ?></h2>
     83                                <p><?php _e( 'Blocks are a great new tool for building engaging content. With blocks, you can insert, rearrange, and style multimedia content with very little technical knowledge. Instead of using custom code, you can add a block and focus on your content.' ); ?></p>
     84                                <img src="https://wordpress.org/gutenberg/files/2018/07/Insert-Block-2-1.gif" alt="">
     85                                <p><?php _e( 'Without being an expert developer, you can build your own custom posts and pages. Here’s a selection of the default blocks included with Gutenberg:' ); ?></p>
    24486                        </div>
     87                </div>
    24588
    246                         <div class="section-content">
    247                                 <div class="section-item">
    248                                         <div class="inline-svg">
    249                                                 <img src="https://s.w.org/images/core/4.9/syntax-highlighting.svg" alt="">
    250                                         </div>
    251                                         <h3><?php _e( 'Syntax Highlighting and Error Checking? Yes, Please!' ); ?></h3>
    252                                         <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>
    253                                 </div>
    254                                 <div class="section-item">
    255                                         <div class="inline-svg">
    256                                                 <img src="https://s.w.org/images/core/4.9/sandbox.svg" alt="">
    257                                         </div>
    258                                         <h3><?php _e( 'Sandbox for Safety' ); ?></h3>
    259                                         <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>
    260                                 </div>
    261                                 <div class="section-item">
    262                                         <div class="inline-svg">
    263                                                 <img src="https://s.w.org/images/core/4.9/warning.svg" alt="">
    264                                         </div>
    265                                         <h3><?php _e( 'Warning: Potential Danger Ahead!' ); ?></h3>
    266                                         <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>
    267                                 </div>
     89                <div class="feature-section eight-col">
     90                        <div class="col">
     91                                <figure>
     92                                        <img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon.png" alt=""/>
     93                                        <figcaption><?php _e( 'Paragraph' ); ?></figcaption>
     94                                </figure>
    26895                        </div>
     96                        <div class="col">
     97                                <figure>
     98                                        <img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon-Heading.png" alt=""/>
     99                                        <figcaption><?php _e( 'Heading' ); ?></figcaption>
     100                                </figure>
     101                        </div>
     102                        <div class="col">
     103                                <figure>
     104                                        <img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon-Subheading.png" alt=""/>
     105                                        <figcaption><?php _e( 'Subheading' ); ?></figcaption>
     106                                </figure>
     107                        </div>
     108                        <div class="col">
     109                                <figure>
     110                                        <img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon-Quote.png" alt=""/>
     111                                        <figcaption><?php _e( 'Quote' ); ?></figcaption>
     112                                </figure>
     113                        </div>
     114                        <div class="col">
     115                                <figure>
     116                                        <img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon-Image.png" alt=""/>
     117                                        <figcaption><?php _e( 'Image' ); ?></figcaption>
     118                                </figure>
     119                        </div>
     120                        <div class="col">
     121                                <figure>
     122                                        <img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon-Gallery.png" alt=""/>
     123                                        <figcaption><?php _e( 'Gallery' ); ?></figcaption>
     124                                </figure>
     125                        </div>
     126                        <div class="col">
     127                                <figure>
     128                                        <img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon-Cover-Image.png" alt=""/>
     129                                        <figcaption><?php _e( 'Cover Image' ); ?></figcaption>
     130                                </figure>
     131                        </div>
     132                        <div class="col">
     133                                <figure>
     134                                        <img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon-Video.png" alt=""/>
     135                                        <figcaption><?php _e( 'Video' ); ?></figcaption>
     136                                </figure>
     137                        </div>
     138                        <div class="col">
     139                                <figure>
     140                                        <img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon-Audio.png" alt=""/>
     141                                        <figcaption><?php _e( 'Audio' ); ?></figcaption>
     142                                </figure>
     143                        </div>
     144                        <div class="col">
     145                                <figure>
     146                                        <img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon-Column.png" alt=""/>
     147                                        <figcaption><?php _e( 'Columns' ); ?></figcaption>
     148                                </figure>
     149                        </div>
     150                        <div class="col">
     151                                <figure>
     152                                        <img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon-File.png" alt=""/>
     153                                        <figcaption><?php _e( 'File' ); ?></figcaption>
     154                                </figure>
     155                        </div>
     156                        <div class="col">
     157                                <figure>
     158                                        <img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon-Code.png" alt=""/>
     159                                        <figcaption><?php _e( 'Code' ); ?></figcaption>
     160                                </figure>
     161                        </div>
     162                        <div class="col">
     163                                <figure>
     164                                        <img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon-List.png" alt=""/>
     165                                        <figcaption><?php _e( 'List' ); ?></figcaption>
     166                                </figure>
     167                        </div>
     168                        <div class="col">
     169                                <figure>
     170                                        <img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon-Button.png" alt=""/>
     171                                        <figcaption><?php _e( 'Button' ); ?></figcaption>
     172                                </figure>
     173                        </div>
     174                        <div class="col">
     175                                <figure>
     176                                        <img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon-Embeds.png" alt=""/>
     177                                        <figcaption><?php _e( 'Embeds' ); ?></figcaption>
     178                                </figure>
     179                        </div>
     180                        <div class="col">
     181                                <figure>
     182                                        <img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon-More.png" alt=""/>
     183                                        <figcaption><?php _e( 'More' ); ?></figcaption>
     184                                </figure>
     185                        </div>
    269186                </div>
    270187
    271                 <div class="floating-header-section">
    272                         <div class="section-header">
    273                                 <h2><?php _e( 'Even More Widget Updates' ); ?></h2>
     188                <div class="feature-section one-col">
     189                        <div class="col">
     190                                <h2><?php _e( 'Be your own builder' ); ?></h2>
     191                                <p><?php _e( 'A single block is nice—reliable, clear, distinct. Discover the flexibility to use media and content, side by side, driven by your vision.' ); ?></p>
     192                                <img src="https://wordpress.org/gutenberg/files/2018/08/Builder.gif" alt="">
    274193                        </div>
     194                </div>
     195               
     196                <hr />
    275197
    276                         <div class="section-content">
    277                                 <div class="section-item">
    278                                         <div class="inline-svg">
    279                                                 <img src="https://s.w.org/images/core/4.9/gallery-widget.svg" alt="">
    280                                         </div>
    281                                         <h3><?php _e( 'The New Gallery Widget' ); ?></h3>
    282                                         <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>
    283                                 </div>
    284                                 <div class="section-item">
    285                                         <div class="inline-svg">
    286                                                 <img src="https://s.w.org/images/core/4.9/media-button.svg" alt="">
    287                                         </div>
    288                                         <h3><?php _e( 'Press a Button, Add Media' ); ?></h3>
    289                                         <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>
    290                                 </div>
     198                <div class="feature-section one-col">
     199                        <div class="col">
     200                                <h2><?php _e( 'A Stunning New Default Theme' ); ?></h2>
    291201                        </div>
    292202                </div>
    293203
    294                 <div class="floating-header-section">
    295                         <div class="section-header">
    296                                 <h2><?php _e( 'Site Building Improvements' ); ?></h2>
    297                         </div>
     204                <div class="full-width">
     205                        <img src="https://wordpress.org/gutenberg/files/2018/11/twenty-nineteen.png" alt="">
     206                </div>
    298207
    299                         <div class="section-content">
    300                                 <div class="section-item">
    301                                         <div class="inline-svg">
    302                                                 <img src="https://s.w.org/images/core/4.9/theme-switching.svg" alt="">
    303                                         </div>
    304                                         <h3><?php _e( 'More Reliable Theme Switching' ); ?></h3>
    305                                         <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>
    306                                 </div>
    307                                 <div class="section-item">
    308                                         <div class="inline-svg">
    309                                                 <img src="https://s.w.org/images/core/4.9/menu-flow.svg" alt="">
    310                                         </div>
    311                                         <h3><?php _e( 'Better Menu Instructions = Less Confusion' ); ?></h3>
    312                                         <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>
    313                                 </div>
     208                <div class="feature-section one-col">
     209                        <div class="col">
     210                                <p><?php _e( 'Welcome to Twenty Nineteen, a brand new default theme which shows off the power of Gutenberg and block editing.' ); ?></p>
    314211                        </div>
    315212                </div>
    316213
    317                 <div class="inline-svg">
    318                         <picture>
    319                                 <source media="(max-width: 500px)" srcset="<?php echo 'https://s.w.org/images/core/4.9/gutenberg-mobile.svg'; ?>">
    320                                 <img src="https://s.w.org/images/core/4.9/gutenberg.svg" alt="">
    321                         </picture>
     214                <div class="feature-section three-col">
     215                        <div class="col">
     216                                <img src="https://wordpress.org/gutenberg/files/2018/11/twenty-nineteen-gutenberg.png" alt="">
     217                                <h3>Designed for the block editor</h3>
     218                                <p><?php _e( "Twenty Nineteen features custom styles for Gutenberg's default blocks. It makes extensive use of editor styles, so what you create in the editor looks like what your visitors will see." ); ?></p>
     219                        </div>
     220                        <div class="col">
     221                                <img src="https://wordpress.org/gutenberg/files/2018/11/twenty-nineteen-type.png" alt="">
     222                                <h3>Simple, type-driven layout</h3>
     223                                <p><?php _e( 'Feature ample whitespace, and moderns sans-serif headlines paired with classic serif body text, Twenty Nineteen is build to be beautiful on the go. It uses system fonts to increase loading speed. No more long waits on slow networks!' ); ?></p>
     224                        </div>
     225                        <div class="col">
     226                                <img src="https://wordpress.org/gutenberg/files/2018/11/twenty-nineteen-versatile.gif" alt="">
     227                                <h3>Versatile design for all sites</h3>
     228                                <p><?php _e( "Twenty Nineteen is designed to work for a wide variety of uses, whether you're running a photo blog or launching a new business." ); ?></p>
     229                        </div>
    322230                </div>
    323231
    324                 <div class="feature-section">
    325                         <h2>
    326                                 <?php
    327                                         printf(
    328                                                 /* translators: %s: handshake emoji */
    329                                                 __( 'Lend a Hand with Gutenberg %s' ),
    330                                                 '&#x1F91D'
    331                                         );
    332                                 ?>
    333                         </h2>
    334                         <p><?php printf(
    335                                 __( '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>.' ),
    336                                 __( 'https://wordpress.org/plugins/gutenberg/' ),
    337                                 'https://github.com/WordPress/gutenberg' ); ?></p>
    338                 </div>
    339 
    340232                <hr />
    341233
    342234                <div class="changelog">
    343                         <h2><?php
    344                                 printf(
    345                                         /* translators: %s: smiling face with smiling eyes emoji */
    346                                         __( 'Developer Happiness %s' ),
    347                                         '&#x1F60A'
    348                                 );
    349                         ?></h2>
     235                        <h2><?php _e( 'Developer Happiness' ); ?></h2>
    350236
    351                         <div class="under-the-hood two-col">
     237                        <div class="under-the-hood three-col">
    352238                                <div class="col">
    353                                         <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>
    354                                         <p><?php
    355                                                 printf(
    356                                                         /* translators: %s: https://make.wordpress.org/core/2017/11/01/improvements-to-the-customize-js-api-in-4-9/  */
    357                                                         __( '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>' ),
    358                                                         'https://make.wordpress.org/core/2017/11/01/improvements-to-the-customize-js-api-in-4-9/'
    359                                                 );
    360                                         ?></p>
     239                                        <h3><a href="#"><?php _e( 'Built with modern tech.' ); ?></a></h3>
     240                                        <p><?php _e( 'Gutenberg was developed on GitHub using the WordPress REST API, JavaScript, and React.' ); ?></p>
    361241                                </div>
    362242                                <div class="col">
    363                                         <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>
    364                                         <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>
     243                                        <h3><a href="#"><?php _e( 'Designed for compatibility.' ); ?></a></h3>
     244                                        <p><?php _e( 'We recommend migrating features to blocks, but support for existing WordPress functionality remains. There will be transition paths for shortcodes, meta boxes, and Custom Post Types.' ); ?></p>
    365245                                </div>
    366246                                <div class="col">
    367                                         <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>
    368                                         <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>
     247                                        <h3><a href="#"><?php _e( 'Something Else.' ); ?></a></h3>
     248                                        <p><?php _e( 'Gutenberg is available as a plugin today, and will be included in version 5.0 of WordPress. The classic editor will be available as a plugin if needed.' ); ?></p>
    369249                                </div>
    370                                 <div class="col">
    371                                         <h3><a href="https://make.wordpress.org/core/2017/10/15/improvements-for-roles-and-capabilities-in-4-9/"><?php _e( 'Improvements to Roles and Capabilities' ); ?></a></h3>
    372                                         <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>
    373                                 </div>
    374250                        </div>
    375251                </div>
    376252

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

     
    4040.about-wrap hr {
    4141        border: 0;
    4242        height: 0;
    43         margin: 0;
     43        margin: 3em 0 0;
    4444        border-top: 1px solid rgba(0, 0, 0, 0.1);
    4545}
    4646
    … …  
    5151        vertical-align: middle;
    5252}
    5353
     54.about-wrap figure {
     55        position: relative;
     56        margin: 0;
     57}
     58
     59.about-wrap .feature-section figure img {
     60        margin-bottom: 0;
     61}
     62
     63.about-wrap figcaption {
     64        position: absolute;
     65        bottom: 0;
     66        width: 100%;
     67    padding: 40px 10px 15px;
     68    overflow: auto;
     69    box-sizing: border-box;
     70}
     71
    5472.about-wrap .jetpack-video-wrapper {
    5573        margin-bottom: 0;
    5674}
    … …  
    132150        color: #23282d;
    133151}
    134152
    135 .about-wrap .changelog h2 {
    136         font-size: 1.4em;
    137         font-weight: 600;
    138         text-align: left;
    139 }
    140 
    141153.about-wrap .changelog h3 {
    142154        margin: 1.33em 0;
    143155        font-size: 1em;
    … …  
    151163        font-weight: 400;
    152164}
    153165
     166.about-wrap figcaption {
     167    font-size: 13px;
     168    text-align: center;
     169        color: white;
     170}
     171
    154172.about-wrap .about-description,
    155173.about-wrap .about-text {
    156174        margin-top: 1.4em;
    … …  
    161179
    162180.about-wrap .about-text {
    163181        margin: 1em 200px 1em 0;
    164         min-height: 60px;
    165182        color: #555d66;
    166183}
    167184
    … …  
    175192
    176193.about-wrap .feature-section.one-col {
    177194        margin: 0 auto;
    178         max-width: 700px;
     195        max-width: 680px;
    179196}
    180197
    181198.about-wrap .inline-svg img {
    … …  
    197214        max-width: 47%;
    198215}
    199216
     217.about-wrap .three-col,
     218.about-wrap .four-col {
     219        margin: auto;
     220        max-width: 1020px;
     221}
     222
    200223.about-wrap .three-col .col {
    201224        align-self: flex-start;
    202225        min-width: 31%;
    … …  
    203226        max-width: 31%;
    204227}
    205228
     229.about-wrap .four-col .col {
     230        align-self: flex-start;
     231        min-width: 23%;
     232        max-width: 23%;
     233}
     234
     235.about-wrap .feature-section.eight-col .col {
     236        align-self: flex-start;
     237        margin-top: 6px;
     238        min-width: 12%;
     239        max-width: 12%;
     240}
     241
     242.about-wrap .one-col img {
     243        margin: 1em 0 2em;
     244}
     245
    206246.about-wrap .two-col img {
    207247        margin-bottom: 1.5em;
    208248}
    … …  
    294334
    295335.about-wrap .feature-section {
    296336        overflow: hidden;
    297         padding: 0 0 40px;
    298337}
    299338
    300339.about-wrap .feature-section.no-heading {
    … …  
    305344        overflow: hidden;
    306345}
    307346
    308 .about-wrap .feature-section img {
    309         margin-bottom: 1em;
    310 }
    311 
    312347.about-wrap .embed-container {
    313348        text-align: center;
    314349}
    … …  
    346381        padding: 0 5px;
    347382}
    348383
    349 /* 2.3 Floating Header Layout */
    350 
    351 .about-wrap .floating-header-section {
    352         display: -ms-grid;
    353         display: grid;
    354         grid-gap: 0 60px;
    355         -ms-grid-columns: 5fr 11fr;
    356         grid-template-columns: 5fr 11fr;
    357         max-width: 1020px;
    358         margin: 0 auto 120px;
    359 }
    360 
    361 .about-wrap .floating-header-section .section-header {
    362         -ms-grid-column: 1;
    363         grid-column: 1;
    364         position: relative;
    365         min-width: 230px;
    366         max-width: 300px;
    367 }
    368 
    369 .about-wrap .floating-header-section h2 {
    370         margin: 0;
    371         text-align: left;
    372         position: absolute;
    373 }
    374 
    375 .about-wrap .floating-header-section .section-content {
    376         -ms-grid-column: 2;
    377         grid-column: 2;
    378         display: flex;
    379         justify-content: space-between;
    380         align-items: flex-start;
    381         flex-flow: row wrap;
    382         flex-grow: 2;
    383         flex-shrink: 0;
    384 }
    385 
    386 .about-wrap .floating-header-section .section-item {
    387         flex-grow: 1;
    388         max-width: calc(50% - 30px);
    389 }
    390 
    391 .about-wrap .floating-header-section .section-item:nth-child(1),
    392 .about-wrap .floating-header-section .section-item:nth-child(2) {
    393         margin-bottom: 60px;
    394 }
    395 
    396 .about-wrap .floating-header-section .section-item:nth-child(1):nth-last-child(2),
    397 .about-wrap .floating-header-section .section-item:nth-child(2):nth-last-child(1) {
    398         margin-bottom: 0;
    399 }
    400 
    401 .about-wrap .floating-header-section.has-long-title {
    402         display: block;
    403 }
    404 
    405 .about-wrap .floating-header-section.has-long-title .section-header {
    406         max-width: 100%;
    407 }
    408 
    409 .about-wrap .floating-header-section.has-long-title h2 {
    410         position: static;
    411         margin-bottom: 60px;
    412 }
    413 
    414 .about-wrap .floating-header-section.has-long-title .section-content {
    415         justify-content: flex-start;
    416 }
    417 
    418 .about-wrap .floating-header-section.has-long-title .section-item {
    419         max-width: 300px;
    420         margin-bottom: 0;
    421 }
    422 
    423 .about-wrap .floating-header-section.has-long-title .section-item + .section-item {
    424         margin-left: 60px;
    425 }
    426 
    427384/*------------------------------------------------------------------------------
    428385  3.0 - Credits & Freedoms Pages
    429386------------------------------------------------------------------------------*/
    … …  
    538495        }
    539496
    540497        .about-wrap .two-col .col,
    541         .about-wrap .three-col .col {
     498        .about-wrap .three-col .col,
     499        .about-wrap .four-col .col {
    542500                min-width: 48% !important;
    543501        }
     502       
     503        .about-wrap .eight-col .col {
     504                min-width: 24% !important;
     505        }
    544506
    545         .about-wrap .three-col img {
     507        .about-wrap .three-col img,
     508        .about-wrap .four-col img,
     509        .about-wrap .eight-col img {
    546510                display: block;
    547511                margin: 0 auto;
    548512        }
     513       
     514        .about-wrap figcaption {
     515                position: relative;
     516                margin-top: 10px;
     517                padding-top: 0;
     518                color: #40464D;
     519        }
    549520
    550521        .about-wrap .floating-header-section {
    551522                display: block;
    … …  
    584555        }
    585556
    586557        .about-wrap .two-col .col,
     558        .about-wrap .three-col .col,
    587559        .about-wrap .three-col .col {
    588560                min-width: 100% !important;
    589561        }
    590562
     563        .about-wrap .under-the-hood.four-col .col,
    591564        .about-wrap .under-the-hood.three-col .col,
    592565        .about-wrap .under-the-hood.two-col .col,
    593566        .about-wrap .under-the-hood.one-col .col {