From 2b17e69e72f58a3afdfe8a7268b13b557ab9e300 Mon Sep 17 00:00:00 2001 From: Kelly Choyce-Dwan Date: Tue, 3 May 2022 16:26:53 +0000 Subject: [PATCH] Help/About: Update the About section for 6.0. This is the start of the WordPress 6.0 about page, introducing new content and a first pass of the new style. Props fcoveram, estelaris, JeffPaul, critterverse, chanthaboune, dansoschin, webcommsat, annezazu, marybaum, cbringmann, eidolonnight, laurlittle, sergeybiryukov. See #55434. git-svn-id: https://develop.svn.wordpress.org/trunk@53339 602fd350-edb4-49c9-b593-d223f7449a82 --- src/wp-admin/about.php | 483 +++++++++--------- src/wp-admin/css/about.css | 148 +++--- src/wp-admin/images/about-header-about.svg | 16 +- src/wp-admin/images/about-header-credits.svg | 18 +- src/wp-admin/images/about-header-freedoms.svg | 22 +- src/wp-admin/images/about-header-privacy.svg | 15 +- 6 files changed, 345 insertions(+), 357 deletions(-) diff --git a/src/wp-admin/about.php b/src/wp-admin/about.php index 9b9f0867fc..14508df8e8 100644 --- a/src/wp-admin/about.php +++ b/src/wp-admin/about.php @@ -27,9 +27,7 @@ require_once ABSPATH . 'wp-admin/admin-header.php'; -
- -
+
-
+
-

- -

-

- -

+
+

+ +

+

+ +

+
-
-
- -
-
-

- -

-

- -

-

- -

- -

- your other installed themes.' ), - admin_url( 'themes.php' ) - ); - ?> -

- -
-
- -
-
-

- -

-

- -

-

- -

-
-
- -
-
- -
-
- -
-
-

- -

-

- -

-

- -

-
-
- -
- -
-

- -

-

- -

-
- -
- -
-
- -
-
-

- -

-

- -

-
-
- -
-
-

- -

-

- -

-

- -

-
-
- -
-
- -
-
- -
-
-

- -

-

- -

-
-
- -
-
-

- -

-

- -

-

- -

-
-
- -
-
- -
- -
-

- -

-
- -
-
-

- -

-

- block themes dev note.' ), - 'https://make.wordpress.org/core/2022/01/04/block-themes-a-new-way-to-build-themes-in-wordpress-5-9/' - ); - ?> -

-
-
-

- -

-

- using multiple stylesheets in a block.' ), - 'https://make.wordpress.org/core/2021/12/15/using-multiple-stylesheets-per-block/' - ); - ?> -

-
-
-
-
-

- -

-

- -

-
-
-

- -

-

- Gallery block compatibility dev note.' ), - 'https://make.wordpress.org/core/2021/08/20/gallery-block-refactor-dev-note/' - ); - ?> -

-
-
- -
- -
+
- +
-

+

+ +

+

+ +

+
    +
    • +
  • [[ to quickly access the link menu.' ); ?>
    • +
    • +
    • +
    • +
+
+
+ +
+
+

+ +

+

+ +

+
+
+ +
+
+ +
+
+ +
+
+

+ +

+

+ +

+
+
+ +
+
+
+ +
+

+

+
+
+
+ +
+

+
+
+
+ +
+

+
+
+ +
+
+ +
+
+

+ +

learn.wordpress.org for expanding resources on new features in WordPress 5.9.' ), - 'https://learn.wordpress.org' + /* translators: %s Working with Patterns dev note link. */ + __( 'Patterns will now appear when you need them in even more places, like in the quick inserter or when creating a new header or footer. If you’re a block theme author, you can even register patterns from the Pattern Directory using theme.json, enabling you to prioritize specific patterns that are most helpful to your theme’s users.' ), + 'https://make.wordpress.org/core/2022/05/02/new-features-for-working-with-patterns-and-themes-in-wordpress-6-0/' ); ?>

+
+
+

+ +

+

+ +

+
+
+ +
+
+ +
+
+ +
+
+

+ +

+

+ +

+
+
+ +
+
+

+ +

+

+
+ +

+
+
+ +
+
+
+ + + +
+

+
+
+
+ + + +
+

+
+
+
+ + + + + + + + + + + +
+

+
+
+ +
+
+
+ + + +
+

+
+
+
+ + + +
+

+
+
+
+ + + + + +
+

+
+
+
-
+
+
+ + <?php echo esc_attr( __( 'Exploring WordPress 6.0 video' ) ); ?> + +
-

+

+ +

WordPress 5.9 Field Guide.' ), - 'https://make.wordpress.org/core/2022/01/10/wordpress-5-9-field-guide/' + /* translators: %s: 6.0 overview video link. */ + __( 'See WordPress 6.0 in action! Watch a brief overview video highlighting some of the major features debuting in WordPress 6.0.' ), + '#' + ); + ?> +

+
+
+ +
+
+

+ learn.wordpress.org/​workshops for quick how-to videos and lots more on new features in WordPress. Or join a live interactive online learning session on a specific WordPress topic.' ), + 'https://learn.wordpress.org/workshops/', + 'https://learn.wordpress.org/social-learning/' + ); + ?> +

+
+
+

+ WordPress Field Guide. It is overflowing with detailed developer notes to help you build with WordPress.' ), + '#' + ); + ?> +

+
+
+

+ Read the WordPress 6.0 Release Notes for more information on the included enhancements and issues fixed, installation information, developer notes and resources, release contributors, and the list of file changes in this release.' ), + '#' ); ?>

diff --git a/src/wp-admin/css/about.css b/src/wp-admin/css/about.css index eff4e2940c..6b4490ba99 100644 --- a/src/wp-admin/css/about.css +++ b/src/wp-admin/css/about.css @@ -21,7 +21,7 @@ .about__container { /* Section backgrounds */ --background: transparent; - --subtle-background: #def; + --subtle-background: #f0f0f0; /* Main text color */ --text: #000; @@ -48,14 +48,14 @@ .credits-php, .freedoms-php, .privacy-php { - background: #f0f7ff; + background: #fff; } .about-php #wpcontent, .credits-php #wpcontent, .freedoms-php #wpcontent, .privacy-php #wpcontent { - background: linear-gradient(180deg, #fff 50%, #f0f7ff 100%); + background: #fff; padding: 0 24px; } @@ -482,7 +482,7 @@ .about__container p.is-subheading { margin-top: 0; - font-size: 1.8em; + font-size: 1.5em; } .about__section a { @@ -542,6 +542,10 @@ margin-top: 1.5em; } +.about__container .column .about__image { + margin-bottom: calc(var(--gap) / 2); +} + .about__container hr { margin: 0; height: var(--gap); @@ -586,46 +590,43 @@ /* 1.3 - Header */ .about__header { + --about-header-image-width: 521px; + --about-header-image-height: 504px; + --about-header-bg-width: var(--about-header-image-width); + --about-header-bg-height: var(--about-header-image-height); + --about-header-bg-offset-inline: calc(var(--gap) * -2); + position: relative; margin-bottom: var(--gap); padding-top: 0; - background-image: url('../images/about-texture.png'); - background-color: var(--accent-2); - background-size: 500px 500px; - background-blend-mode: overlay; - color: var(--text-light); + background: var(--subtle-background) url('../images/about-header-about.svg') no-repeat; + background-size: var(--about-header-bg-width) var(--about-header-bg-height); + background-position: right var(--about-header-bg-offset-inline) center; } -.about__header::before { - content: ""; - position: absolute; - top: 0; - right: 64px; - z-index: 0; - width: 300px; - height: 382px; - background: url(../images/about-header-about.svg) no-repeat center; - background-size: contain; -} +.credits-php .about__header { + --about-header-image-width: 390px; + --about-header-image-height: 325px; + --about-header-bg-offset-inline: var(--gap); -.credits-php .about__header::before { - top: auto; - bottom: 70px; - height: 310px; background-image: url('../images/about-header-credits.svg'); + background-position: right var(--about-header-bg-offset-inline) top var(--gap); } -.freedoms-php .about__header::before { - top: calc(50% - 182px); - right: 32px; - width: 375px; - height: 300px; +.freedoms-php .about__header { + --about-header-image-width: 380px; + --about-header-image-height: 278px; + --about-header-bg-offset-inline: var(--gap); + background-image: url('../images/about-header-freedoms.svg'); + background-position: right var(--about-header-bg-offset-inline) bottom; } -.privacy-php .about__header::before { - top: auto; - bottom: -16px; +.privacy-php .about__header { + --about-header-image-width: 503px; + --about-header-image-height: 553px; + --about-header-bg-offset-inline: calc(var(--gap) * -2); + background-image: url('../images/about-header-privacy.svg'); } @@ -635,33 +636,44 @@ .about__header-title { box-sizing: border-box; - /* 380px = 300px (balloon width) + 64px (offset from edge) + 16px (spacing). */ - padding: 6rem 380px 0 0; - margin: 0 2rem; + margin: 0 0 0 var(--gap); + padding: 8rem 0 0; + padding-right: calc(var(--about-header-bg-width) + var(--about-header-bg-offset-inline) + var(--gap)); +} + +.credits-php .about__header-title, +.privacy-php .about__header-title { + padding-top: 6rem; +} + +.freedoms-php .about__header-title { + padding-top: 3rem; } .about__header-title h1 { - margin: 0 0 0.5rem; + margin: 0 0 1rem; padding: 0; - font-size: 4.5rem; + font-size: clamp(3rem, 18.46vw - 8.08rem, 6rem); line-height: 1; font-weight: 400; } .about__header-text { box-sizing: border-box; - margin: 0 0 7rem; - /* 380px = 300px (balloon width) + 64px (offset from edge) + 16px (spacing). */ - padding: 0 380px 0 2rem; + margin: 0 0 9rem; + padding: 0 0 0 2rem; + padding-right: calc(var(--about-header-bg-width) + var(--about-header-bg-offset-inline) + var(--gap)); font-size: 1.6rem; line-height: 1.15; } -.freedoms-php .about__header-title, +.credits-php .about__header-text, +.privacy-php .about__header-text { + margin-bottom: 7rem; +} + .freedoms-php .about__header-text { - /* 423px = 375px (balloon width) + 32px (offset from edge) + 16px (spacing). */ - padding-right: 423px; - margin-right: 0; + margin-bottom: 6rem; } .about__header-navigation { @@ -708,34 +720,19 @@ border-color: var(--nav-current); } -@media screen and (max-width: 960px){ +@media screen and (max-width: 960px) { + .about__header { + --about-header-bg-width: calc(var(--about-header-image-width) * 0.7); + --about-header-bg-height: calc(var(--about-header-image-height) * 0.7); + --about-header-bg-offset-inline: calc(var(--gap) * -1); + } + .about__header-title h1 { - font-size: 4.8em; + font-size: clamp(3rem, 18.46vw - 5.08rem, 6rem); } } @media screen and (max-width: 782px) { - .about__header::before { - width: 240px; - height: 305px; - right: 32px; - } - - .credits-php .about__header::before { - height: 248px; - } - - .freedoms-php .about__header::before { - top: calc(50% - 132px); - height: 192px; - width: 240px; - } - - .privacy-php .about__header::before { - bottom: 0; - height: 280px; - } - .about__container .about__header-text { font-size: 1.4em; } @@ -744,12 +741,6 @@ display: block; } - .about__header-title, - .about__header-text { - /* 288px = 240px (balloon width) + 32px (offset from edge) + 16px (spacing). */ - padding-right: 288px !important; - } - .about__header-title, .about__header-image { margin-left: calc(var(--gap) / 2); @@ -771,14 +762,21 @@ } @media screen and (max-width: 600px) { - .about__header::before { - display: none; + .about__header, + .credits-php .about__header, + .privacy-php .about__header, + .freedoms-php .about__header { + background-image: none; } .about__header-title, .about__header-text { padding-right: calc(var(--gap) / 2) !important; } + + .about__header-title h1 { + font-size: clamp(2rem, 11.43vw - 0.29rem, 4rem); + } } @media screen and (max-width: 480px) { diff --git a/src/wp-admin/images/about-header-about.svg b/src/wp-admin/images/about-header-about.svg index c2e4bbf26c..5a1bc59f98 100644 --- a/src/wp-admin/images/about-header-about.svg +++ b/src/wp-admin/images/about-header-about.svg @@ -1,11 +1,5 @@ - - - - - - - - - - - \ No newline at end of file + + + + + diff --git a/src/wp-admin/images/about-header-credits.svg b/src/wp-admin/images/about-header-credits.svg index bae4c28d54..74b2d8d8cf 100644 --- a/src/wp-admin/images/about-header-credits.svg +++ b/src/wp-admin/images/about-header-credits.svg @@ -1,15 +1,5 @@ - - - - - - - - - - - - - - + + + + diff --git a/src/wp-admin/images/about-header-freedoms.svg b/src/wp-admin/images/about-header-freedoms.svg index 2b1f539437..d756f2cf08 100644 --- a/src/wp-admin/images/about-header-freedoms.svg +++ b/src/wp-admin/images/about-header-freedoms.svg @@ -1,18 +1,6 @@ - - - - - - - - - - - - - - - - - + + + + + diff --git a/src/wp-admin/images/about-header-privacy.svg b/src/wp-admin/images/about-header-privacy.svg index 2d7166b84c..b418dbfe79 100644 --- a/src/wp-admin/images/about-header-privacy.svg +++ b/src/wp-admin/images/about-header-privacy.svg @@ -1,12 +1,5 @@ - - - - - - - - - - - + + + +