Get WordPress

Make WordPress Core

Changeset 46710

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 , 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
     41
     42
     43
     44
     45
    3746
    3847.about-php #wpcontent,
    … …  
    5665    max-width: 1000px;
    5766    margin: 24px auto;
     67
    5868}
    5969
    … …  
    8797.about__section {
    8898    background: #F4EFE1;
    89     background: var(--base-2);
     99    background: var(--ba);
    90100}
    91101
    … …  
    97107.about__container .has-subtle-background-color {
    98108    background-color: #D7D2C5;
    99     background-color: var(--base-3);
     109    background-color: var(--);
    100110}
    101111
    … …  
    296306}
    297307
     308
     309
     310
     311
     312
     313
     314
    298315.about__container ul {
    299316    list-style: disc;
    … …  
    326343}
    327344
     345
     346
     347
     348
     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: ;
    335358}
    336359
    … …  
    395418.about__header-title h1 span {
    396419    display: block;
    397     font-weight: bold;
     420    font-weight: ;
    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.em;
    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(--);
     468    color: #7;
     469    color: var(--);
    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
     486
     487
     488
     489
     490
    463491.about__header-navigation .nav-tab-active {
     492
     493
    464494    color: #BD3854;
    465495    color: var(--accent-1);
     496
     497
     498
     499
     500
     501
    466502    border-color: currentColor;
    467503}
    … …  
    506542        border-left-width: 3px;
    507543        background: #F4EFE1;
    508         background: var(--base-2);
     544        background: var(--ba);
    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: 00;
    560591    text-decoration: none;
    561592    color: #413E38;
    … …  
    574605    display: block;
    575606    margin-top: 0.5em;
     607
     608
     609
     610
     611
     612
     613
     614
     615
     616
     617
     618
     619
     620
     621
     622
     623
     624
     625
    576626}
    577627
    … …  
    685735
    686736.about-wrap h2 {
    687     margin: 40px 0 .6em;
     737    margin: 40px 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 .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
     82
     83
     84
     85
     86
     87
     88
     89
     90
     91
     92
     93
     94
     95
     96
     97
     98
     99
     100
     101
     102
     103
     104
     105
     106
     107
     108
     109
     110
     111
     112
     113
     114
     115
     116
     117
     118
     119
     120
     121
     122
     123
     124
     125
     126
     127
     128
     129
     130
     131
     132
     133
     134
     135
     136
     137
     138
     139
     140
     141
     142
     143
     144
     145
     146
     147
     148
     149
     150
     151
     152
     153
     154
     155
     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.