From 7bec2e6c5aa1454aa95bbb16e3b54ce0b9296b35 Mon Sep 17 00:00:00 2001 From: Kelly Choyce-Dwan Date: Tue, 11 Jan 2022 18:34:34 +0000 Subject: [PATCH] Help/About: Update the About section for 5.9. Use the correct Field Guide link. Update the SVGs used on Freedoms and Privacy. Add more spacing between sections on the About page, fixed spacing between rows on Freedoms page. Props critterverse, audrasjb, versusbassz. See #54270. git-svn-id: https://develop.svn.wordpress.org/trunk@52563 602fd350-edb4-49c9-b593-d223f7449a82 --- src/wp-admin/about.php | 42 ++++++++--------- src/wp-admin/css/about.css | 45 +++++++++++-------- src/wp-admin/images/about-header-freedoms.svg | 37 +++++++-------- src/wp-admin/images/about-header-privacy.svg | 29 +++++------- 4 files changed, 75 insertions(+), 78 deletions(-) diff --git a/src/wp-admin/about.php b/src/wp-admin/about.php index 38f52369be..9b9f0867fc 100644 --- a/src/wp-admin/about.php +++ b/src/wp-admin/about.php @@ -52,11 +52,11 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
-
+
-
+

@@ -80,8 +80,8 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
-
-
+
+

@@ -97,11 +97,11 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
-
+
-
+

@@ -127,11 +127,11 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
-
+
-
+

@@ -141,8 +141,8 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
-
-
+
+

@@ -158,11 +158,11 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
-
+
-
+

@@ -172,8 +172,8 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
-
-
+
+

@@ -203,8 +203,8 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
-
-
+
+

@@ -218,7 +218,7 @@ require_once ABSPATH . 'wp-admin/admin-header.php'; ?>

-
+

@@ -233,8 +233,8 @@ require_once ABSPATH . 'wp-admin/admin-header.php';

-
-
+
+

@@ -242,7 +242,7 @@ require_once ABSPATH . 'wp-admin/admin-header.php';

-
+

@@ -288,7 +288,7 @@ require_once ABSPATH . 'wp-admin/admin-header.php'; printf( /* translators: %s: WordPress 5.9 Field Guide link. */ __( 'Check out the latest version of the WordPress Field Guide. It highlights developer notes for each change you may want to be aware of. WordPress 5.9 Field Guide.' ), - 'https://make.wordpress.org/core/2022/01/04/wordpress-5-9-field-guide/' + 'https://make.wordpress.org/core/2022/01/10/wordpress-5-9-field-guide/' ); ?>

diff --git a/src/wp-admin/css/about.css b/src/wp-admin/css/about.css index 3bc9a9362d..eff4e2940c 100644 --- a/src/wp-admin/css/about.css +++ b/src/wp-admin/css/about.css @@ -141,8 +141,7 @@ } .about__section .column:not(.is-edge-to-edge) { - padding-left: var(--gap); - padding-right: var(--gap); + padding: var(--gap); } .about__section + .about__section .is-section-header { @@ -209,7 +208,8 @@ } .about__section.has-gutters { - gap: calc(var(--gap) / 2); + gap: var(--gap); + margin-bottom: calc(var(--gap) * 2); } .about__section.has-2-columns { @@ -331,14 +331,16 @@ padding-bottom: var(--gap); } - .about__section .column:not(.is-edge-to-edge) + .column { - padding-top: 0; + .about__section.has-2-columns.has-gutters.is-wider-right, + .about__section.has-2-columns.has-gutters.is-wider-left, + .about__section.has-3-columns.has-gutters { + margin-bottom: calc(var(--gap) * 2); } .about__section.has-2-columns.has-gutters .column, .about__section.has-2-columns.has-gutters .column, .about__section.has-3-columns.has-gutters .column { - margin-bottom: calc(var(--gap) / 2); + margin-bottom: var(--gap); } .about__section.has-2-columns.has-gutters .column:last-child, @@ -397,21 +399,25 @@ @media screen and (max-width: 600px) { .about__section.has-2-columns { display: block; + margin-bottom: var(--gap); + } + + .about__section.has-2-columns:not(.has-gutters) .column:nth-of-type(n) { + padding-top: calc(var(--gap) / 2); padding-bottom: calc(var(--gap) / 2); } + .about__section.has-2-columns.has-gutters { + margin-bottom: calc(var(--gap) * 2); + } + .about__section.has-2-columns.has-gutters .column { - margin-bottom: calc(var(--gap) / 2); + margin-bottom: var(--gap); } .about__section.has-2-columns.has-gutters .column:last-child { margin-bottom: 0; } - - .about__section.has-2-columns .column:nth-of-type(n) { - padding-top: calc(var(--gap) / 2); - padding-bottom: calc(var(--gap) / 2); - } } @media screen and (max-width: 480px) { @@ -610,8 +616,8 @@ } .freedoms-php .about__header::before { - top: 32px; - right: 0; + top: calc(50% - 182px); + right: 32px; width: 375px; height: 300px; background-image: url('../images/about-header-freedoms.svg'); @@ -619,8 +625,7 @@ .privacy-php .about__header::before { top: auto; - bottom: 70px; - height: 245px; + bottom: -16px; background-image: url('../images/about-header-privacy.svg'); } @@ -654,8 +659,8 @@ .freedoms-php .about__header-title, .freedoms-php .about__header-text { - /* 391px = 375px (balloon width) + 16px (spacing). */ - padding-right: 391px; + /* 423px = 375px (balloon width) + 32px (offset from edge) + 16px (spacing). */ + padding-right: 423px; margin-right: 0; } @@ -721,12 +726,14 @@ } .freedoms-php .about__header::before { + top: calc(50% - 132px); height: 192px; width: 240px; } .privacy-php .about__header::before { - height: 196px; + bottom: 0; + height: 280px; } .about__container .about__header-text { diff --git a/src/wp-admin/images/about-header-freedoms.svg b/src/wp-admin/images/about-header-freedoms.svg index 84e914fa07..2b1f539437 100644 --- a/src/wp-admin/images/about-header-freedoms.svg +++ b/src/wp-admin/images/about-header-freedoms.svg @@ -1,21 +1,18 @@ - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + diff --git a/src/wp-admin/images/about-header-privacy.svg b/src/wp-admin/images/about-header-privacy.svg index 3dc196a59f..2d7166b84c 100644 --- a/src/wp-admin/images/about-header-privacy.svg +++ b/src/wp-admin/images/about-header-privacy.svg @@ -1,19 +1,12 @@ - - - - - - - - - - - - - - - - - - + + + + + + + + + + +