diff --git a/src/wp-admin/about.php b/src/wp-admin/about.php index 1cd366020b..6ce1bea579 100644 --- a/src/wp-admin/about.php +++ b/src/wp-admin/about.php @@ -22,19 +22,15 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
-
- <?php _e( 'Code is Poetry' ); ?> -
-
-

+

-

+

- +
-
+
+ +
+

+ +

+
+ +
+
-

- -

+

+ +

Widgets dev note.' ), + '#' + ); + ?> +

+
+
+ +
+ +
+
+

+ +

+

+ Query Loop Block dev note.' ), + '#' + ); + ?> +

+
+
+
+ +
+ +
+
+
+

+ +

+

+

@@ -66,144 +105,122 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
-
-

- +
+

+

-
-

- Font-size adjustment in more places: now, font-size controls are right where you need them in the List and Code blocks. No more trekking to another screen to make that single change!' ); - ?> -

-

- Reusable blocks: several enhancements make reusable blocks more stable and easier to use. And now they save automatically with the post when you click the Update button.' ); - ?> -

-

- Inserter drag-and-drop: drag blocks and block patterns from the inserter right into your post.' ); - ?> -

-
-
- -
-
-

- -

+
+
+

+ +

Full-height alignment: have you ever wanted to make a block, like the Cover block, fill the whole window? Now you can.' ); + _e( 'Sometimes you need a simple landing page, but sometimes you need something a little more robust. As blocks increase, patterns emerge, and content creation gets easier, new solutions are needed to make complex content easy to navigate. List View is the best way to jump between layers of content and nested blocks. Since the List View gives you an overview of all the blocks in your content, you can now navigate quickly to the precise block you need. Ready to focus completely on your content? Toggle it on or off to suit your workflow.' ); ?>

-

- Buttons block: now you can choose a vertical or a horizontal layout. And you can set the width of a button to a preset percentage.' ); - ?> -

-

- Social Icons block: now you can change the size of the icons.' ); - ?> -

-
-
-
-
-
-

-
-
- -
-
-
- <?php esc_attr_e( 'Dashboard with old color scheme.' ); ?> -
- <?php esc_attr_e( 'Dashboard with new color scheme.' ); ?> -
-
-
-
-
- -
+
+

+ +

WCAG 2.0 AA recommended contrast ratio against white or black.' ), - 'https://www.w3.org/WAI/WCAG2AAA-Conformance' - ); - ?> -

-

-

+
+
+ +
+ +
+
+

+ +

-

-

- check out the Color Palette dev note.' ), - 'https://make.wordpress.org/core/2021/02/23/standardization-of-wp-admin-colors-in-wordpress-5-7' - ); + _e( 'Colorize your image and cover blocks with duotone filters! Duotone can add a pop of color to your designs and style your images (or videos in the cover block) to integrate well with your themes. You can think of the duotone effect as a black and white filter, but instead of the shadows being black and the highlights being white, you pick your own colors for the shadows and highlights. There’s more to learn about how it works in the documentation.' ); ?>

-
-
- - - - +
+ +
+

+ +

+
+
+ +
+
+

+ +

+

+ +

-
+
-

-

-

+

+ +

max-image-preview: large directive by default. That means search engines can show bigger image previews, which can boost your traffic (unless the site is marked not-public).' ); + printf( + /* translators: %s: Link to Browse Happy. */ + __( 'Support for Internet Explorer 11 has been dropped as of this release. This means you may have issues managing your site that will not be fixed in the future. If you are currently using IE11, it is strongly recommended that you switch to a more modern browser.' ), + 'https://browsehappy.com/' + ); ?>

-

-

-

-

-

loading="lazy" attribute to iframe tags when both width and height are specified.' ); ?>

+

+ +

+

+ +

+
+
+

+ +

+

+ 5.6 and 5.7, WordPress 5.8 introduces several new block supports flags and new options to customize your registered blocks. More information is available in the block supports dev note.' ), + 'https://make.wordpress.org/core/2020/11/18/block-supports-in-wordpress-5-6/', + 'https://make.wordpress.org/core/2021/02/24/changes-to-block-editor-components-and-blocks/', + 'https://make.wordpress.org/core/2021/06/25/block-supports-api-updates-for-wordpress-5-8/' + ); + ?> +

@@ -215,9 +232,9 @@ require_once ABSPATH . 'wp-admin/admin-header.php';

WordPress 5.7 Field Guide.' ), - 'https://make.wordpress.org/core/2021/02/23/wordpress-5-7-field-guide' + /* translators: %s: WordPress 5.8 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.8 Field Guide.' ), + '#' ); ?>

@@ -238,83 +255,6 @@ require_once ABSPATH . 'wp-admin/admin-header.php'; -
-
- <?php _e( 'Code is Poetry' ); ?> +
+

+ +

-
-
-

- - -

-
- -
- -
+
+
-
-

- +

@@ -93,7 +84,7 @@ if ( ! $credits ) {

-
+
diff --git a/src/wp-admin/css/about.css b/src/wp-admin/css/about.css index a51f2753f7..06edd1bd93 100644 --- a/src/wp-admin/css/about.css +++ b/src/wp-admin/css/about.css @@ -20,22 +20,24 @@ .about__container { /* Section backgrounds */ - --background: #fff; - --subtle-background: #fde4bf; + --background: transparent; + --subtle-background: #def; /* Main text color */ - --text: #00131c; + --text: #000; --text-light: #fff; /* Accent colors: used in header, on special classes. */ - --accent-1: #0a5b89; /* Accent background */ - --accent-2: #fde4bf; /* Heading subtitle */ + --accent-1: #3858e9; /* Accent background, link color */ + --accent-2: #2d46ba; /* Header background */ /* Navigation colors. */ - --nav-background: var(--background); - --nav-border: #fcc36f; + --nav-background: #fff; + --nav-border: transparent; --nav-color: var(--text); - --nav-current: #0a5b88; + --nav-current: var(--accent-1); + + --gap: 2rem; } /*------------------------------------------------------------------------------ @@ -46,14 +48,14 @@ .credits-php, .freedoms-php, .privacy-php { - background: #fff; + background: #f0f7ff; } .about-php #wpcontent, .credits-php #wpcontent, .freedoms-php #wpcontent, .privacy-php #wpcontent { - background: white; + background: linear-gradient(180deg, #fff 50%, #f0f7ff 100%); padding: 0 24px; } @@ -97,20 +99,16 @@ } .about__section { - background: #fff; background: var(--background); clear: both; } .about__container .has-accent-background-color { - background-color: #0a5b89; background-color: var(--accent-1); - color: #fff; color: var(--text-light); } .about__container .has-accent-background-color a { - color: #fff; color: var(--text-light); } @@ -119,9 +117,7 @@ } .about__container .has-accent-color { - color: #00131c; - color: var(--text); - font-weight: bold; + color: var(--accent-1); } .about__container .has-border { @@ -129,7 +125,6 @@ } .about__container .has-subtle-background-color { - background-color: #fde4bf; background-color: var(--subtle-background); } @@ -142,11 +137,11 @@ /* 1.1 - Layout */ .about__section { - margin: 0; + margin: 0 0 var(--gap); } .about__section .column { - padding: 32px; + padding: var(--gap); } .about__section + .about__section .column { @@ -154,12 +149,12 @@ } .about__section + .about__section .is-section-header { - padding-bottom: 32px; + padding-bottom: var(--gap); } .about__section .column[class*="background-color"], .about__section .column.has-border { - padding-top: 32px; + padding-top: var(--gap); } .about__section .column.is-edge-to-edge { @@ -176,12 +171,12 @@ .about__section .has-text-columns { columns: 2; - column-gap: 64px; + column-gap: calc(var(--gap) * 2); } .about__section .is-section-header { margin-bottom: 0; - padding: 32px 32px 0; + padding: var(--gap) var(--gap) 0; } .about__section .is-section-header p:last-child { @@ -194,7 +189,7 @@ } .about__section.is-feature { - padding: 32px; + padding: var(--gap); } .about__section.is-feature p { @@ -202,7 +197,7 @@ } .about__section.is-feature p + p { - margin-top: 1rem; + margin-top: calc(var(--gap) / 2); } .about__section.has-1-column { @@ -219,7 +214,7 @@ } .about__section.has-gutters { - gap: 16px; + gap: calc(var(--gap) / 2); } .about__section.has-2-columns { @@ -333,13 +328,13 @@ .about__section.has-2-columns.is-wider-left, .about__section.has-3-columns { display: block; - padding-bottom: 16px; + padding-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: 16px; + margin-bottom: calc(var(--gap) / 2); } .about__section.has-2-columns.has-gutters .column:last-child, @@ -349,8 +344,8 @@ } .about__section.has-3-columns .column:nth-of-type(n) { - padding-top: 16px; - padding-bottom: 16px; + padding-top: calc(var(--gap) / 2); + padding-bottom: calc(var(--gap) / 2); } .about__section.has-4-columns { @@ -398,11 +393,11 @@ @media screen and (max-width: 600px) { .about__section.has-2-columns { display: block; - padding-bottom: 16px; + padding-bottom: calc(var(--gap) / 2); } .about__section.has-2-columns.has-gutters .column { - margin-bottom: 16px; + margin-bottom: calc(var(--gap) / 2); } .about__section.has-2-columns.has-gutters .column:last-child { @@ -410,8 +405,8 @@ } .about__section.has-2-columns .column:nth-of-type(n) { - padding-top: 16px; - padding-bottom: 16px; + padding-top: calc(var(--gap) / 2); + padding-bottom: calc(var(--gap) / 2); } } @@ -422,11 +417,11 @@ .about__section.has-4-columns { display: block; - padding-bottom: 16px; + padding-bottom: calc(var(--gap) / 2); } .about__section.has-4-columns.has-gutters .column { - margin-bottom: 16px; + margin-bottom: calc(var(--gap) / 2); } .about__section.has-4-columns.has-gutters .column:last-child { @@ -434,8 +429,8 @@ } .about__section.has-4-columns .column:nth-of-type(n) { - padding-top: 16px; - padding-bottom: 16px; + padding-top: calc(var(--gap) / 2); + padding-bottom: calc(var(--gap) / 2); } } @@ -443,14 +438,11 @@ .about__container { line-height: 1.4; - color: #00131c; color: var(--text); } .about__container h1 { - margin: 0 0 1em; padding: 0; - font-weight: 600; color: inherit; } @@ -459,17 +451,18 @@ .about__container h3.is-larger-heading { margin-top: 0; margin-bottom: 0.5em; - font-size: 2.9em; + font-size: 2em; line-height: 1.2; - font-weight: 400; + font-weight: 700; } .about__container h3, .about__container h1.is-smaller-heading, .about__container h2.is-smaller-heading { margin-top: 0; - font-size: 1.5em; - font-weight: 700; + font-size: 1.6em; + line-height: 1.3; + font-weight: 400; } .about__container p { @@ -478,7 +471,6 @@ } .about__section a { - color: #0a5b89; color: var(--accent-1); text-decoration: underline; } @@ -486,7 +478,6 @@ .about__section a:hover, .about__section a:active, .about__section a:focus { - color: #0a5b89; color: var(--accent-1); text-decoration: none; } @@ -503,7 +494,7 @@ .about__container ul { list-style: disc; - margin-left: 16px; + margin-left: calc(var(--gap) / 2); } .about__container img { @@ -561,7 +552,6 @@ .about__container .about__image-comparison.no-js .about__image-comparison-resize { overflow: hidden; - border-right: 2px solid #007cba; border-right: 2px solid var(--wp-admin-theme-color); } @@ -579,17 +569,17 @@ .about__container hr { margin: 0; - height: 32px; + height: var(--gap); border: none; } .about__container hr.is-small { - height: 8px; + height: calc(var(--gap) / 4); } .about__container hr.is-large { - height: 64px; - margin: 16px auto; + height: calc(var(--gap) * 2); + margin: calc(var(--gap) / 2) auto; } .about__container div.updated, @@ -621,62 +611,66 @@ /* 1.3 - Header */ .about__header { - margin-bottom: 32px; - padding-top: 3em; - background-position: bottom center; + margin-bottom: var(--gap); + padding-top: 0; + background-position: center; background-repeat: no-repeat; background-size: cover; - background-image: url('../images/about-header-brushes.svg'); - background-color: #0a5b89; - background-color: var(--accent-1); - color: #fff; + background-image: url('../images/about-header-about.svg'); + background-color: var(--accent-2); color: var(--text-light); } +.credits-php .about__header { + background-image: url('../images/about-header-credits.svg'); +} + +.freedoms-php .about__header { + background-image: url('../images/about-header-freedoms.svg'); +} + +.privacy-php .about__header { + background-image: url('../images/about-header-privacy.svg'); +} + .about__header-image { - margin: 0 32px 3em; + margin: 0 var(--gap) 3em; } .about__header-title { - padding: 1em 0; - margin: 0 32px; - text-align: center; + padding: 2rem 0 0; + margin: 0 2rem; } -.about__header-title p { - margin: 0; +.about__header-title h1 { + margin: 0 0 0.5rem; padding: 0; - font-size: 6em; + font-size: 4.5rem; line-height: 1; - font-weight: 900; - text-transform: uppercase; + font-weight: 400; } .about__header-text { - max-width: 25em; - margin: 0 auto 8em; - padding: 0 16px; - font-size: 1.5em; - line-height: 1.4; - color: #fde4bf; - color: var(--accent-2); - text-align: center; + max-width: 42rem; + margin: 0 0 5em; + padding: 0 2rem; + font-size: 2rem; + line-height: 1.15; } .about__header-navigation { - clear: both; + display: flex; + justify-content: center; padding-top: 0; - background: #fff; background: var(--nav-background); - color: #00131c; color: var(--nav-color); - border-bottom: 3px solid #fcc36f; border-bottom: 3px solid var(--nav-border); } .about__header-navigation .nav-tab { margin-left: 0; - padding: 24px 32px; + padding: calc(var(--gap) * 0.75) var(--gap); + float: none; font-size: 1.4em; line-height: 1; border-width: 0 0 3px; @@ -688,33 +682,26 @@ .about__header-navigation .nav-tab:hover, .about__header-navigation .nav-tab:active { - background-color: #0a5b88; background-color: var(--nav-current); - color: #fff; color: var(--text-light); } .about__header-navigation .nav-tab-active { margin-bottom: -3px; - color: #0a5b88; color: var(--nav-current); border-width: 0 0 6px; - border-color: #0a5b88; border-color: var(--nav-current); } .about__header-navigation .nav-tab-active:hover, .about__header-navigation .nav-tab-active:active { - background-color: #0a5b88; background-color: var(--nav-current); - color: #fff; color: var(--text-light); - border-color: #0a5b88; border-color: var(--nav-current); } @media screen and (max-width: 960px){ - .about__header-title p { + .about__header-title h1 { font-size: 4.8em; } } @@ -730,22 +717,20 @@ .about__header-title, .about__header-image { - margin-left: 16px; - margin-right: 16px; + margin-left: calc(var(--gap) / 2); + margin-right: calc(var(--gap) / 2); } + .about__header-text, .about__header-navigation .nav-tab { margin-top: 0; margin-right: 0; - padding: 24px 16px; + padding-left: calc(var(--gap) / 2); + padding-right: calc(var(--gap) / 2); } } @media screen and (max-width: 480px) { - .about__header { - background-image: none; - } - .about__header-title p { font-size: 2.4em; } @@ -754,11 +739,14 @@ margin-bottom: 1em; } + .about__header-navigation { + display: block; + } + .about__header-navigation .nav-tab { - float: none; display: block; margin-bottom: 0; - padding: 16px 16px; + padding: calc(var(--gap) / 2); border-left-width: 6px; border-bottom: none; } @@ -774,47 +762,59 @@ 2.0 - Credits Page ------------------------------------------------------------------------------*/ +.about__section .wp-people-group-title { + margin-bottom: calc(var(--gap) * 2); + text-align: center; + +} + .about__section .wp-people-group { margin: 0; + display: flex; + flex-wrap: wrap; } .about__section .wp-person { display: inline-block; vertical-align: top; box-sizing: border-box; - padding: 0 1em 1em 0; - height: 6em; - width: calc( 33% - 4px ); - min-width: 280px; + margin-bottom: var(--gap); + width: 25%; + text-align: center; } .about__section .compact .wp-person { height: auto; - width: calc( 25% - 4px ); - min-width: 220px; - padding-bottom: 0.5em; + width: 20%; +} + +.about__section .wp-person-avatar { + display: block; + margin: 0 auto calc(var(--gap) / 2); + width: 160px; + height: 160px; + border-radius: 100%; + overflow: hidden; + background: var(--accent-1); } .about__section .wp-person .gravatar { - float: left; - margin: -4px 0.85em 0.85em 0; - padding: 1px; - width: 80px; - height: 80px; - border-radius: 100%; + width: 160px; + height: 160px; + filter: grayscale(100%); + mix-blend-mode: screen; } +.about__section .compact .wp-person-avatar, .about__section .compact .wp-person .gravatar { - width: 40px; - height: 40px; + width: 80px; + height: 80px; } .about__section .wp-person .web { font-size: 1.4em; font-weight: 600; text-decoration: none; - color: #00131c; - color: var(--text); } .about__section .wp-person .web:hover { @@ -830,16 +830,41 @@ margin-top: 0.5em; } +@media screen and (max-width: 782px) { + .about__section .wp-person { + width: 33%; + } + + .about__section .compact .wp-person { + width: 25%; + } + + .about__section .wp-person-avatar, + .about__section .wp-person .gravatar { + width: 120px; + height: 120px; + } +} + +@media screen and (max-width: 600px) { + .about__section .wp-person { + width: 50%; + } + + .about__section .compact .wp-person { + width: 33%; + } + + .about__section .wp-person .web { + font-size: 1.2em; + } +} + @media screen and (max-width: 480px) { .about__section .wp-person { min-width: 100%; } - .about__section .wp-person .gravatar { - width: 60px; - height: 60px; - } - .about__section .wp-person .web { font-size: 1em; } diff --git a/src/wp-admin/freedoms.php b/src/wp-admin/freedoms.php index dae9cc1b55..2b4de1b70a 100644 --- a/src/wp-admin/freedoms.php +++ b/src/wp-admin/freedoms.php @@ -24,21 +24,14 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
-
- <?php _e( 'Code is Poetry' ); ?> +
+

+ +

-
-
-

- - -

-
- -
- -
+
+
-

-

diff --git a/src/wp-admin/images/about-color-palette-vert.svg b/src/wp-admin/images/about-color-palette-vert.svg deleted file mode 100644 index 6ab2a48b9b..0000000000 --- a/src/wp-admin/images/about-color-palette-vert.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/src/wp-admin/images/about-color-palette.svg b/src/wp-admin/images/about-color-palette.svg deleted file mode 100644 index 360829aa2e..0000000000 --- a/src/wp-admin/images/about-color-palette.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/src/wp-admin/images/about-header-about.svg b/src/wp-admin/images/about-header-about.svg new file mode 100644 index 0000000000..ea6db98a31 --- /dev/null +++ b/src/wp-admin/images/about-header-about.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/wp-admin/images/about-header-brushes.svg b/src/wp-admin/images/about-header-brushes.svg deleted file mode 100644 index f5c47395b4..0000000000 --- a/src/wp-admin/images/about-header-brushes.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/src/wp-admin/images/about-header-credits.svg b/src/wp-admin/images/about-header-credits.svg new file mode 100644 index 0000000000..8154f18709 --- /dev/null +++ b/src/wp-admin/images/about-header-credits.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/wp-admin/images/about-header-freedoms.svg b/src/wp-admin/images/about-header-freedoms.svg new file mode 100644 index 0000000000..bf309005e7 --- /dev/null +++ b/src/wp-admin/images/about-header-freedoms.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/wp-admin/images/about-header-privacy.svg b/src/wp-admin/images/about-header-privacy.svg new file mode 100644 index 0000000000..5bf69b2cea --- /dev/null +++ b/src/wp-admin/images/about-header-privacy.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/src/wp-admin/includes/credits.php b/src/wp-admin/includes/credits.php index 328bb84c34..c6ff5e79ea 100644 --- a/src/wp-admin/includes/credits.php +++ b/src/wp-admin/includes/credits.php @@ -149,10 +149,10 @@ function wp_credits_section_list( $credits = array(), $slug = '' ) { foreach ( $group_data['data'] as $person_data ) { echo '

  • ' . "\n\t"; echo ''; - $size = $compact ? 40 : 80; + $size = $compact ? 80 : 160; $data = get_avatar_data( $person_data[1] . '@md5.gravatar.com', array( 'size' => $size ) ); $data2x = get_avatar_data( $person_data[1] . '@md5.gravatar.com', array( 'size' => $size * 2 ) ); - echo '' . "\n"; + echo '' . "\n"; echo esc_html( $person_data[0] ) . "\n\t"; if ( ! $compact ) { // phpcs:ignore WordPress.WP.I18n.LowLevelTranslationFunction,WordPress.WP.I18n.NonSingularStringLiteralText diff --git a/src/wp-admin/privacy.php b/src/wp-admin/privacy.php index 57ea379021..3fb44b1b67 100644 --- a/src/wp-admin/privacy.php +++ b/src/wp-admin/privacy.php @@ -18,21 +18,14 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
    -
    - <?php _e( 'Code is Poetry' ); ?> +
    +

    + +

    -
    -
    -

    - - -

    -
    - -
    - -
    +
    +