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. git-svn-id: https://develop.svn.wordpress.org/branches/5.3@46710 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Sergey Biryukov
parent
f3d44de0b9
commit
269d00f003
@ -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>
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user