From 5bab5d2994cc7022897b3a6971e63c9df2f51829 Mon Sep 17 00:00:00 2001
From: Kelly Choyce-Dwan <ryelle@git.wordpress.org>
Date: Tue, 2 Mar 2021 20:12:19 +0000
Subject: [PATCH] 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.
Reviewed by SergeyBiryukov.
Merges [50478] to the 5.7 branch.
Fixes #52693. See #52347.



git-svn-id: https://develop.svn.wordpress.org/branches/5.7@50480 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/about.php     | 107 ++++++++++++++++++++++++++++++++-----
 src/wp-admin/css/about.css |  38 +++++++------
 2 files changed, 117 insertions(+), 28 deletions(-)

diff --git a/src/wp-admin/about.php b/src/wp-admin/about.php
index 89867a34bb..b4676bb7da 100644
--- a/src/wp-admin/about.php
+++ b/src/wp-admin/about.php
@@ -9,6 +9,9 @@
 /** WordPress Administration Bootstrap */
 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' );
 
@@ -90,7 +93,8 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
 			</div>
 			<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>
 		</div>
@@ -112,12 +116,12 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
 				</p>
 				<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>
 
@@ -130,14 +134,15 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
 		</div>
 
 		<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>
 
 		<div class="about__section has-2-columns has-subtle-background-color">
@@ -193,14 +198,14 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
 				<h3><?php _e( 'New Robots API' ); ?></h3>
 				<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>
 			</div>
 			<div class="column">
 				<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>
 			</div>
@@ -234,9 +239,87 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
 			<a href="<?php echo esc_url( self_admin_url() ); ?>"><?php is_blog_admin() ? _e( 'Go to Dashboard &rarr; Home' ) : _e( 'Go to Dashboard' ); ?></a>
 		</div>
 	</div>
-<?php
 
-require_once ABSPATH . 'wp-admin/admin-footer.php';
+<?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
 
 // These are strings we may use to describe maintenance/security releases, where we aim for no new strings.
 return;
diff --git a/src/wp-admin/css/about.css b/src/wp-admin/css/about.css
index 018042a9f3..d77b6d7385 100644
--- a/src/wp-admin/css/about.css
+++ b/src/wp-admin/css/about.css
@@ -112,6 +112,11 @@
 	color: var(--text-light);
 }
 
+.about__container .has-accent-background-color a {
+	color: #fff;
+	color: var(--text-light);
+}
+
 .about__container .has-transparent-background-color {
 	background-color: transparent;
 }
@@ -551,6 +556,11 @@
 	height: auto;
 }
 
+.about__container .about__image figcaption {
+	margin-top: 0.5em;
+	text-align: center;
+}
+
 .about__container .about__image .wp-video {
 	margin-left: auto;
 	margin-right: auto;
@@ -559,7 +569,6 @@
 .about__container .about__image-comparison {
 	position: relative;
 	display: inline-block;
-	line-height: 0;
 	max-width: 100%;
 }
 
@@ -575,29 +584,26 @@
 }
 
 .about__container .about__image-comparison-resize {
-	position: absolute;
+	position: absolute !important; /* Needed to override inline style on ResizableBox */
 	top: 0;
 	bottom: 0;
 	left: 0;
 	width: 50%;
 	max-width: 100%;
-	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;
+.about__container .about__image-comparison.no-js .about__image-comparison-resize {
 	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;
 }
 
 .about__container .about__image + h3 {