diff --git a/src/wp-admin/about.php b/src/wp-admin/about.php index 0944d0536f..a5802ecfa6 100644 --- a/src/wp-admin/about.php +++ b/src/wp-admin/about.php @@ -54,14 +54,16 @@ require_once ABSPATH . 'wp-admin/admin-header.php'; ?>

- +

-
- +
+
+ +

@@ -92,14 +94,18 @@ require_once ABSPATH . 'wp-admin/admin-header.php'; ?>

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

@@ -108,7 +114,7 @@ require_once ABSPATH . 'wp-admin/admin-header.php'; printf( /* translators: %s: Link to layout support refactor dev note. */ __( 'Upgrades to the 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/' + 'https://make.wordpress.org/core/2022/10/11/roster-of-design-tools-per-block/' ); ?>

@@ -128,22 +134,24 @@ require_once ABSPATH . 'wp-admin/admin-header.php'; ?>

-
- +
+
+ +
- +

- +

@@ -153,32 +161,32 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
- +

- +

- +
-

+

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/' + /* translators: %s: Link to fluid typography demo. */ + __( 'Fluid typography lets you define font sizes that adapt for easy reading in any screen size.' ), + 'https://make.wordpress.org/core/2022/10/03/fluid-font-sizes-in-wordpress-6-1/' ); ?> +

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

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

@@ -208,7 +216,7 @@ require_once ABSPATH . 'wp-admin/admin-header.php'; printf( /* translators: %s: Link to "full site editing" themes on WordPress.org. */ __( 'The Themes Directory has 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/' ) + esc_url( __( 'https://wordpress.org/themes/tags/full-site-editing/' ) ) ); ?>

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

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

@@ -259,16 +267,16 @@ require_once ABSPATH . 'wp-admin/admin-header.php';

accessibility in WordPress.' ), - 'https://wordpress.org/about/accessibility/' + 'https://make.wordpress.org/core/2022/10/11/wordpress-6-1-accessibility-improvements/' ); ?>

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

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

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

@@ -340,7 +348,8 @@ require_once ABSPATH . 'wp-admin/admin-header.php';

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

@@ -380,7 +389,8 @@ require_once ABSPATH . 'wp-admin/admin-header.php';

@@ -398,10 +408,7 @@ require_once ABSPATH . 'wp-admin/admin-header.php';

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

@@ -446,7 +453,7 @@ require_once ABSPATH . 'wp-admin/admin-header.php'; printf( /* translators: %s: Link to install Performance Lab plugin if permitted, otherwise link to plugin on WordPress.org. */ __( 'Be among the first to get the latest improvements by adding the 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/' + current_user_can( 'install_plugins' ) ? admin_url( 'plugin-install.php?s=slug%253Aperformance-lab&tab=search&type=term' ) : esc_url( __( 'https://wordpress.org/plugins/performance-lab/' ) ) ); ?>

@@ -455,33 +462,20 @@ require_once ABSPATH . 'wp-admin/admin-header.php';

-

-

-
-
- -
-
-
- -
-

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' + /* translators: %s: Link to content locking dev note. */ + __( 'Thanks to content-only editing settings, layouts can be locked within container blocks. In a content-only block, its children are invisible to the List View and entirely uneditable. So you control the layout while your writers can focus on the content.' ), + 'https://make.wordpress.org/core/2022/10/11/content-locking-features-and-updates/' ); ?>

+

@@ -520,10 +514,9 @@ require_once ABSPATH . 'wp-admin/admin-header.php';

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/' + /* translators: 1: Learn WordPress link. */ + __( 'Explore learn.wordpress.org for tutorial videos, online workshops, courses, and lesson plans for Meetup organizers, including new features in WordPress.' ), + 'https://learn.wordpress.org/' ); ?>

@@ -534,7 +527,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/10/12/wordpress-6-1-field-guide/' ) ); ?>

diff --git a/src/wp-admin/credits.php b/src/wp-admin/credits.php index fed55c3611..2aac41f783 100644 --- a/src/wp-admin/credits.php +++ b/src/wp-admin/credits.php @@ -46,7 +46,7 @@ $credits = wp_credits();
-
+
@@ -82,7 +82,7 @@ if ( ! $credits ) { } ?> -
+
diff --git a/src/wp-admin/css/about.css b/src/wp-admin/css/about.css index 564ae1b734..cac1043635 100644 --- a/src/wp-admin/css/about.css +++ b/src/wp-admin/css/about.css @@ -28,7 +28,7 @@ --text-light: #fff; /* Accent colors: used in header, on special classes. */ - --accent-1: #3858e9; /* Link color */ + --accent-1: #3858e9; /* Link color, credit image overlay */ --accent-2: #fffcb5; /* Accent background */ /* Navigation colors. */ @@ -132,7 +132,7 @@ /* 1.1 - Layout */ .about__section { - margin: 0 0 var(--gap); + margin: 0; } .about__section .column:not(.is-edge-to-edge) { @@ -204,7 +204,7 @@ .about__section.has-gutters { gap: var(--gap); - margin-bottom: calc(var(--gap) * 2); + margin-bottom: var(--gap); } .about__section.has-2-columns { @@ -601,46 +601,41 @@ /* 1.3 - Header */ .about__header { - --about-header-image-width: 521px; - --about-header-image-height: 504px; + --about-header-image-width: 780px; + --about-header-image-height: 550px; --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); + --about-header-bg-offset-block: 0; position: relative; margin-bottom: var(--gap); padding-top: 0; color: var(--text-light); - background: var(--background) no-repeat; + background: var(--background) url('../images/about-header-about.svg?ver=6.1') no-repeat; background-size: var(--about-header-bg-width) var(--about-header-bg-height); - background-position: right var(--about-header-bg-offset-inline) center; + background-position: center top var(--about-header-bg-offset-block); } .credits-php .about__header { - --about-header-image-width: 477px; - --about-header-image-height: 470px; - --about-header-bg-offset-inline: calc(var(--gap) * -4); + --about-header-image-width: 863px; + --about-header-image-height: 550px; - background-image: url('../images/about-header-credits.svg?ver=6.0'); - background-position: right var(--about-header-bg-offset-inline) top var(--gap); + background-image: url('../images/about-header-credits.svg?ver=6.1'); } .freedoms-php .about__header { - --about-header-image-width: 411px; - --about-header-image-height: 498px; - --about-header-bg-offset-inline: var(--gap); + --about-header-image-width: 782px; + --about-header-image-height: 510px; - background-image: url('../images/about-header-freedoms.svg?ver=6.0'); - background-position: right var(--about-header-bg-offset-inline) top calc(var(--gap) * 4); + background-image: url('../images/about-header-freedoms.svg?ver=6.1'); } .privacy-php .about__header { - --about-header-image-width: 277px; - --about-header-image-height: 361px; - --about-header-bg-offset-inline: var(--gap); + --about-header-image-width: 1005px; + --about-header-image-height: 500px; + --about-header-bg-offset-block: calc(var(--gap) * -2); - background-image: url('../images/about-header-privacy.svg?ver=6.0'); - background-position: right var(--about-header-bg-offset-inline) top var(--gap); + background-image: url('../images/about-header-privacy.svg?ver=6.1'); } .about__header-image { @@ -649,48 +644,39 @@ .about__header-title { box-sizing: border-box; - 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)); -} - -.about-php .about__header-title { - padding-right: 0; -} - -.credits-php .about__header-title, -.privacy-php .about__header-title { - padding-top: 6rem; -} - -.freedoms-php .about__header-title { - padding-top: 3rem; + margin: 0 var(--gap); + padding: 9rem 0 0; + text-align: center; } .about__header-title h1 { margin: 0 0 1rem; padding: 0; - font-size: clamp(3rem, 18.46vw - 8.08rem, 6rem); + /* Fluid font size scales on browser size 960px - 1200px. */ + font-size: clamp(3rem, 20vw - 9rem, 6rem); line-height: 1; font-weight: 400; } +.credits-php .about__header-title h1, +.privacy-php .about__header-title h1, +.freedoms-php .about__header-title h1 { + /* Fluid font size scales on browser size 960px - 1200px. */ + font-size: clamp(3rem, 10vw - 3rem, 4.5rem); +} + .about__header-text { box-sizing: border-box; - 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)); + max-width: 22em; + margin: 0 auto 10rem; + padding: 0; font-size: 1.6rem; line-height: 1.15; + text-align: center; } -.credits-php .about__header-text, -.privacy-php .about__header-text { - margin-bottom: 7rem; -} - -.freedoms-php .about__header-text { - margin-bottom: 6rem; +.credits-php .about__header-text { + margin-bottom: 9rem; } .about__header-navigation { @@ -739,13 +725,24 @@ @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-bg-width: calc(var(--about-header-image-width) * 0.85); + --about-header-bg-height: calc(var(--about-header-image-height) * 0.85); + } + + .privacy-php .about__header { + --about-header-bg-offset-block: 0; } .about__header-title h1 { - font-size: clamp(3rem, 18.46vw - 5.08rem, 6rem); + /* Fluid font size scales on browser size 600px - 960px. */ + font-size: clamp(3rem, 13.33vw - 2rem, 6rem); + } + + .credits-php .about__header-title h1, + .privacy-php .about__header-title h1, + .freedoms-php .about__header-title h1 { + /* Fluid font size scales on browser size 600px - 960px. */ + font-size: clamp(3rem, 6.67vw - 0.5rem, 4.5rem); } } @@ -766,8 +763,6 @@ .about__header-text { margin-top: 0; - margin-right: 0; - padding-left: calc(var(--gap) / 2); } .about__header-navigation .nav-tab { @@ -779,6 +774,13 @@ } @media screen and (max-width: 600px) { + .about__header { + --about-header-bg-width: calc(var(--about-header-image-width) * 0.75); + --about-header-bg-height: calc(var(--about-header-image-height) * 0.75); + } +} + +@media screen and (max-width: 480px) { .about__header, .credits-php .about__header, .privacy-php .about__header, @@ -786,17 +788,6 @@ 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) { .about__header-title p { font-size: 2.4em; } @@ -805,7 +796,10 @@ padding-top: 2rem; } - .about__header-text { + .about__header-text, + .credits-php .about__header-text { + margin-left: calc(var(--gap) / 2); + margin-right: calc(var(--gap) / 2); margin-bottom: 2rem; } diff --git a/src/wp-admin/images/about-header-about.svg b/src/wp-admin/images/about-header-about.svg index 0cdcff5d90..c146e8e657 100644 --- a/src/wp-admin/images/about-header-about.svg +++ b/src/wp-admin/images/about-header-about.svg @@ -1,5 +1 @@ - + diff --git a/src/wp-admin/images/about-header-credits.svg b/src/wp-admin/images/about-header-credits.svg index d32db05df4..c954e3bac8 100644 --- a/src/wp-admin/images/about-header-credits.svg +++ b/src/wp-admin/images/about-header-credits.svg @@ -1,9 +1 @@ - + diff --git a/src/wp-admin/images/about-header-freedoms.svg b/src/wp-admin/images/about-header-freedoms.svg index ef669888ab..85ddf75cfd 100644 --- a/src/wp-admin/images/about-header-freedoms.svg +++ b/src/wp-admin/images/about-header-freedoms.svg @@ -1,6 +1 @@ - + diff --git a/src/wp-admin/images/about-header-privacy.svg b/src/wp-admin/images/about-header-privacy.svg index 658a070034..3a11bfd343 100644 --- a/src/wp-admin/images/about-header-privacy.svg +++ b/src/wp-admin/images/about-header-privacy.svg @@ -1,4 +1 @@ - +