WordPress.org
Get WordPress

Make WordPress Core

Changeset 46710


Ignore:
Timestamp:
11/11/2019 08:46:56 PM (5 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.