WordPress.org
Get WordPress

Make WordPress Core

Changeset 46705


Ignore:
Timestamp:
11/11/2019 04:05:39 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.

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

Props ryelle, afercia, audrasjb, francina, mapk, desrosj, YordanSoares, melchoyce, azaozz, johnbillion, davidbaumwald, luminuu, bwmarkle, la-geek, SergeyBiryukov.
See #47708.

Location:
trunk/src/wp-admin
Files:
5 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-admin/about.php

    r46616 r46705  
    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>

  • trunk/src/wp-admin/credits.php

    r46616 r46705  
    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">

  • trunk/src/wp-admin/css/about.css

    r46616 r46705  
    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}
    … …  
    557593.about__section .wp-person .web {
    558594    font-size: 1.4em;
    559     font-weight: 700;
     595    font-weight: 600;
    560596    text-decoration: none;
    561597    color: #413E38;
    … …  
    574610    display: block;
    575611    margin-top: 0.5em;
     612}
     613
     614@media screen and (max-width: 480px) {
     615    .about__section .wp-person {
     616        min-width: 100%;
     617    }
     618
     619    .about__section .wp-person .gravatar {
     620        width: 60px;
     621        height: 60px;
     622    }
     623
     624    .about__section .wp-person .web {
     625        font-size: 1em;
     626    }
     627
     628    .about__section .compact .wp-person .web {
     629        font-size: 1em;
     630    }
    576631}
    577632
    … …  
    685740
    686741.about-wrap h2 {
    687     margin: 40px 0 .6em;
     742    margin: 40px 0 0.6em;
    688743    font-size: 2.7em;
    689744    line-height: 1.3;
    … …  
    693748
    694749.about-wrap h3 {
    695     margin: 1.25em 0 .6em;
     750    margin: 1.25em 0 0.6em;
    696751    font-size: 1.4em;
    697752    line-height: 1.5;

  • trunk/src/wp-admin/freedoms.php

    r46616 r46705  
    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">

  • trunk/src/wp-admin/privacy.php

    r46616 r46705  
    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.