WordPress.org
Get WordPress

Make WordPress Core

Changeset 46710 for branches/5.3


Ignore:
Timestamp:
11/11/2019 08:46:56 PM (7 years ago)
Author:
SergeyBiryukov
Message:

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.

Location:
branches/5.3
Files:
7 edited

Legend:

Unmodified
Added
Removed

  • branches/5.3

  • branches/5.3/src/wp-admin/about.php

    r46617 r46710  
    2727                        </div>
    2828
    29                         <div class="about__header-badge">
    30                                 <img src="https://wordpress.org/images/core/5.4/code-is-poetry-rc.svg" alt="<?php _e( 'Code is Poetry' ); ?>" />
    31                         </div>
     29                        <div class="about__header-badge"></div>
    3230
    3331                        <div class="about__header-text">
    … …  
    5351                <div class="about__section is-feature">
    5452                        <p>
    55                                 <?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.' ); ?>
     53                                <?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.' ); ?>
    5654                        </p>
    5755                </div>
    … …  
    9391                                        <li><?php _e( 'The Columns block now supports fixed column widths' ); ?></li>
    9492                                        <li><?php _e( 'The new Predefined layouts make it a cinch to arrange content into advanced designs' ); ?></li>
    95                                         <li><?php _e( 'Heading blocks now offer controls for text and background color' ); ?></li>
     93                                        <li><?php _e( 'Heading blocks now offer controls for text color' ); ?></li>
    9694                                        <li><?php _e( 'Additional style options allow you to set your preferred style for any block that supports this feature' ); ?></li>
    9795                                </ul>

  • branches/5.3/src/wp-admin/credits.php

    r46617 r46710  
    2929                </div>
    3030
    31                 <div class="about__header-badge">
    32                         <img src="https://wordpress.org/images/core/5.4/code-is-poetry-rc.svg" alt="<?php _e( 'Code is Poetry' ); ?>" />
    33                 </div>
     31                <div class="about__header-badge"></div>
    3432
    3533                <div class="about__header-text">
    … …  
    8886        exit;
    8987}
     88?>
    9089
    91 $previous_type = '';
     90        <hr />
    9291
    93 foreach ( $credits['groups'] as $group_slug => $group_data ) :
    94         ?>
    95         <?php
    96         if ( $previous_type !== $group_data['type'] ) {
    97                 echo '<hr />';
    98         }
    99         ?>
    10092        <div class="about__section">
    101                 <div class="column <?php echo 'titles' === $group_data['type'] ? 'has-subtle-background-color' : ''; ?>">
    102 
    103         <?php
    104         if ( $group_data['name'] ) {
    105                 if ( 'Translators' == $group_data['name'] ) {
    106                         // Considered a special slug in the API response. (Also, will never be returned for en_US.)
    107                         $title = _x( 'Translators', 'Translate this to be the equivalent of English Translators in your language for the credits page Translators section' );
    108                 } elseif ( isset( $group_data['placeholders'] ) ) {
    109                         // phpcs:ignore WordPress.WP.I18n.LowLevelTranslationFunction,WordPress.WP.I18n.NonSingularStringLiteralText
    110                         $title = vsprintf( translate( $group_data['name'] ), $group_data['placeholders'] );
    111                 } else {
    112                         // phpcs:ignore WordPress.WP.I18n.LowLevelTranslationFunction,WordPress.WP.I18n.NonSingularStringLiteralText
    113                         $title = translate( $group_data['name'] );
    114                 }
    115 
    116                 echo '<h2 class="wp-people-group-title">' . esc_html( $title ) . "</h2>\n";
    117         }
    118 
    119         if ( ! empty( $group_data['shuffle'] ) ) {
    120                 shuffle( $group_data['data'] ); // We were going to sort by ability to pronounce "hierarchical," but that wouldn't be fair to Matt.
    121         }
    122 
    123         switch ( $group_data['type'] ) {
    124                 case 'list':
    125                         array_walk( $group_data['data'], '_wp_credits_add_profile_link', $credits['data']['profiles'] );
    126                         echo '<p class="wp-credits-list">' . wp_sprintf( '%l.', $group_data['data'] ) . "</p>\n\n";
    127                         break;
    128                 case 'libraries':
    129                         array_walk( $group_data['data'], '_wp_credits_build_object_link' );
    130                         echo '<p class="wp-credits-list">' . wp_sprintf( '%l.', $group_data['data'] ) . "</p>\n\n";
    131                         break;
    132                 default:
    133                         $compact = 'compact' == $group_data['type'];
    134                         $classes = 'wp-people-group ' . ( $compact ? 'compact' : '' );
    135                         echo '<ul class="' . $classes . '" id="wp-people-group-' . $group_slug . '">' . "\n";
    136                         foreach ( $group_data['data'] as $person_data ) {
    137                                 echo '<li class="wp-person" id="wp-person-' . esc_attr( $person_data[2] ) . '">' . "\n\t";
    138                                 echo '<a href="' . esc_url( sprintf( $credits['data']['profiles'], $person_data[2] ) ) . '" class="web">';
    139                                 $size   = 'compact' == $group_data['type'] ? 40 : 80;
    140                                 $data   = get_avatar_data( $person_data[1] . '@md5.gravatar.com', array( 'size' => $size ) );
    141                                 $size  *= 2;
    142                                 $data2x = get_avatar_data( $person_data[1] . '@md5.gravatar.com', array( 'size' => $size ) );
    143                                 echo '<img src="' . esc_url( $data['url'] ) . '" srcset="' . esc_url( $data2x['url'] ) . ' 2x" class="gravatar" alt="" />' . "\n";
    144                                 echo esc_html( $person_data[0] ) . "</a>\n\t";
    145                                 if ( ! $compact ) {
    146                                         // phpcs:ignore WordPress.WP.I18n.LowLevelTranslationFunction,WordPress.WP.I18n.NonSingularStringLiteralText
    147                                         echo '<span class="title">' . translate( $person_data[3] ) . "</span>\n";
    148                                 }
    149                                 echo "</li>\n";
    150                         }
    151                         echo "</ul>\n";
    152                         break;
    153         }
    154         $previous_type = $group_data['type'];
    155         ?>
    156 
     93                <div class="column has-subtle-background-color">
     94                        <?php wp_credits_section_title( $credits['groups']['core-developers'] ); ?>
     95                        <?php wp_credits_section_list( $credits, 'core-developers' ); ?>
     96                        <?php wp_credits_section_list( $credits, 'contributing-developers' ); ?>
    15797                </div>
    15898        </div>
    159 <?php endforeach; ?>
     99
     100        <hr />
     101
     102        <div class="about__section">
     103                <div class="column">
     104                        <?php wp_credits_section_title( $credits['groups']['props'] ); ?>
     105                        <?php wp_credits_section_list( $credits, 'props' ); ?>
     106                </div>
     107        </div>
     108
     109        <hr />
     110
     111        <?php if ( isset( $credits['groups']['translators'] ) || isset( $credits['groups']['validators'] ) ) : ?>
     112        <div class="about__section">
     113                <div class="column">
     114                        <?php wp_credits_section_title( $credits['groups']['validators'] ); ?>
     115                        <?php wp_credits_section_list( $credits, 'validators' ); ?>
     116                        <?php wp_credits_section_list( $credits, 'translators' ); ?>
     117                </div>
     118        </div>
     119
     120        <hr />
     121        <?php endif; ?>
     122
     123        <div class="about__section">
     124                <div class="column">
     125                        <?php wp_credits_section_title( $credits['groups']['libraries'] ); ?>
     126                        <?php wp_credits_section_list( $credits, 'libraries' ); ?>
     127                </div>
     128        </div>
    160129</div>
    161130<?php

  • branches/5.3/src/wp-admin/css/about.css

    r46617 r46710  
    1919------------------------------------------------------------------------------*/
    2020
    21 :root {
    22         /* Beiges, used as text backgrounds. */
    23         --base-1: #FEFCF7;
    24         --base-2: #F4EFE1;
    25         --base-3: #D7D2C5;
    26         --base-4: #7B776C;
    27         --text: #413E38;
    28         /* Reds, used as accents, backgrounds, etc */
    29         --accent-1: #BD3854;
    30         --accent-2: #5F1B29;
     21.about__container {
     22        /* Section backgrounds */
     23        --background: #f4efe1;
     24        --subtle-background: #d7d2c5;
     25        /* Main text color */
     26        --text: #413e38;
     27        /* Navigation colors. */
     28        --nav-background: #fefcf7;
     29        --nav-color: #716d64;
     30        /* Reds, used as accents & in header. */
     31        --accent-1: #bd3854;
     32        --accent-2: #5f1b29;
    3133        --accent-3: #321017;
    3234}
    … …  
    3537  1.0 - Global: About, Credits, Freedoms, Privacy
    3638------------------------------------------------------------------------------*/
     39
     40.about-php,
     41.credits-php,
     42.freedoms-php,
     43.privacy-php {
     44        background: #fff;
     45}
    3746
    3847.about-php #wpcontent,
    … …  
    5665        max-width: 1000px;
    5766        margin: 24px auto;
     67        clear: both;
    5868}
    5969
    … …  
    8797.about__section {
    8898        background: #F4EFE1;
    89         background: var(--base-2);
     99        background: var(--background);
    90100}
    91101
    … …  
    97107.about__container .has-subtle-background-color {
    98108        background-color: #D7D2C5;
    99         background-color: var(--base-3);
     109        background-color: var(--subtle-background);
    100110}
    101111
    … …  
    296306}
    297307
     308.about__section a,
     309.about__section a:hover,
     310.about__section a:active,
     311.about__section a:focus {
     312        color: inherit;
     313}
     314
    298315.about__container ul {
    299316        list-style: disc;
    … …  
    326343}
    327344
     345.about__container div.updated,
     346.about__container div.error,
     347.about__container .notice {
     348        display: none !important;
     349}
     350
    328351.about__section {
    329352        font-size: 1.2em;
    … …  
    332355.about__section.is-feature {
    333356        font-size: 1.6em;
    334         font-weight: bold;
     357        font-weight: 600;
    335358}
    336359
    … …  
    395418.about__header-title h1 span {
    396419        display: block;
    397         font-weight: bold;
     420        font-weight: 600;
    398421        font-size: 1.2em;
    399422        line-height: 1;
    … …  
    426449        background-color: var(--accent-3);
    427450        color: white;
    428         font-size: 1.6em;
     451        font-size: 1.5em;
    429452        line-height: 1.4;
    430453}
    … …  
    442465        padding-top: 0;
    443466        background: #FEFCF7;
    444         background: var(--base-1);
    445         color: #7B776C;
    446         color: var(--base-4);
     467        background: var(--nav-background);
     468        color: #716d64;
     469        color: var(--nav-color);
    447470        border-bottom: 3px solid currentColor;
    448471}
    … …  
    450473.about__header-navigation .nav-tab {
    451474        margin-left: 0;
    452         margin-bottom: -3px;
    453475        padding: 24px 32px;
    454476        font-size: 1.4em;
    … …  
    461483}
    462484
     485.about__header-navigation .nav-tab:hover,
     486.about__header-navigation .nav-tab:active {
     487        background-color: #F4EFE1;
     488        background-color: var(--background);
     489}
     490
    463491.about__header-navigation .nav-tab-active {
     492        margin-bottom: -3px;
     493        border-width: 0 0 6px;
    464494        color: #BD3854;
    465495        color: var(--accent-1);
     496        border-color: currentColor;
     497}
     498
     499.about__header-navigation .nav-tab-active:hover,
     500.about__header-navigation .nav-tab-active:active {
     501        background-color: transparent;
    466502        border-color: currentColor;
    467503}
    … …  
    506542                border-left-width: 3px;
    507543                background: #F4EFE1;
    508                 background: var(--base-2);
     544                background: var(--background);
    509545        }
    510546}
    … …  
    514550  2.0 - Credits Page
    515551------------------------------------------------------------------------------*/
    516 
    517 .about__section .wp-people-group-title {
    518         margin-bottom: 2em;
    519         font-size: 1.4em;
    520 }
    521552
    522553.about__section .wp-people-group {
    … …  
    557588.about__section .wp-person .web {
    558589        font-size: 1.4em;
    559         font-weight: 700;
     590        font-weight: 600;
    560591        text-decoration: none;
    561592        color: #413E38;
    … …  
    574605        display: block;
    575606        margin-top: 0.5em;
     607}
     608
     609@media screen and (max-width: 480px) {
     610        .about__section .wp-person {
     611                min-width: 100%;
     612        }
     613
     614        .about__section .wp-person .gravatar {
     615                width: 60px;
     616                height: 60px;
     617        }
     618
     619        .about__section .wp-person .web {
     620                font-size: 1em;
     621        }
     622
     623        .about__section .compact .wp-person .web {
     624                font-size: 1em;
     625        }
    576626}
    577627
    … …  
    685735
    686736.about-wrap h2 {
    687         margin: 40px 0 .6em;
     737        margin: 40px 0 0.6em;
    688738        font-size: 2.7em;
    689739        line-height: 1.3;
    … …  
    693743
    694744.about-wrap h3 {
    695         margin: 1.25em 0 .6em;
     745        margin: 1.25em 0 0.6em;
    696746        font-size: 1.4em;
    697747        line-height: 1.5;

  • branches/5.3/src/wp-admin/freedoms.php

    r46617 r46710  
    3232                </div>
    3333
    34                 <div class="about__header-badge">
    35                         <img src="https://wordpress.org/images/core/5.4/code-is-poetry-rc.svg" alt="<?php _e( 'Code is Poetry' ); ?>" />
    36                 </div>
     34                <div class="about__header-badge"></div>
    3735
    3836                <div class="about__header-text">

  • branches/5.3/src/wp-admin/includes/credits.php

    r42343 r46710  
    7777        $data = '<a href="' . esc_url( $data[1] ) . '">' . esc_html( $data[0] ) . '</a>';
    7878}
     79
     80/**
     81 * Display a the title for a given group of contributors.
     82 *
     83 * @since 5.3.0
     84 *
     85 * @param array $group_data The current contributor group.
     86 */
     87function wp_credits_section_title( $group_data = array() ) {
     88        if ( ! count( $group_data ) ) {
     89                return;
     90        }
     91
     92        if ( $group_data['name'] ) {
     93                if ( 'Translators' === $group_data['name'] ) {
     94                        // Considered a special slug in the API response. (Also, will never be returned for en_US.)
     95                        $title = _x( 'Translators', 'Translate this to be the equivalent of English Translators in your language for the credits page Translators section' );
     96                } elseif ( isset( $group_data['placeholders'] ) ) {
     97                        // phpcs:ignore WordPress.WP.I18n.LowLevelTranslationFunction,WordPress.WP.I18n.NonSingularStringLiteralText
     98                        $title = vsprintf( translate( $group_data['name'] ), $group_data['placeholders'] );
     99                } else {
     100                        // phpcs:ignore WordPress.WP.I18n.LowLevelTranslationFunction,WordPress.WP.I18n.NonSingularStringLiteralText
     101                        $title = translate( $group_data['name'] );
     102                }
     103
     104                echo '<h2 class="wp-people-group-title">' . esc_html( $title ) . "</h2>\n";
     105        }
     106}
     107
     108/**
     109 * Display a list of contributors for a given group.
     110 *
     111 * @since 5.3.0
     112 *
     113 * @param array  $credits The credits groups returned from the API.
     114 * @param string $slug    The current group to display.
     115 */
     116function wp_credits_section_list( $credits = array(), $slug = '' ) {
     117        $group_data   = isset( $credits['groups'][ $slug ] ) ? $credits['groups'][ $slug ] : array();
     118        $credits_data = $credits['data'];
     119        if ( ! count( $group_data ) ) {
     120                return;
     121        }
     122
     123        if ( ! empty( $group_data['shuffle'] ) ) {
     124                shuffle( $group_data['data'] ); // We were going to sort by ability to pronounce "hierarchical," but that wouldn't be fair to Matt.
     125        }
     126
     127        switch ( $group_data['type'] ) {
     128                case 'list':
     129                        array_walk( $group_data['data'], '_wp_credits_add_profile_link', $credits_data['profiles'] );
     130                        echo '<p class="wp-credits-list">' . wp_sprintf( '%l.', $group_data['data'] ) . "</p>\n\n";
     131                        break;
     132                case 'libraries':
     133                        array_walk( $group_data['data'], '_wp_credits_build_object_link' );
     134                        echo '<p class="wp-credits-list">' . wp_sprintf( '%l.', $group_data['data'] ) . "</p>\n\n";
     135                        break;
     136                default:
     137                        $compact = 'compact' === $group_data['type'];
     138                        $classes = 'wp-people-group ' . ( $compact ? 'compact' : '' );
     139                        echo '<ul class="' . $classes . '" id="wp-people-group-' . $slug . '">' . "\n";
     140                        foreach ( $group_data['data'] as $person_data ) {
     141                                echo '<li class="wp-person" id="wp-person-' . esc_attr( $person_data[2] ) . '">' . "\n\t";
     142                                echo '<a href="' . esc_url( sprintf( $credits_data['profiles'], $person_data[2] ) ) . '" class="web">';
     143                                $size   = $compact ? 40 : 80;
     144                                $data   = get_avatar_data( $person_data[1] . '@md5.gravatar.com', array( 'size' => $size ) );
     145                                $data2x = get_avatar_data( $person_data[1] . '@md5.gravatar.com', array( 'size' => $size * 2 ) );
     146                                echo '<img src="' . esc_url( $data['url'] ) . '" srcset="' . esc_url( $data2x['url'] ) . ' 2x" class="gravatar" alt="" />' . "\n";
     147                                echo esc_html( $person_data[0] ) . "</a>\n\t";
     148                                if ( ! $compact ) {
     149                                        // phpcs:ignore WordPress.WP.I18n.LowLevelTranslationFunction,WordPress.WP.I18n.NonSingularStringLiteralText
     150                                        echo '<span class="title">' . translate( $person_data[3] ) . "</span>\n";
     151                                }
     152                                echo "</li>\n";
     153                        }
     154                        echo "</ul>\n";
     155                        break;
     156        }
     157}

  • branches/5.3/src/wp-admin/privacy.php

    r46617 r46710  
    2626                </div>
    2727
    28                 <div class="about__header-badge">
    29                         <img src="https://wordpress.org/images/core/5.4/code-is-poetry-rc.svg" alt="<?php _e( 'Code is Poetry' ); ?>" />
    30                 </div>
     28                <div class="about__header-badge"></div>
    3129
    3230                <div class="about__header-text">
Note: See TracChangeset for help on using the changeset viewer.