diff --git a/src/wp-admin/about.php b/src/wp-admin/about.php index 13269ad58f..17d065972c 100644 --- a/src/wp-admin/about.php +++ b/src/wp-admin/about.php @@ -20,26 +20,18 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
- - ' ); ?>" /> - <?php _e( 'Code is Poetry' ); ?>' ); ?>" /> - + <?php _e( 'Code is Poetry' ); ?>
-
-
-

- - -

-
+
+

+ + +

+
-
- -
-
- <?php _e( 'New' ); ?>' ); ?>" /> -
+
+
-
-

- -

-

- -

-
- -
' ); ?>');"> -
-
-

-

-
-
-
-
-
-

-

-
-
-
-
-

-

-
+
+
+

+ +

+

+ +

-
-

-

- -

+
+

+ +

+
+

+ 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.' ); + ?> +

+

+ Buttons block: now you can align the content in buttons vertically. And you can set the width of a button to a preset percentage.' ); + ?> +

+

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

+
+
+
-
-
+
+
+

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

WordPress accessibility-ready guidelines and addresses several more specialized standards from the Web Content Accessibility Guidelines (WCAG) 2.1 at level AAA. It will help you meet the highest level of international accessibility standards when you create accessible content and choose plugins which are accessible too!' ), - 'https://make.wordpress.org/themes/handbook/review/accessibility/', + /* translators: %s: WCAG information link. */ + __( 'This new streamlined color palette collapses all the colors that used to be in the WordPress source code down to seven core colors and a range of 56 shades that meet the WCAG 2.0 AA recommended contrast ratio against white or black.' ), 'https://www.w3.org/WAI/WCAG2AAA-Conformance' ); ?>

+

+ +

-
- ' ); ?>" style="max-width:25em" alt="" /> +
+

+ +

+

+ check out the Color Palette dev note.' ), + 'https://make.wordpress.org/core/2021/02/23/standardization-of-wp-admin-colors-in-wordpress-5-7' + ); + ?> +

+
+
+ +
+
+ + + +
-
-

-
-

-

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

-
-
- -
-
-

-

-
-
-

+

+

+

feature plugin includes template copy for you to update and publish, and it’s written to support different contexts and jurisdictions.' ), - 'https://github.com/10degrees/accessibility-statement-plugin' - ); + _e( 'The new Robots API lets you include the filter directives in the robots meta tag, and the API includes the directive max-image-preview: large by default. That means search engines can show bigger image previews (unless the blog is marked as not public), which can boost your traffic.' ) ?>

-
-

-

-
-
- -
- -
-

-

-

-
-
-

-

- read the PHP 8 developer note.' ), - 'https://make.wordpress.org/core/2020/11/23/wordpress-and-php-8-0/' - ); - ?> -

-
-
-
-
-

-

- update test plugin to check your sites for errors ahead of time.' ), - current_user_can( 'install_plugins' ) ? - esc_url( network_admin_url( 'plugin-install.php?tab=search&type=term&s=slug:wp-jquery-update-test' ) ) : - esc_url( __( 'https://wordpress.org/plugins/wp-jquery-update-test/' ) ) - ); - ?> -

-

- jQuery Migrate plugin.' ), - current_user_can( 'install_plugins' ) ? - esc_url( network_admin_url( 'plugin-install.php?tab=search&type=term&s=slug:enable-jquery-migrate-helper' ) ) : - esc_url( __( 'https://wordpress.org/plugins/enable-jquery-migrate-helper/' ) ) - ); - ?> -

+

+

+

+

+

loading="lazy" attribute to iframe tags on the front end.' ); ?>

@@ -239,9 +214,9 @@ require_once ABSPATH . 'wp-admin/admin-header.php';

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

diff --git a/src/wp-admin/credits.php b/src/wp-admin/credits.php index 24985c16fb..e65f975208 100644 --- a/src/wp-admin/credits.php +++ b/src/wp-admin/credits.php @@ -22,10 +22,7 @@ $credits = wp_credits();
- - ' ); ?>" /> - <?php _e( 'Code is Poetry' ); ?>' ); ?>" /> - + <?php _e( 'Code is Poetry' ); ?>
@@ -37,10 +34,7 @@ $credits = wp_credits();
- -
-
- <?php _e( 'New' ); ?>' ); ?>" /> +
diff --git a/src/wp-admin/css/about.css b/src/wp-admin/css/about.css index d1844c8d5c..018042a9f3 100644 --- a/src/wp-admin/css/about.css +++ b/src/wp-admin/css/about.css @@ -19,31 +19,23 @@ ------------------------------------------------------------------------------*/ .about__container { - /* Colors from Twenty Twenty-One, will be removed after 5.6 */ - --global--color-green: #d1e4dd; - --global--color-blue: #d1dfe4; - --global--color-purple: #d1d1e4; - --global--color-red: #e4d1d1; - --global--color-orange: #e4dad1; - --global--color-yellow: #eeeadd; - /* Section backgrounds */ --background: #fff; - --subtle-background: var(--global--color-yellow); + --subtle-background: #fde4bf; /* Main text color */ - --text: #000; + --text: #00131c; --text-light: #fff; /* Accent colors: used in header, on special classes. */ - --accent-1: var(--global--color-green); /* Accent background */ - --accent-2: var(--text); /* Link color */ + --accent-1: #0a5b89; /* Accent background */ + --accent-2: #fde4bf; /* Heading subtitle */ /* Navigation colors. */ --nav-background: var(--background); - --nav-border: #767676; - --nav-color: #767676; - --nav-current: #000; + --nav-border: #fcc36f; + --nav-color: var(--text); + --nav-current: #0a5b88; } /*------------------------------------------------------------------------------ @@ -114,8 +106,10 @@ } .about__container .has-accent-background-color { - background-color: #d1e4dd; + background-color: #0a5b89; background-color: var(--accent-1); + color: #fff; + color: var(--text-light); } .about__container .has-transparent-background-color { @@ -123,7 +117,7 @@ } .about__container .has-accent-color { - color: #000; + color: #00131c; color: var(--text); font-weight: bold; } @@ -133,7 +127,7 @@ } .about__container .has-subtle-background-color { - background-color: #eeeadd; + background-color: #fde4bf; background-color: var(--subtle-background); } @@ -146,7 +140,7 @@ /* 1.1 - Layout */ .about__section { - margin: 1em 0; + margin: 0; } .about__section .column { @@ -157,6 +151,10 @@ padding-top: 0; } +.about__section + .about__section .is-section-header { + padding-bottom: 32px; +} + .about__section .column[class*="background-color"], .about__section .column.has-border { padding-top: 32px; @@ -447,6 +445,10 @@ } @media screen and (max-width: 480px) { + .about__section.is-feature .column { + padding: 0; + } + .about__section.has-4-columns { display: block; padding-bottom: 16px; @@ -470,7 +472,7 @@ .about__container { line-height: 1.4; - color: #000; + color: #00131c; color: var(--text); } @@ -492,9 +494,11 @@ } .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; } .about__container p { @@ -503,16 +507,16 @@ } .about__section a { - color: #000; - color: var(--accent-2); + color: #0a5b89; + color: var(--accent-1); text-decoration: underline; } .about__section a:hover, .about__section a:active, .about__section a:focus { - color: #000; - color: var(--accent-2); + color: #0a5b89; + color: var(--accent-1); text-decoration: none; } @@ -552,6 +556,50 @@ margin-right: auto; } +.about__container .about__image-comparison { + position: relative; + display: inline-block; + line-height: 0; + max-width: 100%; +} + +.about__container .about__image-comparison img { + user-select: none; + width: auto; + max-width: none; + max-height: 100%; +} + +.about__container .about__image-comparison > img { + max-width: 100%; +} + +.about__container .about__image-comparison-resize { + position: absolute; + top: 0; + bottom: 0; + left: 0; + width: 50%; + max-width: 100%; + overflow: hidden; + resize: horizontal; + border-right: 2px solid white; +} + +.about__container .about__image-comparison-resize:after { + content: ""; + display: block; + position: absolute; + right: 0; + bottom: 0; + width: 20px; + height: 20px; + font-family: dashicons; + font-size: 20px; + line-height: 1; + overflow: hidden; +} + .about__container .about__image + h3 { margin-top: 1.5em; } @@ -568,9 +616,7 @@ .about__container hr.is-large { height: 64px; - width: 2px; margin: 16px auto; - background: currentColor; } .about__container div.updated, @@ -585,14 +631,11 @@ .about__section.is-feature { font-size: 1.6em; - font-weight: 600; - text-align: center; } @media screen and (max-width: 480px) { .about__section.is-feature { font-size: 1.4em; - font-weight: 500; } .about__container h1, @@ -607,38 +650,24 @@ .about__header { margin-bottom: 32px; padding-top: 3em; - background-color: #d1e4dd; + background-position: bottom 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: #000; - color: var(--text); + color: #fff; + color: var(--text-light); } .about__header-image { margin: 0 32px 3em; } -.about__header-container { - display: -ms-grid; - display: grid; - -ms-grid-columns: 3fr 1fr; - grid-template-columns: 3fr 1fr; - -ms-grid-rows: auto auto; - grid-template-rows: auto auto; - justify-items: start; -} - .about__header-title { - display: inline-block; padding: 1em 0; - margin: 0 32px 4em; + margin: 0 32px; text-align: center; - border-width: 3px 0; - border-style: solid; - border-color: currentColor; - -ms-grid-column: 1; - grid-column: 1; - -ms-grid-row: 1; - grid-row: 1; } .about__header-title p { @@ -646,32 +675,19 @@ padding: 0; font-size: 6em; line-height: 1; - font-weight: 500; + font-weight: 900; + text-transform: uppercase; } .about__header-text { - margin: 0 32px 3em; - max-width: 13em; + max-width: 25em; + margin: 0 auto 8em; + padding: 0 16px; font-size: 1.5em; line-height: 1.4; - -ms-grid-column: 1; - grid-column: 1; - -ms-grid-row: 2; - grid-row: 2; -} - -.about__header-text p { - margin: 0; -} - -.about__header-badge { - -ms-grid-column: 2; - grid-column: 2; - -ms-grid-row: 1; - -ms-grid-row-span: 2; - grid-row: 1 / span 2; - -ms-grid-row-align: center; - align-self: center; + color: #fde4bf; + color: var(--accent-2); + text-align: center; } .about__header-navigation { @@ -679,9 +695,9 @@ padding-top: 0; background: #fff; background: var(--nav-background); - color: #767676; + color: #00131c; color: var(--nav-color); - border-bottom: 3px solid #767676; + border-bottom: 3px solid #fcc36f; border-bottom: 3px solid var(--nav-border); } @@ -699,31 +715,37 @@ .about__header-navigation .nav-tab:hover, .about__header-navigation .nav-tab:active { - background-color: #000; - background-color: var(--text); + background-color: #0a5b88; + background-color: var(--nav-current); color: #fff; color: var(--text-light); } .about__header-navigation .nav-tab-active { margin-bottom: -3px; - color: #000; + color: #0a5b88; color: var(--nav-current); border-width: 0 0 6px; - border-color: #000; + border-color: #0a5b88; border-color: var(--nav-current); } .about__header-navigation .nav-tab-active:hover, .about__header-navigation .nav-tab-active:active { - background-color: #000; - background-color: var(--text); + background-color: #0a5b88; + background-color: var(--nav-current); color: #fff; color: var(--text-light); - border-color: #000; + border-color: #0a5b88; border-color: var(--nav-current); } +@media screen and (max-width: 960px){ + .about__header-title p { + font-size: 4.8em; + } +} + @media screen and (max-width: 782px) { .about__container .about__header-text { font-size: 1.4em; @@ -734,21 +756,11 @@ } .about__header-title, - .about__header-text, - .about__header-image, - .about__header-badge { + .about__header-image { margin-left: 16px; margin-right: 16px; } - .about__header-text { - margin-bottom: 1em; - } - - .about__header-badge { - margin-bottom: 3em; - } - .about__header-navigation .nav-tab { margin-top: 0; margin-right: 0; @@ -757,8 +769,16 @@ } @media screen and (max-width: 480px) { + .about__header { + background-image: none; + } + .about__header-title p { - font-size: 3.2em; + font-size: 2.4em; + } + + .about__header-text { + margin-bottom: 1em; } .about__header-navigation .nav-tab { @@ -820,7 +840,7 @@ font-size: 1.4em; font-weight: 600; text-decoration: none; - color: #000; + color: #00131c; color: var(--text); } diff --git a/src/wp-admin/freedoms.php b/src/wp-admin/freedoms.php index 9ce2443ec6..1809e6488f 100644 --- a/src/wp-admin/freedoms.php +++ b/src/wp-admin/freedoms.php @@ -25,10 +25,7 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
- - ' ); ?>" /> - <?php _e( 'Code is Poetry' ); ?>' ); ?>" /> - + <?php _e( 'Code is Poetry' ); ?>
@@ -40,10 +37,7 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
- -
-
- <?php _e( 'New' ); ?>' ); ?>" /> +
diff --git a/src/wp-admin/images/about-badge.svg b/src/wp-admin/images/about-badge.svg new file mode 100644 index 0000000000..4843775daa --- /dev/null +++ b/src/wp-admin/images/about-badge.svg @@ -0,0 +1 @@ + diff --git a/src/wp-admin/images/about-color-palette-vert.svg b/src/wp-admin/images/about-color-palette-vert.svg new file mode 100644 index 0000000000..6ab2a48b9b --- /dev/null +++ b/src/wp-admin/images/about-color-palette-vert.svg @@ -0,0 +1 @@ + diff --git a/src/wp-admin/images/about-color-palette.svg b/src/wp-admin/images/about-color-palette.svg new file mode 100644 index 0000000000..360829aa2e --- /dev/null +++ b/src/wp-admin/images/about-color-palette.svg @@ -0,0 +1 @@ + diff --git a/src/wp-admin/images/about-header-brushes.svg b/src/wp-admin/images/about-header-brushes.svg new file mode 100644 index 0000000000..f5c47395b4 --- /dev/null +++ b/src/wp-admin/images/about-header-brushes.svg @@ -0,0 +1 @@ + diff --git a/src/wp-admin/privacy.php b/src/wp-admin/privacy.php index dbf2a39e9e..f520b9ed7c 100644 --- a/src/wp-admin/privacy.php +++ b/src/wp-admin/privacy.php @@ -19,10 +19,7 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
- - ' ); ?>" /> - <?php _e( 'Code is Poetry' ); ?>' ); ?>" /> - + <?php _e( 'Code is Poetry' ); ?>
@@ -34,10 +31,7 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
- -
-
- <?php _e( 'New' ); ?>' ); ?>" /> +