Make WordPress Core


Ignore:
Timestamp:
01/04/2022 06:33:42 PM (3 years ago)
Author:
ryelle
Message:

Help/About: WordPress 5.9 About Page.

Introducing the new About page for 5.9.

Props dansoschin, critterverse, webcommsat, marybaum, nalininonstopnewsuk, sabernhardt, costdev, chanthaboune, cbringmann, mkaz, davidbaumwald, ryelle, melchoyce, annezazu, paaljoachim, audrasjb, hellofromtonya, walbo, tobifjellner, mitogh

File:
1 edited

Legend:

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

    r51475 r52438  
    2424                <h1>
    2525                    <?php _e( 'WordPress' ); ?>
    26                     <?php echo $display_version; ?>
     26                    <span class="screen-reader-text"><?php echo $display_version; ?></span>
    2727                </h1>
    2828            </div>
    2929
    3030            <div class="about__header-text">
    31                 <?php _e( 'The next stop on the road to full site editing' ); ?>
     31                <?php _e( 'Build the site you&#8217;ve always wanted &#8212; with blocks' ); ?>
    3232            </div>
    3333
     
    4040        </div>
    4141
    42         <hr />
     42        <hr class="is-large" />
    4343
    4444        <div class="about__section">
    4545            <h2 class="aligncenter">
    46                 <?php _e( 'Three Essential Powerhouses' ); ?>
     46                <?php _e( 'Full Site Editing is here' ); ?>
    4747            </h2>
    48         </div>
     48            <p class="aligncenter is-subheading">
     49                <?php _e( 'It puts you in control of your whole site, right in the WordPress Admin.' ); ?>
     50            </p>
     51        </div>
     52
     53        <hr />
    4954
    5055        <div class="about__section has-2-columns is-wider-left">
    51             <div class="column about__image is-vertically-aligned-center">
    52                 <img src="https://s.w.org/images/core/5.8/about-widgets-blocks.png" alt="" />
    53             </div>
    54             <div class="column">
    55                 <h3>
    56                     <?php _e( 'Manage Widgets with Blocks' ); ?>
    57                 </h3>
    58                 <p>
    59                     <?php
    60                     printf(
    61                         /* translators: %s: Widgets dev note link. */
    62                         __( 'After months of hard work, the power of blocks has come to both the Block Widgets Editor and the Customizer. Now you can add blocks both in widget areas across your site and with live preview through the Customizer. This opens up new possibilities to create content: from no-code mini layouts to the vast library of core and third-party blocks. For our developers, you can find more details in the <a href="%s">Widgets dev note</a>.' ),
    63                         'https://make.wordpress.org/core/2021/06/29/block-based-widgets-editor-in-wordpress-5-8/'
    64                     );
    65                     ?>
    66                 </p>
     56            <div class="column about__image is-vertically-aligned-center is-edge-to-edge">
     57                <img src="https://s.w.org/images/core/5.9/twenty-twenty-two.png" alt="" />
     58            </div>
     59            <div class="column">
     60                <h3>
     61                    <?php _e( 'Say hello to Twenty Twenty&#8209;Two' ); ?>
     62                </h3>
     63                <p>
     64                    <?php _e( 'And say hello to the first default block theme in the history of WordPress. This is more than just a new default theme. It&#8217;s a brand-new way to work with WordPress themes.' ); ?>
     65                </p>
     66                <p>
     67                    <?php _e( 'Block themes put a wide array of visual choices in your hands, from color schemes and typeface combinations to page templates and image filters &#8212; all together, in the site editing interface. By making changes in one place, you can give Twenty Twenty&#8209;Two the same look and feel as your brand or other websites &#8212; or take your site&#8217;s look in another direction.' ); ?>
     68                </p>
     69                <?php if ( current_user_can( 'switch_themes' ) ) : ?>
     70                <p>
     71                    <?php
     72                    printf(
     73                        /* translators: %s: Link to Themes screen. */
     74                        __( 'The Twenty Twenty&#8209;Two theme is already available to you. It came installed with WordPress 5.9, and you will find it with <a href="%s">your other installed themes</a>.' ),
     75                        admin_url( 'themes.php' )
     76                    );
     77                    ?>
     78                </p>
     79                <?php endif; ?>
    6780            </div>
    6881        </div>
     
    7184            <div class="column">
    7285                <h3>
    73                     <?php _e( 'Display Posts with New Blocks and Patterns' ); ?>
    74                 </h3>
    75                 <p>
    76                     <?php _e( 'The Query Loop Block makes it possible to display posts based on specified parameters; like a PHP loop without the code. Easily display posts from a specific category, to do things like create a portfolio or a page full of your favorite recipes. Think of it as a more complex and powerful Latest Posts Block! Plus, pattern suggestions make it easier than ever to create a list of posts with the design you want.' ); ?>
    77                 </p>
    78             </div>
    79             <div class="column about__image is-vertically-aligned-center">
    80                 <img src="https://s.w.org/images/core/5.8/about-query-loop.png" alt="" />
     86                    <?php _e( 'Your personal paintbox awaits' ); ?>
     87                </h3>
     88                <p>
     89                    <?php _e( 'More block themes built for full site editing features are in the Theme Directory alongside the Twenty Twenty&#8209;Two theme, just waiting to be explored. Expect more to come!' ); ?>
     90                </p>
     91                <p>
     92                    <?php _e( 'When you use any of those new themes, you no longer need the Customizer. Instead, you have all the power of the Styles interface inside the Site Editor. Just as in Twenty Twenty&#8209;Two, you build your site&#8217;s look and feel there, with the tools you need for the job in a fluid interface that practically comes alive in your hands.' ); ?>
     93                </p>
     94            </div>
     95            <div class="column about__image is-vertically-aligned-center is-edge-to-edge">
     96                <img src="https://s.w.org/images/core/5.9/global-styles.png" alt="" />
    8197            </div>
    8298        </div>
    8399
    84100        <div class="about__section has-2-columns is-wider-left">
    85             <div class="column about__image is-vertically-aligned-center">
    86                 <img src="https://s.w.org/images/core/5.8/about-template.png" alt="" />
    87             </div>
    88             <div class="column">
    89                 <h3>
    90                     <?php _e( 'Edit the Templates Around Posts' ); ?>
    91                 </h3>
    92                 <p>
    93                     <?php
    94                     _e( 'You can use the familiar block editor to edit templates that hold your content—simply activate a block theme or a theme that has opted in for this feature. Switch from editing your posts to editing your pages and back again, all while using a familiar block editor. There are more than 20 new blocks available within compatible themes. Read more about this feature and how to experiment with it in the release notes.' );
    95                     ?>
     101            <div class="column about__image is-vertically-aligned-center is-edge-to-edge">
     102                <img src="https://s.w.org/images/core/5.9/navigation-block.png" alt="" />
     103            </div>
     104            <div class="column">
     105                <h3>
     106                    <?php _e( 'The Navigation block' ); ?>
     107                </h3>
     108                <p>
     109                    <?php _e( 'Blocks come to site navigation, the heart of user experience.' ); ?>
     110                </p>
     111                <p>
     112                    <?php _e( 'The new Navigation block gives you the power to choose: an always-on responsive menu or one that adapts to your user&#8217;s screen size. Whatever you create, know it&#8217;s there to reuse wherever you like, whether in a brand new template or after switching themes.' ); ?>
    96113                </p>
    97114            </div>
     
    102119        <div class="about__section">
    103120            <h2 class="aligncenter">
    104                 <?php _e( 'Three Workflow Helpers' ); ?>
     121                <?php _e( 'More improvements and updates' ); ?>
    105122            </h2>
    106         </div>
     123            <p class="aligncenter is-subheading">
     124                <?php _e( 'Do you love to blog or produce content? New tweaks to the publishing flow help you say more, faster.' ); ?>
     125            </p>
     126        </div>
     127
     128        <hr />
    107129
    108130        <div class="about__section has-2-columns is-wider-left">
    109             <div class="column about__image is-vertically-aligned-center">
    110                 <img src="https://s.w.org/images/core/5.8/about-list-view.png" alt="" />
    111             </div>
    112             <div class="column">
    113                 <h3>
    114                     <?php _e( 'Overview of the Page Structure' ); ?>
    115                 </h3>
    116                 <p>
    117                     <?php
    118                     _e( 'Sometimes you need a simple landing page, but sometimes you need something a little more robust. As blocks increase, patterns emerge, and content creation gets easier, new solutions are needed to make complex content easy to navigate. List View is the best way to jump between layers of content and nested blocks. Since the List View gives you an overview of all the blocks in your content, you can now navigate quickly to the precise block you need. Ready to focus completely on your content? Toggle it on or off to suit your workflow.' );
    119                     ?>
     131            <div class="column about__image is-vertically-aligned-center is-edge-to-edge">
     132                <img src="https://s.w.org/images/core/5.9/block-controls.png" alt="" />
     133            </div>
     134            <div class="column">
     135                <h3>
     136                    <?php _e( 'Better block controls' ); ?>
     137                </h3>
     138                <p>
     139                    <?php _e( 'WordPress 5.9 features new typography tools, flexible layout controls, and finer control over details like spacing, borders, and more &#8212; to help you get not just the look, but the polish that says you care about details.' ); ?>
    120140                </p>
    121141            </div>
     
    125145            <div class="column">
    126146                <h3>
    127                     <?php _e( 'Suggested Patterns for Blocks' ); ?>
    128                 </h3>
    129                 <p>
    130                     <?php
    131                     _e( 'Starting in this release the Pattern Transformations tool will suggest block patterns based on the block you are using. Right now, you can give it a try in the Query Block and Social Icon Block. As more patterns are added, you will be able to get inspiration for how to style your site without ever leaving the editor!' );
    132                     ?>
    133                 </p>
    134             </div>
    135             <div class="column about__image is-vertically-aligned-center">
    136                 <img src="https://s.w.org/images/core/5.8/about-pattern-suggestions.png" alt="" />
     147                    <?php _e( 'The power of patterns' ); ?>
     148                </h3>
     149                <p>
     150                    <?php _e( 'The WordPress Pattern Directory is the home of a wide range of block patterns built to save you time and add core site functionality. And you can edit them as you see fit. Need something different in the header or footer for your theme? Swap it out with a new one in a few clicks.' ); ?>
     151                </p>
     152                <p>
     153                    <?php _e( 'With a near full-screen view that draws you in to see fine details, the Pattern Explorer makes it easy to compare patterns and choose the one your users will expect.' ); ?>
     154                </p>
     155            </div>
     156            <div class="column about__image is-vertically-aligned-center is-edge-to-edge">
     157                <img src="https://s.w.org/images/core/5.9/pattern-explorer.png" alt="" />
    137158            </div>
    138159        </div>
    139160
    140161        <div class="about__section has-2-columns is-wider-left">
    141             <div class="column about__image is-vertically-aligned-center">
    142                 <img src="https://s.w.org/images/core/5.8/about-duotone.png" alt="" />
    143             </div>
    144             <div class="column">
    145                 <h3>
    146                     <?php _e( 'Style and Colorize Images' ); ?>
    147                 </h3>
    148                 <p>
    149                     <?php
    150                     _e( 'Colorize your image and cover blocks with duotone filters! Duotone can add a pop of color to your designs and style your images (or videos in the cover block) to integrate well with your themes. You can think of the duotone effect as a black and white filter, but instead of the shadows being black and the highlights being white, you pick your own colors for the shadows and highlights. There’s more to learn about how it works in the documentation.' );
    151                     ?>
    152                 </p>
     162            <div class="column about__image is-vertically-aligned-center is-edge-to-edge">
     163                <img src="https://s.w.org/images/core/5.9/list-view.png" alt="" />
     164            </div>
     165            <div class="column">
     166                <h3>
     167                    <?php _e( 'A revamped List View' ); ?>
     168                </h3>
     169                <p>
     170                    <?php _e( 'In 5.9, the List View lets you drag and drop your content exactly where you want it. Managing complex documents is easier, too: simple controls let you expand and collapse sections as you build your site &#8212; and add HTML anchors to your blocks to help users get around the page.' ); ?>
     171                </p>
     172            </div>
     173        </div>
     174
     175        <div class="about__section has-2-columns is-wider-right">
     176            <div class="column">
     177                <h3>
     178                    <?php _e( 'A better Gallery block' ); ?>
     179                </h3>
     180                <p>
     181                    <?php _e( 'Treat every image in a Gallery block the same way you would treat it in the Image block.' ); ?>
     182                </p>
     183                <p>
     184                    <?php _e( 'Style every image in your gallery differently from the next (with different crops, or duotones, for instance) or make them all the same. And change the layout with drag-and-drop.' ); ?>
     185                </p>
     186            </div>
     187            <div class="column about__image is-vertically-aligned-center is-edge-to-edge">
     188                <img src="https://s.w.org/images/core/5.9/gallery-block.png" alt="" />
    153189            </div>
    154190        </div>
     
    158194        <div class="about__section">
    159195            <h2 class="aligncenter" style="margin-bottom:0;">
    160                 <?php _e( 'For Developers to Explore' ); ?>
     196                <?php
     197                printf(
     198                    /* translators: %s: Version number. */
     199                    __( 'WordPress %s for developers' ),
     200                    $display_version
     201                );
     202                ?>
    161203            </h2>
     204        </div>
     205
     206        <div class="about__section has-2-columns">
     207            <div class="column">
     208                <h3>
     209                    <?php _e( 'Introducing block themes' ); ?>
     210                </h3>
     211                <p>
     212                    <?php
     213                    printf(
     214                        /* translators: %s: Block-based themes dev note link. */
     215                        __( 'A new way to build themes: Block themes use blocks to define the templates that structure your entire site. The new templates and template parts are defined in HTML and use the custom styling offered in theme.json. More information is available in the <a href="%s">block themes dev note</a>.' ),
     216                        'https://make.wordpress.org/core/2022/01/04/block-themes-a-new-way-to-build-themes-in-wordpress-5-9/'
     217                    );
     218                    ?>
     219                </p>
     220            </div>
     221            <div class="column">
     222                <h3>
     223                    <?php _e( 'Multiple stylesheets for a block' ); ?>
     224                </h3>
     225                <p>
     226                    <?php
     227                    printf(
     228                        /* translators: %s: Multiple stylesheets dev note link. */
     229                        __( 'Now you can register more than one stylesheet per block. You can use this to share styles across blocks you write, or to load styles for individual blocks, so your styles are only loaded when the block is used. Find out more about <a href="%s">using multiple stylesheets in a block</a>.' ),
     230                        'https://make.wordpress.org/core/2021/12/15/using-multiple-stylesheets-per-block/'
     231                    );
     232                    ?>
     233                </p>
     234            </div>
     235        </div>
     236        <div class="about__section has-2-columns">
     237            <div class="column">
     238                <h3>
     239                    <?php _e( 'Block&#8209;level locking' ); ?>
     240                </h3>
     241                <p>
     242                    <?php _e( 'Now you can lock any block (or a few of them) in a pattern, just by adding a lock attribute to its settings in block.json &#8212; leaving the rest of the pattern free for site editors to adapt to their content.' ); ?>
     243                </p>
     244            </div>
     245            <div class="column">
     246                <h3>
     247                    <?php _e( 'A refactored Gallery block' ); ?>
     248                </h3>
     249                <p>
     250                    <?php
     251                    printf(
     252                        /* translators: %s: Gallery Refactor dev note link. */
     253                        __( 'The changes to the Gallery block listed above are the result of a near-complete refactor. Have you built a plugin or theme on the Gallery block functionality? Be sure to read the <a href="%s">Gallery block compatibility dev note</a>.' ),
     254                        'https://make.wordpress.org/core/2021/08/20/gallery-block-refactor-dev-note/'
     255                    );
     256                    ?>
     257                </p>
     258            </div>
     259        </div>
     260
     261        <hr class="is-large" />
     262
     263        <div class="about__section has-subtle-background-color has-2-columns is-wider-right">
    162264            <div class="column about__image is-vertically-aligned-center">
    163                 <picture>
    164                     <source srcset="https://s.w.org/images/core/5.8/about-theme-json.png, https://s.w.org/images/core/5.8/about-theme-json-2x.png 2x" />
    165                     <img src="https://s.w.org/images/core/5.8/about-theme-json.png" alt="" />
    166                 </picture>
    167             </div>
    168         </div>
    169 
    170         <div class="about__section has-1-column">
    171             <div class="column">
    172                 <h3>
    173                     <?php _e( 'Theme.json' ); ?>
    174                 </h3>
    175                 <p>
    176                     <?php
    177                     printf(
    178                         /* translators: %s: Theme.json dev note link. */
    179                         __( 'Introducing the Global Styles and Global Settings APIs: control the editor settings, available customization tools, and style blocks using a theme.json file in the active theme. This configuration file enables or disables features and sets default styles for both a website and blocks. If you build themes, you can experiment with this early iteration of a useful new feature. For more about what is currently available and how it works, <a href="%s">check out this dev note</a>.' ),
    180                         'https://make.wordpress.org/core/2021/06/25/introducing-theme-json-in-wordpress-5-8/'
    181                     );
    182                     ?>
    183                 </p>
    184             </div>
    185         </div>
    186 
    187         <div class="about__section has-3-columns">
    188             <div class="column">
    189                 <h3>
    190                     <?php _e( 'Dropping support for Internet Explorer 11' ); ?>
    191                 </h3>
    192                 <p>
    193                     <?php
    194                     printf(
    195                         /* translators: %s: Link to Browse Happy. */
    196                         __( 'Support for Internet Explorer 11 has been dropped as of this release. This means you may have issues managing your site that will not be fixed in the future. If you are currently using IE11, it is strongly recommended that you <a href="%s">switch to a more modern browser</a>.' ),
    197                         'https://browsehappy.com/'
    198                     );
    199                     ?>
    200                 </p>
    201             </div>
    202             <div class="column">
    203                 <h3>
    204                     <?php _e( 'Adding support for WebP' ); ?>
    205                 </h3>
    206                 <p>
    207                     <?php
    208                     _e( 'WebP is a modern image format that provides improved lossless and lossy compression for images on the web. WebP images are around 30% smaller on average than their JPEG or PNG equivalents, resulting in sites that are faster and use less bandwidth.' );
    209                     ?>
    210                 </p>
    211             </div>
    212             <div class="column">
    213                 <h3>
    214                     <?php _e( 'Adding Additional Block Supports' ); ?>
    215                 </h3>
    216                 <p>
    217                     <?php
    218                     printf(
    219                         /* translators: %1$s: Link to 5.6's block dev notes. %2$s: Link to 5.7's block dev notes. %3$s: Link to 5.8's block dev notes. */
    220                         __( 'Expanding on previously implemented block supports in WordPress <a href="%1$s">5.6</a> and <a href="%2$s">5.7</a>, WordPress 5.8 introduces several new block support flags and new options to customize your registered blocks. More information is available in the <a href="%3$s">block supports dev note</a>.' ),
    221                         'https://make.wordpress.org/core/2020/11/18/block-supports-in-wordpress-5-6/',
    222                         'https://make.wordpress.org/core/2021/02/24/changes-to-block-editor-components-and-blocks/',
    223                         'https://make.wordpress.org/core/2021/06/25/block-supports-api-updates-for-wordpress-5-8/'
    224                     );
    225                     ?>
    226                 </p>
    227             </div>
    228         </div>
    229 
    230         <hr class="is-small" />
     265                <img src="https://s.w.org/images/core/5.9/learn-video.png" alt="" />
     266            </div>
     267            <div class="column">
     268                <h3><?php _e( 'Learn more about the new features in 5.9' ); ?></h3>
     269                <p>
     270                    <?php
     271                    printf(
     272                        /* translators: %s: Learn WordPress link. */
     273                        __( 'Want to dive into 5.9 but don&#8217;t know where to start? Visit <a href="%s">learn.wordpress.org/workshops</a> for short how-to video tutorials and expanding resources on new features in WordPress 5.9.' ),
     274                        'https://learn.wordpress.org/workshops/'
     275                    );
     276                    ?>
     277                </p>
     278            </div>
     279        </div>
     280
     281        <hr class="is-large" />
    231282
    232283        <div class="about__section">
     
    236287                    <?php
    237288                    printf(
    238                         /* translators: %s: WordPress 5.8 Field Guide link. */
    239                         __( 'Check out the latest version of the WordPress Field Guide. It highlights developer notes for each change you may want to be aware of. <a href="%s">WordPress 5.8 Field Guide.</a>' ),
    240                         'https://make.wordpress.org/core/2021/07/03/wordpress-5-8-field-guide/'
     289                        /* translators: %s: WordPress 5.9 Field Guide link. */
     290                        __( 'Check out the latest version of the WordPress Field Guide. It highlights developer notes for each change you may want to be aware of. <a href="%s">WordPress 5.9 Field Guide.</a>' ),
     291                        'https://make.wordpress.org/core/2022/01/04/wordpress-5-9-field-guide/'
    241292                    );
    242293                    ?>
Note: See TracChangeset for help on using the changeset viewer.