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.
* Remove extra padding on the Credits tab.

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

Reviewed by SergeyBiryukov.
Props ryelle, afercia, audrasjb, francina, mapk, desrosj, YordanSoares, melchoyce, azaozz, johnbillion, davidbaumwald, luminuu, bwmarkle, la-geek, SergeyBiryukov.
Merges [46705] and [46709] to the 5.3 branch.
Fixes #47708.
Built from https://develop.svn.wordpress.org/branches/5.3@46710


git-svn-id: http://core.svn.wordpress.org/branches/5.3@46510 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Sergey Biryukov 2019-11-11 20:48:02 +00:00
parent f542e3f870
commit 79ea28c053
10 changed files with 280 additions and 138 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>
@ -87,76 +85,47 @@ if ( ! $credits ) {
include( ABSPATH . 'wp-admin/admin-footer.php' );
exit;
}
?>
$previous_type = '';
<hr />
foreach ( $credits['groups'] as $group_slug => $group_data ) :
?>
<?php
if ( $previous_type !== $group_data['type'] ) {
echo '<hr />';
}
?>
<div class="about__section">
<div class="column <?php echo 'titles' === $group_data['type'] ? 'has-subtle-background-color' : ''; ?>">
<?php
if ( $group_data['name'] ) {
if ( 'Translators' == $group_data['name'] ) {
// Considered a special slug in the API response. (Also, will never be returned for en_US.)
$title = _x( 'Translators', 'Translate this to be the equivalent of English Translators in your language for the credits page Translators section' );
} elseif ( isset( $group_data['placeholders'] ) ) {
// phpcs:ignore WordPress.WP.I18n.LowLevelTranslationFunction,WordPress.WP.I18n.NonSingularStringLiteralText
$title = vsprintf( translate( $group_data['name'] ), $group_data['placeholders'] );
} else {
// phpcs:ignore WordPress.WP.I18n.LowLevelTranslationFunction,WordPress.WP.I18n.NonSingularStringLiteralText
$title = translate( $group_data['name'] );
}
echo '<h2 class="wp-people-group-title">' . esc_html( $title ) . "</h2>\n";
}
if ( ! empty( $group_data['shuffle'] ) ) {
shuffle( $group_data['data'] ); // We were going to sort by ability to pronounce "hierarchical," but that wouldn't be fair to Matt.
}
switch ( $group_data['type'] ) {
case 'list':
array_walk( $group_data['data'], '_wp_credits_add_profile_link', $credits['data']['profiles'] );
echo '<p class="wp-credits-list">' . wp_sprintf( '%l.', $group_data['data'] ) . "</p>\n\n";
break;
case 'libraries':
array_walk( $group_data['data'], '_wp_credits_build_object_link' );
echo '<p class="wp-credits-list">' . wp_sprintf( '%l.', $group_data['data'] ) . "</p>\n\n";
break;
default:
$compact = 'compact' == $group_data['type'];
$classes = 'wp-people-group ' . ( $compact ? 'compact' : '' );
echo '<ul class="' . $classes . '" id="wp-people-group-' . $group_slug . '">' . "\n";
foreach ( $group_data['data'] as $person_data ) {
echo '<li class="wp-person" id="wp-person-' . esc_attr( $person_data[2] ) . '">' . "\n\t";
echo '<a href="' . esc_url( sprintf( $credits['data']['profiles'], $person_data[2] ) ) . '" class="web">';
$size = 'compact' == $group_data['type'] ? 40 : 80;
$data = get_avatar_data( $person_data[1] . '@md5.gravatar.com', array( 'size' => $size ) );
$size *= 2;
$data2x = get_avatar_data( $person_data[1] . '@md5.gravatar.com', array( 'size' => $size ) );
echo '<img src="' . esc_url( $data['url'] ) . '" srcset="' . esc_url( $data2x['url'] ) . ' 2x" class="gravatar" alt="" />' . "\n";
echo esc_html( $person_data[0] ) . "</a>\n\t";
if ( ! $compact ) {
// phpcs:ignore WordPress.WP.I18n.LowLevelTranslationFunction,WordPress.WP.I18n.NonSingularStringLiteralText
echo '<span class="title">' . translate( $person_data[3] ) . "</span>\n";
}
echo "</li>\n";
}
echo "</ul>\n";
break;
}
$previous_type = $group_data['type'];
?>
<div class="column has-subtle-background-color">
<?php wp_credits_section_title( $credits['groups']['core-developers'] ); ?>
<?php wp_credits_section_list( $credits, 'core-developers' ); ?>
<?php wp_credits_section_list( $credits, 'contributing-developers' ); ?>
</div>
</div>
<hr />
<div class="about__section">
<div class="column">
<?php wp_credits_section_title( $credits['groups']['props'] ); ?>
<?php wp_credits_section_list( $credits, 'props' ); ?>
</div>
</div>
<hr />
<?php if ( isset( $credits['groups']['translators'] ) || isset( $credits['groups']['validators'] ) ) : ?>
<div class="about__section">
<div class="column">
<?php wp_credits_section_title( $credits['groups']['validators'] ); ?>
<?php wp_credits_section_list( $credits, 'validators' ); ?>
<?php wp_credits_section_list( $credits, 'translators' ); ?>
</div>
</div>
<hr />
<?php endif; ?>
<div class="about__section">
<div class="column">
<?php wp_credits_section_title( $credits['groups']['libraries'] ); ?>
<?php wp_credits_section_list( $credits, 'libraries' ); ?>
</div>
</div>
<?php endforeach; ?>
</div>
<?php

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-right: 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-right: 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-right-width: 3px;
background: #F4EFE1;
background: var(--base-2);
background: var(--background);
}
}
@ -514,11 +550,6 @@
2.0 - Credits Page
------------------------------------------------------------------------------*/
.about__section .wp-people-group-title {
margin-bottom: 2em;
font-size: 1.4em;
}
.about__section .wp-people-group {
margin: 0;
}
@ -556,7 +587,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 +606,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 +734,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 +742,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);
}
}
@ -514,11 +550,6 @@
2.0 - Credits Page
------------------------------------------------------------------------------*/
.about__section .wp-people-group-title {
margin-bottom: 2em;
font-size: 1.4em;
}
.about__section .wp-people-group {
margin: 0;
}
@ -556,7 +587,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 +606,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 +734,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 +742,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

@ -76,3 +76,82 @@ function _wp_credits_add_profile_link( &$display_name, $username, $profiles ) {
function _wp_credits_build_object_link( &$data ) {
$data = '<a href="' . esc_url( $data[1] ) . '">' . esc_html( $data[0] ) . '</a>';
}
/**
* Display a the title for a given group of contributors.
*
* @since 5.3.0
*
* @param array $group_data The current contributor group.
*/
function wp_credits_section_title( $group_data = array() ) {
if ( ! count( $group_data ) ) {
return;
}
if ( $group_data['name'] ) {
if ( 'Translators' === $group_data['name'] ) {
// Considered a special slug in the API response. (Also, will never be returned for en_US.)
$title = _x( 'Translators', 'Translate this to be the equivalent of English Translators in your language for the credits page Translators section' );
} elseif ( isset( $group_data['placeholders'] ) ) {
// phpcs:ignore WordPress.WP.I18n.LowLevelTranslationFunction,WordPress.WP.I18n.NonSingularStringLiteralText
$title = vsprintf( translate( $group_data['name'] ), $group_data['placeholders'] );
} else {
// phpcs:ignore WordPress.WP.I18n.LowLevelTranslationFunction,WordPress.WP.I18n.NonSingularStringLiteralText
$title = translate( $group_data['name'] );
}
echo '<h2 class="wp-people-group-title">' . esc_html( $title ) . "</h2>\n";
}
}
/**
* Display a list of contributors for a given group.
*
* @since 5.3.0
*
* @param array $credits The credits groups returned from the API.
* @param string $slug The current group to display.
*/
function wp_credits_section_list( $credits = array(), $slug = '' ) {
$group_data = isset( $credits['groups'][ $slug ] ) ? $credits['groups'][ $slug ] : array();
$credits_data = $credits['data'];
if ( ! count( $group_data ) ) {
return;
}
if ( ! empty( $group_data['shuffle'] ) ) {
shuffle( $group_data['data'] ); // We were going to sort by ability to pronounce "hierarchical," but that wouldn't be fair to Matt.
}
switch ( $group_data['type'] ) {
case 'list':
array_walk( $group_data['data'], '_wp_credits_add_profile_link', $credits_data['profiles'] );
echo '<p class="wp-credits-list">' . wp_sprintf( '%l.', $group_data['data'] ) . "</p>\n\n";
break;
case 'libraries':
array_walk( $group_data['data'], '_wp_credits_build_object_link' );
echo '<p class="wp-credits-list">' . wp_sprintf( '%l.', $group_data['data'] ) . "</p>\n\n";
break;
default:
$compact = 'compact' === $group_data['type'];
$classes = 'wp-people-group ' . ( $compact ? 'compact' : '' );
echo '<ul class="' . $classes . '" id="wp-people-group-' . $slug . '">' . "\n";
foreach ( $group_data['data'] as $person_data ) {
echo '<li class="wp-person" id="wp-person-' . esc_attr( $person_data[2] ) . '">' . "\n\t";
echo '<a href="' . esc_url( sprintf( $credits_data['profiles'], $person_data[2] ) ) . '" class="web">';
$size = $compact ? 40 : 80;
$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 '<img src="' . esc_url( $data['url'] ) . '" srcset="' . esc_url( $data2x['url'] ) . ' 2x" class="gravatar" alt="" />' . "\n";
echo esc_html( $person_data[0] ) . "</a>\n\t";
if ( ! $compact ) {
// phpcs:ignore WordPress.WP.I18n.LowLevelTranslationFunction,WordPress.WP.I18n.NonSingularStringLiteralText
echo '<span class="title">' . translate( $person_data[3] ) . "</span>\n";
}
echo "</li>\n";
}
echo "</ul>\n";
break;
}
}

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.3-RC4-46708';
$wp_version = '5.3-RC4-46710';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.