Changeset 50478

Timestamp:

03/02/2021 07:48:41 PM (4 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:

• about.php (modified) (7 diffs)
• css/about.css (modified) (5 diffs)

trunk/src/wp-admin/about.php

@@ -10 +10 @@
 require_once __DIR__ . '/admin.php';
 
+wp_enqueue_script( 'wp-components' );
+wp_enqueue_style( 'wp-components' );
+
 /* translators: Page title of the About WordPress page in the admin. */
 $title = _x( 'About', 'page title' );
@@ -91 +94 @@
             <div class="column about__image">
                 <video controls>
-                    <source src="https://make.wordpress.org/core/files/2021/02/about-57-drag-drop-image.mp4" type="video/mp4" />
+                    <source src="https://s.w.org/images/core/5.7/about-57-drag-drop-image.mp4" type="video/mp4" />
+                    <source src="https://s.w.org/images/core/5.7/about-57-drag-drop-image.mp4" type="video/webm" />
                 </video>
             </div>
@@ -113 +117 @@
                 <p>
                     <?php
-                    _e( '<strong>Social Icons block:</strong> you can now change the size of the icons in the Social Icons block.' );
+                    _e( '<strong>Social Icons block:</strong> now you can change the size of the icons.' );
                     ?>
                 </p>
             </div>
             <div class="column about__image">
-                <img src="https://make.wordpress.org/core/files/2021/02/about-57-cover-1.jpg" alt="" />
+                <img src="https://s.w.org/images/core/5.7/about-57-cover.jpg" alt="" />
             </div>
         </div>
@@ -131 +135 @@
 
         <div class="about__section has-subtle-background-color">
-            <div class="column about__image">
-                <div class="about__image-comparison">
+            <figure class="column about__image" id="about-image-comparison">
+                <div class="about__image-comparison no-js">
+                    <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.' ); ?>" />
                     <div class="about__image-comparison-resize">
-                        <img src="https://make.wordpress.org/core/files/2021/02/about-57-color-new.png" />
+                        <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.' ); ?>" />
                     </div>
-                    <img src="https://make.wordpress.org/core/files/2021/02/about-57-color-old.png" />
                 </div>
-            </div>
+                <figcaption><?php _e( 'Above, the Dashboard before and after the color update in 5.7.' ); ?></figcaption>
+            </figure>
         </div>
 
@@ -194 +199 @@
                 <p>
                     <?php
-                    _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.' )
+                    _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>).' );
                     ?>
                 </p>
@@ -201 +206 @@
                 <h3><?php _e( 'Ongoing cleanup after update to jQuery 3.5.1' ); ?></h3>
                 <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>
-                <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>
+                <p><?php _e( 'In 5.7, jQuery gets more focused and less intrusive, with fewer messages in the console.' ); ?></p>
                 <h3><?php _e( 'Lazy-load your iframes' ); ?></h3>
                 <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>
@@ -235 +240 @@
         </div>
     </div>
+
+<?php require_once ABSPATH . 'wp-admin/admin-footer.php'; ?>
+
+<script>
+    wp.domReady( function() {
+        var createElement = wp.element.createElement;
+        var Fragment = wp.element.Fragment;
+        var render = wp.element.render;
+        var useState = wp.element.useState;
+        var ResizableBox = wp.components.ResizableBox;
+
+        var container = document.getElementById( 'about-image-comparison' );
+        var images = container ? container.querySelectorAll( 'img' ) : [];
+        if ( ! images.length ) {
+            // Something's wrong, return early.
+            return;
+        }
+
+        var beforeImage = images.item( 0 );
+        var afterImage = images.item( 1 );
+        var caption = container.querySelector( 'figcaption' ).innerText;
+
+        function ImageComparison( props ) {
+            var stateHelper = useState( props.width );
+            var width = stateHelper[0];
+            var setWidth = stateHelper[1];
+
+            return createElement(
+                'div',
+                {
+                    className: 'about__image-comparison'
+                },
+                createElement( 'img', { src: beforeImage.src, alt: beforeImage.alt } ),
+                createElement(
+                    ResizableBox,
+                    {
+                        size: {
+                            width: width,
+                            height: props.height
+                        },
+                        onResizeStop: function( event, direction, elt, delta ) {
+                            setWidth( parseInt( width + delta.width, 10 ) );
+                        },
+                        showHandle: true,
+                        enable: {
+                            top: false,
+                            right: ! wp.i18n.isRTL(),
+                            bottom: false,
+                            left: wp.i18n.isRTL(),
+                        },
+                        className: 'about__image-comparison-resize'
+                    },
+                    createElement(
+                        'div',
+                        {
+                            style: { width: '100%', height: '100%', overflow: 'hidden' }
+                        },
+                        createElement('img', { src: afterImage.src, alt: afterImage.alt } )
+                    )
+                )
+            );
+        }
+
+        render(
+            createElement(
+                Fragment,
+                {},
+                createElement(
+                    ImageComparison,
+                    {
+                        width: beforeImage.clientWidth / 2,
+                        height: beforeImage.clientHeight
+                    }
+                ),
+                createElement( 'figcaption', {}, caption )
+            ),
+            container
+        );
+    } );
+</script>
 <?php
-
-require_once ABSPATH . 'wp-admin/admin-footer.php';
 
 // 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

@@ -113 +113 @@
 }
 
+.about__container .has-accent-background-color a {
+    color: #fff;
+    color: var(--text-light);
+}
+
 .about__container .has-transparent-background-color {
     background-color: transparent;
@@ -552 +557 @@
 }
 
+.about__container .about__image figcaption {
+    margin-top: 0.5em;
+    text-align: center;
+}
+
 .about__container .about__image .wp-video {
     margin-left: auto;
@@ -560 +570 @@
     position: relative;
     display: inline-block;
-    line-height: 0;
     max-width: 100%;
 }
@@ -576 +585 @@
 
 .about__container .about__image-comparison-resize {
-    position: absolute;
+    position: absolute !important; /* Needed to override inline style on ResizableBox */
     top: 0;
     bottom: 0;
@@ -582 +591 @@
     width: 50%;
     max-width: 100%;
+}
+
+.about__container .about__image-comparison.no-js .about__image-comparison-resize {
     overflow: hidden;
-    resize: horizontal;
-    border-right: 2px solid white;
-}
-
-.about__container .about__image-comparison-resize:after {
-    content: "";
-    display: block;
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    width: 20px;
-    height: 20px;
-    font-family: dashicons;
-    font-size: 20px;
-    line-height: 1;
-    overflow: hidden;
+    border-right: 2px solid #007cba;
+    border-right: 2px solid var(--wp-admin-theme-color);
+}
+
+.about__container .about__image-comparison-resize .components-resizable-box__side-handle::before {
+    width: 4px;
+    right: calc(50% - 2px);
+    transition: none;
+    animation: none;
+    opacity: 1;
 }