Make WordPress Core


Ignore:
Timestamp:
02/26/2024 11:49:59 PM (10 months ago)
Author:
ryelle
Message:

Help/About: Update the About page for 6.5.

Introducing the new content & design for the 6.5 About page & related pages. This style is simplified, with no header images, and brings back the illustrations from previous versions for Contribute, Freedoms, and Privacy.

This also includes a fix for heading hierarchy on the Get Involved page.

Props laurlittle, dansoschin, benjamin_zekavica, richtabor, joen, annezazu, swissspidy, marybaum, ryelle, huzaifaalmesbah.
See #60303.

File:
1 edited

Legend:

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

    r57081 r57715  
    3232                </h1>
    3333            </div>
    34 
    35             <div class="about__header-text"></div>
    3634        </div>
    3735
     
    4644        <div class="about__section">
    4745            <div class="column">
    48                 <h2 class="aligncenter">
     46                <h2>
    4947                    <?php
    5048                    printf(
     
    5654                </h2>
    5755                <p class="is-subheading">
    58                     <?php _e( 'Every version of WordPress empowers your creative freedom, and WordPress 6.4 is no different. New features and upgrades to your site editing, design, and writing experience allow your ideas to take shape seamlessly. Elevate your site-building journey with the flexibility and power of WordPress 6.4.' ); ?>
     56                    <?php _e( 'Take your site-building experience further with WordPress 6.5. Explore more avenues to make it your own, with new features and enhancements that will help fine-tune your creative work. Discover the latest additions to the developer experience, with fresh foundational tools poised to transform the future of blocks.' ); ?>
    5957                </p>
    6058            </div>
    6159        </div>
    6260
    63         <div class="about__section has-2-columns has-accent-4-background-color is-wider-right">
    64             <div class="column is-vertically-aligned-center">
    65                 <h3><?php _e( 'Say hello to<br>Twenty Twenty-Four' ); ?></h3>
    66                 <p>
    67                     <?php
    68                     printf(
    69                         /* translators: %s: Introduction to Twenty Twenty-Four link. */
    70                         __( 'Experience the latest advancements in site editing with <a href="%s">Twenty Twenty-Four</a>. Built with three distinct use cases in mind, the versatility of the new default theme makes it an ideal choice for almost any type of website. Dive into its collection of templates and patterns and unlock a world of creative possibilities with just a few tweaks.' ),
    71                         __( 'https://make.wordpress.org/core/2023/08/24/introducing-twenty-twenty-four/' )
    72                     );
    73                     ?>
    74                 </p>
    75             </div>
    76             <div class="column is-vertically-aligned-bottom is-edge-to-edge">
    77                 <div class="about__image">
    78                     <img src="https://s.w.org/images/core/6.4/1-Twenty-Twenty-Four.webp" alt="" height="600" width="600" />
    79                 </div>
    80             </div>
    81         </div>
    82 
     61        <div class="about__section has-2-columns">
     62            <div class="column is-vertically-aligned-center">
     63                <div class="about__image">
     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%3Crect width='100%25' height='100%25' fill='%23ededed' /%3E%3C/svg%3E" alt="" height="436" width="436" />
     65                </div>
     66            </div>
     67            <div class="column is-vertically-aligned-center">
     68                <h3><?php _e( 'Add and manage fonts across your site' ); ?></h3>
     69                <p><?php _e( 'The new Font Library puts you in control of an essential piece of your site&#8217;s design—typography—without coding or extra steps. Effortlessly install, remove, and activate local and Google Fonts across your site regardless of your active theme. The ability to include custom typography collections gives site creators and publishers even more choice.' ); ?></p>
     70            </div>
     71        </div>
     72
     73        <div class="about__section has-2-columns">
     74            <div class="column is-vertically-aligned-center">
     75                <h3><?php _e( 'Override specific content in synced patterns' ); ?></h3>
     76                <p><?php _e( 'Keep your design consistent while bringing more flexibility to the content within. Choose to override content for Paragraph, Image, Heading, and Button blocks and make specified changes in each instance of a synced pattern. Use it for templated pieces with recurring elements to frame unique content, like recipes, testimonials, or case studies. You can expect more blocks to gain this option in future releases.' ); ?></p>
     77            </div>
     78            <div class="column is-vertically-aligned-center">
     79                <div class="about__image">
     80                    <img src="data:image/svg+xml,%3Csvg width='436' height='436' viewbox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='%23ededed' /%3E%3C/svg%3E" alt="" height="436" width="436" />
     81                </div>
     82            </div>
     83        </div>
     84
     85        <div class="about__section has-2-columns">
     86            <div class="column is-vertically-aligned-center">
     87                <div class="about__image">
     88                    <img src="data:image/svg+xml,%3Csvg width='436' height='436' viewbox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='%23ededed' /%3E%3C/svg%3E" alt="" height="436" width="436" />
     89                </div>
     90            </div>
     91            <div class="column is-vertically-aligned-center">
     92                <h3><?php _e( 'Get more details from your style revisions' ); ?></h3>
     93                <p><?php _e( 'Work through creative projects with a more comprehensive picture of what&#8217;s been done—and what you can fall back on. Get details like time stamps, quick summaries, and a paginated list of total revisions. View revisions from the Style Book to see changes outside of what you’re working on. Revisions are also now available for templates and template parts.' ); ?></p>
     94            </div>
     95        </div>
     96       
    8397        <div class="about__section has-3-columns">
    8498            <div class="column">
    8599                <div class="about__image">
    86                     <img src="https://s.w.org/images/core/6.4/2-image-lightbox.webp" alt="" height="270" width="270" />
    87                 </div>
    88                 <h3 class="is-smaller-heading" style="margin-bottom:calc(var(--gap) / 4);"><?php _e( 'Add a lightbox effect to images' ); ?></h3>
    89                 <p><?php _e( 'Turn lightbox functionality on for interactive, full-screen images with a simple click. Apply it globally or to specific images to customize the viewing experience.' ); ?></p>
    90             </div>
    91             <div class="column">
    92                 <div class="about__image">
    93                     <img src="https://s.w.org/images/core/6.4/3-categorize-patterns.webp" alt="" height="270" width="270" />
    94                 </div>
    95                 <h3 class="is-smaller-heading" style="margin-bottom:calc(var(--gap) / 4);"><?php _e( 'Categorize and filter patterns' ); ?></h3>
    96                 <p><?php _e( 'Organize your synced and unsynced patterns with categories. Explore advanced filtering in the Patterns section of the inserter to find them all more intuitively.' ); ?></p>
    97             </div>
    98             <div class="column">
    99                 <div class="about__image">
    100                     <img src="https://s.w.org/images/core/6.4/4-command-palette.webp" alt="" height="270" width="270" />
    101                 </div>
    102                 <h3 class="is-smaller-heading" style="margin-bottom:calc(var(--gap) / 4);"><?php _e( 'Get more done with the Command Palette' ); ?></h3>
    103                 <p>
    104                     <?php
    105                     printf(
    106                         /* translators: %s: Command palette improvement link. */
    107                         __( 'Enjoy <a href="%s">a refreshed design and more commands</a> to find what you\'re looking for, perform tasks efficiently, and save time as you create.' ),
    108                         __( 'https://make.wordpress.org/core/2023/09/12/core-editor-improvement-commanding-the-command-palette/' )
    109                     );
    110                     ?>
    111                 </p>
     100                    <img src="data:image/svg+xml,%3Csvg width='270' height='270' viewbox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='%23ededed' /%3E%3C/svg%3E" alt="" height="270" width="270" />
     101                </div>
     102                <h3 class="is-smaller-heading" style="margin-bottom:calc(var(--gap) / 4);"><?php _e( 'Do more with background images in Group blocks' ); ?></h3>
     103                <p><?php _e( 'Control size, repeat, and focal point options so you can play around with subtle or splashy ways to add visual interest to layouts.' ); ?></p>
     104            </div>
     105            <div class="column">
     106                <div class="about__image">
     107                    <img src="data:image/svg+xml,%3Csvg width='270' height='270' viewbox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='%23ededed' /%3E%3C/svg%3E" alt="" height="270" width="270" />
     108                </div>
     109                <h3 class="is-smaller-heading" style="margin-bottom:calc(var(--gap) / 4);"><?php _e( 'Get more control over images in Cover blocks' ); ?></h3>
     110                <p><?php _e( 'Set aspect ratios for Cover block images and easily add color overlays that automatically source color from your chosen image.' ); ?></p>
     111            </div>
     112            <div class="column">
     113                <div class="about__image">
     114                    <img src="data:image/svg+xml,%3Csvg width='270' height='270' viewbox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='%23ededed' /%3E%3C/svg%3E" alt="" height="270" width="270" />
     115                </div>
     116                <h3 class="is-smaller-heading" style="margin-bottom:calc(var(--gap) / 4);"><?php _e( 'Add box shadow supports to even more blocks' ); ?></h3>
     117                <p><?php _e( 'With shadow supports enabled, you can create layouts with visual depth or add a little personality to your design.' ); ?></p>
    112118            </div>
    113119        </div>
     
    116122            <div class="column">
    117123                <div class="about__image">
    118                     <img src="https://s.w.org/images/core/6.4/5-renaming-groups.webp" alt="" height="270" width="270" />
    119                 </div>
    120                 <h3 class="is-smaller-heading" style="margin-bottom:calc(var(--gap) / 4);"><?php _e( 'Rename Group blocks' ); ?></h3>
    121                 <p><?php _e( 'Set custom names for Group blocks to easily organize and differentiate parts of your content. These names will be visible in List View.' ); ?></p>
    122             </div>
    123             <div class="column">
    124                 <div class="about__image">
    125                     <img src="https://s.w.org/images/core/6.4/6-image-preview.webp" alt="" height="270" width="270" />
    126                 </div>
    127                 <h3 class="is-smaller-heading" style="margin-bottom:calc(var(--gap) / 4);"><?php _e( 'Image previews in List View' ); ?></h3>
    128                 <p><?php _e( 'New media previews for Gallery and Image blocks in List View let you visualize and locate at a glance where images on your content are.' ); ?></p>
    129             </div>
    130             <div class="column">
    131                 <div class="about__image">
    132                     <img src="https://s.w.org/images/core/6.4/7-import-export-patterns.webp" alt="" height="270" width="270" />
    133                 </div>
    134                 <h3 class="is-smaller-heading" style="margin-bottom:calc(var(--gap) / 4);"><?php _e( 'Share patterns across sites' ); ?></h3>
    135                 <p><?php _e( 'Need to use your custom patterns on another site? It\'s simple! Import and export them as JSON files from the Site Editor\'s patterns view.' ); ?></p>
    136             </div>
    137         </div>
    138 
    139         <div class="about__section has-2-columns has-subtle-background-color is-wider-left">
    140             <div class="column is-vertically-aligned-center">
    141                 <div class="about__image">
    142                     <img src="https://s.w.org/images/core/6.4/8-captured-toolbar.webp" alt="" height="434" width="536" />
    143                 </div>
    144             </div>
    145             <div class="column is-vertically-aligned-center">
    146                 <h3><?php _e( 'Enjoy new writing improvements' ); ?></h3>
    147                 <p>
    148                     <?php
    149                     printf(
    150                         /* translators: %s: New enhancements link. */
    151                         __( '<a href="%s">New enhancements</a> ensure your content creation journey is smooth. Find new keyboard shortcuts in List View, refined list merging, and enhanced control over link settings. A revamped and cohesive toolbar experience for Navigation, List, and Quote blocks lets you efficiently work with the tooling options you need.' ),
    152                         __( 'https://make.wordpress.org/core/2023/10/05/core-editor-improvement-ensuring-excellence-in-the-writing-experience/' )
    153                     );
    154                     ?>
    155                 </p>
    156             </div>
    157         </div>
    158 
    159         <div class="about__section has-2-columns">
    160             <div class="column is-vertically-aligned-center">
    161                 <h3><?php _e( 'Build your creative vision with more design tools' ); ?></h3>
    162                 <p><?php _e( 'Get creative with new background images in Group blocks and ensure consistent image dimensions with placeholder aspect ratios. Do you want to add buttons to your Navigation block? You can now do it conveniently without custom CSS. If you\'re working with synced patterns, alignment settings stay intact for a seamless pattern creation experience.' ); ?></p>
    163             </div>
    164             <div class="column is-vertically-aligned-center">
    165                 <div class="about__image">
    166                     <img src="https://s.w.org/images/core/6.4/9-design-tools.webp" alt="" height="355" width="436" />
    167                 </div>
    168             </div>
    169         </div>
    170 
    171         <div class="about__section has-2-columns">
    172             <div class="column is-vertically-aligned-center">
    173                 <div class="about__image">
    174                     <img src="https://s.w.org/images/core/6.4/10-block-hooks.webp" alt="" height="436" width="436" />
    175                 </div>
    176             </div>
    177             <div class="column is-vertically-aligned-center">
    178                 <h3><?php _e( 'Introducing Block Hooks' ); ?></h3>
    179                 <p><?php _e( 'Block Hooks is a new powerful feature that enables plugins to auto-insert blocks into content relative to another block. Think of it as recommendations to make your work with blocks more intuitive. A new "Plugins" panel gives you complete control to match them to your needs—add, dismiss, and rearrange Block Hooks as desired.' ); ?></p>
    180             </div>
    181         </div>
    182 
    183         <div class="about__section has-2-columns">
    184             <div class="column">
    185                 <div class="about__image">
    186                     <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
    187                         <rect width="48" height="48" rx="4" fill="#CFCABE"/>
    188                         <path d="M25.7781 16.8569L25.8 22.8573L28.9984 22.8572C29.805 22.8572 30.2796 23.6339 29.8204 24.2024L23.8213 31.6292C23.2633 32.3201 22.2013 31.9819 22.2013 31.1416L22.2 25.1481H19.0016C18.1961 25.1481 17.7212 24.3733 18.1782 23.8047L24.1496 16.3722C24.7055 15.6804 25.7749 16.0169 25.7781 16.8569Z" fill="#151515"/>
    189                     </svg>
    190                 </div>
    191                 <h3 style="margin-top:calc(var(--gap) * 0.75);margin-bottom:calc(var(--gap) * 0.5)"><?php _e( 'Performance' ); ?></h3>
    192                 <p><?php _e( 'WordPress 6.4 includes more than 100 performance updates for a faster and more efficient experience. Enhancements focus on template loading performance for Block Themes and Classic Themes, usage of the script loading strategies “defer” and “async” in core, blocks, and themes, and optimization of autoloaded options.' ); ?></p>
    193             </div>
    194             <div class="column">
    195                 <div class="about__image">
    196                     <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
    197                         <rect width="48" height="48" rx="4" fill="#CFCABE"/>
    198                         <path d="M24 18.285C23.55 18.285 23.1638 18.1237 22.8413 17.8012C22.5188 17.4788 22.3575 17.0925 22.3575 16.6425C22.3575 16.1925 22.5188 15.8062 22.8413 15.4837C23.1638 15.1612 23.55 15 24 15C24.45 15 24.8363 15.1612 25.1588 15.4837C25.4813 15.8062 25.6425 16.1925 25.6425 16.6425C25.6425 17.0925 25.4813 17.4788 25.1588 17.8012C24.8363 18.1237 24.45 18.285 24 18.285ZM21.5925 33V21.0075C20.5725 20.9325 19.5863 20.8275 18.6338 20.6925C17.6813 20.5575 16.77 20.385 15.9 20.175L16.2375 18.825C17.5125 19.125 18.78 19.3387 20.04 19.4662C21.3 19.5938 22.62 19.6575 24 19.6575C25.38 19.6575 26.7 19.5938 27.96 19.4662C29.22 19.3387 30.4875 19.125 31.7625 18.825L32.1 20.175C31.23 20.385 30.3187 20.5575 29.3663 20.6925C28.4137 20.8275 27.4275 20.9325 26.4075 21.0075V33H25.0575V27.15H22.9425V33H21.5925Z" fill="#151515"/>
    199                     </svg>
    200                 </div>
    201                 <h3 style="margin-top:calc(var(--gap) * 0.75);margin-bottom:calc(var(--gap) * 0.5)"><?php _e( 'Accessibility' ); ?></h3>
    202                 <p><?php _e( 'Every release is committed to making WordPress accessible to everyone. 6.4 brings List View improvements and aria-label support for the Navigation block, among other highlights. The admin user interface (UI) includes enhancements to button placements, "Add New" menu items context, and Site Health spoken messages.' ); ?></p>
    203             </div>
    204         </div>
     124                    <img src="data:image/svg+xml,%3Csvg width='270' height='270' viewbox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='%23ededed' /%3E%3C/svg%3E" alt="" height="270" width="270" />
     125                </div>
     126                <h3 class="is-smaller-heading" style="margin-bottom:calc(var(--gap) / 4);"><?php _e( 'Discover new Data Views' ); ?></h3>
     127                <p><?php _e( 'Make fast, informed changes with data views for pages, templates, patterns, and template parts. Arrange data in a table or grid view and enjoy a new UI for toggling fields and making bulk changes.' ); ?></p>
     128            </div>
     129            <div class="column">
     130                <div class="about__image">
     131                    <img src="data:image/svg+xml,%3Csvg width='270' height='270' viewbox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='%23ededed' /%3E%3C/svg%3E" alt="" height="270" width="270" />
     132                </div>
     133                <h3 class="is-smaller-heading" style="margin-bottom:calc(var(--gap) / 4);"><?php _e( 'Smoother drag-and-drop' ); ?></h3>
     134                <p><?php _e( 'Feel the difference when you move things around, with helpful visual cues like displaced items in List View or frictionless dragging to anywhere in your workspace—from beginning to end.' ); ?></p>
     135            </div>
     136            <div class="column">
     137                <div class="about__image">
     138                    <img src="data:image/svg+xml,%3Csvg width='270' height='270' viewbox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='%23ededed' /%3E%3C/svg%3E" alt="" height="270" width="270" />
     139                </div>
     140                <h3 class="is-smaller-heading" style="margin-bottom:calc(var(--gap) / 4);"><?php _e( 'Improved link controls' ); ?></h3>
     141                <p><?php _e( 'Create and manage links easily with a more intuitive link-building experience, like a streamlined UI and a shortcut for copying links.' ); ?></p>
     142            </div>
     143        </div>
     144
     145        <hr />
     146
     147        <div class="about__section has-2-columns">
     148            <div class="column">
     149                <div class="about__image">
     150                    <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
     151                        <rect width="48" height="48" rx="6" fill="#ededed"/>
     152                        <path d="M18.9167 16.5C18.2757 16.5 17.661 16.7546 17.2078 17.2078C16.7546 17.661 16.5 18.2757 16.5 18.9167V21.3333H18.3125V18.9167C18.3125 18.7564 18.3762 18.6028 18.4895 18.4895C18.6028 18.3762 18.7564 18.3125 18.9167 18.3125H21.3333V16.5H18.9167ZM21.3333 29.1875H18.9167C18.7564 29.1875 18.6028 29.1238 18.4895 29.0105C18.3762 28.8972 18.3125 28.7436 18.3125 28.5833V26.1667H16.5V28.5833C16.5 29.2243 16.7546 29.839 17.2078 30.2922C17.661 30.7454 18.2757 31 18.9167 31H21.3333V29.1875ZM26.1667 31V29.1875H28.5833C28.7436 29.1875 28.8972 29.1238 29.0105 29.0105C29.1238 28.8972 29.1875 28.7436 29.1875 28.5833V26.1667H31V28.5833C31 29.2243 30.7454 29.839 30.2922 30.2922C29.839 30.7454 29.2243 31 28.5833 31H26.1667ZM28.5833 16.5C29.2243 16.5 29.839 16.7546 30.2922 17.2078C30.7454 17.661 31 18.2757 31 18.9167V21.3333H29.1875V18.9167C29.1875 18.7564 29.1238 18.6028 29.0105 18.4895C28.8972 18.3762 28.7436 18.3125 28.5833 18.3125H26.1667V16.5H28.5833Z" fill="#1e1e1e"/>
     153                    </svg>
     154                </div>
     155                <h3 style="margin-top:calc(var(--gap) * 0.75);margin-bottom:calc(var(--gap) * 0.5)"><?php _e( 'Bring interactions to blocks with the Interactivity API' ); ?></h3>
     156                <p><?php _e( 'The Interactivity API offers developers a standardized method for building interactive front-end experiences with blocks. It simplifies the process, with fewer dependencies on external tooling, while maintaining optimal performance. Use it to create memorable user experiences, like fetching search results instantly or letting visitors interact with content in real time.' ); ?></p>
     157            </div>
     158            <div class="column">
     159                <div class="about__image">
     160                    <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
     161                        <rect width="48" height="48" rx="6" fill="#ededed"/>
     162                        <path d="M18.95 19.45H27.15L25.45 21.25L26.55 22.35L30.15 18.75L26.65 14.75L25.55 15.75L27.45 18.05H18.95C18.05 18.05 17.25 18.35 16.65 18.95C15.25 20.45 15.25 23.15 15.25 24.55V24.75H16.75V24.45C16.75 23.35 16.75 20.95 17.75 19.95C18.05 19.65 18.45 19.45 18.95 19.45ZM32.75 23.45V23.25H31.25V23.55C31.25 24.65 31.25 27.05 30.25 28.05C29.95 28.35 29.55 28.55 28.95 28.55H20.75L22.45 26.85L21.35 25.75L17.85 29.25L21.35 33.25L22.45 32.25L20.55 29.95H28.95C29.85 29.95 30.65 29.65 31.25 29.05C32.75 27.65 32.75 24.85 32.75 23.45Z" fill="#1e1e1e"/>
     163                    </svg>
     164                </div>
     165                <h3 style="margin-top:calc(var(--gap) * 0.75);margin-bottom:calc(var(--gap) * 0.5)"><?php _e( 'Connect blocks to custom fields or other dynamic content' ); ?></h3>
     166                <p><?php _e( 'Link core block attributes to custom fields and use the value of custom fields without creating custom blocks. Powered by the Block Bindings API, developers can extend this capability further to connect blocks to any dynamic content—even beyond custom fields. If there’s data stored elsewhere, easily point blocks to that new source with only a few lines of code.' ); ?></p>
     167            </div>
     168        </div>
     169
     170        <div class="about__section has-2-columns">
     171            <div class="column">
     172                <div class="about__image">
     173                    <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
     174                        <rect width="48" height="48" rx="6" fill="#ededed"/>
     175                        <path d="M33 18.75H23.1925C22.7954 17.7305 21.7239 17 20.4643 17C19.2047 17 18.1332 17.7305 17.736 18.75H15V20.5H17.736C18.1332 21.5195 19.2047 22.25 20.4643 22.25C21.7239 22.25 22.7954 21.5195 23.1925 20.5H33V18.75Z" fill="#1e1e1e"/>
     176                        <path d="M33 27.5H30.264C29.8668 26.4805 28.7953 25.75 27.5357 25.75C26.2761 25.75 25.2046 26.4805 24.8075 27.5H15V29.25H24.8075C25.2046 30.2695 26.2761 31 27.5357 31C28.7953 31 29.8668 30.2695 30.264 29.25H33V27.5Z" fill="#1e1e1e"/>
     177                    </svg>
     178                </div>
     179                <h3 style="margin-top:calc(var(--gap) * 0.75);margin-bottom:calc(var(--gap) * 0.5)"><?php _e( 'Add appearance tools to Classic themes' ); ?></h3>
     180                <p><?php _e( 'Give designers and creators using Classic themes access to an upgraded design experience. Opt in to support for spacing, border, typography, and color options, even without using theme.json. Once support is enabled, more tools will be automatically added as they become available.' ); ?></p>
     181            </div>
     182            <div class="column">
     183                <div class="about__image">
     184                    <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
     185                        <rect width="48" height="48" rx="6" fill="#ededed"/>
     186                        <path fill-rule="evenodd" clip-rule="evenodd" d="M22.5 16L22.5 20H25.5V16H27V20H28.5C29.0523 20 29.5 20.4477 29.5 21V25L26.5 29V31C26.5 31.5523 26.0523 32 25.5 32H22.5C21.9477 32 21.5 31.5523 21.5 31V29L18.5 25V21C18.5 20.4477 18.9477 20 19.5 20H21L21 16H22.5ZM23 28.5V30.5H25V28.5L28 24.5V21.5H20V24.5L23 28.5Z" fill="#1e1e1e"/>
     187                    </svg>
     188                </div>
     189                <h3 style="margin-top:calc(var(--gap) * 0.75);margin-bottom:calc(var(--gap) * 0.5)"><?php _e( 'Explore improvements to the plugin experience' ); ?></h3>
     190                <p><?php _e( 'There&#8217;s now an easier way to manage plugin dependencies. Plugin authors can supply a new <code>Requires Plugins</code> header with a comma-separated list of required plugin slugs, presenting users with links to install and activate those plugins first.' ); ?></p>
     191            </div>
     192        </div>
     193
     194        <div class="about__section has-2-columns">
     195            <div class="column">
     196                <div class="about__image">
     197                    <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
     198                        <rect width="48" height="48" rx="4" fill="#ededed"/>
     199                        <path d="M28.4287 20.6507C28.8387 20.8874 28.9791 21.4116 28.7424 21.8215L24.7424 28.7498C24.5057 29.1597 23.9815 29.3002 23.5715 29.0635C23.1616 28.8268 23.0211 28.3026 23.2578 27.8926L27.2578 20.9644C27.4945 20.5544 28.0187 20.414 28.4287 20.6507Z" fill="#1e1e1e"/>
     200                        <path d="M18.6433 23.579C18.2333 23.3423 17.7091 23.4828 17.4724 23.8927C17.2357 24.3027 17.3761 24.8269 17.7861 25.0636L18.281 25.3493C18.691 25.586 19.2152 25.4456 19.4519 25.0356C19.6886 24.6256 19.5481 24.1014 19.1381 23.8647L18.6433 23.579Z" fill="#1e1e1e"/>
     201                        <path d="M20.0358 20.6508C20.4458 20.4141 20.97 20.5546 21.2067 20.9645L21.4924 21.4594C21.7291 21.8694 21.5887 22.3936 21.1787 22.6303C20.7687 22.867 20.2445 22.7265 20.0078 22.3166L19.7221 21.8217C19.4854 21.4117 19.6259 20.8875 20.0358 20.6508Z" fill="#1e1e1e"/>
     202                        <path d="M24.8571 20C24.8571 19.5266 24.4734 19.1429 24 19.1429C23.5266 19.1429 23.1429 19.5266 23.1429 20V20.5714C23.1429 21.0448 23.5266 21.4286 24 21.4286C24.4734 21.4286 24.8571 21.0448 24.8571 20.5714V20Z" fill="#1e1e1e"/>
     203                        <path fill-rule="evenodd" clip-rule="evenodd" d="M14 26C14 20.4772 18.4772 16 24 16C29.5228 16 34 20.4772 34 26C34 28.0846 33.3612 30.0225 32.2686 31.6256L32.0135 32H15.9865L15.7314 31.6256C14.6388 30.0225 14 28.0846 14 26ZM24 17.7143C19.4239 17.7143 15.7143 21.4239 15.7143 26C15.7143 27.5698 16.1501 29.0357 16.9072 30.2857H31.0928C31.8499 29.0357 32.2857 27.5698 32.2857 26C32.2857 21.4239 28.5761 17.7143 24 17.7143Z" fill="#1e1e1e"/>
     204                    </svg>
     205                </div>
     206                <h3 style="margin-top:calc(var(--gap) * 0.75);margin-bottom:calc(var(--gap) * 0.5)"><?php _e( 'Performance updates' ); ?></h3>
     207                <p><?php _e( 'This release includes 110+ performance updates, with an impressive increase in speed and efficiency across the Post Editor and Site Editor. Loading, input processing, and Site Editor navigation each see an increase in speed between two to six times faster than before. Translated sites see up to 25% improvement in load time for this release.' ); ?></p>
     208            </div>
     209            <div class="column">
     210                <div class="about__image">
     211                    <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
     212                        <rect width="48" height="48" rx="4" fill="#ededed"/>
     213                        <path d="M24 18.285C23.55 18.285 23.1637 18.1237 22.8412 17.8012C22.5187 17.4788 22.3575 17.0925 22.3575 16.6425C22.3575 16.1925 22.5187 15.8062 22.8412 15.4837C23.1637 15.1612 23.55 15 24 15C24.45 15 24.8362 15.1612 25.1587 15.4837C25.4812 15.8062 25.6425 16.1925 25.6425 16.6425C25.6425 17.0925 25.4812 17.4788 25.1587 17.8012C24.8362 18.1237 24.45 18.285 24 18.285ZM21.5925 33V21.0075C20.5725 20.9325 19.5862 20.8275 18.6337 20.6925C17.6812 20.5575 16.77 20.385 15.9 20.175L16.2375 18.825C17.5125 19.125 18.78 19.3387 20.04 19.4662C21.3 19.5938 22.62 19.6575 24 19.6575C25.38 19.6575 26.7 19.5938 27.96 19.4662C29.22 19.3387 30.4875 19.125 31.7625 18.825L32.1 20.175C31.23 20.385 30.3187 20.5575 29.3662 20.6925C28.4137 20.8275 27.4275 20.9325 26.4075 21.0075V33H25.0575V27.15H22.9425V33H21.5925Z" fill="#1e1e1e"/>
     214                    </svg>
     215                </div>
     216                <h3 style="margin-top:calc(var(--gap) * 0.75);margin-bottom:calc(var(--gap) * 0.5)"><?php _e( 'Accessibility improvements' ); ?></h3>
     217                <p><?php _e( 'This release includes more than 65 accessibility improvements across the platform, making it more accessible than ever. This release adds fixes to contrast settings, cursor focus, submenus, and positioning of elements, among many others, that help improve the WordPress experience for everyone.' ); ?></p>
     218            </div>
     219        </div>
     220
     221        <hr />
    205222
    206223        <div class="about__section has-3-columns">
    207224            <div class="column about__image is-vertically-aligned-top">
    208                 <img src="<?php echo esc_url( admin_url( 'images/about-release-badge.svg?ver=6.4' ) ); ?>" alt="" height="270" width="270" />
     225                <img src="<?php echo esc_url( admin_url( 'images/about-release-badge.svg?ver=6.5' ) ); ?>" alt="" height="280" width="280" />
    209226            </div>
    210227            <div class="column is-vertically-aligned-center" style="grid-column-end:span 2">
     
    235252                <div class="about__image">
    236253                    <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
    237                         <rect width="48" height="48" rx="4" fill="#CFCABE"/>
    238                         <path d="M23 34v-4h-5l-2.293-2.293a1 1 0 0 1 0-1.414L18 24h5v-2h-7v-6h7v-2h2v2h5l2.293 2.293a1 1 0 0 1 0 1.414L30 22h-5v2h7v6h-7v4h-2Zm-5-14h11.175l.646-.646a.5.5 0 0 0 0-.708L29.175 18H18v2Zm.825 8H30v-2H18.825l-.646.646a.5.5 0 0 0 0 .708l.646.646Z" fill="#151515"/>
     254                        <rect width="48" height="48" rx="4" fill="#ededed"/>
     255                        <path d="M23 34v-4h-5l-2.293-2.293a1 1 0 0 1 0-1.414L18 24h5v-2h-7v-6h7v-2h2v2h5l2.293 2.293a1 1 0 0 1 0 1.414L30 22h-5v2h7v6h-7v4h-2Zm-5-14h11.175l.646-.646a.5.5 0 0 0 0-.708L29.175 18H18v2Zm.825 8H30v-2H18.825l-.646.646a.5.5 0 0 0 0 .708l.646.646Z" fill="#1e1e1e"/>
    239256                    </svg>
    240257                </div>
     
    244261                        /* translators: 1: WordPress Field Guide link, 2: WordPress version number. */
    245262                        __( 'Explore the <a href="%1$s">WordPress %2$s Field Guide</a>. Learn about the changes in this release with detailed developer notes to help you build with WordPress.' ),
    246                         __( 'https://make.wordpress.org/core/2023/10/23/wordpress-6-4-field-guide/' ),
    247                         '6.4'
     263                        ( '#' ),
     264                        '6.5'
    248265                    );
    249266                    ?>
     
    253270                <div class="about__image">
    254271                    <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
    255                         <rect width="48" height="48" rx="4" fill="#CFCABE"/>
     272                        <rect width="48" height="48" rx="4" fill="#ededed"/>
    256273                        <path d="M28 19.75h-8v1.5h8v-1.5ZM20 23h8v1.5h-8V23ZM26 26.25h-6v1.5h6v-1.5Z" fill="#151515"/>
    257                         <path fill-rule="evenodd" clip-rule="evenodd" d="M29 16H19a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V18a2 2 0 0 0-2-2Zm-10 1.5h10a.5.5 0 0 1 .5.5v12a.5.5 0 0 1-.5.5H19a.5.5 0 0 1-.5-.5V18a.5.5 0 0 1 .5-.5Z" fill="#151515"/>
     274                        <path fill-rule="evenodd" clip-rule="evenodd" d="M29 16H19a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V18a2 2 0 0 0-2-2Zm-10 1.5h10a.5.5 0 0 1 .5.5v12a.5.5 0 0 1-.5.5H19a.5.5 0 0 1-.5-.5V18a.5.5 0 0 1 .5-.5Z" fill="#1e1e1e"/>
    258275                    </svg>
    259276                </div>
     
    266283                            /* translators: %s: WordPress version number. */
    267284                            esc_url( __( 'https://wordpress.org/documentation/wordpress-version/version-%s/' ) ),
    268                             '6-4'
     285                            '6-5'
    269286                        ),
    270                         '6.4'
     287                        '6.5'
    271288                    );
    272289                    ?>
Note: See TracChangeset for help on using the changeset viewer.