From fd8169e52521ca653577f7324bb59506f7fc195f Mon Sep 17 00:00:00 2001
From: Sergey Biryukov <sergeybiryukov@git.wordpress.org>
Date: Sat, 8 Aug 2020 14:14:38 +0000
Subject: [PATCH] Help/About: Update videos and their descriptions on the About
 page.

Follow-up to [48675], [48686], [48721], [48729], [48730], [48736].

Props ryelle, marybaum, estelaris, desrosj, joen, afercia.
See #50416.

git-svn-id: https://develop.svn.wordpress.org/trunk@48761 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/about.php | 29 ++++++++++++++++-------------
 1 file changed, 16 insertions(+), 13 deletions(-)

diff --git a/src/wp-admin/about.php b/src/wp-admin/about.php
index 487eb430d5..e388623b57 100644
--- a/src/wp-admin/about.php
+++ b/src/wp-admin/about.php
@@ -94,10 +94,11 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
 			</div>
 			<div class="column about__image is-vertically-aligned-center">
 				<figure aria-labelledby="about-security" class="about__image">
-					<video controls poster="https://make.wordpress.org/core/files/2020/08/security-poster.png">
-						<source src="https://make.wordpress.org/core/files/2020/08/wp55-about-page-security-section.mp4" type="video/mp4" />
+					<video controls poster="https://s.w.org/images/core/5.5/auto-updates-poster.png">
+						<source src="https://s.w.org/images/core/5.5/auto-updates.mp4" type="video/mp4" />
+						<source src="https://s.w.org/images/core/5.5/auto-updates.webm" type="video/webm" />
 					</video>
-					<figcaption id="about-security" class="screen-reader-text"><?php _e( 'Video: Installed plugin screen, which shows a new column, Automatic Updates. In this column are buttons that say "Enable auto-updates." When clicked, the auto-updates feature is turned on for that plugin, and the button switches to say "Disable auto-updates". Two plugins have updates, the updates are automatically queued up in 4 hours.' ); ?></figcaption>
+					<figcaption id="about-security" class="screen-reader-text"><?php _e( 'Video: Installed plugin screen, which shows a new column, Automatic Updates. In this column are buttons that say "Enable auto-updates." When clicked, the auto-updates feature is turned on for that plugin, and the button switches to say "Disable auto-updates".' ); ?></figcaption>
 				</figure>
 			</div>
 		</div>
@@ -110,25 +111,27 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
 				<p><?php _e( 'Once again, the latest WordPress release packs a long list of exciting new features for the block editor. For example:' ); ?></p>
 			</div>
 		</div>
-		<div class="about__section has-2-columns  has-subtle-background-color">
-			<div class="column">
+		<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://make.wordpress.org/core/files/2020/07/block-pattern-poster.png">
-						<source src="https://make.wordpress.org/core/files/2020/07/block-patterns.mp4" type="video/mp4" />
+					<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>
-					<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. A section called "Button" has patterns for two buttons, three buttons. Next is a section called "Column", with two columns, two columns with images, three columns of text with buttons.' ); ?></figcaption>
+					<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>
-				<h3><?php _e( 'Block patterns' ); ?></h3>
-				<p><?php _e( 'New block patterns make it simple and fun to create complex, beautiful layouts, using combinations of text and media that you can mix and match to fit your story.' ); ?></p>
-				<p><?php _e( 'You will also find block patterns in a wide variety of plugins and themes, with more added all the time. Pick any of them from a single place — just click and go!' ); ?></p>
-			</div>
-			<div class="column">
+				<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>
 					<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>
 				</figure>
+			</div>
+			<div class="column">
+				<h3><?php _e( 'Block patterns' ); ?></h3>
+				<p><?php _e( 'New block patterns make it simple and fun to create complex, beautiful layouts, using combinations of text and media that you can mix and match to fit your story.' ); ?></p>
+				<p><?php _e( 'You will also find block patterns in a wide variety of plugins and themes, with more added all the time. Pick any of them from a single place — just click and go!' ); ?></p>
 				<h3><?php _e( 'Inline image editing' ); ?></h3>
 				<p><?php _e( 'Crop, rotate, and zoom your photos right from the image block. If you spend a lot of time on images, this could save you hours!' ); ?></p>