Make WordPress Core

Changeset 54499


Ignore:
Timestamp:
10/11/2022 06:49:40 PM (12 months ago)
Author:
ryelle
Message:

Help/About: Update the About page for 6.1.

This is the start of the WordPress 6.1 about page, introducing new content and a first pass of the new style.

Props adampickering, joen, iamarinoh, dansoschin, desrosj, ryelle, cbringmann, annezazu, priethor, laurlittle, eidolonnight, jeffpaul, sabernhardt, ndiego, richtabor, spacedmonkey, marybaum, abhanonstopnewsuk, courane01, tweetythierry, adamsilverstein, flixos90, ironprogrammer.
See #56357.

Location:
trunk/src/wp-admin
Files:
2 edited

Legend:

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

    r54322 r54499  
    2323            <div class="about__header-title">
    2424                <h1>
    25                     <?php _e( 'WordPress' ); ?>
    26                     <span class="screen-reader-text"><?php echo $display_version; ?></span>
     25                    <?php
     26                    printf(
     27                        /* translators: %s: Version number. */
     28                        __( 'WordPress %s' ),
     29                        $display_version
     30                    );
     31                    ?>
    2732                </h1>
    2833            </div>
     
    5055                </h2>
    5156                <p class="is-subheading">
    52                     <?php _e( 'WordPress 6.0 includes more than 500 enhancements and 400 bug fixes. This page highlights several key advancements aimed at making your WordPress content-creating and site-building experience more feature-rich and intuitive. You will also find resources for developers and anyone wanting a deeper understanding of WordPress.' ); ?>
    53                 </p>
    54             </div>
    55         </div>
    56 
    57         <div class="about__section has-2-columns">
    58             <div class="column about__image is-vertically-aligned-top">
    59                 <img src="https://s.w.org/images/core/6.0/about-60-writing-improvements.png" alt="" />
    60             </div>
    61             <div class="column">
    62                 <h3>
    63                     <?php _e( 'Enhanced Writing Experience' ); ?>
    64                 </h3>
    65                 <p>
    66                     <?php _e( 'Writing improvements abound, whether you&#8217;re writing a brand new post or adding elements to an existing page. Explore more ways to streamline your content creation process, including:' ); ?>
    67                 </p>
    68                 <ul>
    69                     <li><?php _e( 'Select text across multiple blocks and edit it all at once.' ); ?></li>
    70                     <li><?php _e( 'Type two open brackets <code>[[</code> to quickly access the link menu.' ); ?></li>
    71                     <li><?php _e( 'Keep existing styles when you transform some blocks from one kind to another—from a Paragraph block to a Code block, for instance.' ); ?></li>
    72                     <li><?php _e( 'Create customized buttons and any new buttons you make will retain the style customizations automatically.' ); ?></li>
    73                     <li><?php _e( 'Make tag clouds and social icons even more appealing with updated settings and controls, and a new outline style for the tag cloud.' ); ?></li>
    74                 </ul>
    75             </div>
    76         </div>
    77 
    78         <div class="about__section has-2-columns is-wider-right">
    79             <div class="column">
    80                 <h3>
    81                     <?php _e( 'Style Switching' ); ?>
    82                 </h3>
    83                 <p>
    84                     <?php _e( 'Block themes now include the option to contain multiple style variations. This expands the new Style system even further and enables shortcuts to switch the look and feel of your site all within a single theme. You can change both the available settings, like the font weight, and the style options, like the default color palette. Change the look and feel of your site with just a few clicks.' ); ?>
    85                 </p>
    86             </div>
    87             <div class="column about__image is-vertically-aligned-top">
    88                 <img src="https://s.w.org/images/core/6.0/about-60-style-switching.gif" alt="" />
    89             </div>
    90         </div>
    91 
    92         <div class="about__section has-1-column">
    93             <div class="column about__image is-vertically-aligned-top">
    94                 <img src="https://s.w.org/images/core/6.0/about-60-templates.png" alt="" />
    95             </div>
    96             <div class="column" style="padding-bottom:0">
    97                 <h3>
    98                     <?php _e( 'More Template Choices' ); ?>
    99                 </h3>
    100                 <p>
    101                     <?php _e( 'WordPress 6.0 includes five new template options: author, date, categories, tag, and taxonomy. These additional templates provide greater flexibility for content creators. Tailor each with the tools you already know or with the following new options in this release.' ); ?>
    102                 </p>
     57                    <?php _e( 'WordPress 6.1 includes more than 2,000 updates. This page highlights some of the most significant changes to the product since the May 2022 release of WordPress 6.0. You will also find resources for developers and anyone seeking a deeper understanding of WordPress.' ); ?>
     58                </p>
     59            </div>
     60        </div>
     61
     62        <div class="about__section has-2-columns">
     63            <div class="column about__image is-edge-to-edge" style="background-color:#353535;">
     64                <img src="data:image/svg+xml,%3Csvg width='436' height='436' viewbox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50%25' cy='50%25' r='30%25' fill='%23E26F56' /%3E%3C/svg%3E" alt="" />
     65            </div>
     66            <div class="column is-vertically-aligned-center">
     67                <h3><?php _e( 'A new default theme powered by 10 distinct style variations' ); ?></h3>
     68                <p>
     69                    <?php
     70                    printf(
     71                        /* translators: 1: Variation announcement post URL, 2: Accessibility-ready handbook page. */
     72                        __( 'Building on the foundational elements in the 5.9 and 6.0 releases for block themes and style variations, the new default theme, Twenty Twenty-Three, includes <a href="%1$s">10 different styles</a> and is &#147;<a href="%2$s">Accessibility Ready</a>&#148;.' ),
     73                        'https://make.wordpress.org/design/2022/09/07/tt3-default-theme-announcing-style-variation-selections/',
     74                        'https://make.wordpress.org/themes/handbook/review/accessibility/'
     75                    );
     76                    ?>
     77                </p>
     78            </div>
     79        </div>
     80
     81        <div class="about__section has-2-columns">
     82            <div class="column is-vertically-aligned-center">
     83                <h3><?php _e( 'A better creator experience with refined and additional templates' ); ?></h3>
     84                <p>
     85                    <?php
     86                    printf(
     87                        /* translators: 1: Link to template options dev note, 2: Link to template creation dev note. */
     88                        __( '<a href="%1$s">New templates</a> include a custom template for posts and pages in the Site Editor. Search-and-replace tools speed up the design of <a href="%2$s">template parts</a>.' ),
     89                        'https://make.wordpress.org/core/2022/07/21/core-editor-improvement-deeper-customization-with-more-template-options/',
     90                        'https://make.wordpress.org/core/2022/08/25/core-editor-improvement-refining-the-template-creation-experience/'
     91                    );
     92                    ?>
     93                </p>
     94            </div>
     95            <div class="column about__image is-edge-to-edge has-subtle-background-color">
     96                <img src="data:image/svg+xml,%3Csvg width='436' height='436' viewbox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50%25' cy='50%25' r='30%25' fill='%23E26F56' /%3E%3C/svg%3E" alt="" />
     97            </div>
     98        </div>
     99
     100        <div class="about__section has-2-columns">
     101            <div class="column about__image is-edge-to-edge has-subtle-background-color">
     102                <img src="data:image/svg+xml,%3Csvg width='436' height='436' viewbox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50%25' cy='50%25' r='30%25' fill='%23E26F56' /%3E%3C/svg%3E" alt="" />
     103            </div>
     104            <div class="column is-vertically-aligned-center">
     105                <h3><?php _e( 'More consistency and control across design tools' ); ?></h3>
     106                <p>
     107                    <?php
     108                    printf(
     109                        /* translators: %s: Link to layout support refactor dev note. */
     110                        __( 'Upgrades to the <a href="%s">controls for design elements and blocks</a> make the layout and site-building process more consistent, complete, and intuitive.' ),
     111                        'https://make.wordpress.org/core/2022/10/10/updated-editor-layout-support-in-6-1-after-refactor/'
     112                    );
     113                    ?>
     114                </p>
     115            </div>
     116        </div>
     117
     118        <div class="about__section has-2-columns">
     119            <div class="column is-vertically-aligned-center">
     120                <h3><?php _e( 'Menus just got easier to create and manage' ); ?></h3>
     121                <p>
     122                    <?php
     123                    printf(
     124                        /* translators: %s: Link to navigation block fallback dev note. */
     125                        __( '<a href="%s">New fallback options</a> in the navigation block mean you can edit the menu that’s open; no searching needed. Plus, the controls for choosing and working on menus have their own place in the block settings. The mobile menu system also gets an upgrade with new features, including different icon options, to make the menu yours.' ),
     126                        'https://make.wordpress.org/core/2022/09/27/navigation-block-fallback-behavior-in-wp-6-1-dev-note/'
     127                    );
     128                    ?>
     129                </p>
     130            </div>
     131            <div class="column about__image is-edge-to-edge has-subtle-background-color">
     132                <img src="data:image/svg+xml,%3Csvg width='436' height='436' viewbox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50%25' cy='50%25' r='30%25' fill='%23E26F56' /%3E%3C/svg%3E" alt="" />
     133            </div>
     134        </div>
     135
     136        <div class="about__section has-2-columns">
     137            <div class="column">
     138                <div class="about__image has-accent-background-color">
     139                    <img src="data:image/svg+xml,%3Csvg width='436' height='436' viewbox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50%25' cy='50%25' r='30%25' fill='%23E26F56' /%3E%3C/svg%3E" alt="" />
     140                </div>
     141                <h3><?php _e( 'Improved layout and visualization of document settings' ); ?></h3>
     142                <p><?php _e( 'A cleaner, better-organized display helps you easily view and manage important post and page settings, especially the template picker and scheduler.' ); ?></p>
     143            </div>
     144            <div class="column">
     145                <div class="about__image has-accent-background-color">
     146                    <img src="data:image/svg+xml,%3Csvg width='436' height='436' viewbox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50%25' cy='50%25' r='30%25' fill='%23E26F56' /%3E%3C/svg%3E" alt="" />
     147                </div>
     148                <h3><?php _e( 'One-click lock settings for all inner blocks' ); ?></h3>
     149                <p><?php _e( 'When locking blocks, a new toggle lets you apply your lock settings to all the blocks in a containing block like the group, cover, and column blocks.' ); ?></p>
    103150            </div>
    104151        </div>
     
    106153        <div class="about__section has-3-columns">
    107154            <div class="column">
    108                 <div class="about__image">
    109                     <img src="https://s.w.org/images/core/6.0/about-60-sub-feature-1.png" alt="" />
    110                 </div>
    111                 <p><?php _e( 'Featured images can be used in the cover block.' ); ?></p>
    112                 <p><?php _e( 'New featured image sizing controls make it easier to get the results you want.' ); ?></p>
    113             </div>
    114             <div class="column">
    115                 <div class="about__image">
    116                     <img src="https://s.w.org/images/core/6.0/about-60-sub-feature-2.png" alt="" />
    117                 </div>
    118                 <p><?php _e( 'While editing a template, at the root, or between blocks, the quick inserter shows you patterns and template parts to help you work faster and discover new layout options.' ); ?></p>
    119             </div>
    120             <div class="column">
    121                 <div class="about__image">
    122                     <img src="https://s.w.org/images/core/6.0/about-60-sub-feature-3.png" alt="" />
    123                 </div>
    124                 <p><?php _e( 'The query block supports filtering on multiple authors, support for custom taxonomies, and support for customizing what is shown when there are no results.' ); ?></p>
    125             </div>
    126         </div>
    127 
    128         <div class="about__section has-2-columns is-wider-left">
    129             <div class="column about__image is-vertically-aligned-top">
    130                 <img src="https://s.w.org/images/core/6.0/about-60-integrated-patterns.png" alt="" />
    131             </div>
    132             <div class="column">
    133                 <h3>
    134                     <?php _e( 'Integrated Patterns' ); ?>
    135                 </h3>
    136                 <p>
    137                     <?php
    138                     printf(
    139                         /* translators: %s Working with Patterns dev note link. */
    140                         __( 'Patterns will now appear when you need them in even more places, like in the quick inserter or when creating a new header or footer. If you&#8217;re a block theme author, you can even <a href="%s">register patterns from the Pattern Directory using <code>theme.json</code></a>, enabling you to prioritize specific patterns that are most helpful to your theme&#8217;s users.' ),
    141                         'https://make.wordpress.org/core/2022/05/02/new-features-for-working-with-patterns-and-themes-in-wordpress-6-0/'
    142                     );
    143                     ?>
    144                 </p>
    145             </div>
    146         </div>
    147 
    148         <div class="about__section has-2-columns is-wider-right">
    149             <div class="column">
    150                 <h3>
    151                     <?php _e( 'Better List View' ); ?>
    152                 </h3>
    153                 <p>
    154                     <?php _e( 'New keyboard shortcuts enable you to select multiple blocks from the list view, modify them in bulk, and drag-and-drop them within the list. List View can be opened and closed easily; it comes collapsed by default and it automatically expands to the current selection whenever you select a block.' ); ?>
    155                 </p>
    156             </div>
    157             <div class="column about__image is-vertically-aligned-top">
    158                 <img src="https://s.w.org/images/core/6.0/about-60-list-view.png" alt="" />
    159             </div>
    160         </div>
    161 
    162         <div class="about__section has-2-columns is-wider-left">
    163             <div class="column about__image is-vertically-aligned-top">
    164                 <img src="https://s.w.org/images/core/6.0/about-60-block-locking-controls.png" alt="" />
    165             </div>
    166             <div class="column">
    167                 <h3>
    168                     <?php _e( 'Block Locking Controls' ); ?>
    169                 </h3>
    170                 <p>
    171                     <?php _e( 'Now you can lock your blocks. Choose to disable the option to move a block, remove a block, or both. This simplifies project handover, allowing your clients to unleash their creativity without worrying about accidentally breaking their site in the process.' ); ?>
    172                 </p>
    173             </div>
    174         </div>
    175 
    176         <hr class="is-large" />
    177 
    178         <div class="about__section" style="margin-bottom:0;">
    179             <div class="column">
    180                 <h2 class="aligncenter">
    181                     <?php _e( 'Additional Design Tools' ); ?>
    182                 </h2>
    183                 <p class="is-subheading aligncenter">
    184                     <?php _e( 'Design tools grow more powerful and intuitive with each release.' ); ?><br />
    185                     <?php _e( 'Some highlights for 6.0 include:' ); ?>
    186                 </p>
    187             </div>
    188         </div>
    189 
    190         <div class="about__section has-3-columns" style="margin-bottom:0;">
    191             <div class="column">
    192                 <div class="about__image aligncenter">
    193                     <svg width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg">
    194                         <path fill-rule="evenodd" clip-rule="evenodd" d="M15.203 6.892c.776-.963 1.297-1.559 1.297-1.559s.521.596 1.297 1.559c2.266 2.81 6.703 8.75 6.703 12.155 0 4.572-3.18 7.62-8 7.62s-8-3.048-8-7.62c0-3.404 4.437-9.345 6.703-12.155Zm1.297 1.58a64.727 64.727 0 0 0-2.361 3.15c-.972 1.388-1.911 2.87-2.6 4.248-.72 1.44-1.039 2.52-1.039 3.177 0 1.805.616 3.164 1.573 4.077.965.921 2.441 1.542 4.427 1.542 1.986 0 3.462-.621 4.427-1.542.957-.913 1.573-2.272 1.573-4.077 0-.657-.32-1.738-1.039-3.177-.689-1.378-1.628-2.86-2.6-4.247A64.727 64.727 0 0 0 16.5 8.47Z" fill="#1E1E1E"/>
    195                     </svg>
    196                 </div>
    197                 <p><?php _e( 'A new color panel design saves space, but still shows your options at a glance.' ); ?></p>
    198             </div>
    199             <div class="column">
    200                 <div class="about__image aligncenter">
    201                     <svg width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg">
    202                         <path d="M4.5 9.333v13.334h2.667V9.333H4.5ZM9.833 6.667V4h13.334v2.667H9.833ZM25.833 9.333v13.334H28.5V9.333h-2.667ZM23.167 28v-2.667H9.833V28h13.334Z" fill="#1E1E1E"/>
    203                     </svg>
    204                 </div>
    205                 <p><?php _e( 'New border controls offer a simpler way to set your border exactly as you like it.' ); ?></p>
    206             </div>
    207             <div class="column">
    208                 <div class="about__image aligncenter">
    209                     <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    210                         <circle cx="16" cy="16" r="12" fill="#fff"/>
    211                         <circle cx="16" cy="16" r="12" fill="url(#a)"/>
    212                         <circle cx="16" cy="16" r="12" stroke="#1E1E1E" stroke-width="2"/>
    213                         <defs>
    214                             <pattern id="a" patternContentUnits="objectBoundingBox" width=".385" height=".385">
    215                                 <use xlink:href="#b" transform="scale(.01923)"/>
    216                             </pattern>
    217                             <image id="b" width="20" height="20" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAfUlEQVQ4Ee2TSw6AMAhES4/C/a/EWTAuptFJR4m6MFE25dO88ikWEdkmkpnNzEbE3Yd+pHQV3MLUnZlfAmeXK74vAtdpPin96jRVEu8fimWxiRGx2xwuGZtVLvms14iXgZyRsn+g6oz28ye53UNMF0+WgZwJAHyWgZwJg2AvIbMZwqZwPC4AAAAASUVORK5CYII="/>
    218                         </defs>
    219                     </svg>
    220                 </div>
    221                 <p><?php _e( 'Transparency levels for your colors allow for even more creative color options.' ); ?></p>
    222             </div>
    223         </div>
    224 
    225         <div class="about__section has-3-columns">
    226             <div class="column">
    227                 <div class="about__image aligncenter">
    228                     <svg width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg">
    229                         <path fill-rule="evenodd" clip-rule="evenodd" d="M15.165 7.335h9.333c.369 0 .667.298.667.667v9.333a.667.667 0 0 1-.667.667h-4v-3.333a2.667 2.667 0 0 0-2.666-2.667h-3.334v-4c0-.369.299-.667.667-.667Zm-2.667 4.667v-4a2.667 2.667 0 0 1 2.667-2.667h9.333a2.667 2.667 0 0 1 2.667 2.667v9.333a2.667 2.667 0 0 1-2.667 2.667h-4v4a2.667 2.667 0 0 1-2.666 2.667H8.499a2.667 2.667 0 0 1-2.667-2.667V14.67a2.667 2.667 0 0 1 2.667-2.667h4Zm6 8v4a.667.667 0 0 1-.666.667H8.499a.667.667 0 0 1-.667-.667V14.67c0-.368.299-.667.667-.667h4v3.333a2.667 2.667 0 0 0 2.666 2.667H18.5Zm0-2h-3.333a.667.667 0 0 1-.667-.667v-3.333h3.334c.368 0 .667.299.667.667v3.333Z" fill="#1E1E1E"/>
    230                     </svg>
    231                 </div>
    232                 <p><?php _e( 'Control gaps, margins, typography, and more on a collection of blocks, all at once, in the Group block.' ); ?></p>
    233             </div>
    234             <div class="column">
    235                 <div class="about__image aligncenter">
    236                     <svg width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg">
    237                         <path d="M12.833 8.667h-7v2h7c.368 0 .667.299.667.667v9.333a.667.667 0 0 1-.667.667h-7v2h7a2.667 2.667 0 0 0 2.667-2.667v-9.333a2.667 2.667 0 0 0-2.667-2.667ZM20.167 8.667h7v2h-7a.667.667 0 0 0-.667.667v9.333c0 .368.299.667.667.667h7v2h-7a2.667 2.667 0 0 1-2.667-2.667v-9.333a2.667 2.667 0 0 1 2.667-2.667Z" fill="#1E1E1E"/>
    238                     </svg>
    239                 </div>
    240                 <p><?php _e( 'Switch between stack, row, and group variations to position groups of blocks with more layout flexibility.' ); ?></p>
    241             </div>
    242             <div class="column">
    243                 <div class="about__image aligncenter">
    244                     <svg width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg">
    245                         <path d="M28.5 10.667v14.667A2.665 2.665 0 0 1 25.835 28H8.5" stroke="#1E1E1E" stroke-width="2"/>
    246                         <rect x="5.5" y="5" width="18" height="18" rx="1.167" stroke="#1E1E1E" stroke-width="2"/>
    247                         <path d="M5.834 18.667 10.786 16l3.715 1.778 4.333-3.111 4.333 3.111" stroke="#1E1E1E" stroke-width="2" stroke-linejoin="round"/>
    248                     </svg>
    249                 </div>
    250                 <p><?php _e( 'Use the gap support functionality in the Gallery block to create different looks–from adding spacing between all images, to removing spacing altogether.' ); ?></p>
    251             </div>
    252         </div>
    253 
    254         <hr class="is-large" />
     155                <div class="column about__image is-edge-to-edge has-accent-background-color">
     156                    <img src="data:image/svg+xml,%3Csvg width='436' height='436' viewbox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50%25' cy='50%25' r='30%25' fill='%23E26F56' /%3E%3C/svg%3E" alt="" />
     157                </div>
     158                <h3 class="is-smaller-heading"><?php _e( 'Improved block placeholders' ); ?></h3>
     159                <p><?php _e( 'Various blocks have improved placeholders that reflect customization options to help you design your site and its content. For example, the Image block placeholder displays custom borders and duotone filters even before selecting an image.' ); ?></p>
     160            </div>
     161            <div class="column">
     162                <div class="column about__image is-edge-to-edge has-accent-background-color">
     163                    <img src="data:image/svg+xml,%3Csvg width='436' height='436' viewbox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50%25' cy='50%25' r='30%25' fill='%23E26F56' /%3E%3C/svg%3E" alt="" />
     164                </div>
     165                <h3 class="is-smaller-heading"><?php _e( 'Compose richer lists and quotes with inner blocks' ); ?></h3>
     166                <p><?php _e( 'The List and Quote blocks now support inner blocks, allowing for more flexible and rich compositions like adding headings inside your Quote blocks.' ); ?></p>
     167            </div>
     168            <div class="column">
     169                <div class="column about__image is-edge-to-edge has-accent-background-color">
     170                    <img src="data:image/svg+xml,%3Csvg width='436' height='436' viewbox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50%25' cy='50%25' r='30%25' fill='%23E26F56' /%3E%3C/svg%3E" alt="" />
     171                </div>
     172                <h3 class="is-smaller-heading"><?php _e( 'Header and footer patterns for every theme' ); ?></h3>
     173                <p>
     174                    <?php
     175                    printf(
     176                        /* translators: 1: Link to tutorial for customizing a header, 2: Link to tutorial for customizing a footer. */
     177                        __( 'Explore these block patterns, making <a href="%1$s">header</a> and <a href="%2$s">footer</a> creation more efficient.' ),
     178                        'https://learn.wordpress.org/tutorial/customizing-a-header-with-patterns/',
     179                        'https://learn.wordpress.org/tutorial/customizing-a-footer-with-patterns/'
     180                    );
     181                    ?>
     182            </div>
     183        </div>
     184
     185        <hr />
     186
     187        <div class="about__section has-2-columns">
     188            <div class="column">
     189                <div class="about__image">
     190                    <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
     191                        <rect width="48" height="48" rx="4" fill="#1E1E1E"/>
     192                        <path fill-rule="evenodd" clip-rule="evenodd" d="M30.5 17.5V20H32V17.5H34.5V16H32V13.5H30.5V16H28V17.5H30.5ZM24 16H18C16.8954 16 16 16.8954 16 18V30C16 31.1046 16.8954 32 18 32H30C31.1046 32 32 31.1046 32 30V24H30.5V30C30.5 30.2761 30.2761 30.5 30 30.5H18C17.7239 30.5 17.5 30.2761 17.5 30V18C17.5 17.7239 17.7239 17.5 18 17.5H24V16Z" fill="white"/>
     193                    </svg>
     194                </div>
     195                <h3 class="is-smaller-heading"><?php _e( 'Add starter patterns to any post type' ); ?></h3>
     196                <p><?php _e( 'In WordPress 6.0, when you created a new page, you would see suggested patterns so you did not have to start with a blank page. In 6.1, you will also see the starter patterns modal when you create a new instance of any post type.' ); ?></p>
     197            </div>
     198            <div class="column">
     199                <div class="about__image">
     200                    <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
     201                        <rect width="48" height="48" rx="4" fill="#1E1E1E"/>
     202                        <path fill-rule="evenodd" clip-rule="evenodd" d="M31.25 23.375C31.25 26.3435 28.8435 28.75 25.875 28.75C22.9065 28.75 20.5 26.3435 20.5 23.375C20.5 20.4065 22.9065 18 25.875 18C28.8435 18 31.25 20.4065 31.25 23.375ZM32.75 23.375C32.75 27.172 29.6719 30.25 25.875 30.25C24.0609 30.25 22.411 29.5474 21.1824 28.3995L16.9939 32.0644L16.0061 30.9356L20.2039 27.2625C19.4444 26.1568 19 24.8178 19 23.375C19 19.578 22.078 16.5 25.875 16.5C29.6719 16.5 32.75 19.578 32.75 23.375Z" fill="white"/>
     203                    </svg>
     204                </div>
     205                <h3 class="is-smaller-heading"><?php _e( 'Find block themes faster' ); ?></h3>
     206                <p>
     207                    <?php
     208                    printf(
     209                        /* translators: %s: Link to "full site editing" themes on WordPress.org. */
     210                        __( 'The Themes Directory has <a href="%s">a filter for block themes</a>, and a pattern preview gives a better sense of what the theme might look like while exploring different themes and patterns.' ),
     211                        __( 'https://wordpress.org/themes/tags/full-site-editing/' )
     212                    );
     213                    ?>
     214                </p>
     215            </div>
     216        </div>
     217
     218        <div class="about__section has-2-columns">
     219            <div class="column">
     220                <div class="about__image">
     221                    <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
     222                        <rect width="48" height="48" rx="4" fill="#1E1E1E"/>
     223                        <path fill-rule="evenodd" clip-rule="evenodd" d="M22.4373 15.0445C22.5378 14.4418 23.0593 14 23.6703 14H25.3025C25.9136 14 26.4351 14.4418 26.5355 15.0445L26.8409 16.877C27.8252 17.2022 28.7192 17.7257 29.4757 18.4002L31.217 17.7478C31.7892 17.5335 32.4325 17.7642 32.738 18.2934L33.5541 19.7069C33.8597 20.2361 33.7378 20.9086 33.2661 21.297L31.8318 22.4777C31.9332 22.9693 31.9864 23.4784 31.9864 24C31.9864 24.5214 31.9332 25.0304 31.8319 25.5218L33.2672 26.7033C33.739 27.0917 33.8608 27.7642 33.5553 28.2934L32.7392 29.7069C32.4337 30.2361 31.7904 30.4668 31.2182 30.2525L29.4758 29.5997C28.7193 30.2743 27.8252 30.7978 26.8409 31.123L26.5355 32.9555C26.4351 33.5582 25.9136 34 25.3025 34H23.6703C23.0593 34 22.5378 33.5582 22.4373 32.9555L22.1319 31.123C21.1476 30.7978 20.2535 30.2743 19.497 29.5997L17.7547 30.2525C17.1825 30.4668 16.5392 30.2361 16.2336 29.7069L15.4175 28.2934C15.112 27.7642 15.2339 27.0917 15.7056 26.7033L17.1409 25.5218C17.0396 25.0304 16.9864 24.5214 16.9864 24C16.9864 23.4784 17.0397 22.9693 17.141 22.4777L15.7068 21.297C15.235 20.9086 15.1132 20.2361 15.4187 19.7069L16.2348 18.2934C16.5403 17.7642 17.1837 17.5335 17.7559 17.7479L19.4971 18.4002C20.2536 17.7257 21.1476 17.2022 22.1319 16.877L22.4373 15.0445ZM28.2364 24C28.2364 26.0711 26.5575 27.75 24.4864 27.75C22.4154 27.75 20.7364 26.0711 20.7364 24C20.7364 21.9289 22.4154 20.25 24.4864 20.25C26.5575 20.25 28.2364 21.9289 28.2364 24Z" fill="white"/>
     224                    </svg>
     225                </div>
     226                <h3 class="is-smaller-heading"><?php _e( 'Keep your Site Editor settings for later' ); ?></h3>
     227                <p>
     228                    <?php
     229                    printf(
     230                        /* translators: %s: Link to block editor preferences dev note. */
     231                        __( 'Site Editor settings are now <a href="%s">persistent for each user</a>. This means your settings will now be consistent across browsers and devices.' ),
     232                        'https://make.wordpress.org/core/2022/10/10/changes-to-block-editor-preferences-in-wordpress-6-1/'
     233                    );
     234                    ?>
     235                </p>
     236            </div>
     237            <div class="column">
     238                <div class="about__image">
     239                    <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
     240                        <rect width="48" height="48" rx="4" fill="#1E1E1E"/>
     241                        <path fill-rule="evenodd" clip-rule="evenodd" d="M32.75 24C32.75 28.8325 28.8325 32.75 24 32.75V24V15.25C28.8325 15.25 32.75 19.1675 32.75 24ZM24 14C29.5228 14 34 18.4772 34 24C34 29.5228 29.5228 34 24 34C18.4772 34 14 29.5228 14 24C14 18.4772 18.4772 14 24 14Z" fill="white"/>
     242                    </svg>
     243                </div>
     244                <h3 class="is-smaller-heading"><?php _e( 'A streamlined style system' ); ?></h3>
     245                <p>
     246                    <?php
     247                    printf(
     248                        /* translators: %s: Link style engine dev note. */
     249                        __( 'The CSS rules for margin, padding, typography, colors, and borders within the <a href="%s">styles engine</a> are now all in one place, reducing time spent on layout-specific tasks and helps to generate semantic class names.' ),
     250                        'https://make.wordpress.org/core/2022/10/10/block-styles-generation-style-engine/'
     251                    );
     252                    ?>
     253                </p>
     254            </div>
     255        </div>
     256
     257        <div class="about__section has-2-columns">
     258            <div class="column">
     259                <div class="about__image">
     260                    <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
     261                        <rect width="48" height="48" rx="4" fill="#1E1E1E"/>
     262                        <path d="M23.8 15.38C23.2 15.38 22.685 15.165 22.255 14.735C21.825 14.305 21.61 13.79 21.61 13.19C21.61 12.59 21.825 12.075 22.255 11.645C22.685 11.215 23.2 11 23.8 11C24.4 11 24.915 11.215 25.345 11.645C25.775 12.075 25.99 12.59 25.99 13.19C25.99 13.79 25.775 14.305 25.345 14.735C24.915 15.165 24.4 15.38 23.8 15.38ZM20.59 35V19.01C19.23 18.91 17.915 18.77 16.645 18.59C15.375 18.41 14.16 18.18 13 17.9L13.45 16.1C15.15 16.5 16.84 16.785 18.52 16.955C20.2 17.125 21.96 17.21 23.8 17.21C25.64 17.21 27.4 17.125 29.08 16.955C30.76 16.785 32.45 16.5 34.15 16.1L34.6 17.9C33.44 18.18 32.225 18.41 30.955 18.59C29.685 18.77 28.37 18.91 27.01 19.01V35H25.21V27.2H22.39V35H20.59Z" fill="white"/>
     263                    </svg>
     264                </div>
     265                <h3 class="is-smaller-heading"><?php _e( 'Improved admin and editor accessibility' ); ?></h3>
     266                <p>
     267                    <?php
     268                    printf(
     269                        /* translators: %s: Link to WordPress.org accessibility statement. */
     270                        __( 'More than 40 improvements in accessibility include resolving focus loss problems in the editor, improving form labels and audible messages, making alternative text easier to edit, and fixing the sub-menu overlap in the expanded admin side navigation at smaller screen sizes and higher zoom levels. Learn more about <a href="%s">accessibility in WordPress</a>.' ),
     271                        'https://wordpress.org/about/accessibility/'
     272                    );
     273                    ?>
     274                </p>
     275            </div>
     276            <div class="column">
     277                <div class="about__image">
     278                    <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
     279                        <rect width="48" height="48" rx="4" fill="#1E1E1E"/>
     280                        <path fill-rule="evenodd" clip-rule="evenodd" d="M23.2639 25.5896L18.7107 30.2783L17.6346 29.2333L22.1471 24.5865L16.0056 24.5598L16.0121 23.0598L22.2329 23.0869L17.9693 18.6964L19.0454 17.6514L23.2449 21.9759L23.2136 16.0062L24.7136 15.9983L24.7446 21.9117L28.8818 17.6514L29.9579 18.6964L25.6798 23.1019L32.1563 23.13L32.1498 24.63L25.7955 24.6024L30.2926 29.2333L29.2165 30.2783L24.7644 25.6937L24.7983 32.1497L23.2983 32.1576L23.2639 25.5896Z" fill="white"/>
     281                    </svg>
     282                </div>
     283                <h3 class="is-smaller-heading"><?php _e( 'Other notes of interest' ); ?></h3>
     284                <p><?php _e( '6.1 includes a new time-to-read feature showing content authors the approximate time-to-read values for pages, posts, and custom post types.' ); ?></p>
     285                <p>
     286                    <?php
     287                    printf(
     288                        /* translators: %s: "General Settings" admin page title, linked to the page if the user can edit options. */
     289                        __( 'The site tagline is empty by default in new sites but can be modified in %s.' ),
     290                        current_user_can( 'manage_options' ) ? '<a href="' . esc_url( admin_url( 'options-general.php' ) ) . '">' . __( 'General Settings' ) . '</a>' : __( 'General Settings' )
     291                    );
     292                    ?>
     293                </p>
     294                <p><?php _e( 'A new modal design offers a background blur effect, making it easier to focus on the task at hand.' ); ?></p>
     295            </div>
     296        </div>
     297
     298        <div class="about__section has-2-columns">
     299            <div class="column">
     300                <div class="about__image">
     301                    <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
     302                        <rect width="48" height="48" rx="4" fill="#1E1E1E"/>
     303                        <rect x="9" y="15" width="30" height="18" rx="9" fill="white"/>
     304                        <circle cx="18" cy="24" r="5" fill="#1E1E1E"/>
     305                    </svg>
     306                </div>
     307                <h3 class="is-smaller-heading"><?php _e( 'Updated interface options and features' ); ?></h3>
     308                <p>
     309                    <?php
     310                    printf(
     311                        /* translators: %s: Link to styling elements dev note. */
     312                        __( 'Updates include <a href="%s">styling elements</a> like buttons, citations, and links globally; controlling hover, active, and focus states for links using theme.json (not available to control in the interface yet); and customizing outline support for blocks and elements, among other features.' ),
     313                        'https://make.wordpress.org/core/2022/10/10/styling-elements-in-block-themes/'
     314                    );
     315                    ?>
     316                </p>
     317            </div>
     318            <div class="column">
     319                <div class="about__image">
     320                    <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
     321                        <rect width="48" height="48" rx="4" fill="#1E1E1E"/>
     322                        <path fill-rule="evenodd" clip-rule="evenodd" d="M16.5 14H31.5C32.8807 14 34 15.1193 34 16.5V31.5C34 32.8807 32.8807 34 31.5 34H16.5C15.1193 34 14 32.8807 14 31.5V16.5C14 15.1193 15.1193 14 16.5 14ZM31.5 15.875H16.5C16.1548 15.875 15.875 16.1548 15.875 16.5V20.25H32.125V16.5C32.125 16.1548 31.8452 15.875 31.5 15.875ZM32.125 22.125H21.5L21.5 32.125H31.5C31.8452 32.125 32.125 31.8452 32.125 31.5V22.125ZM19.625 22.125H15.875V31.5C15.875 31.8452 16.1548 32.125 16.5 32.125H19.625L19.625 22.125Z" fill="white"/>
     323                    </svg>
     324                </div>
     325                <h3 class="is-smaller-heading"><?php _e( 'Continued evolution of layout options' ); ?></h3>
     326                <p>
     327                    <?php
     328                    printf(
     329                        /* translators: %s: Link to layout support refactor dev note. */
     330                        __( 'The default content dimensions provided by themes can now be overridden in the Styles Sidebar, giving site builders better control over full-width content. Developers have <a href="%s">fine-grained control over these controls</a>.' ),
     331                        'https://make.wordpress.org/core/2022/10/10/updated-editor-layout-support-in-6-1-after-refactor/'
     332                    );
     333                    ?>
     334                </p>
     335            </div>
     336        </div>
     337
     338        <div class="about__section has-2-columns">
     339            <div class="column">
     340                <div class="about__image">
     341                    <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
     342                        <rect width="48" height="48" rx="4" fill="#1E1E1E"/>
     343                        <circle cx="50%" cy="50%" r="30%" fill="red"/>
     344                    </svg>
     345                </div>
     346                <h3 class="is-smaller-heading"><?php _e( 'Block template parts in classic themes' ); ?></h3>
     347                <p>
     348                    <?php
     349                    printf(
     350                        /* translators: 1: Link to block-based template parts in classic themes dev note, 2: Folder name. */
     351                        __( '<a href="%1$s">Block template parts can now be defined in classic themes</a> by adding the appropriate HTML files to the %2$s directory at the root of the theme.' ),
     352                        'https://make.wordpress.org/core/2022/10/04/block-based-template-parts-in-traditional-themes/',
     353                        '<code>parts</code>'
     354                    );
     355                    ?>
     356                </p>
     357            </div>
     358            <div class="column">
     359                <div class="about__image">
     360                    <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
     361                        <rect width="48" height="48" rx="4" fill="#1E1E1E"/>
     362                        <path fill-rule="evenodd" clip-rule="evenodd" d="M14.0628 24.4951C14.0628 22.2125 15.9132 20.3621 18.1958 20.3621C20.1204 20.3621 21.7397 21.6785 22.1986 23.4612L22.2137 23.4573L23.0646 25.9676C23.7156 28.4398 25.9654 30.2638 28.6433 30.2638C31.8292 30.2638 34.4118 27.6812 34.4118 24.4953C34.4118 21.3094 31.8292 18.7268 28.6433 18.7268C27.9035 18.7268 27.1943 18.8665 26.5421 19.1217L27.1381 20.6448C27.6034 20.4627 28.1107 20.3623 28.6433 20.3623C30.9259 20.3623 32.7763 22.2127 32.7763 24.4953C32.7763 26.7779 30.9259 28.6283 28.6433 28.6283C26.7186 28.6283 25.0994 27.3119 24.6405 25.5292L24.6329 25.4995L24.623 25.4705L23.714 22.7888L23.7081 22.7908C22.9812 20.4373 20.7892 18.7266 18.1958 18.7266C15.0099 18.7266 12.4272 21.3092 12.4272 24.4951C12.4272 27.6809 15.0099 30.2636 18.1958 30.2636C18.9374 30.2636 19.6482 30.1232 20.3017 29.8669L19.7044 28.3443C19.2381 28.5272 18.7297 28.628 18.1958 28.628C15.9132 28.628 14.0628 26.7777 14.0628 24.4951Z" fill="white"/>
     363                    </svg>
     364                </div>
     365                <h3 class="is-smaller-heading"><?php _e( 'Expanded support for Query Loop blocks' ); ?></h3>
     366                <p>
     367                    <?php
     368                    printf(
     369                        /* translators: %s: Link to query loop dev note. */
     370                        __( '<a href="%s">New filters</a> let Query Block variations support custom queries for more powerful variations and advanced hierarchical post types filtering options.' ),
     371                        'https://make.wordpress.org/core/2022/10/10/extending-the-query-loop-block/'
     372                    );
     373                    ?>
     374                </p>
     375            </div>
     376        </div>
     377
     378        <div class="about__section has-2-columns">
     379            <div class="column">
     380                <div class="about__image">
     381                    <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
     382                        <rect width="48" height="48" rx="4" fill="#1E1E1E"/>
     383                        <circle cx="50%" cy="50%" r="30%" fill="red"/>
     384                    </svg>
     385                </div>
     386                <h3 class="is-smaller-heading"><?php _e( 'Filters for all your styles' ); ?></h3>
     387                <p>
     388                    <?php
     389                    printf(
     390                        /* translators: %s: Link to theme.json filters dev note. */
     391                        __( '<a href="%s">Leverage filters</a> in the Styles sidebar to control settings at all four levels of your site—core, theme, user, or block, from less to more specific.' ),
     392                        'https://make.wordpress.org/core/2022/10/10/filters-for-theme-json-data/'
     393                    );
     394                    ?>
     395                </p>
     396            </div>
     397            <div class="column">
     398                <div class="about__image">
     399                    <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
     400                        <rect width="48" height="48" rx="4" fill="#1E1E1E"/>
     401                        <path d="M17 36.5996H32.333V34.533H17V36.5996Z" fill="white"/>
     402                        <path d="M17 13.0668L32.333 13.0668V11.0002L17 11.0002V13.0668Z" fill="white"/>
     403                        <path d="M37.4662 16.1334H35.3996V31.4664H37.4662V16.1334Z" fill="white"/>
     404                        <path d="M14.0666 31.4663H12L12 16.1333H14.0666L14.0666 31.4663Z" fill="white"/>
     405                    </svg>
     406                </div>
     407                <h3 class="is-smaller-heading"><?php _e( 'Spacing presets for faster, consistent design' ); ?></h3>
     408                <p>
     409                    <?php
     410                    printf(
     411                        /* translators: %s: Link to spacing presets dev note. */
     412                        __( 'Save time and help avoid hard-coding a values into a theme with <a href="%s">preset margin and padding values for multiple blocks</a>.' ),
     413                        'https://make.wordpress.org/core/2022/10/07/introduction-of-presets-across-padding-margin-and-block-gap/'
     414                    );
     415                    ?>
     416                </p>
     417            </div>
     418        </div>
     419
     420        <div class="about__section has-2-columns">
     421            <div class="column">
     422                <div class="about__image">
     423                    <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
     424                        <rect width="48" height="48" rx="4" fill="#1E1E1E"/>
     425                        <path d="M21.4667 28.8357C21.9575 29.3156 22.667 29.5399 23.5952 29.5086C24.5235 29.4773 25.201 29.1382 25.6278 28.4914L32.5415 17.8811L21.8188 24.7355C21.1786 25.1528 20.8372 25.8206 20.7945 26.7387C20.7518 27.6568 20.9759 28.3558 21.4667 28.8357V28.8357ZM23.7393 14C24.9556 14 26.2252 14.193 27.5483 14.579C28.8713 14.965 30.1409 15.6275 31.3572 16.5665L29.6928 17.7246C28.7326 17.0986 27.703 16.6343 26.604 16.3318C25.5051 16.0292 24.5502 15.8779 23.7393 15.8779C20.7518 15.8779 18.2019 16.9212 16.0893 19.0078C13.9768 21.0944 12.9205 23.6296 12.9205 26.6135C12.9205 27.5524 13.0539 28.5018 13.3206 29.4617C13.5873 30.4215 13.9661 31.3083 14.4569 32.1221H32.9897C33.4591 31.3709 33.8325 30.4945 34.1099 29.493C34.3873 28.4914 34.526 27.5107 34.526 26.5509C34.526 25.6745 34.3927 24.7303 34.1259 23.7183C33.8592 22.7063 33.3844 21.7726 32.7016 20.9171L33.9499 19.2895C34.7608 20.458 35.3689 21.6317 35.7744 22.8106C36.1798 23.9896 36.4039 25.1737 36.4465 26.3631C36.4892 27.615 36.3612 28.7939 36.0624 29.8998C35.7637 31.0057 35.3263 32.0282 34.7501 32.9671C34.494 33.4471 34.222 33.7392 33.9339 33.8435C33.6458 33.9478 33.2884 34 32.8616 34H14.5849C14.2222 34 13.8647 33.9113 13.5126 33.734C13.1606 33.5566 12.8992 33.301 12.7284 32.9671C12.1736 31.9656 11.7469 30.9484 11.4481 29.9155C11.1494 28.8826 11 27.782 11 26.6135C11 24.8816 11.3361 23.2488 12.0083 21.7152C12.6804 20.1815 13.5927 18.8461 14.745 17.7089C15.8973 16.5717 17.2469 15.6693 18.794 15.0016C20.3411 14.3339 21.9895 14 23.7393 14V14Z" fill="white"/>
     426                    </svg>
     427                </div>
     428                <h3 class="is-smaller-heading"><?php _e( 'Performance highlights' ); ?></h3>
     429                <p>
     430                    <?php
     431                    printf(
     432                        /* translators: 1: REST API performance dev note, 2: Multisite performance dev note, 3: code-formatted "WP_Query" linked to dev note, 4: Block registration performance dev note, 5: Site health checks dev note; 6: code-formatted "async", 7: Performance field guide. */
     433                        __( 'WordPress 6.1 resolved more than 25 tickets dedicated to enhancing performance. From the  <a href="%1$s">REST API</a> to <a href="%2$s">multisite</a>, %3$s to <a href="%4$s">core block registration</a>, and <a href="%5$s">new Site Health checks</a> to the addition of the %6$s attribute to images, there are performance improvements for every type of site. A full breakdown can be found in the <a href="%7$s">Performance Field Guide</a>.' ),
     434                        'https://make.wordpress.org/core/2022/10/10/performance-improvements-to-the-rest-api/',
     435                        'https://make.wordpress.org/core/2022/10/10/multisite-improvements-in-wordpress-6-1/',
     436                        '<a href="https://make.wordpress.org/core/2022/10/07/improvements-to-wp_query-performance-in-6-1/"><code>WP_Query</code></a>',
     437                        'https://make.wordpress.org/core/2022/10/07/improved-php-performance-for-core-blocks-registration/',
     438                        'https://make.wordpress.org/core/2022/10/06/new-cache-site-health-checks-in-wordpress-6-1/',
     439                        '<code>async</code>',
     440                        'https://make.wordpress.org/core/2022/10/11/performance-field-guide-for-wordpress-6-1/'
     441                    );
     442                    ?>
     443                </p>
     444                <p>
     445                    <?php
     446                    printf(
     447                        /* translators: %s: Link to install Performance Lab plugin if permitted, otherwise link to plugin on WordPress.org. */
     448                        __( 'Be among the first to get the latest improvements by adding the <a href="%s">Performance Lab plugin</a> to your WordPress test site or sandbox.' ),
     449                        current_user_can( 'install_plugins' ) ? admin_url( 'plugin-install.php?s=slug%253Aperformance-lab&tab=search&type=term' ) : 'https://wordpress.org/plugins/performance-lab/'
     450                    );
     451                    ?>
     452                </p>
     453            </div>
     454            <div class="column">
     455                <div class="about__image">
     456                    <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
     457                        <rect width="48" height="48" rx="4" fill="#1E1E1E"/>
     458                        <path fill-rule="evenodd" clip-rule="evenodd" d="M33.9426 16.4519L30.3191 12.9453L18.4578 24.9231L17.0032 29.8499L22.0592 28.4519L33.9426 16.4519ZM16 33.9453H24.934V32.2702H16V33.9453Z" fill="white"/>
     459                    </svg>
     460                </div>
     461                <h3 class="is-smaller-heading"><?php _e( 'Content-only editing support for container blocks' ); ?></h3>
     462                <p><?php _e( 'Thanks to content-only editing settings, layouts can be locked within container blocks. In a content-only block, its children are invisible to the List View and entirely uneditable. So you control the layout while your writers can focus on the content.' ); ?></p>
     463                <p><?php _e( 'Combine it with block locking options for even more advanced control over your blocks.' ); ?></p>
     464            </div>
     465        </div>
     466
     467        <div class="about__section has-2-columns">
     468            <div class="column">
     469                <div class="about__image">
     470                    <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
     471                        <rect width="48" height="48" rx="4" fill="#1E1E1E"/>
     472                        <circle cx="50%" cy="50%" r="30%" fill="red"/>
     473                    </svg>
     474                </div>
     475                <h3 class="is-smaller-heading"><?php _e( 'More responsive text with fluid typography' ); ?></h3>
     476                <p>
     477                    <?php
     478                    printf(
     479                        /* translators: %s: Link to fluid typography demo. */
     480                        __( '<a href="%s">Fluid typography</a> lets you define font sizes that adapt for easy reading in any screen size.' ),
     481                        'https://make.wordpress.org/core/2022/08/04/whats-new-in-gutenberg-13-8-3-august/#fluid-typography-support'
     482                    );
     483                    ?>
     484                </p>
     485            </div>
     486        </div>
     487
     488        <hr />
    255489
    256490        <div class="about__section has-2-columns is-wider-right">
    257491            <div class="column about__image is-vertically-aligned-top">
    258                 <a href="https://www.youtube.com/watch?v=oe452WcY7fA">
    259                     <img src="https://s.w.org/images/core/6.0/about-60-video.png?ver=6.0" alt="<?php echo esc_attr( __( 'Exploring WordPress 6.0 video' ) ); ?>" />
     492                <a href="#">
     493                    <img src="data:image/svg+xml,%3Csvg width='269' height='163' viewBox='0 0 269 163' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23a)'%3E%3Crect width='269' height='163' rx='4' fill='%23FDFF85'/%3E%3Cpath d='M238.84 130.043a1 1 0 0 0-1.524.852v8.21a1 1 0 0 0 1.524.852l6.671-4.105a1 1 0 0 0 0-1.703l-6.671-4.106Z' fill='%231E1E1E'/%3E%3Crect x='226.25' y='120.25' width='29.5' height='29.5' rx='2.75' stroke='%231E1E1E' stroke-width='1.5'/%3E%3Cpath d='M99.597 127.44c-6.16 0-11.36-1.16-15.6-3.48-4.24-2.32-7.68-5.4-10.32-9.24-2.56-3.84-4.4-8.16-5.52-12.96A64.74 64.74 0 0 1 66.477 87c0-9.28 1.28-17.4 3.84-24.36 2.64-6.96 6.4-12.36 11.28-16.2 4.88-3.92 10.8-5.88 17.76-5.88 5.521 0 10.241 1.08 14.161 3.24s6.96 5.04 9.12 8.64c2.24 3.6 3.6 7.52 4.08 11.76h-11.88c-.72-4.16-2.44-7.36-5.16-9.6-2.72-2.24-6.2-3.36-10.44-3.36-5.84 0-10.68 2.76-14.52 8.28-3.76 5.44-5.76 13.84-6 25.2 1.92-3.52 4.88-6.52 8.88-9 4.08-2.48 8.76-3.72 14.04-3.72 4.72 0 9.12 1.12 13.2 3.36 4.16 2.24 7.52 5.4 10.08 9.48 2.64 4 3.96 8.76 3.96 14.28 0 4.88-1.2 9.48-3.6 13.8-2.4 4.32-5.8 7.84-10.2 10.56-4.32 2.64-9.48 3.96-15.48 3.96Zm-.72-11.04c3.361 0 6.361-.72 9.001-2.16 2.64-1.44 4.72-3.4 6.24-5.88 1.52-2.56 2.28-5.44 2.28-8.64 0-5.12-1.68-9.2-5.04-12.24-3.28-3.04-7.48-4.56-12.6-4.56-3.36 0-6.4.76-9.12 2.28-2.64 1.52-4.72 3.56-6.24 6.12-1.52 2.48-2.28 5.24-2.28 8.28 0 3.28.76 6.2 2.28 8.76 1.6 2.48 3.72 4.44 6.36 5.88 2.72 1.44 5.76 2.16 9.12 2.16Zm45.925 10.32c-2.4 0-4.4-.76-6-2.28-1.52-1.6-2.28-3.48-2.28-5.64 0-2.24.76-4.12 2.28-5.64 1.6-1.6 3.6-2.4 6-2.4s4.36.8 5.88 2.4c1.52 1.52 2.28 3.4 2.28 5.64 0 2.16-.76 4.04-2.28 5.64-1.52 1.52-3.48 2.28-5.88 2.28Zm26.814-.72V56.4l-13.56 3.12v-9.36l18.6-8.16h8.16v84h-13.2Z' fill='%231E1E1E'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Crect width='269' height='163' rx='4' fill='%23fff'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A" alt="<?php echo esc_attr( __( 'Exploring WordPress 6.1 video' ) ); ?>" />
    260494                </a>
    261495            </div>
     
    273507                    <?php
    274508                    printf(
    275                         /* translators: %s: 6.0 overview video link. */
    276                         __( 'See WordPress 6.0 in action! <a href="%s">Watch a brief overview video</a> highlighting some of the major features debuting in WordPress 6.0.' ),
    277                         'https://www.youtube.com/watch?v=oe452WcY7fA'
     509                        /* translators: %s: 6.1 overview video link. */
     510                        __( 'See WordPress 6.1 in action! <a href="%s">Watch a brief overview video</a> highlighting some of the major features debuting in WordPress 6.1.' ),
     511                        '#'
    278512                    );
    279513                    ?>
     
    301535                        /* translators: %s: WordPress Field Guide link. */
    302536                        __( 'Check out the latest version of the <a href="%s">WordPress Field Guide</a>. It is overflowing with detailed developer notes to help you build with WordPress.' ),
    303                         __( 'https://make.wordpress.org/core/2022/05/03/wordpress-6-0-field-guide/' )
     537                        __( '#' )
    304538                    );
    305539                    ?>
     
    315549                            /* translators: %s: WordPress version number. */
    316550                            esc_url( __( 'https://wordpress.org/support/wordpress-version/version-%s/' ) ),
    317                             '6-0'
     551                            '6-1'
    318552                        ),
    319                         '6.0'
    320                     );
    321                     ?>
    322                 </p>
    323             </div>
    324         </div>
    325 
    326         <hr />
     553                        '6.1'
     554                    );
     555                    ?>
     556                </p>
     557            </div>
     558        </div>
     559
     560        <hr class="is-large" />
    327561
    328562        <div class="return-to-dashboard">
  • trunk/src/wp-admin/css/about.css

    r53409 r54499  
    2121.about__container {
    2222    /* Section backgrounds */
    23     --background: transparent;
    24     --subtle-background: #f0f0f0;
     23    --background: #274acd;
     24    --subtle-background: #eff2ff;
    2525
    2626    /* Main text color */
     
    2929
    3030    /* Accent colors: used in header, on special classes. */
    31     --accent-1: #3858e9; /* Accent background, link color */
    32     --accent-2: #3858e9; /* Header background */
     31    --accent-1: #3858e9; /* Link color */
     32    --accent-2: #fffcb5; /* Accent background */
    3333
    3434    /* Navigation colors. */
     
    100100
    101101.about__section {
    102     background: var(--background);
     102    background: transparent;
    103103    clear: both;
    104104}
    105105
    106106.about__container .has-accent-background-color {
    107     background-color: var(--accent-1);
    108     color: var(--text-light);
    109 }
    110 
    111 .about__container .has-accent-background-color a {
    112     color: var(--text-light);
     107    background-color: var(--accent-2);
    113108}
    114109
     
    118113
    119114.about__container .has-accent-color {
    120     color: var(--accent-1);
     115    color: var(--accent-2);
    121116}
    122117
     
    149144}
    150145
    151 .about__section .column[class*="background-color"],
    152 .about__section:where([class*="background-color"]) .column,
    153 .about__section .column.has-border {
     146.about__section .column[class*="background-color"]:not(.is-edge-to-edge),
     147.about__section:where([class*="background-color"]) .column:not(.is-edge-to-edge),
     148.about__section .column.has-border:not(.is-edge-to-edge) {
    154149    padding-top: var(--gap);
    155150    padding-bottom: var(--gap);
     
    476471}
    477472
     473.about__container h4,
     474.about__container h3.is-smaller-heading {
     475    margin-top: 0;
     476    font-size: 1.125rem;
     477    font-weight: 700;
     478    line-height: 1.6;
     479}
     480
    478481.about__container p {
    479482    font-size: inherit;
     
    516519
    517520.about__container li {
    518     margin-bottom: 0.75rem;
     521    margin-bottom: 0.5rem;
    519522}
    520523
     
    557560    height: var(--gap);
    558561    border: none;
     562    border-top: 4px solid #d9d9d9;
    559563}
    560564
     
    607611    margin-bottom: var(--gap);
    608612    padding-top: 0;
    609     background: var(--subtle-background) url('../images/about-header-about.svg?ver=6.0') no-repeat;
     613    color: var(--text-light);
     614    background: var(--background) no-repeat;
    610615    background-size: var(--about-header-bg-width) var(--about-header-bg-height);
    611616    background-position: right var(--about-header-bg-offset-inline) center;
     
    648653    padding: 8rem 0 0;
    649654    padding-right: calc(var(--about-header-bg-width) + var(--about-header-bg-offset-inline) + var(--gap));
     655}
     656
     657.about-php .about__header-title {
     658    padding-right: 0;
    650659}
    651660
Note: See TracChangeset for help on using the changeset viewer.