Help/About: Updates to About page.

Update the headers, icons, and avatar style to match the designs. Fix the version strings on embedded images. Remove the tagline on main About page. Update "ctrl" to the correct capitalization, "Ctrl".

Follow-up to [56263].
Props richtabor, markoserb, audrasjb, nekojonez.
See #58067.



git-svn-id: https://develop.svn.wordpress.org/trunk@56292 602fd350-edb4-49c9-b593-d223f7449a82

src/wp-admin/about.php

@@ -32,7 +32,7 @@
 				</h1>
 			</div>
 
-			<div class="about__header-text"><?php _e( 'Edit pages in the Site Editor, sync patterns, and more' ); ?></div>
+			<div class="about__header-text"></div>
 		</div>
 
 		<nav class="about__header-navigation nav-tab-wrapper wp-clearfix" aria-label="<?php esc_attr_e( 'Secondary menu' ); ?>">
@@ -92,7 +92,7 @@
 			</div>
 			<div class="column is-vertically-aligned-center">
 				<h3><?php _e( 'Work faster with the Command Palette' ); ?></h3>
-				<p><?php _e( 'Switch to a specific template or open your editor preferences with a new tool that helps you quickly navigate expanded functionality. With simple keyboard shortcuts (⌘+k on Mac or ctrl+k on Windows), clicking the sidebar search icon in Site View, or clicking the Title Bar, get where you need to go and do what you need to do in seconds.' ); ?></p>
+				<p><?php _e( 'Switch to a specific template or open your editor preferences with a new tool that helps you quickly navigate expanded functionality. With simple keyboard shortcuts (⌘+k on Mac or Ctrl+k on Windows), clicking the sidebar search icon in Site View, or clicking the Title Bar, get where you need to go and do what you need to do in seconds.' ); ?></p>
 			</div>
 		</div>
 
@@ -197,6 +197,8 @@
 				<div class="about__image">
 					<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
 						<rect width="48" height="48" rx="4" fill="#151515"/>
+						<path fill="#fff" fill-rule="evenodd" d="m20.014 21.168 3.988-3.418 3.988 3.418-.976 1.14-3.012-2.582-3.012 2.581-.976-1.139Z" clip-rule="evenodd"/>
+						<path fill="#fff" d="M16 29h16v-1.5H16V29Z"/>
 					</svg>
 				</div>
 				<h3 class="is-smaller-heading" style="margin-top:calc(var(--gap) / 2);margin-bottom:calc(var(--gap) / 4);"><?php _e( 'Rediscover the Top Toolbar' ); ?></h3>
@@ -231,7 +233,7 @@
 
 		<div class="about__section has-3-columns">
 			<div class="column about__image is-vertically-aligned-top">
-				<img src="./images/about-release-badge.svg" alt="" />
+				<img src="<?php echo esc_url( admin_url( 'images/about-release-badge.svg?ver=6.3' ) ); ?>" alt="" />
 			</div>
 			<div class="column is-vertically-aligned-center" style="grid-column-end:span 2">
 				<h3>

src/wp-admin/css/about.css

@@ -29,8 +29,8 @@
 	--text-light: #fff;
 
 	/* Accent colors: used in header, on special classes. */
-	--accent-1: #3858e9; /* Link color, credit image overlay */
-	--accent-2: #ffb7a7; /* Accent background */
+	--accent-1: #3858e9; /* Link color */
+	--accent-2: #c7b9f2; /* Accent background */
 	--accent-3: #f0f0f1; /* hr background */
 
 	/* Navigation colors. */
@@ -764,14 +764,12 @@
 	height: 140px;
 	border-radius: 100%;
 	overflow: hidden;
-	background: var(--accent-1);
 }
 
 .about__section .wp-person .gravatar {
 	width: 140px;
 	height: 140px;
 	filter: grayscale(100%);
-	mix-blend-mode: screen;
 }
 
 .about__section .compact .wp-person-avatar,

src/wp-admin/freedoms.php

@@ -58,22 +58,22 @@
 
 	<div class="about__section has-2-columns">
 		<div class="column aligncenter">
-			<img class="freedom-image" src="<?php echo esc_url( admin_url( 'images/freedom-1.svg?ver=6.1' ) ); ?>" alt="" />
+			<img class="freedom-image" src="<?php echo esc_url( admin_url( 'images/freedom-1.svg?ver=6.3' ) ); ?>" alt="" />
 			<h2 class="is-smaller-heading"><?php _e( 'The 1st Freedom' ); ?></h2>
 			<p><?php _e( 'To run the program for any purpose.' ); ?></p>
 		</div>
 		<div class="column aligncenter">
-			<img class="freedom-image" src="<?php echo esc_url( admin_url( 'images/freedom-2.svg?ver=6.1' ) ); ?>" alt="" />
+			<img class="freedom-image" src="<?php echo esc_url( admin_url( 'images/freedom-2.svg?ver=6.3' ) ); ?>" alt="" />
 			<h2 class="is-smaller-heading"><?php _e( 'The 2nd Freedom' ); ?></h2>
 			<p><?php _e( 'To study how the program works and change it to make it do what you wish.' ); ?></p>
 		</div>
 		<div class="column aligncenter">
-			<img class="freedom-image" src="<?php echo esc_url( admin_url( 'images/freedom-3.svg?ver=6.1' ) ); ?>" alt="" />
+			<img class="freedom-image" src="<?php echo esc_url( admin_url( 'images/freedom-3.svg?ver=6.3' ) ); ?>" alt="" />
 			<h2 class="is-smaller-heading"><?php _e( 'The 3rd Freedom' ); ?></h2>
 			<p><?php _e( 'To redistribute.' ); ?></p>
 		</div>
 		<div class="column aligncenter">
-			<img class="freedom-image" src="<?php echo esc_url( admin_url( 'images/freedom-4.svg?ver=6.1' ) ); ?>" alt="" />
+			<img class="freedom-image" src="<?php echo esc_url( admin_url( 'images/freedom-4.svg?ver=6.3' ) ); ?>" alt="" />
 			<h2 class="is-smaller-heading"><?php _e( 'The 4th Freedom' ); ?></h2>
 			<p><?php _e( 'To distribute copies of your modified versions to others.' ); ?></p>
 		</div>