From 926cbb54255234725abf7b9146327ac48c5375de Mon Sep 17 00:00:00 2001
From: Jonathan Desrosiers <desrosj@git.wordpress.org>
Date: Tue, 4 Aug 2020 17:24:35 +0000
Subject: [PATCH] Help/About: String updates and accessibility improvements to
 the 5.5 About page.

Props ryelle, nrqsnchz, desrosj, audrasjb, marybaum, spacedmonkey, SergeyBiryukov, estelaris, afercia, ocean90.
See #50416.

git-svn-id: https://develop.svn.wordpress.org/trunk@48729 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/about.php     | 81 +++++++++++++++++++++++++-------------
 src/wp-admin/credits.php   |  8 ++--
 src/wp-admin/css/about.css | 60 +++++++++++++++++++---------
 src/wp-admin/freedoms.php  |  4 ++
 src/wp-admin/privacy.php   |  4 ++
 5 files changed, 106 insertions(+), 51 deletions(-)

diff --git a/src/wp-admin/about.php b/src/wp-admin/about.php
index b72d11df46..002e8d9f7b 100644
--- a/src/wp-admin/about.php
+++ b/src/wp-admin/about.php
@@ -30,6 +30,10 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
 				</p>
 			</div>
 
+			<div class="about__header-text">
+				Musician Name
+			</div>
+
 			<nav class="about__header-navigation nav-tab-wrapper wp-clearfix" aria-label="<?php esc_attr_e( 'Secondary menu' ); ?>">
 				<a href="about.php" class="nav-tab nav-tab-active" aria-current="page"><?php _e( 'What&#8217;s New' ); ?></a>
 				<a href="credits.php" class="nav-tab"><?php _e( 'Credits' ); ?></a>
@@ -61,7 +65,7 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
 
 		<hr />
 
-		<div class="about__section has-2-columns is-wider-left">
+		<div class="about__section has-1-column">
 			<div class="column">
 				<h2><?php _e( 'Speed' ); ?></h2>
 				<p><strong><?php _e( 'Posts and pages feel faster, thanks to lazy-loaded images.' ); ?></strong></p>
@@ -69,15 +73,9 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
 				<p><?php _e( 'In WordPress 5.5, images wait to load until they’re just about to scroll into view. The technical term is ‘lazy loading.’' ); ?></p>
 				<p><?php _e( 'On mobile, lazy loading can also keep browsers from loading files meant for other devices. That can save your readers money on data — and help preserve battery life.' ); ?></p>
 			</div>
-			<div class="column is-edge-to-edge" style="background-color:skyblue;">
-			</div>
 		</div>
 
-		<hr class="is-small" />
-
-		<div class="about__section has-2-columns is-wider-right">
-			<div class="column is-edge-to-edge" style="background-color:skyblue;">
-			</div>
+		<div class="about__section has-1-column">
 			<div class="column">
 				<h2><?php _ex( 'Search', 'sitemap' ); ?></h2>
 				<p><strong><?php _e( 'Say hello to your new sitemap.' ); ?></strong></p>
@@ -87,9 +85,9 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
 			</div>
 		</div>
 
-		<hr class="is-small" />
+		<hr />
 
-		<div class="about__section has-2-columns is-wider-left">
+		<div class="about__section has-2-columns has-accent-background-color is-wider-right">
 			<div class="column">
 				<h2><?php _e( 'Security' ); ?></h2>
 				<p><strong><?php _e( 'Auto-updates for Plugins and Themes' ); ?></strong></p>
@@ -98,29 +96,46 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
 				<p><strong><?php _e( 'Update by uploading ZIP files' ); ?></strong></p>
 				<p><?php _e( 'If updating plugins and themes manually is your thing, now that’s easier too — just upload a ZIP file.' ); ?></p>
 			</div>
-			<div class="column is-edge-to-edge" style="background-color:skyblue;">
+			<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>
+					<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>
+				</figure>
 			</div>
 		</div>
 
 		<hr />
 
-		<div class="about__section">
-			<div class="column is-edge-to-edge" style="height:200px;background-color:skyblue;">
-			</div>
+		<div class="about__section has-subtle-background-color">
 			<div class="column">
 				<h2><?php _e( 'Highlights from the block editor' ); ?></h2>
 				<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">
+		<div class="about__section has-2-columns  has-subtle-background-color">
 			<div class="column">
-				<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>
+				<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>
+					<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>
+				</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 dropdown — just click and go!' ); ?></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">
+				<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>
+				<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>
+
 				<h3><?php _e( 'The New Block Directory' ); ?></h3>
 				<p><?php _e( 'Now it’s easier than ever to find the block you need. The new block directory is built right into the block editor, so you can install new block types to your site without ever leaving the editor.' ); ?></p>
 
@@ -131,15 +146,13 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
 
 		<hr />
 
-		<div class="about__section has-2-columns">
+		<div class="about__section has-1-column">
 			<div class="column">
 				<h2><?php _e( 'Accessibility' ); ?></h2>
 				<p><?php _e( 'Every release adds improvements to the accessible publishing experience, and that remains true for WordPress 5.5. ' ); ?></p>
 				<p><?php _e( 'Now you can copy links in media screens and modal dialogs with a button, instead of trying to highlight a line of text.' ); ?></p>
 				<p><?php _e( 'You can also move meta boxes with the keyboard, and edit images in WordPress with your assistive device, as it can read you the instructions in the image editor.' ); ?></p>
 			</div>
-			<div class="column is-edge-to-edge" style="background-color:skyblue;">
-			</div>
 		</div>
 
 		<hr />
@@ -211,7 +224,25 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
 						);
 						?>
 					</li>
-					<li><?php _e( 'New filters let custom post types associated with the category taxonomy have a default term beyond “Uncategorized”.' ); ?></li>
+					<li><?php _e( 'Custom post types associated with the category taxonomy can now opt-in to supporting the default term.' ); ?></li>
+					<li>
+						<?php
+						printf(
+							/* translators: %s: 'register_taxonomy' function name. */
+							__( 'Default terms can now be specified for custom taxonomies in %s.' ),
+							'<code>register_taxonomy()</code>'
+						);
+						?>
+					</li>
+					<li>
+						<?php
+						printf(
+							/* translators: %s: 'register_meta' function name. */
+							__( 'The REST API now officially supports specifying default metadata values through %s.' ),
+							'<code>register_meta()</code>'
+						);
+						?>
+					</li>
 					<li><?php _e( 'You will find updated versions of these bundled libraries: SimplePie, Twemoji, Masonry, imagesLoaded, getID3, Moment.js, and clipboard.js.' ); ?></li>
 				</ul>
 			</div>
@@ -219,12 +250,6 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
 
 		<hr class="is-small" />
 
-		<div class="about__section">
-
-		</div>
-
-		<hr class="is-small" />
-
 		<div class="about__section">
 			<div class="column">
 				<h3><?php _e( 'Check the Field Guide for more!' ); ?></h3>
diff --git a/src/wp-admin/credits.php b/src/wp-admin/credits.php
index be5d30feb5..fc34981add 100644
--- a/src/wp-admin/credits.php
+++ b/src/wp-admin/credits.php
@@ -32,6 +32,10 @@ $credits = wp_credits();
 			</p>
 		</div>
 
+		<div class="about__header-text">
+			Musician Name
+		</div>
+
 		<nav class="about__header-navigation nav-tab-wrapper wp-clearfix" aria-label="<?php esc_attr_e( 'Secondary menu' ); ?>">
 			<a href="about.php" class="nav-tab"><?php _e( 'What&#8217;s New' ); ?></a>
 			<a href="credits.php" class="nav-tab nav-tab-active" aria-current="page"><?php _e( 'Credits' ); ?></a>
@@ -74,10 +78,6 @@ $credits = wp_credits();
 
 			<?php endif; ?>
 		</div>
-
-		<div class="about__image aligncenter">
-			<img src="data:image/svg+xml;charset=utf8,%3Csvg width='1000' height='300' viewbox='0 0 1000 300' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23F3F4F5' d='M0 0h1000v300H0z'/%3E%3Cpath style='mix-blend-mode:multiply' d='M39.6 140.22l931.1 3.36.8 76.5-929.5 6.6-2.4-86.46z' fill='%23216DD2'/%3E%3Cpath style='mix-blend-mode:multiply' d='M963.7 275.14s-.9-59.58-1-64.14c-.1-4.2-932.3 1.74-932.3 1.74L29 268.48v8.4' fill='%237FCDE6'/%3E%3Cpath style='mix-blend-mode:multiply' d='M958 73.32L47.8 70.26l1.2 78.66 907.3 4.26 1.7-79.86z' fill='%23072CF0'/%3E%3Cpath style='mix-blend-mode:multiply' d='M34 91.32l910.4-2.16L939.2 21 33.3 23.82l.7 67.5z' fill='%230188D9'/%3E%3C/svg%3E" alt="" />
-		</div>
 	</div>
 
 <?php
diff --git a/src/wp-admin/css/about.css b/src/wp-admin/css/about.css
index f5f3880f2f..4fa8d08711 100644
--- a/src/wp-admin/css/about.css
+++ b/src/wp-admin/css/about.css
@@ -20,7 +20,7 @@
 
 .about__container {
 	/* Section backgrounds */
-	--background: #f3f4f5;
+	--background: #fff;
 	--subtle-background: #f2edd4;
 	/* Main text color */
 	--text: #322d2b;
@@ -28,7 +28,7 @@
 	/* Accent colors: used in header, on special classes. */
 	--accent-1: #ebcd3d; /* Accent background */
 	--accent-2: #bd7331;
-	--accent-3: #bc5131;
+	--accent-3: #b04329;
 	/* Navigation colors. */
 	--nav-background: var( --subtle-background );
 	--nav-border: var( --accent-1 );
@@ -108,13 +108,12 @@
 	background-color: var(--accent-1);
 }
 
-
 .about__container .has-transparent-background-color {
 	background-color: transparent;
 }
 
 .about__container .has-accent-color {
-	color: #bc5131;
+	color: #b04329;
 	color: var(--accent-3);
 }
 
@@ -182,6 +181,12 @@
 	margin-top: 1rem;
 }
 
+.about__section.has-1-column {
+	margin-left: auto;
+	margin-right: auto;
+	max-width: 36em;
+}
+
 .about__section.has-2-columns,
 .about__section.has-3-columns,
 .about__section.has-4-columns {
@@ -289,6 +294,8 @@
 }
 
 @media screen and (max-width: 782px) {
+	.about__section.has-2-columns.is-wider-right,
+	.about__section.has-2-columns.is-wider-left,
 	.about__section.has-3-columns,
 	.about__section.has-4-columns {
 		display: block;
@@ -313,7 +320,6 @@
 	.about__section.has-2-columns .column:nth-of-type(n) {
 		padding-top: 16px;
 		padding-bottom: 16px;
-		width: 100%;
 	}
 
 	.about__section.has-2-columns .is-edge-to-edge {
@@ -353,7 +359,7 @@
 }
 
 .about__section a {
-	color: #bc5131;
+	color: #b04329;
 	color: var(--accent-3);
 	text-decoration: underline;
 }
@@ -383,16 +389,12 @@
 
 .about__container img {
 	margin: 0;
+	max-width: 100%;
 	vertical-align: middle;
 }
 
 .about__container .about__image {
-	display: -ms-grid;
-	display: grid;
-	align-items: center;
-	justify-content: center;
-	height: 100%;
-	overflow: hidden;
+	margin: 0;
 }
 
 .about__container .about__image img {
@@ -401,6 +403,15 @@
 	height: auto;
 }
 
+.about__container .about__image .wp-video {
+	margin-left: auto;
+	margin-right: auto;
+}
+
+.about__container .about__image + h3 {
+	margin-top: 1.5em;
+}
+
 .about__container hr {
 	margin: 0;
 	height: 32px;
@@ -437,7 +448,7 @@
 /* 1.3 - Header */
 
 .about__header {
-	padding-top: 10vh;
+	padding-top: 8em;
 	margin-bottom: 32px;
 	background-color: #ebcd3d;
 	background-color: var(--accent-1);
@@ -447,10 +458,12 @@
 
 .about__header-title {
 	display: flex;
-	align-items: flex-start;
+	align-items: center;
 	justify-content: center;
+	height: 20vh;
+	max-height: 16em;
+	padding: 32px;
 	text-align: center;
-	padding: 10vh 32px 15vh;
 }
 
 .about__header-title p {
@@ -472,7 +485,7 @@
 	padding: 16px 48px;
 	font-size: 1.5em;
 	line-height: 1.4;
-	background: #bc5131;
+	background: #b04329;
 	background: var(--accent-3);
 	color: #f2edd4;
 	color: var(--text-light);
@@ -482,11 +495,20 @@
 	margin: 0;
 }
 
+.about__header-text:last-of-type {
+	display: inline-block;
+	float: right;
+	margin-left: 0;
+	margin-right: -16px;
+	margin-bottom: 4em;
+}
+
 .about__header-navigation {
+	clear: both;
 	padding-top: 0;
 	background: #f2edd4;
 	background: var(--nav-background);
-	color: #bc5131;
+	color: #b04329;
 	color: var(--nav-color);
 	border-bottom: 3px solid #ebcd3d;
 	border-bottom: 3px solid var(--nav-border);
@@ -515,7 +537,7 @@
 .about__header-navigation .nav-tab-active {
 	margin-bottom: -3px;
 	border-width: 0 0 6px;
-	border-color: #bc5131;
+	border-color: #b04329;
 	border-color: var(--nav-current);
 }
 
@@ -525,7 +547,7 @@
 	background-color: var(--text);
 	color: #f2edd4;
 	color: var(--text-light);
-	border-color: #bc5131;
+	border-color: #b04329;
 	border-color: var(--nav-current);
 }
 
diff --git a/src/wp-admin/freedoms.php b/src/wp-admin/freedoms.php
index 1a82075646..173a300c55 100644
--- a/src/wp-admin/freedoms.php
+++ b/src/wp-admin/freedoms.php
@@ -35,6 +35,10 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
 			</p>
 		</div>
 
+		<div class="about__header-text">
+			Musician Name
+		</div>
+
 		<nav class="about__header-navigation nav-tab-wrapper wp-clearfix" aria-label="<?php esc_attr_e( 'Secondary menu' ); ?>">
 			<a href="about.php" class="nav-tab"><?php _e( 'What&#8217;s New' ); ?></a>
 			<a href="credits.php" class="nav-tab"><?php _e( 'Credits' ); ?></a>
diff --git a/src/wp-admin/privacy.php b/src/wp-admin/privacy.php
index a007b4347d..0bffd29ee2 100644
--- a/src/wp-admin/privacy.php
+++ b/src/wp-admin/privacy.php
@@ -29,6 +29,10 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
 			</p>
 		</div>
 
+		<div class="about__header-text">
+			Musician Name
+		</div>
+
 		<nav class="about__header-navigation nav-tab-wrapper wp-clearfix" aria-label="<?php esc_attr_e( 'Secondary menu' ); ?>">
 			<a href="about.php" class="nav-tab"><?php _e( 'What&#8217;s New' ); ?></a>
 			<a href="credits.php" class="nav-tab"><?php _e( 'Credits' ); ?></a>