Make WordPress Core


Ignore:
Timestamp:
02/23/2021 06:39:13 PM (3 years ago)
Author:
ryelle
Message:

Help/About: WordPress 5.7 About Page.

This is the start of the WordPress 5.7 about page.

Props audrasjb, metalandcoffee, melchoyce, hedgefield, francina, webcommsat, lukecarbis, meher, sarahricker, marybaum.
See #52347.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/about.php

    r49770 r50418  
    2121        <div class="about__header">
    2222            <div class="about__header-image">
    23                 <picture>
    24                     <source media="(max-width: 782px)" srcset="data:image/svg+xml,<?php echo rawurlencode( '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 205 109" width="205"><g fill="none" fill-rule="evenodd"><path fill="#000" fill-rule="nonzero" d="M65.901 108.433c2.546-5.254 4.927-9.195 7.143-11.822H1.246v-5.173h71.798c-2.216-2.627-4.597-6.568-7.143-11.822h4.31c5.173 5.993 10.592 10.427 16.257 13.3v2.217c-5.665 2.791-11.084 7.225-16.256 13.3h-4.31z"/><path fill="#000" fill-rule="nonzero" d="M29.345 26.834c-.129 1.365-.633 2.432-1.512 3.2-.879.76-2.048 1.142-3.507 1.142-1.02 0-1.919-.24-2.698-.72-.773-.487-1.371-1.176-1.793-2.066-.422-.891-.641-1.925-.659-3.103v-1.195c0-1.207.214-2.27.642-3.19.427-.92 1.04-1.63 1.836-2.128.803-.498 1.729-.747 2.778-.747 1.412 0 2.549.384 3.41 1.152.861.767 1.362 1.851 1.503 3.252H27.13c-.105-.92-.375-1.582-.809-1.987-.427-.41-1.057-.615-1.89-.615-.966 0-1.71.355-2.232 1.064-.515.703-.779 1.737-.79 3.102v1.134c0 1.383.245 2.437.738 3.164.498.727 1.224 1.09 2.18 1.09.872 0 1.529-.197 1.968-.59.44-.392.718-1.045.835-1.959h2.215zm14.008-1.898c0 1.253-.217 2.355-.65 3.304-.434.944-1.055 1.67-1.864 2.18-.803.504-1.728.756-2.777.756-1.037 0-1.963-.252-2.777-.756-.809-.51-1.436-1.234-1.881-2.171-.44-.938-.662-2.018-.668-3.243v-.72c0-1.249.22-2.35.659-3.306.445-.955 1.07-1.684 1.872-2.188.809-.51 1.734-.765 2.777-.765 1.043 0 1.966.252 2.769.756.808.498 1.432 1.219 1.872 2.162.44.938.662 2.03.668 3.279v.712zm-2.224-.668c0-1.418-.27-2.505-.808-3.261-.534-.756-1.292-1.134-2.277-1.134-.96 0-1.714.378-2.258 1.134-.54.75-.815 1.813-.827 3.19v.739c0 1.406.273 2.493.818 3.26.55.768 1.312 1.152 2.285 1.152.984 0 1.74-.375 2.267-1.125.534-.75.8-1.846.8-3.287v-.668zM47.368 31V18.203h3.78c1.13 0 2.132.252 3.005.756a5.146 5.146 0 012.039 2.145c.48.925.72 1.986.72 3.181v.642c0 1.213-.243 2.28-.729 3.199a5.057 5.057 0 01-2.065 2.127c-.89.498-1.913.747-3.068.747h-3.682zm2.223-11.004v9.229h1.45c1.167 0 2.06-.364 2.681-1.09.627-.733.947-1.782.958-3.147v-.712c0-1.388-.302-2.449-.905-3.181-.604-.733-1.48-1.099-2.628-1.099h-1.556zm18.816 5.291h-5.256v3.938h6.144V31h-8.368V18.203h8.306v1.793h-6.082v3.533h5.256v1.758zM81.534 31H79.32V18.203h2.215V31zm11.222-3.296c0-.562-.199-.996-.597-1.3-.393-.305-1.105-.613-2.136-.924-1.031-.31-1.852-.656-2.461-1.037-1.166-.732-1.75-1.687-1.75-2.865 0-1.031.42-1.88 1.258-2.549.843-.668 1.936-1.002 3.278-1.002.89 0 1.685.164 2.382.492a3.898 3.898 0 011.643 1.407c.399.603.598 1.274.598 2.013h-2.215c0-.669-.21-1.19-.633-1.565-.416-.38-1.013-.571-1.793-.571-.726 0-1.292.155-1.696.466-.398.31-.598.744-.598 1.3 0 .47.217.862.65 1.178.434.31 1.15.615 2.145.914.996.293 1.796.63 2.4 1.01.603.376 1.046.81 1.327 1.302.281.486.422 1.057.422 1.713 0 1.067-.41 1.916-1.23 2.55-.815.626-1.923.94-3.323.94-.926 0-1.778-.17-2.558-.51-.773-.346-1.376-.82-1.81-1.424-.428-.603-.642-1.306-.642-2.11h2.224c0 .727.24 1.29.72 1.688.481.399 1.17.598 2.066.598.774 0 1.354-.155 1.74-.466.393-.316.59-.732.59-1.248zm14.481-1.459V31h-2.224V18.203h4.896c1.43 0 2.563.372 3.401 1.116.844.745 1.266 1.729 1.266 2.954 0 1.253-.413 2.229-1.239 2.926-.821.697-1.972 1.046-3.454 1.046h-2.646zm0-1.784h2.672c.791 0 1.395-.185 1.811-.554.416-.375.624-.914.624-1.617 0-.691-.211-1.242-.633-1.652-.422-.416-1.002-.63-1.74-.642h-2.734v4.465zm21.303.475c0 1.253-.217 2.355-.65 3.304-.434.944-1.055 1.67-1.864 2.18-.802.504-1.728.756-2.777.756-1.037 0-1.963-.252-2.777-.756-.809-.51-1.436-1.234-1.881-2.171-.44-.938-.662-2.018-.668-3.243v-.72c0-1.249.22-2.35.659-3.306.445-.955 1.069-1.684 1.872-2.188.809-.51 1.734-.765 2.777-.765 1.043 0 1.966.252 2.769.756.809.498 1.433 1.219 1.872 2.162.44.938.662 2.03.668 3.279v.712zm-2.224-.668c0-1.418-.269-2.505-.808-3.261-.533-.756-1.292-1.134-2.277-1.134-.96 0-1.713.378-2.258 1.134-.539.75-.815 1.813-.827 3.19v.739c0 1.406.273 2.493.818 3.26.551.768 1.312 1.152 2.285 1.152.984 0 1.74-.375 2.268-1.125.533-.75.799-1.846.799-3.287v-.668zm13.718 1.02h-5.255v3.937h6.143V31h-8.367V18.203h8.306v1.793h-6.082v3.533h5.255v1.758zm13.92-5.292h-3.99V31h-2.206V19.996h-3.955v-1.793h10.151v1.793zm8.19 6.073h-2.478V31h-2.224V18.203h4.5c1.477 0 2.616.331 3.419.993.803.662 1.204 1.62 1.204 2.874 0 .856-.208 1.574-.624 2.154-.41.574-.984 1.016-1.723 1.327l2.874 5.335V31h-2.381l-2.567-4.93zm-2.478-1.784h2.285c.75 0 1.336-.187 1.758-.562.421-.381.632-.9.632-1.556 0-.686-.196-1.216-.588-1.59-.387-.376-.967-.57-1.741-.58h-2.346v4.288zm14.561-.017l2.945-6.065h2.461l-4.289 8.086V31h-2.233v-4.71l-4.298-8.087h2.47l2.944 6.065z"/><path stroke="#000" stroke-width="2" d="M2 1h201v46H2z"/></g></svg>' ); ?>" />
    25                     <img alt="<?php _e( 'Code is Poetry' ); ?>" src="data:image/svg+xml,<?php echo rawurlencode( '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 1210 48"><path fill="#000" d="M65.875 39.875c2.583-5.333 5-9.333 7.25-12H.25v-5.25h72.875c-2.25-2.667-4.667-6.667-7.25-12h4.375c5.25 6.083 10.75 10.583 16.5 13.5v2.25c-5.75 2.833-11.25 7.333-16.5 13.5h-4.375zM1035.34 26.834c-.12 1.365-.63 2.432-1.51 3.2-.88.76-2.04 1.142-3.5 1.142-1.02 0-1.92-.24-2.7-.72-.78-.487-1.37-1.176-1.79-2.066-.43-.891-.65-1.925-.66-3.103v-1.195c0-1.207.21-2.27.64-3.19.43-.92 1.04-1.63 1.83-2.128.81-.498 1.73-.747 2.78-.747 1.41 0 2.55.384 3.41 1.152.86.767 1.36 1.851 1.5 3.252h-2.21c-.11-.92-.37-1.582-.81-1.987-.43-.41-1.06-.615-1.89-.615-.96 0-1.71.355-2.23 1.064-.52.703-.78 1.737-.79 3.102v1.134c0 1.383.24 2.437.74 3.164.49.727 1.22 1.09 2.18 1.09.87 0 1.53-.197 1.97-.59.43-.392.71-1.045.83-1.959h2.21zm14.01-1.898c0 1.253-.21 2.355-.65 3.304-.43.944-1.05 1.67-1.86 2.18-.8.504-1.73.756-2.78.756-1.04 0-1.96-.252-2.78-.756-.8-.51-1.43-1.234-1.88-2.171-.44-.938-.66-2.018-.66-3.243v-.72c0-1.249.22-2.35.65-3.306.45-.955 1.07-1.684 1.88-2.188.81-.51 1.73-.765 2.77-.765 1.05 0 1.97.252 2.77.756.81.498 1.44 1.219 1.87 2.162.44.938.67 2.03.67 3.279v.712zm-2.22-.668c0-1.418-.27-2.505-.81-3.261-.53-.756-1.29-1.134-2.28-1.134-.96 0-1.71.378-2.25 1.134-.54.75-.82 1.813-.83 3.19v.739c0 1.406.27 2.493.82 3.26.55.768 1.31 1.152 2.28 1.152.99 0 1.74-.375 2.27-1.125s.8-1.846.8-3.287v-.668zm6.24 6.732V18.203h3.78c1.13 0 2.13.252 3 .756a5.138 5.138 0 012.04 2.145c.48.925.72 1.986.72 3.181v.642c0 1.213-.24 2.28-.73 3.199a5.08 5.08 0 01-2.06 2.127c-.89.498-1.92.747-3.07.747h-3.68zm2.22-11.004v9.229h1.45c1.17 0 2.06-.364 2.68-1.09.63-.733.95-1.782.96-3.147v-.712c0-1.388-.3-2.449-.9-3.181-.61-.733-1.48-1.099-2.63-1.099h-1.56zm18.82 5.291h-5.26v3.938h6.14V31h-8.36V18.203h8.3v1.793h-6.08v3.533h5.26v1.758zM1087.53 31h-2.21V18.203h2.21V31zm11.23-3.296c0-.562-.2-.996-.6-1.3-.39-.305-1.11-.613-2.14-.924-1.03-.31-1.85-.656-2.46-1.037-1.16-.732-1.75-1.687-1.75-2.865 0-1.031.42-1.88 1.26-2.549.84-.668 1.94-1.002 3.28-1.002.89 0 1.68.164 2.38.492.7.329 1.25.797 1.64 1.407.4.603.6 1.274.6 2.013h-2.21c0-.669-.21-1.19-.64-1.565-.41-.38-1.01-.571-1.79-.571-.73 0-1.29.155-1.7.466-.39.31-.59.744-.59 1.3 0 .47.21.862.65 1.178.43.31 1.15.615 2.14.914 1 .293 1.8.63 2.4 1.01.6.376 1.05.81 1.33 1.302.28.486.42 1.057.42 1.713 0 1.067-.41 1.916-1.23 2.55-.82.626-1.92.94-3.32.94-.93 0-1.78-.17-2.56-.51-.77-.346-1.38-.82-1.81-1.424-.43-.603-.64-1.306-.64-2.11h2.22c0 .727.24 1.29.72 1.688.48.399 1.17.598 2.07.598.77 0 1.35-.155 1.74-.466.39-.316.59-.732.59-1.248zm14.48-1.459V31h-2.23V18.203h4.9c1.43 0 2.56.372 3.4 1.116.84.745 1.27 1.729 1.27 2.954 0 1.253-.42 2.229-1.24 2.926-.82.697-1.97 1.046-3.46 1.046h-2.64zm0-1.784h2.67c.79 0 1.39-.185 1.81-.554.42-.375.62-.914.62-1.617 0-.691-.21-1.242-.63-1.652-.42-.416-1-.63-1.74-.642h-2.73v4.465zm21.3.475c0 1.253-.22 2.355-.65 3.304-.43.944-1.06 1.67-1.86 2.18-.81.504-1.73.756-2.78.756-1.04 0-1.96-.252-2.78-.756-.81-.51-1.43-1.234-1.88-2.171-.44-.938-.66-2.018-.67-3.243v-.72c0-1.249.22-2.35.66-3.306.45-.955 1.07-1.684 1.87-2.188.81-.51 1.74-.765 2.78-.765 1.04 0 1.97.252 2.77.756.81.498 1.43 1.219 1.87 2.162.44.938.66 2.03.67 3.279v.712zm-2.22-.668c0-1.418-.27-2.505-.81-3.261-.54-.756-1.29-1.134-2.28-1.134-.96 0-1.71.378-2.26 1.134-.54.75-.81 1.813-.82 3.19v.739c0 1.406.27 2.493.81 3.26.55.768 1.32 1.152 2.29 1.152.98 0 1.74-.375 2.27-1.125s.8-1.846.8-3.287v-.668zm13.71 1.02h-5.25v3.937h6.14V31h-8.37V18.203h8.31v1.793h-6.08v3.533h5.25v1.758zm13.92-5.292h-3.99V31h-2.2V19.996h-3.96v-1.793h10.15v1.793zm8.19 6.073h-2.47V31h-2.23V18.203h4.5c1.48 0 2.62.331 3.42.993.8.662 1.21 1.62 1.21 2.874 0 .856-.21 1.574-.63 2.154-.41.574-.98 1.016-1.72 1.327l2.87 5.335V31h-2.38l-2.57-4.93zm-2.47-1.784h2.28c.75 0 1.34-.187 1.76-.562.42-.381.63-.9.63-1.556 0-.686-.19-1.216-.59-1.59-.38-.376-.96-.57-1.74-.58h-2.34v4.288zm14.56-.017l2.94-6.065h2.46l-4.29 8.086V31h-2.23v-4.71l-4.3-8.087h2.47l2.95 6.065z"/><path stroke="#000" stroke-width="2" d="M1008 1h201v46h-201z"/></svg>' ); ?>" />
    26                 </picture>
    27             </div>
    28 
    29             <div class="about__header-container">
    30                 <div class="about__header-title">
    31                     <p>
    32                         <?php _e( 'WordPress' ); ?>
    33                         <?php echo $display_version; ?>
    34                     </p>
    35                 </div>
    36 
    37                 <div class="about__header-text">
    38                     <?php _e( 'Sharing your stories has never been easier' ); ?>
    39                 </div>
    40                 <div class="about__header-badge">
    41                     <img alt="<?php _e( 'New' ); ?>" src="data:image/svg+xml,<?php echo rawurlencode( '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 153 153" width="115"><circle cx="76.5" cy="76.5" r="76.5" fill="#000"/><path fill="#D1CFE4" d="M53.333 86h-2.827L39.769 69.564V86H36.94V64.672h2.828L50.535 81.18V64.67h2.798V86zm26.05-9.858h-9.242V83.7h10.737V86h-13.55V64.672h13.403v2.314h-10.59v6.856h9.243v2.3zm18.596 3.134l.41 2.813.6-2.534 4.219-14.883h2.373l4.116 14.883.586 2.578.454-2.871 3.311-14.59h2.827L111.704 86h-2.563l-4.395-15.542-.337-1.626-.337 1.626L99.517 86h-2.564l-5.156-21.328h2.812l3.37 14.604z"/></svg>' ); ?>" />
    42                 </div>
     23                <img alt="<?php _e( 'Code is Poetry' ); ?>" src="images/about-badge.svg" />
     24            </div>
     25
     26            <div class="about__header-title">
     27                <p>
     28                    <?php _e( 'WordPress' ); ?>
     29                    <?php echo $display_version; ?>
     30                </p>
     31            </div>
     32
     33            <div class="about__header-text">
     34                <?php _e( 'Jazz up your stories in an editor that’s cleaner, crisper, and does more to get out of your way.' ); ?>
    4335            </div>
    4436
     
    5143        </div>
    5244
    53         <div class="about__section is-feature">
    54             <h1 class="aligncenter">
    55                 <?php
    56                 printf(
    57                     /* translators: %s: The current WordPress version number. */
    58                     __( 'Welcome to WordPress %s.' ),
    59                     $display_version
    60                 );
    61                 ?>
    62             </h1>
    63             <p>
    64                 <?php
    65                 printf(
    66                     /* translators: %s: The current WordPress version number. */
    67                     __( 'WordPress %s brings you countless ways to set your ideas free and bring them to life. With a brand-new default theme as your canvas, it supports an ever-growing collection of blocks as your brushes. Paint with words. Pictures. Sound. Or rich embedded media.' ),
    68                     $display_version
    69                 );
    70                 ?>
    71             </p>
    72         </div>
    73 
    74         <div class="has-background-image" style="background-image: url('data:image/svg+xml,<?php echo rawurlencode( '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 1035 884"><circle cx="503" cy="434" r="310" fill="#E3DAD1"/><circle cx="831" cy="204" r="204" fill="#D1CFE4"/><circle cx="113.5" cy="770.5" r="113.5" fill="#D1DEE4"/></svg>' ); ?>');">
    75             <div class="about__section has-2-columns is-wider-left has-transparent-background-color">
    76                 <div class="column">
    77                     <h2><?php _e( 'Greater layout flexibility' ); ?></h2>
    78                     <p><?php _e( 'Bring your stories to life with more tools that let you edit your layout with or without code. Single column blocks, designs using mixed widths and columns, full-width headers, and videos in your cover block—make small changes or big statements with equal ease!' ); ?></p>
     45        <div class="about__section is-feature has-subtle-background-color">
     46            <div class="column">
     47                <h1 class="is-smaller-heading">
     48                    <?php
     49                    printf(
     50                        /* translators: %s: The current WordPress version number. */
     51                        __( 'Step into WordPress %s.' ),
     52                        $display_version
     53                    );
     54                    ?>
     55                </h1>
     56                <p>
     57                    <?php
     58                    printf(
     59                        /* translators: %s: The current WordPress version number. */
     60                        __( 'With this new version, the editor cleans up the colors and helps you work in  a few places you couldn’t before—at least, not without getting into code or hiring a pro. The controls you use most, like changing type sizes, are in more places—right where you need them. And layout changes that should be simple, like full-height images, get even simpler to make.' ),
     61                        $display_version
     62                    );
     63                    ?>
     64                </p>
     65            </div>
     66        </div>
     67
     68        <hr class="is-large" />
     69
     70        <div class="about__section has-2-columns">
     71            <h2 class="is-section-header is-smaller-heading">
     72                <?php _e( 'Now the editor is easier to use' ); ?>
     73            </h2>
     74            <div class="column">
     75                <p>
     76                    <?php
     77                    _e( '<strong>Font-size adjustment in more places:</strong> now, font-size controls are right where you need them in the List and Code blocks. No more trekking to another screen to make that single change!' );
     78                    ?>
     79                </p>
     80                <p>
     81                    <?php
     82                    _e( '<strong>Reusable blocks:</strong> several enhancements make reusable blocks more stable and easier to use. And now they save automatically with the post when you click the Update button.' );
     83                    ?>
     84                </p>
     85                <p>
     86                    <?php
     87                    _e( '<strong>Inserter drag-and-drop:</strong> drag blocks and block patterns from the inserter right into your post.' );
     88                    ?>
     89                </p>
     90            </div>
     91            <div class="column about__image">
     92                <video controls>
     93                    <source src="https://make.wordpress.org/core/files/2021/02/about-57-drag-drop-image.mp4" type="video/mp4" />
     94                </video>
     95            </div>
     96        </div>
     97
     98        <div class="about__section has-2-columns">
     99            <h2 class="is-section-header is-smaller-heading">
     100                <?php _e( 'You can do more without writing custom code' ); ?>
     101            </h2>
     102            <div class="column">
     103                <p>
     104                    <?php
     105                    _e( '<strong>Full-height alignment:</strong> have you ever wanted to make a block, like the Cover block, fill the whole window? Now you can.' );
     106                    ?>
     107                </p>
     108                <p>
     109                    <?php
     110                    _e( '<strong>Buttons block:</strong> now you can align the content in buttons vertically. And you can set the width of a button to a preset percentage.' );
     111                    ?>
     112                </p>
     113                <p>
     114                    <?php
     115                    _e( '<strong>Social Icons block:</strong> you can now change the size of the icons in the Social Icons block.' );
     116                    ?>
     117                </p>
     118            </div>
     119            <div class="column about__image">
     120                <img src="https://make.wordpress.org/core/files/2021/02/about-57-cover-1.jpg" alt="" />
     121            </div>
     122        </div>
     123
     124        <hr />
     125
     126        <div class="about__section has-subtle-background-color">
     127            <div class="column">
     128                <h2 class="is-smaller-heading"><?php _e( 'A Simpler Default Color Palette' ); ?></h2>
     129            </div>
     130        </div>
     131
     132        <div class="about__section has-subtle-background-color">
     133            <div class="column about__image">
     134                <div class="about__image-comparison">
     135                    <div class="about__image-comparison-resize">
     136                        <img src="https://make.wordpress.org/core/files/2021/02/about-57-color-new.png" />
     137                    </div>
     138                    <img src="https://make.wordpress.org/core/files/2021/02/about-57-color-old.png" />
    79139                </div>
    80140            </div>
    81             <div class="about__section has-2-columns is-wider-right has-transparent-background-color">
    82                 <div class="column"><!-- space for alignment. --></div>
    83                 <div class="column">
    84                     <h2><?php _e( 'More block patterns' ); ?></h2>
    85                     <p><?php _e( 'In select themes, preconfigured block patterns make setting up standard pages on your site a breeze. Find the power of patterns to streamline your workflow, or share some of that power with your clients and save yourself a few clicks.' ); ?></p>
    86                 </div>
    87             </div>
    88             <div class="about__section has-2-columns is-wider-left has-transparent-background-color">
    89                 <div class="column">
    90                     <h2><?php _e( 'Upload video captions directly in the block editor' ); ?></h2>
    91                     <p><?php _e( 'To help you add subtitles or captions to your videos, you can now upload them within your post or page. This makes it easier than ever to make your videos accessible for anyone who needs or prefers to use subtitles.' ); ?></p>
    92                 </div>
    93             </div>
    94         </div>
    95 
    96         <hr class="is-large" />
    97 
    98         <div class="about__section has-1-column">
    99             <h2><?php _e( 'Twenty Twenty-One is here!' ); ?></h2>
    100             <p>
    101                 <?php
    102                 _e( 'Twenty Twenty-One is a blank canvas for your ideas, and the block editor is the best brush. It is built for the block editor and packed with brand-new block patterns you can only get in the default themes. Try different layouts in a matter of seconds, and let the theme’s eye-catching, yet timeless design make your work shine.' );
    103                 ?>
    104             </p>
     141        </div>
     142
     143        <div class="about__section has-2-columns has-subtle-background-color">
     144            <div class="column">
     145                <p>
     146                    <?php
     147                    printf(
     148                        /* translators: %s: WCAG information link. */
     149                        __( 'This new streamlined color palette collapses all the colors that used to be in the WordPress source code down to seven core colors and a range of 56 shades that meet the <a href="%s">WCAG 2.0 AA recommended contrast ratio</a> against white or black.' ),
     150                        'https://www.w3.org/WAI/WCAG2AAA-Conformance'
     151                    );
     152                    ?>
     153                </p>
     154                <p>
     155                    <?php
     156                    _e( 'The colors are perceptually uniform from light to dark in each range, which means they start at white and get darker by the same amount with each step.' );
     157                    ?>
     158                </p>
     159            </div>
     160            <div class="column">
     161                <p>
     162                    <?php
     163                    _e( 'Half the range has a 4.5 or higher contrast ratio against black, and the other half maintains the same contrast against white.' );
     164                    ?>
     165                </p>
     166                <p>
     167                    <?php
     168                    printf(
     169                        /* translators: %s: Color palette dev note link. */
     170                        __( 'Find the new palette in the default WordPress Dashboard color scheme, and use it when you’re building themes, plugins, or any other components. For all the details, <a href="%s">check out the Color Palette dev note</a>.' ),
     171                        'https://make.wordpress.org/core/2021/02/23/standardization-of-wp-admin-colors-in-wordpress-5-7'
     172                    );
     173                    ?>
     174                </p>
     175            </div>
     176        </div>
     177
     178        <div class="about__section has-subtle-background-color">
     179            <div class="column about__image">
     180                <picture>
     181                    <source media="(max-width: 600px)" srcset="images/about-color-palette-vert.svg" />
     182                    <img alt="" src="images/about-color-palette.svg" />
     183                </picture>
     184            </div>
    105185        </div>
    106186
    107187        <hr />
    108188
     189        <div class="about__section has-2-columns">
     190            <div class="column">
     191                <h3><?php _e( 'From HTTP to HTTPS in a single click' ); ?></h3>
     192                <p><?php _e( 'Starting now, switching a site from HTTP to HTTPS is a one-click move. WordPress will automatically update database URLs when you make the switch. No more hunting and guessing!' ); ?></p>
     193                <h3><?php _e( 'New Robots API' ); ?></h3>
     194                <p>
     195                    <?php
     196                    _e( 'The new Robots API lets you include the filter directives in the robots meta tag, and the API includes the directive <code>max-image-preview: large</code> by default. That means search engines can show bigger image previews (unless the blog is marked as not public), which can boost your traffic.' )
     197                    ?>
     198                </p>
     199            </div>
     200            <div class="column">
     201                <h3><?php _e( 'Ongoing cleanup after update to jQuery 3.5.1' ); ?></h3>
     202                <p><?php _e( 'For years jQuery helped make things move on the screen in ways the basic tools couldn’t—but that keeps changing, and so does jQuery.' ); ?></p>
     203                <p><?php _e( 'One side effect: it generated a set of cryptic messages on the dashboard that informed only developers. In 5.7, you will get far fewer of those messages, and they will be in plain language.' ); ?></p>
     204                <h3><?php _e( 'Lazy-load your iframes' ); ?></h3>
     205                <p><?php _e( 'Now it’s simple to let iframes lazy-load. Just add the <code>loading="lazy"</code> attribute to iframe tags on the front end.' ); ?></p>
     206            </div>
     207        </div>
     208
     209        <hr class="is-small" />
     210
    109211        <div class="about__section">
    110             <div class="column about__image is-edge-to-edge">
    111                 <img src="https://s.w.org/images/core/5.6/twentytwentyone-layouts.jpg" alt="" />
    112             </div>
    113         </div>
    114 
    115         <hr />
    116 
    117         <div class="about__section has-overlap-style">
    118             <div class="column is-vertically-aligned-center is-top-layer">
    119                 <p>
    120                     <?php
    121                     printf(
    122                         /* translators: 1: WordPress accessibility-ready guidelines link, 2: WCAG information link. */
    123                         __( 'What’s more, this default theme puts accessibility at the heart of your website. It conforms to the <a href="%1$s">WordPress accessibility-ready guidelines</a> and addresses several more specialized standards from the <a href="%2$s">Web Content Accessibility Guidelines (WCAG) 2.1 at level AAA</a>. It will help you meet the highest level of international accessibility standards when you create accessible content and choose plugins which are accessible too!' ),
    124                         'https://make.wordpress.org/themes/handbook/review/accessibility/',
    125                         'https://www.w3.org/WAI/WCAG2AAA-Conformance'
    126                     );
    127                     ?>
    128                 </p>
    129             </div>
    130             <div class="column about__image aligncenter is-edge-to-edge">
    131                 <img src="data:image/svg+xml,<?php echo rawurlencode( '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 440 291"><circle cx="294.5" cy="145.5" r="145.5" fill="#E5D1D1"/><circle cx="106.5" cy="106.5" r="106.5" fill="#EEEADD"/></svg>' ); ?>" style="max-width:25em" alt="" />
    132             </div>
    133         </div>
    134 
    135         <hr />
    136 
    137         <div class="about__section has-2-columns">
    138             <div class="column is-vertically-aligned-center">
    139                 <h3 class="is-larger-heading"><?php _e( 'A rainbow of soft pastels' ); ?></h3>
    140             </div>
    141             <div class="column">
    142                 <p><?php _e( 'Perfect for a new year, Twenty Twenty-One gives you a range of pre-selected color palettes in pastel, all of which meet AAA standards for contrast. You can also choose your own background color for the theme, and the theme chooses accessibility-conscious text colors for you — automatically!' ); ?></p>
    143                 <p><?php _e( 'Need more flexibility than that? You can also choose your own color palette from the color picker.' ); ?></p>
    144             </div>
    145         </div>
    146 
    147         <div class="about__section">
    148             <div class="column about__image is-edge-to-edge">
    149                 <img src="https://s.w.org/images/core/5.6/twentytwentyone-rainbow.png" alt="" />
    150             </div>
    151         </div>
    152 
    153         <hr />
    154         <hr class="is-large" />
    155 
    156         <div class="about__section">
    157             <header class="column is-edge-to-edge">
    158                 <h2><?php _e( 'Improvements for everyone' ); ?></h2>
    159             </header>
    160         </div>
    161 
    162         <div class="about__section has-3-columns has-gutters">
    163             <div class="column has-border" style="background-color:#eeeadd;background-color:var(--global--color-yellow)">
    164                 <h3><?php _e( 'Expanding auto-updates' ); ?></h3>
    165                 <p><?php _e( 'For years, only developers have been able to update WordPress automatically. But now, you have that option, right in your dashboard. If this is your first site, you have auto-updates ready to go, right now! Upgrading an existing site? No problem! Everything is the same as it was before.' ); ?></p>
    166             </div>
    167             <div class="column has-border" style="background-color:#e4d1d1;background-color:var(--global--color-red)">
    168                 <h3><?php _e( 'Accessibility statement template' ); ?></h3>
    169                 <p>
    170                     <?php
    171                     printf(
    172                         /* translators: %s: Accessibility statement feature plugin link. */
    173                         __( 'Even if you’re not an expert, you can start letting folks know about your site’s commitment to accessibility at the click of a button! The new <a href="%s">feature plugin</a> includes template copy for you to update and publish, and it’s written to support different contexts and jurisdictions.' ),
    174                         'https://github.com/10degrees/accessibility-statement-plugin'
    175                     );
    176                     ?>
    177                 </p>
    178             </div>
    179             <div class="column has-border" style="background-color:#d1d1e4;background-color:var(--global--color-purple)">
    180                 <h3><?php _e( 'Built-in patterns' ); ?></h3>
    181                 <p><?php _e( 'If you’ve not had the chance to play with block patterns yet, all default themes now feature a range of block patterns that let you master complex layouts with minimal effort. Customize the patterns to your liking with the copy, images and colors that fit your story or brand.' ); ?></p>
    182             </div>
    183         </div>
    184 
    185         <hr />
    186 
    187         <div class="about__section has-2-columns">
    188             <h2 class="is-section-header"><?php _e( 'For developers' ); ?></h2>
    189             <div class="column">
    190                 <h3><?php _e( 'REST API authentication with Application Passwords' ); ?></h3>
    191                 <p><?php _e( 'Thanks to the API’s new Application Passwords authorization feature, third-party apps can connect to your site seamlessly and securely. This new REST API feature lets you see what apps are connecting to your site and control what they do.' ); ?></p>
    192             </div>
    193             <div class="column">
    194                 <h3><?php _e( 'More PHP 8 support' ); ?></h3>
    195                 <p>
    196                     <?php
    197                     printf(
    198                         /* translators: %s: WordPress and PHP 8 dev note link. */
    199                         __( '5.6 marks the first steps toward WordPress Core support for PHP 8. Now is a great time to start planning how your WordPress products, services and sites can support the latest PHP version. For more information about what to expect next, <a href="%s">read the PHP 8 developer note</a>.' ),
    200                         'https://make.wordpress.org/core/2020/11/23/wordpress-and-php-8-0/'
    201                     );
    202                     ?>
    203                 </p>
    204             </div>
    205         </div>
    206         <div class="about__section">
    207             <div class="column">
    208                 <h3><?php _e( 'jQuery' ); ?></h3>
    209                 <p>
    210                     <?php
    211                     printf(
    212                         /* translators: %s: jQuery update test plugin link. */
    213                         __( 'Updates to jQuery in WordPress take place across three releases: 5.5, 5.6, and 5.7. As we reach the mid-point of this process, run the <a href="%s">update test plugin</a> to check your sites for errors ahead of time.' ),
    214                         current_user_can( 'install_plugins' ) ?
    215                             esc_url( network_admin_url( 'plugin-install.php?tab=search&type=term&s=slug:wp-jquery-update-test' ) ) :
    216                             esc_url( __( 'https://wordpress.org/plugins/wp-jquery-update-test/' ) )
    217                     );
    218                     ?>
    219                 </p>
    220                 <p>
    221                     <?php
    222                     printf(
    223                         /* translators: %s: jQuery Migrate plugin link. */
    224                         __( 'If you find issues with the way your site looks (e.g. a slider doesn’t work, a button is stuck — that sort of thing), install the <a href="%s">jQuery Migrate plugin</a>.' ),
    225                         current_user_can( 'install_plugins' ) ?
    226                             esc_url( network_admin_url( 'plugin-install.php?tab=search&type=term&s=slug:enable-jquery-migrate-helper' ) ) :
    227                             esc_url( __( 'https://wordpress.org/plugins/enable-jquery-migrate-helper/' ) )
    228                     );
    229                     ?>
    230                 </p>
    231             </div>
    232         </div>
    233 
    234         <hr class="is-small" />
    235 
    236         <div class="about__section">
    237212            <div class="column">
    238213                <h3><?php _e( 'Check the Field Guide for more!' ); ?></h3>
     
    240215                    <?php
    241216                    printf(
    242                         /* translators: %s: WordPress 5.6 Field Guide link. */
    243                         __( 'Check out the latest version of the WordPress Field Guide. It highlights developer notes for each change you may want to be aware of. <a href="%s">WordPress 5.6 Field Guide.</a>' ),
    244                         'https://make.wordpress.org/core/2020/11/20/wordpress-5-6-field-guide/'
     217                        /* translators: %s: WordPress 5.7 Field Guide link. */
     218                        __( 'Check out the latest version of the WordPress Field Guide. It highlights developer notes for each change you may want to be aware of. <a href="%s">WordPress 5.7 Field Guide.</a>' ),
     219                        'https://make.wordpress.org/core/2021/02/23/wordpress-5-7-field-guide'
    245220                    );
    246221                    ?>
Note: See TracChangeset for help on using the changeset viewer.