From 16d538c0f8c4734206ee062e0bbb982feead6e44 Mon Sep 17 00:00:00 2001
From: Kelly Choyce-Dwan <ryelle@git.wordpress.org>
Date: Tue, 13 Jul 2021 15:38:12 +0000
Subject: [PATCH] Help/About: Update the About page for 5.8.

Use a larger image for theme.json on retina screens, and update the spacing of sections on the page.

Props javiarce.
See #52775.



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

diff --git a/src/wp-admin/about.php b/src/wp-admin/about.php
index 8f158390b2..639df3bc08 100644
--- a/src/wp-admin/about.php
+++ b/src/wp-admin/about.php
@@ -47,7 +47,7 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
 		</div>
 
 		<div class="about__section has-2-columns is-wider-left">
-			<div class="column about__image is-vertically-aligned-center is-edge-to-edge">
+			<div class="column about__image is-vertically-aligned-center">
 				<img src="https://s.w.org/images/core/5.8/about-widgets-blocks.png" alt="" />
 			</div>
 			<div class="column">
@@ -66,8 +66,6 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
 			</div>
 		</div>
 
-		<hr />
-
 		<div class="about__section has-2-columns is-wider-right">
 			<div class="column">
 				<h3>
@@ -77,15 +75,13 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
 					<?php _e( 'The Query Loop Block makes it possible to display posts based on specified parameters; like a PHP loop without the code. Easily display posts from a specific category, to do things like create a portfolio or a page full of your favorite recipes. Think of it as a more complex and powerful Latest Posts Block! Plus, pattern suggestions make it easier than ever to create a list of posts with the design you want.' ); ?>
 				</p>
 			</div>
-			<div class="column about__image is-vertically-aligned-center is-edge-to-edge">
+			<div class="column about__image is-vertically-aligned-center">
 				<img src="https://s.w.org/images/core/5.8/about-query-loop.png" alt="" />
 			</div>
 		</div>
 
-		<hr />
-
 		<div class="about__section has-2-columns is-wider-left">
-			<div class="column about__image is-vertically-aligned-center is-edge-to-edge">
+			<div class="column about__image is-vertically-aligned-center">
 				<img src="https://s.w.org/images/core/5.8/about-template.png" alt="" />
 			</div>
 			<div class="column">
@@ -109,7 +105,7 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
 		</div>
 
 		<div class="about__section has-2-columns is-wider-left">
-			<div class="column about__image is-vertically-aligned-center is-edge-to-edge">
+			<div class="column about__image is-vertically-aligned-center">
 				<img src="https://s.w.org/images/core/5.8/about-list-view.png" alt="" />
 			</div>
 			<div class="column">
@@ -124,8 +120,6 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
 			</div>
 		</div>
 
-		<hr />
-
 		<div class="about__section has-2-columns is-wider-right">
 			<div class="column">
 				<h3>
@@ -137,15 +131,13 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
 					?>
 				</p>
 			</div>
-			<div class="column about__image is-vertically-aligned-center is-edge-to-edge">
+			<div class="column about__image is-vertically-aligned-center">
 				<img src="https://s.w.org/images/core/5.8/about-pattern-suggestions.png" alt="" />
 			</div>
 		</div>
 
-		<hr />
-
 		<div class="about__section has-2-columns is-wider-left">
-			<div class="column about__image is-vertically-aligned-center is-edge-to-edge">
+			<div class="column about__image is-vertically-aligned-center">
 				<img src="https://s.w.org/images/core/5.8/about-duotone.png" alt="" />
 			</div>
 			<div class="column">
@@ -163,11 +155,14 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
 		<hr class="is-large" />
 
 		<div class="about__section">
-			<h2 class="aligncenter">
+			<h2 class="aligncenter" style="margin-bottom:0;">
 				<?php _e( 'For Developers to Explore' ); ?>
 			</h2>
-			<div class="column about__image is-vertically-aligned-center is-edge-to-edge">
-				<img src="https://s.w.org/images/core/5.8/about-theme-json.png" alt="" />
+			<div class="column about__image is-vertically-aligned-center">
+				<picture>
+					<source srcset="https://s.w.org/images/core/5.8/about-theme-json.png, https://s.w.org/images/core/5.8/about-theme-json-2x.png 2x">
+					<img src="https://s.w.org/images/core/5.8/about-theme-json.png" alt="">
+				</picture>
 			</div>
 		</div>
 
@@ -188,8 +183,6 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
 			</div>
 		</div>
 
-		<hr />
-
 		<div class="about__section has-3-columns">
 			<div class="column">
 				<h3>