From 33d50ae846e5e1c21d87574c615248dad55127dc Mon Sep 17 00:00:00 2001 From: Kelly Choyce-Dwan Date: Tue, 11 Oct 2022 18:49:40 +0000 Subject: [PATCH] Help/About: Update the About page for 6.1. This is the start of the WordPress 6.1 about page, introducing new content and a first pass of the new style. Props adampickering, joen, iamarinoh, dansoschin, desrosj, ryelle, cbringmann, annezazu, priethor, laurlittle, eidolonnight, jeffpaul, sabernhardt, ndiego, richtabor, spacedmonkey, marybaum, abhanonstopnewsuk, courane01, tweetythierry, adamsilverstein, flixos90, ironprogrammer. See #56357. git-svn-id: https://develop.svn.wordpress.org/trunk@54499 602fd350-edb4-49c9-b593-d223f7449a82 --- src/wp-admin/about.php | 560 ++++++++++++++++++++++++++----------- src/wp-admin/css/about.css | 43 +-- 2 files changed, 423 insertions(+), 180 deletions(-) diff --git a/src/wp-admin/about.php b/src/wp-admin/about.php index 7f78acc768..0944d0536f 100644 --- a/src/wp-admin/about.php +++ b/src/wp-admin/about.php @@ -22,8 +22,13 @@ require_once ABSPATH . 'wp-admin/admin-header.php';

- - +

@@ -49,214 +54,443 @@ require_once ABSPATH . 'wp-admin/admin-header.php'; ?>

- +

-
- +
+
-
-

- -

-

- -

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

- -

-

- -

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

- -

-

- -

-
-
- -
-
-
- -
-

-

-
-
-
- -
-

-
-
-
- -
-

-
-
- -
-
- -
-
-

- -

+
+

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/' + /* translators: 1: Variation announcement post URL, 2: Accessibility-ready handbook page. */ + __( 'Building on the foundational elements in the 5.9 and 6.0 releases for block themes and style variations, the new default theme, Twenty Twenty-Three, includes 10 different styles and is “Accessibility Ready”.' ), + 'https://make.wordpress.org/design/2022/09/07/tt3-default-theme-announcing-style-variation-selections/', + 'https://make.wordpress.org/themes/handbook/review/accessibility/' ); ?>

-
-
-

- -

+
+
+

- + New templates include a custom template for posts and pages in the Site Editor. Search-and-replace tools speed up the design of template parts.' ), + 'https://make.wordpress.org/core/2022/07/21/core-editor-improvement-deeper-customization-with-more-template-options/', + 'https://make.wordpress.org/core/2022/08/25/core-editor-improvement-refining-the-template-creation-experience/' + ); + ?>

-
- +
+
-
-
- +
+
+
-
-

- -

+
+

- + controls for design elements and blocks make the layout and site-building process more consistent, complete, and intuitive.' ), + 'https://make.wordpress.org/core/2022/10/10/updated-editor-layout-support-in-6-1-after-refactor/' + ); + ?>

-
- -
-
-

- -

-

-
- +

+
+

+

+ New fallback options in the navigation block mean you can edit the menu that’s open; no searching needed. Plus, the controls for choosing and working on menus have their own place in the block settings. The mobile menu system also gets an upgrade with new features, including different icon options, to make the menu yours.' ), + 'https://make.wordpress.org/core/2022/09/27/navigation-block-fallback-behavior-in-wp-6-1-dev-note/' + ); + ?>

+
+ +
-
+
-
- - - +
+
-

+

+

-
- - - +
+
-

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

+

+

-
- - - +
+
-

+

+

-
- - - +
+
-

+

+

-
- - - - - +
+
-

+

+

+ header and footer creation more efficient.' ), + 'https://learn.wordpress.org/tutorial/customizing-a-header-with-patterns/', + 'https://learn.wordpress.org/tutorial/customizing-a-footer-with-patterns/' + ); + ?>

-
+
+ +
+
+
+ +
+

+

+
+
+
+ +
+

+

+ a filter for block themes, and a pattern preview gives a better sense of what the theme might look like while exploring different themes and patterns.' ), + __( 'https://wordpress.org/themes/tags/full-site-editing/' ) + ); + ?> +

+
+
+ +
+
+
+ +
+

+

+ persistent for each user. This means your settings will now be consistent across browsers and devices.' ), + 'https://make.wordpress.org/core/2022/10/10/changes-to-block-editor-preferences-in-wordpress-6-1/' + ); + ?> +

+
+
+
+ +
+

+

+ styles engine are now all in one place, reducing time spent on layout-specific tasks and helps to generate semantic class names.' ), + 'https://make.wordpress.org/core/2022/10/10/block-styles-generation-style-engine/' + ); + ?> +

+
+
+ +
+
+
+ +
+

+

+ accessibility in WordPress.' ), + 'https://wordpress.org/about/accessibility/' + ); + ?> +

+
+
+
+ +
+

+

+

+ ' . __( 'General Settings' ) . '' : __( 'General Settings' ) + ); + ?> +

+

+
+
+ +
+
+
+ +
+

+

+ styling elements like buttons, citations, and links globally; controlling hover, active, and focus states for links using theme.json (not available to control in the interface yet); and customizing outline support for blocks and elements, among other features.' ), + 'https://make.wordpress.org/core/2022/10/10/styling-elements-in-block-themes/' + ); + ?> +

+
+
+
+ +
+

+

+ fine-grained control over these controls.' ), + 'https://make.wordpress.org/core/2022/10/10/updated-editor-layout-support-in-6-1-after-refactor/' + ); + ?> +

+
+
+ +
+
+
+ +
+

+

+ Block template parts can now be defined in classic themes by adding the appropriate HTML files to the %2$s directory at the root of the theme.' ), + 'https://make.wordpress.org/core/2022/10/04/block-based-template-parts-in-traditional-themes/', + 'parts' + ); + ?> +

+
+
+
+ +
+

+

+ New filters let Query Block variations support custom queries for more powerful variations and advanced hierarchical post types filtering options.' ), + 'https://make.wordpress.org/core/2022/10/10/extending-the-query-loop-block/' + ); + ?> +

+
+
+ +
+
+
+ +
+

+

+ Leverage filters in the Styles sidebar to control settings at all four levels of your site—core, theme, user, or block, from less to more specific.' ), + 'https://make.wordpress.org/core/2022/10/10/filters-for-theme-json-data/' + ); + ?> +

+
+
+
+ +
+

+

+ preset margin and padding values for multiple blocks.' ), + 'https://make.wordpress.org/core/2022/10/07/introduction-of-presets-across-padding-margin-and-block-gap/' + ); + ?> +

+
+
+ +
+
+
+ +
+

+

+ REST API to multisite, %3$s to core block registration, and new Site Health checks to the addition of the %6$s attribute to images, there are performance improvements for every type of site. A full breakdown can be found in the Performance Field Guide.' ), + 'https://make.wordpress.org/core/2022/10/10/performance-improvements-to-the-rest-api/', + 'https://make.wordpress.org/core/2022/10/10/multisite-improvements-in-wordpress-6-1/', + 'WP_Query', + 'https://make.wordpress.org/core/2022/10/07/improved-php-performance-for-core-blocks-registration/', + 'https://make.wordpress.org/core/2022/10/06/new-cache-site-health-checks-in-wordpress-6-1/', + 'async', + 'https://make.wordpress.org/core/2022/10/11/performance-field-guide-for-wordpress-6-1/' + ); + ?> +

+

+ Performance Lab plugin to your WordPress test site or sandbox.' ), + current_user_can( 'install_plugins' ) ? admin_url( 'plugin-install.php?s=slug%253Aperformance-lab&tab=search&type=term' ) : 'https://wordpress.org/plugins/performance-lab/' + ); + ?> +

+
+
+
+ +
+

+

+

+
+
+ +
+
+
+ +
+

+

+ Fluid typography lets you define font sizes that adapt for easy reading in any screen size.' ), + 'https://make.wordpress.org/core/2022/08/04/whats-new-in-gutenberg-13-8-3-august/#fluid-typography-support' + ); + ?> +

+
+
+ +
- - <?php echo esc_attr( __( 'Exploring WordPress 6.0 video' ) ); ?> + + <?php echo esc_attr( __( 'Exploring WordPress 6.1 video' ) ); ?>
@@ -272,9 +506,9 @@ require_once ABSPATH . 'wp-admin/admin-header.php';

Watch a brief overview video highlighting some of the major features debuting in WordPress 6.0.' ), - 'https://www.youtube.com/watch?v=oe452WcY7fA' + /* translators: %s: 6.1 overview video link. */ + __( 'See WordPress 6.1 in action! Watch a brief overview video highlighting some of the major features debuting in WordPress 6.1.' ), + '#' ); ?>

@@ -300,7 +534,7 @@ require_once ABSPATH . 'wp-admin/admin-header.php'; printf( /* translators: %s: WordPress Field Guide link. */ __( 'Check out the latest version of the WordPress Field Guide. It is overflowing with detailed developer notes to help you build with WordPress.' ), - __( 'https://make.wordpress.org/core/2022/05/03/wordpress-6-0-field-guide/' ) + __( '#' ) ); ?>

@@ -314,16 +548,16 @@ require_once ABSPATH . 'wp-admin/admin-header.php'; sprintf( /* translators: %s: WordPress version number. */ esc_url( __( 'https://wordpress.org/support/wordpress-version/version-%s/' ) ), - '6-0' + '6-1' ), - '6.0' + '6.1' ); ?>

-
+
diff --git a/src/wp-admin/css/about.css b/src/wp-admin/css/about.css index cece925143..564ae1b734 100644 --- a/src/wp-admin/css/about.css +++ b/src/wp-admin/css/about.css @@ -20,16 +20,16 @@ .about__container { /* Section backgrounds */ - --background: transparent; - --subtle-background: #f0f0f0; + --background: #274acd; + --subtle-background: #eff2ff; /* Main text color */ --text: #000; --text-light: #fff; /* Accent colors: used in header, on special classes. */ - --accent-1: #3858e9; /* Accent background, link color */ - --accent-2: #3858e9; /* Header background */ + --accent-1: #3858e9; /* Link color */ + --accent-2: #fffcb5; /* Accent background */ /* Navigation colors. */ --nav-background: #fff; @@ -99,17 +99,12 @@ } .about__section { - background: var(--background); + background: transparent; clear: both; } .about__container .has-accent-background-color { - background-color: var(--accent-1); - color: var(--text-light); -} - -.about__container .has-accent-background-color a { - color: var(--text-light); + background-color: var(--accent-2); } .about__container .has-transparent-background-color { @@ -117,7 +112,7 @@ } .about__container .has-accent-color { - color: var(--accent-1); + color: var(--accent-2); } .about__container .has-border { @@ -148,9 +143,9 @@ padding-bottom: var(--gap); } -.about__section .column[class*="background-color"], -.about__section:where([class*="background-color"]) .column, -.about__section .column.has-border { +.about__section .column[class*="background-color"]:not(.is-edge-to-edge), +.about__section:where([class*="background-color"]) .column:not(.is-edge-to-edge), +.about__section .column.has-border:not(.is-edge-to-edge) { padding-top: var(--gap); padding-bottom: var(--gap); } @@ -475,6 +470,14 @@ line-height: 1.4; } +.about__container h4, +.about__container h3.is-smaller-heading { + margin-top: 0; + font-size: 1.125rem; + font-weight: 700; + line-height: 1.6; +} + .about__container p { font-size: inherit; line-height: inherit; @@ -515,7 +518,7 @@ } .about__container li { - margin-bottom: 0.75rem; + margin-bottom: 0.5rem; } .about__container img { @@ -556,6 +559,7 @@ margin: 0; height: var(--gap); border: none; + border-top: 4px solid #d9d9d9; } .about__container hr.is-small { @@ -606,7 +610,8 @@ position: relative; margin-bottom: var(--gap); padding-top: 0; - background: var(--subtle-background) url('../images/about-header-about.svg?ver=6.0') no-repeat; + color: var(--text-light); + background: var(--background) no-repeat; background-size: var(--about-header-bg-width) var(--about-header-bg-height); background-position: right var(--about-header-bg-offset-inline) center; } @@ -649,6 +654,10 @@ padding-right: calc(var(--about-header-bg-width) + var(--about-header-bg-offset-inline) + var(--gap)); } +.about-php .about__header-title { + padding-right: 0; +} + .credits-php .about__header-title, .privacy-php .about__header-title { padding-top: 6rem;