Help/About: Update the 5.3 About page.

* Remove the SVG from the upper right corner.
* Make sure admin notices that should be hidden stay hidden.
* Address a11y issues with contrast.
* Fix an issue with the active nav tab hover.
* Prevent names on the credits from breaking out of the box.
* Update two strings with a more accurate information.

Previously [46556], [46572], [46616].

Props ryelle, afercia, audrasjb, francina, mapk, desrosj, YordanSoares, melchoyce, azaozz, johnbillion, davidbaumwald, luminuu, bwmarkle, la-geek, SergeyBiryukov.
See #47708.
Built from https://develop.svn.wordpress.org/trunk@46705


git-svn-id: http://core.svn.wordpress.org/trunk@46505 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Sergey Biryukov 2019-11-11 16:07:03 +00:00
parent 1fceddf46b
commit ba249d8951
9 changed files with 165 additions and 63 deletions

View File

@ -26,9 +26,7 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
</h1>
</div>
<div class="about__header-badge">
<img src="https://wordpress.org/images/core/5.4/code-is-poetry-rc.svg" alt="<?php _e( 'Code is Poetry' ); ?>" />
</div>
<div class="about__header-badge"></div>
<div class="about__header-text">
<p>
@ -52,7 +50,7 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
<div class="about__section is-feature">
<p>
<?php _e( '5.3 expands and refines the block editor introduced in WordPress 5.0 with new blocks, more intuitive interactions, and improved accessibility. New features in the editor increase design freedoms, provide additional layout options and style variations to allow designers complete control over the look of a site. This release also introduces the Twenty Twenty theme giving the user more design flexibility and integration with the block editor. Creating beautiful web pages and advanced layouts has never been easier.' ); ?>
<?php _e( '5.3 expands and refines the block editor introduced in WordPress 5.0 with a new block, more intuitive interactions, and improved accessibility. New features in the editor increase design freedoms, provide additional layout options and style variations to allow designers complete control over the look of a site. This release also introduces the Twenty Twenty theme giving the user more design flexibility and integration with the block editor. Creating beautiful web pages and advanced layouts has never been easier.' ); ?>
</p>
</div>
@ -92,7 +90,7 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
<li><?php _e( 'The new Group block lets you easily divide your page into colorful sections' ); ?></li>
<li><?php _e( 'The Columns block now supports fixed column widths' ); ?></li>
<li><?php _e( 'The new Predefined layouts make it a cinch to arrange content into advanced designs' ); ?></li>
<li><?php _e( 'Heading blocks now offer controls for text and background color' ); ?></li>
<li><?php _e( 'Heading blocks now offer controls for text color' ); ?></li>
<li><?php _e( 'Additional style options allow you to set your preferred style for any block that supports this feature' ); ?></li>
</ul>
</div>

View File

@ -28,9 +28,7 @@ $credits = wp_credits();
</h1>
</div>
<div class="about__header-badge">
<img src="https://wordpress.org/images/core/5.4/code-is-poetry-rc.svg" alt="<?php _e( 'Code is Poetry' ); ?>" />
</div>
<div class="about__header-badge"></div>
<div class="about__header-text">
<p>

View File

@ -19,16 +19,18 @@
x.5.0 Legacy About Styles: Media Queries
------------------------------------------------------------------------------*/
:root {
/* Beiges, used as text backgrounds. */
--base-1: #FEFCF7;
--base-2: #F4EFE1;
--base-3: #D7D2C5;
--base-4: #7B776C;
--text: #413E38;
/* Reds, used as accents, backgrounds, etc */
--accent-1: #BD3854;
--accent-2: #5F1B29;
.about__container {
/* Section backgrounds */
--background: #f4efe1;
--subtle-background: #d7d2c5;
/* Main text color */
--text: #413e38;
/* Navigation colors. */
--nav-background: #fefcf7;
--nav-color: #716d64;
/* Reds, used as accents & in header. */
--accent-1: #bd3854;
--accent-2: #5f1b29;
--accent-3: #321017;
}
@ -36,6 +38,13 @@
1.0 - Global: About, Credits, Freedoms, Privacy
------------------------------------------------------------------------------*/
.about-php,
.credits-php,
.freedoms-php,
.privacy-php {
background: #fff;
}
.about-php #wpcontent,
.credits-php #wpcontent,
.freedoms-php #wpcontent,
@ -56,6 +65,7 @@
.about__container {
max-width: 1000px;
margin: 24px auto;
clear: both;
}
.about__container .alignleft {
@ -87,7 +97,7 @@
.about__section {
background: #F4EFE1;
background: var(--base-2);
background: var(--background);
}
.about__container .has-accent-background-color {
@ -97,7 +107,7 @@
.about__container .has-subtle-background-color {
background-color: #D7D2C5;
background-color: var(--base-3);
background-color: var(--subtle-background);
}
/* 1.1 - Layout */
@ -296,6 +306,13 @@
line-height: inherit;
}
.about__section a,
.about__section a:hover,
.about__section a:active,
.about__section a:focus {
color: inherit;
}
.about__container ul {
list-style: disc;
margin-right: 16px;
@ -326,13 +343,19 @@
border: none;
}
.about__container div.updated,
.about__container div.error,
.about__container .notice {
display: none !important;
}
.about__section {
font-size: 1.2em;
}
.about__section.is-feature {
font-size: 1.6em;
font-weight: bold;
font-weight: 600;
}
@media screen and (max-width: 782px) {
@ -395,7 +418,7 @@
.about__header-title h1 span {
display: block;
font-weight: bold;
font-weight: 600;
font-size: 1.2em;
line-height: 1;
}
@ -426,7 +449,7 @@
background-color: #321017;
background-color: var(--accent-3);
color: white;
font-size: 1.6em;
font-size: 1.5em;
line-height: 1.4;
}
@ -442,15 +465,14 @@
grid-row: 3;
padding-top: 0;
background: #FEFCF7;
background: var(--base-1);
color: #7B776C;
color: var(--base-4);
background: var(--nav-background);
color: #716d64;
color: var(--nav-color);
border-bottom: 3px solid currentColor;
}
.about__header-navigation .nav-tab {
margin-right: 0;
margin-bottom: -3px;
padding: 24px 32px;
font-size: 1.4em;
line-height: 1;
@ -461,12 +483,26 @@
color: inherit;
}
.about__header-navigation .nav-tab:hover,
.about__header-navigation .nav-tab:active {
background-color: #F4EFE1;
background-color: var(--background);
}
.about__header-navigation .nav-tab-active {
margin-bottom: -3px;
border-width: 0 0 6px;
color: #BD3854;
color: var(--accent-1);
border-color: currentColor;
}
.about__header-navigation .nav-tab-active:hover,
.about__header-navigation .nav-tab-active:active {
background-color: transparent;
border-color: currentColor;
}
@media screen and (max-width: 782px) {
.about__container .about__header-text {
font-size: 1.4em;
@ -506,7 +542,7 @@
border-bottom: none;
border-right-width: 3px;
background: #F4EFE1;
background: var(--base-2);
background: var(--background);
}
}
@ -557,7 +593,7 @@
.about__section .wp-person .web {
font-size: 1.4em;
font-weight: 700;
font-weight: 600;
text-decoration: none;
color: #413E38;
color: var(--text);
@ -576,6 +612,25 @@
margin-top: 0.5em;
}
@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;
}
.about__section .compact .wp-person .web {
font-size: 1em;
}
}
/*------------------------------------------------------------------------------
3.0 - Freedoms Page
@ -685,7 +740,7 @@
}
.about-wrap h2 {
margin: 40px 0 .6em;
margin: 40px 0 0.6em;
font-size: 2.7em;
line-height: 1.3;
font-weight: 300;
@ -693,7 +748,7 @@
}
.about-wrap h3 {
margin: 1.25em 0 .6em;
margin: 1.25em 0 0.6em;
font-size: 1.4em;
line-height: 1.5;
}

File diff suppressed because one or more lines are too long

View File

@ -18,16 +18,18 @@
x.5.0 Legacy About Styles: Media Queries
------------------------------------------------------------------------------*/
:root {
/* Beiges, used as text backgrounds. */
--base-1: #FEFCF7;
--base-2: #F4EFE1;
--base-3: #D7D2C5;
--base-4: #7B776C;
--text: #413E38;
/* Reds, used as accents, backgrounds, etc */
--accent-1: #BD3854;
--accent-2: #5F1B29;
.about__container {
/* Section backgrounds */
--background: #f4efe1;
--subtle-background: #d7d2c5;
/* Main text color */
--text: #413e38;
/* Navigation colors. */
--nav-background: #fefcf7;
--nav-color: #716d64;
/* Reds, used as accents & in header. */
--accent-1: #bd3854;
--accent-2: #5f1b29;
--accent-3: #321017;
}
@ -35,6 +37,13 @@
1.0 - Global: About, Credits, Freedoms, Privacy
------------------------------------------------------------------------------*/
.about-php,
.credits-php,
.freedoms-php,
.privacy-php {
background: #fff;
}
.about-php #wpcontent,
.credits-php #wpcontent,
.freedoms-php #wpcontent,
@ -55,6 +64,7 @@
.about__container {
max-width: 1000px;
margin: 24px auto;
clear: both;
}
.about__container .alignleft {
@ -86,7 +96,7 @@
.about__section {
background: #F4EFE1;
background: var(--base-2);
background: var(--background);
}
.about__container .has-accent-background-color {
@ -96,7 +106,7 @@
.about__container .has-subtle-background-color {
background-color: #D7D2C5;
background-color: var(--base-3);
background-color: var(--subtle-background);
}
/* 1.1 - Layout */
@ -295,6 +305,13 @@
line-height: inherit;
}
.about__section a,
.about__section a:hover,
.about__section a:active,
.about__section a:focus {
color: inherit;
}
.about__container ul {
list-style: disc;
margin-left: 16px;
@ -325,13 +342,19 @@
border: none;
}
.about__container div.updated,
.about__container div.error,
.about__container .notice {
display: none !important;
}
.about__section {
font-size: 1.2em;
}
.about__section.is-feature {
font-size: 1.6em;
font-weight: bold;
font-weight: 600;
}
@media screen and (max-width: 782px) {
@ -394,7 +417,7 @@
.about__header-title h1 span {
display: block;
font-weight: bold;
font-weight: 600;
font-size: 1.2em;
line-height: 1;
}
@ -425,7 +448,7 @@
background-color: #321017;
background-color: var(--accent-3);
color: white;
font-size: 1.6em;
font-size: 1.5em;
line-height: 1.4;
}
@ -441,15 +464,14 @@
grid-row: 3;
padding-top: 0;
background: #FEFCF7;
background: var(--base-1);
color: #7B776C;
color: var(--base-4);
background: var(--nav-background);
color: #716d64;
color: var(--nav-color);
border-bottom: 3px solid currentColor;
}
.about__header-navigation .nav-tab {
margin-left: 0;
margin-bottom: -3px;
padding: 24px 32px;
font-size: 1.4em;
line-height: 1;
@ -460,12 +482,26 @@
color: inherit;
}
.about__header-navigation .nav-tab:hover,
.about__header-navigation .nav-tab:active {
background-color: #F4EFE1;
background-color: var(--background);
}
.about__header-navigation .nav-tab-active {
margin-bottom: -3px;
border-width: 0 0 6px;
color: #BD3854;
color: var(--accent-1);
border-color: currentColor;
}
.about__header-navigation .nav-tab-active:hover,
.about__header-navigation .nav-tab-active:active {
background-color: transparent;
border-color: currentColor;
}
@media screen and (max-width: 782px) {
.about__container .about__header-text {
font-size: 1.4em;
@ -505,7 +541,7 @@
border-bottom: none;
border-left-width: 3px;
background: #F4EFE1;
background: var(--base-2);
background: var(--background);
}
}
@ -556,7 +592,7 @@
.about__section .wp-person .web {
font-size: 1.4em;
font-weight: 700;
font-weight: 600;
text-decoration: none;
color: #413E38;
color: var(--text);
@ -575,6 +611,25 @@
margin-top: 0.5em;
}
@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;
}
.about__section .compact .wp-person .web {
font-size: 1em;
}
}
/*------------------------------------------------------------------------------
3.0 - Freedoms Page
@ -684,7 +739,7 @@
}
.about-wrap h2 {
margin: 40px 0 .6em;
margin: 40px 0 0.6em;
font-size: 2.7em;
line-height: 1.3;
font-weight: 300;
@ -692,7 +747,7 @@
}
.about-wrap h3 {
margin: 1.25em 0 .6em;
margin: 1.25em 0 0.6em;
font-size: 1.4em;
line-height: 1.5;
}

File diff suppressed because one or more lines are too long

View File

@ -31,9 +31,7 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
</h1>
</div>
<div class="about__header-badge">
<img src="https://wordpress.org/images/core/5.4/code-is-poetry-rc.svg" alt="<?php _e( 'Code is Poetry' ); ?>" />
</div>
<div class="about__header-badge"></div>
<div class="about__header-text">
<p>

View File

@ -25,9 +25,7 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
</h1>
</div>
<div class="about__header-badge">
<img src="https://wordpress.org/images/core/5.4/code-is-poetry-rc.svg" alt="<?php _e( 'Code is Poetry' ); ?>" />
</div>
<div class="about__header-badge"></div>
<div class="about__header-text">
<p>

View File

@ -13,7 +13,7 @@
*
* @global string $wp_version
*/
$wp_version = '5.4-alpha-46703';
$wp_version = '5.4-alpha-46705';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.