WordPress.org
Get WordPress

Make WordPress Core


Ignore:
Timestamp:
06/29/2021 07:06:01 PM (4 years ago)
Author:
ryelle
Message:

Help/About: WordPress 5.8 About Page.

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

Props chanthaboune, cbringmann, webcommsat, marybaum, melchoyce, shaunandrews, desrosj, ryelle, oglekler, yvettesonneveld, nalininonstopnewsuk, meher, femkreations, alanjacobmathew, courane01, annezazu, matveb, milana_cap, javiarce, ryokuhi, audrasjb.
See #52775.

File:
1 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-admin/about.php

    r51177 r51264  
    2323
    2424        <div class="about__header">
    25             <div class="about__header-image">
    26                 <img alt="<?php _e( 'Code is Poetry' ); ?>" src="<?php echo esc_url( admin_url( 'images/about-badge.svg' ) ); ?>" />
    27             </div>
    28 
    2925            <div class="about__header-title">
    30                 <p>
     26                <h1>
    3127                    <?php _e( 'WordPress' ); ?>
    3228                    <?php echo $display_version; ?>
    33                 </p>
     29                </h1>
    3430            </div>
    3531
    3632            <div class="about__header-text">
    37                 <?php _e( 'Jazz up your stories in an editor that’s cleaner, crisper, and does more to get out of your way.' ); ?>
     33                <?php _e( 'The next stop on the road to full site editing' ); ?>
    3834            </div>
    3935
    … …  
    4642        </div>
    4743
    48         <div class="about__section is-feature has-subtle-background-color">
    49             <div class="column">
    50                 <h1 class="is-smaller-heading">
    51                     <?php
    52                     printf(
    53                         /* translators: %s: The current WordPress version number. */
    54                         __( 'Step into WordPress %s.' ),
    55                         $display_version
    56                     );
    57                     ?>
    58                 </h1>
    59                 <p>
    60                     <?php
    61                     _e( 'With this new version, WordPress brings you fresh colors. The editor helps you work in a few places you couldn’t before—at least, not without getting into code or hiring a pro. The controls you use most, like changing font sizes, are in more places—right where you need them. And layout changes that should be simple, like full-height images, are even simpler to make.' );
     44        <hr />
     45
     46        <div class="about__section">
     47            <h2 class="aligncenter has-accent-color">
     48                <?php _e( 'Three Essential Powerhouses' ); ?>
     49            </h2>
     50        </div>
     51
     52        <div class="about__section has-2-columns is-wider-left">
     53            <div class="column about__image has-subtle-background-color"></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                        '#'
     64                    );
     65                    ?>
     66                </p>
     67            </div>
     68        </div>
     69
     70        <hr />
     71
     72        <div class="about__section has-2-columns is-wider-right">
     73            <div class="column">
     74                <h3>
     75                    <?php _e( 'Display Posts with New Blocks and Patterns' ); ?>
     76                </h3>
     77                <p>
     78                    <?php
     79                    printf(
     80                        /* translators: %s: Query Loop dev note link. */
     81                        __( '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. For our theme authors, learn more about experimenting with this awesome tool in the <a href="%s">Query Loop Block dev note</a>.' ),
     82                        '#'
     83                    );
     84                    ?>
     85                </p>
     86            </div>
     87            <div class="column about__image has-subtle-background-color"></div>
     88        </div>
     89
     90        <hr />
     91
     92        <div class="about__section has-2-columns is-wider-left">
     93            <div class="column about__image has-subtle-background-color"></div>
     94            <div class="column">
     95                <h3>
     96                    <?php _e( 'Edit the Templates Around Posts' ); ?>
     97                </h3>
     98                <p>
     99                    <?php
     100                    _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.' );
    62101                    ?>
    63102                </p>
    … …  
    67106        <hr class="is-large" />
    68107
    69         <div class="about__section has-2-columns">
    70             <h2 class="is-section-header is-smaller-heading">
    71                 <?php _e( 'Now the editor is easier to use' ); ?>
     108        <div class="about__section">
     109            <h2 class="aligncenter has-accent-color">
     110                <?php _e( 'Three Workflow Helpers' ); ?>
    72111            </h2>
    73             <div class="column">
    74                 <p>
    75                     <?php
    76                     _e( '<strong>Font-size adjustment in more places:</strong> now, font-size controls are right where you need them in the List and Code blocks. No more trekking to another screen to make that single change!' );
    77                     ?>
    78                 </p>
    79                 <p>
    80                     <?php
    81                     _e( '<strong>Reusable blocks:</strong> several enhancements make reusable blocks more stable and easier to use. And now they save automatically with the post when you click the Update button.' );
    82                     ?>
    83                 </p>
    84                 <p>
    85                     <?php
    86                     _e( '<strong>Inserter drag-and-drop:</strong> drag blocks and block patterns from the inserter right into your post.' );
    87                     ?>
    88                 </p>
    89             </div>
    90             <div class="column about__image">
    91                 <video controls>
    92                     <source src="https://s.w.org/images/core/5.7/about-57-drag-drop-image.mp4" type="video/mp4" />
    93                     <source src="https://s.w.org/images/core/5.7/about-57-drag-drop-image.webm" type="video/webm" />
    94                 </video>
    95             </div>
    96         </div>
    97 
    98         <div class="about__section has-2-columns">
    99             <h2 class="is-section-header is-smaller-heading">
    100                 <?php _e( 'You can do more without writing custom code' ); ?>
     112        </div>
     113
     114        <div class="about__section has-2-columns is-wider-left">
     115            <div class="column about__image has-subtle-background-color"></div>
     116            <div class="column">
     117                <h3>
     118                    <?php _e( 'Overview of the Page Structure' ); ?>
     119                </h3>
     120                <p>
     121                    <?php
     122                    _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.' );
     123                    ?>
     124                </p>
     125            </div>
     126        </div>
     127
     128        <hr />
     129
     130        <div class="about__section has-2-columns is-wider-right">
     131            <div class="column">
     132                <h3>
     133                    <?php _e( 'Suggested Patterns for Blocks' ); ?>
     134                </h3>
     135                <p>
     136                    <?php
     137                    _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!' );
     138                    ?>
     139                </p>
     140            </div>
     141            <div class="column about__image has-subtle-background-color"></div>
     142        </div>
     143
     144        <hr />
     145
     146        <div class="about__section has-2-columns is-wider-left">
     147            <div class="column about__image has-subtle-background-color"></div>
     148            <div class="column">
     149                <h3>
     150                    <?php _e( 'Style and Colorize Images' ); ?>
     151                </h3>
     152                <p>
     153                    <?php
     154                    _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.' );
     155                    ?>
     156                </p>
     157            </div>
     158        </div>
     159
     160        <hr class="is-large" />
     161
     162        <div class="about__section">
     163            <h2 class="aligncenter has-accent-color">
     164                <?php _e( 'For Developers to Explore' ); ?>
    101165            </h2>
    102             <div class="column">
    103                 <p>
    104                     <?php
    105                     _e( '<strong>Full-height alignment:</strong> have you ever wanted to make a block, like the Cover block, fill the whole window? Now you can.' );
    106                     ?>
    107                 </p>
    108                 <p>
    109                     <?php
    110                     _e( '<strong>Buttons block:</strong> now you can choose a vertical or a horizontal layout. And you can set the width of a button to a preset percentage.' );
    111                     ?>
    112                 </p>
    113                 <p>
    114                     <?php
    115                     _e( '<strong>Social Icons block:</strong> now you can change the size of the icons.' );
    116                     ?>
    117                 </p>
    118             </div>
    119             <div class="column about__image">
    120                 <img src="https://s.w.org/images/core/5.7/about-57-cover.jpg" alt="" />
    121             </div>
    122         </div>
    123 
    124         <hr />
    125 
    126         <div class="about__section has-subtle-background-color">
    127             <div class="column">
    128                 <h2 class="is-smaller-heading"><?php _e( 'A Simpler Default Color Palette' ); ?></h2>
    129             </div>
    130         </div>
    131 
    132         <div class="about__section has-subtle-background-color">
    133             <figure class="column about__image" id="about-image-comparison">
    134                 <div class="about__image-comparison no-js">
    135                     <img src="https://s.w.org/images/core/5.7/about-57-color-old.png" alt="<?php esc_attr_e( 'Dashboard with old color scheme.' ); ?>" />
    136                     <div class="about__image-comparison-resize">
    137                         <img src="https://s.w.org/images/core/5.7/about-57-color-new.png" alt="<?php esc_attr_e( 'Dashboard with new color scheme.' ); ?>" />
    138                     </div>
    139                 </div>
    140                 <figcaption><?php _e( 'Above, the Dashboard before and after the color update in 5.7.' ); ?></figcaption>
    141             </figure>
    142         </div>
    143 
    144         <div class="about__section has-2-columns has-subtle-background-color">
    145             <div class="column">
    146                 <p>
    147                     <?php
    148                     printf(
    149                         /* translators: %s: WCAG information link. */
    150                         __( 'This new streamlined color palette collapses all the colors that used to be in the WordPress source code down to seven core colors and a range of 56 shades that meet the <a href="%s">WCAG 2.0 AA recommended contrast ratio</a> against white or black.' ),
    151                         'https://www.w3.org/WAI/WCAG2AAA-Conformance'
    152                     );
    153                     ?>
    154                 </p>
    155                 <p>
    156                     <?php
    157                     _e( 'The colors are perceptually uniform from light to dark in each range, which means they start at white and get darker by the same amount with each step.' );
    158                     ?>
    159                 </p>
    160             </div>
    161             <div class="column">
    162                 <p>
    163                     <?php
    164                     _e( 'Half the range has a 4.5 or higher contrast ratio against black, and the other half maintains the same contrast against white.' );
    165                     ?>
    166                 </p>
    167                 <p>
    168                     <?php
    169                     printf(
    170                         /* translators: %s: Color palette dev note link. */
    171                         __( 'Find the new palette in the default WordPress Dashboard color scheme, and use it when you’re building themes, plugins, or any other components. For all the details, <a href="%s">check out the Color Palette dev note</a>.' ),
    172                         'https://make.wordpress.org/core/2021/02/23/standardization-of-wp-admin-colors-in-wordpress-5-7'
    173                     );
    174                     ?>
    175                 </p>
    176             </div>
    177         </div>
    178 
    179         <div class="about__section has-subtle-background-color">
    180             <div class="column about__image">
    181                 <picture>
    182                     <source media="(max-width: 600px)" srcset="<?php echo esc_url( admin_url( 'images/about-color-palette-vert.svg' ) ); ?>" />
    183                     <img alt="" src="<?php echo esc_url( admin_url( 'images/about-color-palette.svg' ) ); ?>" />
    184                 </picture>
    185             </div>
    186         </div>
    187 
    188         <hr />
    189 
    190         <div class="about__section has-2-columns">
    191             <div class="column">
    192                 <h3><?php _e( 'From HTTP to HTTPS in a single click' ); ?></h3>
    193                 <p><?php _e( 'Starting now, switching a site from HTTP to HTTPS is a one-click move. WordPress will automatically update database URLs when you make the switch. No more hunting and guessing!' ); ?></p>
    194                 <h3><?php _e( 'New Robots API' ); ?></h3>
    195                 <p>
    196                     <?php
    197                     _e( 'The new Robots API lets you include the filter directives in the robots meta tag, and the API includes the <code>max-image-preview: large</code> directive by default. That means search engines can show bigger image previews, which can boost your traffic (unless the site is marked <em>not-public</em>).' );
    198                     ?>
    199                 </p>
    200             </div>
    201             <div class="column">
    202                 <h3><?php _e( 'Ongoing cleanup after update to jQuery 3.5.1' ); ?></h3>
    203                 <p><?php _e( 'For years jQuery helped make things move on the screen in ways the basic tools couldn’t—but that keeps changing, and so does jQuery.' ); ?></p>
    204                 <p><?php _e( 'In 5.7, jQuery gets more focused and less intrusive, with fewer messages in the console.' ); ?></p>
    205                 <h3><?php _e( 'Lazy-load your iframes' ); ?></h3>
    206                 <p><?php _e( 'Now it’s simple to let iframes lazy-load. By default, WordPress will add a <code>loading="lazy"</code> attribute to iframe tags when both width and height are specified.' ); ?></p>
     166            <div class="column about__image has-subtle-background-color" style="margin:32px 0;height:360px;"></div>
     167        </div>
     168
     169        <div class="about__section has-1-column">
     170            <div class="column">
     171                <h3>
     172                    <?php _e( 'Theme.json' ); ?>
     173                </h3>
     174                <p>
     175                    <?php
     176                    _e( '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, check out this dev note.' );
     177                    ?>
     178                </p>
     179            </div>
     180        </div>
     181
     182        <hr />
     183
     184        <div class="about__section has-3-columns">
     185            <div class="column">
     186                <h3>
     187                    <?php _e( 'Dropping support for Internet Explorer 11' ); ?>
     188                </h3>
     189                <p>
     190                    <?php
     191                    printf(
     192                        /* translators: %s: Link to Browse Happy. */
     193                        __( '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>.' ),
     194                        'https://browsehappy.com/'
     195                    );
     196                    ?>
     197                </p>
     198            </div>
     199            <div class="column">
     200                <h3>
     201                    <?php _e( 'Adding support for WebP' ); ?>
     202                </h3>
     203                <p>
     204                    <?php
     205                    _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.' );
     206                    ?>
     207                </p>
     208            </div>
     209            <div class="column">
     210                <h3>
     211                    <?php _e( 'Adding Additional Block Supports' ); ?>
     212                </h3>
     213                <p>
     214                    <?php
     215                    printf(
     216                        /* translators: %1$s: Link to 5.6's block dev notes. %2$s: Link to 5.7's block dev notes. %1$s: Link to 5.8's block dev notes. */
     217                        __( '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 <code>supports</code> flags and new options to customize your registered blocks. More information is available in the <a href="%3$s">block supports dev note</a>.' ),
     218                        'https://make.wordpress.org/core/2020/11/18/block-supports-in-wordpress-5-6/',
     219                        'https://make.wordpress.org/core/2021/02/24/changes-to-block-editor-components-and-blocks/',
     220                        'https://make.wordpress.org/core/2021/06/25/block-supports-api-updates-for-wordpress-5-8/'
     221                    );
     222                    ?>
     223                </p>
    207224            </div>
    208225        </div>
    … …  
    216233                    <?php
    217234                    printf(
    218                         /* translators: %s: WordPress 5.7 Field Guide link. */
    219                         __( 'Check out the latest version of the WordPress Field Guide. It highlights developer notes for each change you may want to be aware of. <a href="%s">WordPress 5.7 Field Guide.</a>' ),
    220                         'https://make.wordpress.org/core/2021/02/23/wordpress-5-7-field-guide'
     235                        /* translators: %s: WordPress 5.8 Field Guide link. */
     236                        __( '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>' ),
     237                        '#'
    221238                    );
    222239                    ?>
    … …  
    239256<?php require_once ABSPATH . 'wp-admin/admin-footer.php'; ?>
    240257
    241 <script>
    242     window.addEventListener( 'load', function() {
    243         var createElement = wp.element.createElement;
    244         var Fragment = wp.element.Fragment;
    245         var render = wp.element.render;
    246         var useState = wp.element.useState;
    247         var ResizableBox = wp.components.ResizableBox;
    248 
    249         var container = document.getElementById( 'about-image-comparison' );
    250         var images = container ? container.querySelectorAll( 'img' ) : [];
    251         if ( ! images.length ) {
    252             // Something's wrong, return early.
    253             return;
    254         }
    255 
    256         var beforeImage = images.item( 0 );
    257         var afterImage = images.item( 1 );
    258         var caption = container.querySelector( 'figcaption' ).innerText;
    259 
    260         function ImageComparison( props ) {
    261             var stateHelper = useState( props.width );
    262             var width = stateHelper[0];
    263             var setWidth = stateHelper[1];
    264 
    265             return createElement(
    266                 'div',
    267                 {
    268                     className: 'about__image-comparison'
    269                 },
    270                 createElement( 'img', { src: beforeImage.src, alt: beforeImage.alt } ),
    271                 createElement(
    272                     ResizableBox,
    273                     {
    274                         size: {
    275                             width: width,
    276                             height: props.height
    277                         },
    278                         onResizeStop: function( event, direction, elt, delta ) {
    279                             setWidth( parseInt( width + delta.width, 10 ) );
    280                         },
    281                         showHandle: true,
    282                         enable: {
    283                             top: false,
    284                             right: ! wp.i18n.isRTL(),
    285                             bottom: false,
    286                             left: wp.i18n.isRTL(),
    287                         },
    288                         className: 'about__image-comparison-resize'
    289                     },
    290                     createElement(
    291                         'div',
    292                         {
    293                             style: { width: '100%', height: '100%', overflow: 'hidden' }
    294                         },
    295                         createElement('img', { src: afterImage.src, alt: afterImage.alt } )
    296                     )
    297                 )
    298             );
    299         }
    300 
    301         render(
    302             createElement(
    303                 Fragment,
    304                 {},
    305                 createElement(
    306                     ImageComparison,
    307                     {
    308                         width: beforeImage.clientWidth / 2,
    309                         height: beforeImage.clientHeight
    310                     }
    311                 ),
    312                 createElement( 'figcaption', {}, caption )
    313             ),
    314             container
    315         );
    316     } );
    317 </script>
    318258<?php
    319259
Note: See TracChangeset for help on using the changeset viewer.