Make WordPress Core

Changeset 50478 for trunk


Ignore:
Timestamp:
03/02/2021 07:48:41 PM (3 years ago)
Author:
ryelle
Message:

Help/About: Iterate on the 5.7 About Page.

Adds a more obviously interactive comparison for viewing the color scheme differences. Improvements on RTL and IE11. Update strings to be more clear and consistent. Switch to the CDN for loading images.

Props sarahricker, desrosj, melchoyce, SergeyBiryukov, tikifez, clorith, marybaum, audrasjb, francina, hellofromTonya.
Fixes #52693. See #52347.

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

Legend:

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

    r50430 r50478  
    1010require_once __DIR__ . '/admin.php';
    1111
     12wp_enqueue_script( 'wp-components' );
     13wp_enqueue_style( 'wp-components' );
     14
    1215/* translators: Page title of the About WordPress page in the admin. */
    1316$title = _x( 'About', 'page title' );
     
    9194            <div class="column about__image">
    9295                <video controls>
    93                     <source src="https://make.wordpress.org/core/files/2021/02/about-57-drag-drop-image.mp4" type="video/mp4" />
     96                    <source src="https://s.w.org/images/core/5.7/about-57-drag-drop-image.mp4" type="video/mp4" />
     97                    <source src="https://s.w.org/images/core/5.7/about-57-drag-drop-image.mp4" type="video/webm" />
    9498                </video>
    9599            </div>
     
    113117                <p>
    114118                    <?php
    115                     _e( '<strong>Social Icons block:</strong> you can now change the size of the icons in the Social Icons block.' );
     119                    _e( '<strong>Social Icons block:</strong> now you can change the size of the icons.' );
    116120                    ?>
    117121                </p>
    118122            </div>
    119123            <div class="column about__image">
    120                 <img src="https://make.wordpress.org/core/files/2021/02/about-57-cover-1.jpg" alt="" />
     124                <img src="https://s.w.org/images/core/5.7/about-57-cover.jpg" alt="" />
    121125            </div>
    122126        </div>
     
    131135
    132136        <div class="about__section has-subtle-background-color">
    133             <div class="column about__image">
    134                 <div class="about__image-comparison">
     137            <figure class="column about__image" id="about-image-comparison">
     138                <div class="about__image-comparison no-js">
     139                    <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.' ); ?>" />
    135140                    <div class="about__image-comparison-resize">
    136                         <img src="https://make.wordpress.org/core/files/2021/02/about-57-color-new.png" />
     141                        <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.' ); ?>" />
    137142                    </div>
    138                     <img src="https://make.wordpress.org/core/files/2021/02/about-57-color-old.png" />
    139143                </div>
    140             </div>
     144                <figcaption><?php _e( 'Above, the Dashboard before and after the color update in 5.7.' ); ?></figcaption>
     145            </figure>
    141146        </div>
    142147
     
    194199                <p>
    195200                    <?php
    196                     _e( 'The new Robots API lets you include the filter directives in the robots meta tag, and the API includes the directive <code>max-image-preview: large</code> by default. That means search engines can show bigger image previews (unless the blog is marked as not public), which can boost your traffic.' )
     201                    _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>).' );
    197202                    ?>
    198203                </p>
     
    201206                <h3><?php _e( 'Ongoing cleanup after update to jQuery 3.5.1' ); ?></h3>
    202207                <p><?php _e( 'For years jQuery helped make things move on the screen in ways the basic tools couldn’t—but that keeps changing, and so does jQuery.' ); ?></p>
    203                 <p><?php _e( 'One side effect: it generated a set of cryptic messages on the dashboard that informed only developers. In 5.7, you will get far fewer of those messages, and they will be in plain language.' ); ?></p>
     208                <p><?php _e( 'In 5.7, jQuery gets more focused and less intrusive, with fewer messages in the console.' ); ?></p>
    204209                <h3><?php _e( 'Lazy-load your iframes' ); ?></h3>
    205210                <p><?php _e( 'Now it’s simple to let iframes lazy-load. Just add the <code>loading="lazy"</code> attribute to iframe tags on the front end.' ); ?></p>
     
    235240        </div>
    236241    </div>
     242
     243<?php require_once ABSPATH . 'wp-admin/admin-footer.php'; ?>
     244
     245<script>
     246    wp.domReady( function() {
     247        var createElement = wp.element.createElement;
     248        var Fragment = wp.element.Fragment;
     249        var render = wp.element.render;
     250        var useState = wp.element.useState;
     251        var ResizableBox = wp.components.ResizableBox;
     252
     253        var container = document.getElementById( 'about-image-comparison' );
     254        var images = container ? container.querySelectorAll( 'img' ) : [];
     255        if ( ! images.length ) {
     256            // Something's wrong, return early.
     257            return;
     258        }
     259
     260        var beforeImage = images.item( 0 );
     261        var afterImage = images.item( 1 );
     262        var caption = container.querySelector( 'figcaption' ).innerText;
     263
     264        function ImageComparison( props ) {
     265            var stateHelper = useState( props.width );
     266            var width = stateHelper[0];
     267            var setWidth = stateHelper[1];
     268
     269            return createElement(
     270                'div',
     271                {
     272                    className: 'about__image-comparison'
     273                },
     274                createElement( 'img', { src: beforeImage.src, alt: beforeImage.alt } ),
     275                createElement(
     276                    ResizableBox,
     277                    {
     278                        size: {
     279                            width: width,
     280                            height: props.height
     281                        },
     282                        onResizeStop: function( event, direction, elt, delta ) {
     283                            setWidth( parseInt( width + delta.width, 10 ) );
     284                        },
     285                        showHandle: true,
     286                        enable: {
     287                            top: false,
     288                            right: ! wp.i18n.isRTL(),
     289                            bottom: false,
     290                            left: wp.i18n.isRTL(),
     291                        },
     292                        className: 'about__image-comparison-resize'
     293                    },
     294                    createElement(
     295                        'div',
     296                        {
     297                            style: { width: '100%', height: '100%', overflow: 'hidden' }
     298                        },
     299                        createElement('img', { src: afterImage.src, alt: afterImage.alt } )
     300                    )
     301                )
     302            );
     303        }
     304
     305        render(
     306            createElement(
     307                Fragment,
     308                {},
     309                createElement(
     310                    ImageComparison,
     311                    {
     312                        width: beforeImage.clientWidth / 2,
     313                        height: beforeImage.clientHeight
     314                    }
     315                ),
     316                createElement( 'figcaption', {}, caption )
     317            ),
     318            container
     319        );
     320    } );
     321</script>
    237322<?php
    238 
    239 require_once ABSPATH . 'wp-admin/admin-footer.php';
    240323
    241324// These are strings we may use to describe maintenance/security releases, where we aim for no new strings.
  • trunk/src/wp-admin/css/about.css

    r50418 r50478  
    113113}
    114114
     115.about__container .has-accent-background-color a {
     116    color: #fff;
     117    color: var(--text-light);
     118}
     119
    115120.about__container .has-transparent-background-color {
    116121    background-color: transparent;
     
    552557}
    553558
     559.about__container .about__image figcaption {
     560    margin-top: 0.5em;
     561    text-align: center;
     562}
     563
    554564.about__container .about__image .wp-video {
    555565    margin-left: auto;
     
    560570    position: relative;
    561571    display: inline-block;
    562     line-height: 0;
    563572    max-width: 100%;
    564573}
     
    576585
    577586.about__container .about__image-comparison-resize {
    578     position: absolute;
     587    position: absolute !important; /* Needed to override inline style on ResizableBox */
    579588    top: 0;
    580589    bottom: 0;
     
    582591    width: 50%;
    583592    max-width: 100%;
     593}
     594
     595.about__container .about__image-comparison.no-js .about__image-comparison-resize {
    584596    overflow: hidden;
    585     resize: horizontal;
    586     border-right: 2px solid white;
    587 }
    588 
    589 .about__container .about__image-comparison-resize:after {
    590     content: "";
    591     display: block;
    592     position: absolute;
    593     right: 0;
    594     bottom: 0;
    595     width: 20px;
    596     height: 20px;
    597     font-family: dashicons;
    598     font-size: 20px;
    599     line-height: 1;
    600     overflow: hidden;
     597    border-right: 2px solid #007cba;
     598    border-right: 2px solid var(--wp-admin-theme-color);
     599}
     600
     601.about__container .about__image-comparison-resize .components-resizable-box__side-handle::before {
     602    width: 4px;
     603    right: calc(50% - 2px);
     604    transition: none;
     605    animation: none;
     606    opacity: 1;
    601607}
    602608
Note: See TracChangeset for help on using the changeset viewer.