From 56b096195a27fcaadce1ce4ab3c2619f5eceb170 Mon Sep 17 00:00:00 2001
From: Jonathan Desrosiers <desrosj@git.wordpress.org>
Date: Tue, 11 Aug 2020 16:51:22 +0000
Subject: [PATCH] Help/About: Final adjustments to the 5.5 About page.

- Final CDN asset URLs.
- Some minor color adjustments.

Props ryelle, marybaum, davidbaumwald, audrasjb, estelaris, afercia, cbringmann, andreamiddleton, desrosj, SergeyBiryukov, ocean90, nrqsnchz, spacedmonkey, whyisjake, man4toman.
Fixes #50416.

git-svn-id: https://develop.svn.wordpress.org/trunk@48783 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/about.php     | 13 +++++++------
 src/wp-admin/css/about.css |  6 +++---
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/wp-admin/about.php b/src/wp-admin/about.php
index 9b5ff53d12..6a967050f8 100644
--- a/src/wp-admin/about.php
+++ b/src/wp-admin/about.php
@@ -114,18 +114,19 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
 		<div class="about__section has-2-columns has-subtle-background-color">
 			<div class="column about__image is-vertically-aligned-center">
 				<figure aria-labelledby="about-block-pattern" class="about__image">
-					<video controls poster="https://s.w.org/images/core/5.5/temp-block-patterns-poster.png">
-						<source src="https://s.w.org/images/core/5.5/temp-block-patterns.mp4" type="video/mp4" />
-						<source src="https://s.w.org/images/core/5.5/temp-block-patterns.webm" type="video/webm" />
+					<video controls poster="https://s.w.org/images/core/5.5/block-patterns-poster.png">
+						<source src="https://s.w.org/images/core/5.5/block-patterns.mp4" type="video/mp4" />
+						<source src="https://s.w.org/images/core/5.5/block-patterns.webm" type="video/webm" />
 					</video>
 					<figcaption id="about-block-pattern" class="screen-reader-text"><?php _e( 'Video: In the editor, the block inserter shows two tabs, Blocks and Patterns. The Patterns tab is selected. There are different block layouts in this tab. After scrolling through options including buttons and columns, a pattern called "Large header with a heading" is chosen. This adds a cover block, which is customized with a photo and the name of the WordPress 5.5 jazz musician.' ); ?></figcaption>
 				</figure>
 				<hr />
 				<figure aria-labelledby="about-image-editor" class="about__image">
-					<video controls poster="https://make.wordpress.org/core/files/2020/07/image-editor-poster.png">
-						<source src="https://make.wordpress.org/core/files/2020/07/image-editor.mp4" type="video/mp4" />
+					<video controls poster="https://s.w.org/images/core/5.5/inline-image-editing-poster.png">
+						<source src="https://s.w.org/images/core/5.5/inline-image-editing.mp4" type="video/mp4" />
+						<source src="https://s.w.org/images/core/5.5/inline-image-editing-1.webm" type="video/webm" />
 					</video>
-					<figcaption id="about-image-editor" class="screen-reader-text"><?php _e( 'Video: In the new image editor, an image icon gets dragged and dropped into the space, which turns blue to accept the upload. The image expands to fill the editor. Dragging a handle on the right side of the image widens it to scale and resizes the editor to fit. Next the cursor moves to a text area below the image and clicks to bring up standard block text-editing tools and write a caption for the image. Clicking in the image dismisses the text tools, and the cursor now moves to a toolbar at the top of the image space. A click on the Crop icon reveals a dropdown set of common aspect ratios; lingering briefly on one choice demos the crop. Applying it requires a confirmation click in the toolbar.' ); ?></figcaption>
+					<figcaption id="about-image-editor" class="screen-reader-text"><?php _e( 'Video: An image is added with an image block. In the block toolbar, an icon called "Crop" is selected, which changes the toolbar to show image resizing tools. First, zoom is used to zoom into the center of the image. Next, aspect ratio is clicked. This shows a dropdown of common aspect ratios. Square is chosen, and the image is moved within the new square outline. The crop is completed by clicking "Apply."' ); ?></figcaption>
 				</figure>
 			</div>
 			<div class="column">
diff --git a/src/wp-admin/css/about.css b/src/wp-admin/css/about.css
index 4258b7a6a8..e3d6e74e1a 100644
--- a/src/wp-admin/css/about.css
+++ b/src/wp-admin/css/about.css
@@ -30,8 +30,8 @@
 	--accent-2: #bd7331;
 	--accent-3: #b04329;
 	/* Navigation colors. */
-	--nav-background: var( --subtle-background );
-	--nav-border: var( --accent-1 );
+	--nav-background: var(--subtle-background);
+	--nav-border: var(--accent-1);
 	--nav-color: var(--accent-3);
 	--nav-current: var(--accent-3);
 }
@@ -98,7 +98,7 @@
 }
 
 .about__section {
-	background: #f3f4f5;
+	background: #fff;
 	background: var(--background);
 	clear: both;
 }