WordPress.org
Get WordPress

Make WordPress Core

Changeset 55499


Ignore:
Timestamp:
03/09/2023 04:28:25 PM (19 months ago)
Author:
ryelle
Message:

Help/About: Update copy & style for About page and subpages.

Minor copy updates. Update heading style, text size, spacing in smaller columns. Remove columns placement code to simplify CSS. This was necessary for IE11, but modern browsers can use auto-placement. Move navigation out of the banner to keep size & background placement consistent across About section.

Props marybaum, sereedmedia, annezazu, jpantani, laurlittle, richtabor, markoserb, fcoveram, joen, kebbet.
See #57477.

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

Legend:

Unmodified
Added
Removed

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

    r55449 r55499  
    3434
    3535            <div class="about__header-text"></div>
    36 
    37             <nav class="about__header-navigation nav-tab-wrapper wp-clearfix" aria-label="<?php esc_attr_e( 'Secondary menu' ); ?>">
    38                 <a href="about.php" class="nav-tab nav-tab-active" aria-current="page"><?php _e( 'What&#8217;s New' ); ?></a>
    39                 <a href="credits.php" class="nav-tab"><?php _e( 'Credits' ); ?></a>
    40                 <a href="freedoms.php" class="nav-tab"><?php _e( 'Freedoms' ); ?></a>
    41                 <a href="privacy.php" class="nav-tab"><?php _e( 'Privacy' ); ?></a>
    42             </nav>
    43         </div>
     36        </div>
     37
     38        <nav class="about__header-navigation nav-tab-wrapper wp-clearfix" aria-label="<?php esc_attr_e( 'Secondary menu' ); ?>">
     39            <a href="about.php" class="nav-tab nav-tab-active" aria-current="page"><?php _e( 'What&#8217;s New' ); ?></a>
     40            <a href="credits.php" class="nav-tab"><?php _e( 'Credits' ); ?></a>
     41            <a href="freedoms.php" class="nav-tab"><?php _e( 'Freedoms' ); ?></a>
     42            <a href="privacy.php" class="nav-tab"><?php _e( 'Privacy' ); ?></a>
     43        </nav>
    4444
    4545        <div class="about__section">
    … …  
    154154                    <img src="data:image/svg+xml,%3Csvg width='436' height='436' viewbox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='%231d35b4' /%3E%3C/svg%3E" alt="" />
    155155                </div>
    156                 <h3 class="is-smaller-heading"><?php _e( 'Style Book' ); ?></h3>
     156                <h3 class="is-smaller-heading" style="margin-bottom:calc(var(--gap) / 4);"><?php _e( 'Style Book' ); ?></h3>
    157157                <p><?php _e( 'Use the new Style Book to get a complete overview of how every block in your site&#8217;s library looks. All in one place, all at a glance.' ); ?></p>
    158158            </div>
    … …  
    161161                    <img src="data:image/svg+xml,%3Csvg width='436' height='436' viewbox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='%231d35b4' /%3E%3C/svg%3E" alt="" />
    162162                </div>
    163                 <h3 class="is-smaller-heading"><?php _e( 'Copy and paste styles' ); ?></h3>
     163                <h3 class="is-smaller-heading" style="margin-bottom:calc(var(--gap) / 4);"><?php _e( 'Copy and paste styles' ); ?></h3>
    164164                <p><?php _e( 'Perfect the design on one type of block, then copy and paste those styles to other blocks to get just the look you want.' ); ?></p>
    165165            </div>
    … …  
    168168                    <img src="data:image/svg+xml,%3Csvg width='436' height='436' viewbox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='%231d35b4' /%3E%3C/svg%3E" alt="" />
    169169                </div>
    170                 <h3 class="is-smaller-heading"><?php _e( 'Custom CSS' ); ?></h3>
     170                <h3 class="is-smaller-heading" style="margin-bottom:calc(var(--gap) / 4);"><?php _e( 'Custom CSS' ); ?></h3>
    171171                <p><?php _e( 'Power up your site any way you wish. Add CSS to your site, or your blocks, for another level of control over your site&#8217;s look and feel.' ); ?></p>
    172172            </div>
    … …  
    181181                    </svg>
    182182                </div>
    183                 <h3 class="is-smaller-heading"><?php _e( 'Sticky positioning' ); ?></h3>
    184                 <p><?php _e( 'Choose to keep certain blocks fixed to the top of a page as visitors scroll.' ); ?></p>
     183                <h3 class="is-smaller-heading" style="margin-top:0;margin-bottom:calc(var(--gap) / 4);"><?php _e( 'Sticky positioning' ); ?></h3>
     184                <p><?php _e( 'Choose to keep top-level group blocks fixed to the top of a page as visitors scroll.' ); ?></p>
    185185            </div>
    186186            <div class="column">
    … …  
    191191                    </svg>
    192192                </div>
    193                 <h3 class="is-smaller-heading"><?php _e( 'Importing widgets' ); ?></h3>
     193                <h3 class="is-smaller-heading" style="margin-top:0;margin-bottom:calc(var(--gap) / 4);"><?php _e( 'Importing widgets' ); ?></h3>
    194194                <p><?php _e( 'Options to import your favorite widgets from Classic themes to Block themes.' ); ?></p>
    195195            </div>
    … …  
    201201                    </svg>
    202202                </div>
    203                 <h3 class="is-smaller-heading"><?php _e( 'Local fonts in themes' ); ?></h3>
    204                 <p><?php _e( 'Default WordPress themes offer better privacy with Google Fonts included.' ); ?></p>
     203                <h3 class="is-smaller-heading" style="margin-top:0;margin-bottom:calc(var(--gap) / 4);"><?php _e( 'Local fonts in themes' ); ?></h3>
     204                <p><?php _e( 'Default WordPress themes offer better privacy with Google Fonts now included.' ); ?></p>
    205205            </div>
    206206        </div>
    … …  
    208208        <hr />
    209209
    210         <div class="about__section has-2-columns is-wider-right">
     210        <div class="about__section has-3-columns">
    211211            <div class="column about__image is-vertically-aligned-top">
    212212                <a href="https://youtu.be/1w9oywSa6Hw">
    … …  
    214214                </a>
    215215            </div>
    216             <div class="column is-vertically-aligned-center">
     216            <div class="column is-vertically-aligned-center" style="grid-column-end:span 2">
    217217                <h3>
    218218                    <?php

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

    r54635 r55499  
    3838            ?>
    3939        </div>
     40    </div>
    4041
    41         <nav class="about__header-navigation nav-tab-wrapper wp-clearfix" aria-label="<?php esc_attr_e( 'Secondary menu' ); ?>">
    42             <a href="about.php" class="nav-tab"><?php _e( 'What&#8217;s New' ); ?></a>
    43             <a href="credits.php" class="nav-tab nav-tab-active" aria-current="page"><?php _e( 'Credits' ); ?></a>
    44             <a href="freedoms.php" class="nav-tab"><?php _e( 'Freedoms' ); ?></a>
    45             <a href="privacy.php" class="nav-tab"><?php _e( 'Privacy' ); ?></a>
    46         </nav>
    47     </div>
     42    <nav class="about__header-navigation nav-tab-wrapper wp-clearfix" aria-label="<?php esc_attr_e( 'Secondary menu' ); ?>">
     43        <a href="about.php" class="nav-tab"><?php _e( 'What&#8217;s New' ); ?></a>
     44        <a href="credits.php" class="nav-tab nav-tab-active" aria-current="page"><?php _e( 'Credits' ); ?></a>
     45        <a href="freedoms.php" class="nav-tab"><?php _e( 'Freedoms' ); ?></a>
     46        <a href="privacy.php" class="nav-tab"><?php _e( 'Privacy' ); ?></a>
     47    </nav>
    4848
    4949    <div class="about__section has-1-column has-gutters">

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

    r55449 r55499  
    221221}
    222222
    223 .about__section.has-2-columns .is-section-header {
     223.about__section .is-section-header {
    224224    grid-column-start: 1;
    225     -ms-grid-column-span: 2;
    226     grid-column-end: span 2;
    227 }
    228 
    229 .about__section.has-2-columns .column:nth-of-type(2n+1) {
    230     grid-column-start: 1;
    231 }
    232 
    233 .about__section.has-2-columns .column:nth-of-type(2n) {
    234     grid-column-start: 2;
     225    grid-column-end: -1;
    235226}
    236227
    … …  
    239230}
    240231
    241 .about__section.has-3-columns .is-section-header {
    242     grid-column-start: 1;
    243     -ms-grid-column-span: 3;
    244     grid-column-end: span 3;
    245 }
    246 
    247 .about__section.has-3-columns .column:nth-of-type(3n+1) {
    248     grid-column-start: 1;
    249 }
    250 
    251 .about__section.has-3-columns .column:nth-of-type(3n+2) {
    252     grid-column-start: 2;
    253 }
    254 
    255 .about__section.has-3-columns .column:nth-of-type(3n) {
    256     grid-column-start: 3;
    257 }
    258 
    259232.about__section.has-4-columns {
    260233    grid-template-columns: repeat(4, 1fr);
    261234}
    262235
    263 .about__section.has-4-columns .is-section-header {
    264     grid-column-start: 1;
    265     -ms-grid-column-span: 4;
    266     grid-column-end: span 4;
    267 }
    268 
    269 .about__section.has-4-columns .column:nth-of-type(4n+1) {
    270     grid-column-start: 1;
    271 }
    272 
    273 .about__section.has-4-columns .column:nth-of-type(4n+2) {
    274     grid-column-start: 2;
    275 }
    276 
    277 .about__section.has-4-columns .column:nth-of-type(4n+3) {
    278     grid-column-start: 3;
    279 }
    280 
    281 .about__section.has-4-columns .column:nth-of-type(4n) {
    282     grid-column-start: 4;
    283 }
    284 
    285 /* Any columns following a section header need to be expicitly put into the second row, for IE support. */
    286 .about__section.has-2-columns .is-section-header ~ .column,
    287 .about__section.has-3-columns .is-section-header ~ .column,
    288 .about__section.has-4-columns .is-section-header ~ .column,
    289 .about__section.has-overlap-style .is-section-header ~ .column {
    290     grid-row-start: 2;
    291 }
    292 
    293236.about__section.has-overlap-style {
    294237    grid-template-columns: repeat(7, 1fr);
    … …  
    301244.about__section.has-overlap-style .column:nth-of-type(2n+1) {
    302245    grid-column-start: 2;
    303     -ms-grid-column-span: 3;
    304246    grid-column-end: span 3;
    305247}
    … …  
    307249.about__section.has-overlap-style .column:nth-of-type(2n) {
    308250    grid-column-start: 4;
    309     -ms-grid-column-span: 3;
    310251    grid-column-end: span 3;
    311252}
    … …  
    355296    }
    356297
    357     .about__section.has-4-columns .column:nth-of-type(2n+1) {
    358         grid-column-start: 1;
    359     }
    360 
    361     .about__section.has-4-columns .column:nth-of-type(2n) {
    362         grid-column-start: 2;
    363     }
    364 
    365     .about__section.has-4-columns .column:nth-of-type(4n+3),
    366     .about__section.has-4-columns .column:nth-of-type(4n) {
    367         grid-row-start: 2;
    368     }
    369 
    370     .about__section.has-4-columns .is-section-header {
    371         -ms-grid-column-span: 2;
    372         grid-column-end: span 2;
    373     }
    374 
    375     .about__section.has-4-columns .is-section-header ~ .column:nth-of-type(4n+3),
    376     .about__section.has-4-columns .is-section-header ~ .column:nth-of-type(4n) {
    377         grid-row-start: 3;
    378     }
    379 
    380298    .about__section.has-overlap-style {
    381299        grid-template-columns: 1fr;
    … …  
    385303    .about__section.has-overlap-style .column.column {
    386304        grid-column-start: 1;
    387         -ms-grid-column-span: 1;
    388305        grid-column-end: 2;
    389306        grid-row-start: 1;
    390         -ms-grid-row-span: 1;
    391307        grid-row-end: 2;
    392308    }
    … …  
    476392    margin-top: 0;
    477393    font-size: 1.125rem;
    478     font-weight: 700;
     394    font-weight: 600;
    479395    line-height: 1.6;
    480396}
    … …  
    549465}
    550466
     467.about__container .about__image svg {
     468    vertical-align: middle;
     469}
     470
    551471.about__container .about__image + h3 {
    552472    margin-top: 1.5em;
    … …  
    558478
    559479.about__container hr {
    560     margin: 0;
     480    margin: 0 var(--gap);
    561481    height: var(--gap);
    562482    border: none;
    … …  
    588508}
    589509
     510.about__section.has-3-columns,
     511.about__section.has-4-columns {
     512    font-size: 1rem;
     513}
     514
    590515@media screen and (max-width: 480px) {
    591516    .about__section.is-feature {
    … …  
    604529.about__header {
    605530    position: relative;
    606     margin-bottom: var(--gap);
    607     padding-top: 0;
     531    display: flex;
     532    flex-direction: column;
     533    align-items: center;
     534    justify-content: center;
     535    box-sizing: border-box;
     536    padding: calc(var(--gap) * 2) 0;
     537    min-height: 420px;
    608538    color: var(--text-light);
    609539    background: var(--background) url('../images/about-header-about.svg?ver=6.2') no-repeat;
    610540    background-size: cover;
    611     background-position: center calc(50% - 36px);
     541    background-position: center;
    612542}
    613543
    … …  
    631561    box-sizing: border-box;
    632562    margin: 0 var(--gap);
    633     padding: 9rem 0 0;
     563    padding: 0;
    634564    text-align: center;
    635565}
    … …  
    658588    box-sizing: border-box;
    659589    max-width: 22em;
    660     margin: 0 auto 10rem;
     590    margin: 0 auto;
    661591    padding: 0;
    662592    font-size: 1.6rem;
    663593    line-height: 1.15;
    664594    text-align: center;
    665 }
    666 
    667 .credits-php .about__header-text {
    668     margin-bottom: 9rem;
    669595}
    670596
    … …  
    675601    justify-content: center;
    676602    padding-top: 0;
     603    margin-bottom: var(--gap);
    677604    background: var(--nav-background);
    678605    color: var(--nav-color);
    … …  
    754681}
    755682
     683@media screen and (max-width: 600px) {
     684    .about__header {
     685        min-height: auto;
     686    }
     687}
     688
    756689@media screen and (max-width: 480px) {
    757690    .about__header,
    … …  
    766699    }
    767700
    768     .about__header-title {
    769         padding-top: 2rem;
    770     }
    771 
    772     .about__header-text,
    773     .credits-php .about__header-text {
     701    .about__header-text {
    774702        margin-left: calc(var(--gap) / 2);
    775703        margin-right: calc(var(--gap) / 2);
    776         margin-bottom: 2rem;
    777704    }
    778705

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

    r54690 r55499  
    3535            <?php _e( 'WordPress is free and open source software' ); ?>
    3636        </div>
     37    </div>
    3738
    38         <nav class="about__header-navigation nav-tab-wrapper wp-clearfix" aria-label="<?php esc_attr_e( 'Secondary menu' ); ?>">
    39             <a href="about.php" class="nav-tab"><?php _e( 'What&#8217;s New' ); ?></a>
    40             <a href="credits.php" class="nav-tab"><?php _e( 'Credits' ); ?></a>
    41             <a href="freedoms.php" class="nav-tab nav-tab-active" aria-current="page"><?php _e( 'Freedoms' ); ?></a>
    42             <a href="privacy.php" class="nav-tab"><?php _e( 'Privacy' ); ?></a>
    43         </nav>
    44     </div>
     39    <nav class="about__header-navigation nav-tab-wrapper wp-clearfix" aria-label="<?php esc_attr_e( 'Secondary menu' ); ?>">
     40        <a href="about.php" class="nav-tab"><?php _e( 'What&#8217;s New' ); ?></a>
     41        <a href="credits.php" class="nav-tab"><?php _e( 'Credits' ); ?></a>
     42        <a href="freedoms.php" class="nav-tab nav-tab-active" aria-current="page"><?php _e( 'Freedoms' ); ?></a>
     43        <a href="privacy.php" class="nav-tab"><?php _e( 'Privacy' ); ?></a>
     44    </nav>
    4545
    4646    <div class="about__section is-feature">

  • trunk/src/wp-admin/images/about-header-freedoms.svg

    r55449 r55499  
    55  <path d="M231-26c0 110.46 89.54 200 200 200h1000" stroke="#213FD4" stroke-width="60" stroke-miterlimit="10"/>
    66  <path d="M336-26c0 55.23 44.567 100 99.545 100H1431" stroke="#213FD4" stroke-width="60" stroke-miterlimit="10"/>
    7   <path d="M132 27c16.569 0 30-13.431 30-30 0-16.569-13.431-30-30-30-16.569 0-30 13.431-30 30 0 16.569 13.431 30 30 30ZM474 104c16.569 0 30-13.431 30-30 0-16.569-13.431-30-30-30-16.569 0-30 13.431-30 30 0 16.569 13.431 30 30 30ZM949 204c16.569 0 30-13.431 30-30 0-16.569-13.431-30-30-30-16.569 0-30 13.431-30 30 0 16.569 13.431 30 30 30ZM775 404c16.569 0 30-13.431 30-30 0-16.569-13.431-30-30-30-16.569 0-30 13.431-30 30 0 16.569 13.431 30 30 30Z" fill="#33F078"/>
     7  <path d="M132 27c16.569 0 30-13.431 30-30 0-16.569-13.431-30-30-30-16.569 0-30 13.431-30 30 0 16.569 13.431 30 30 30ZM474 104c16.569 0 30-13.431 30-30 0-16.569-13.431-30-30-30-16.569 0-30 13.431-30 30 0 16.569 13.431 30 30 30ZM936 204c16.569 0 30-13.431 30-30 0-16.569-13.431-30-30-30-16.569 0-30 13.431-30 30 0 16.569 13.431 30 30 30ZM755 404c16.569 0 30-13.431 30-30 0-16.569-13.431-30-30-30-16.569 0-30 13.431-30 30 0 16.569 13.431 30 30 30Z" fill="#33F078"/>
    88</svg>

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

    r54690 r55499  
    2929            <?php _e( 'We take privacy and transparency very seriously' ); ?>
    3030        </div>
     31    </div>
    3132
    32         <nav class="about__header-navigation nav-tab-wrapper wp-clearfix" aria-label="<?php esc_attr_e( 'Secondary menu' ); ?>">
    33             <a href="about.php" class="nav-tab"><?php _e( 'What&#8217;s New' ); ?></a>
    34             <a href="credits.php" class="nav-tab"><?php _e( 'Credits' ); ?></a>
    35             <a href="freedoms.php" class="nav-tab"><?php _e( 'Freedoms' ); ?></a>
    36             <a href="privacy.php" class="nav-tab nav-tab-active" aria-current="page"><?php _e( 'Privacy' ); ?></a>
    37         </nav>
    38     </div>
     33    <nav class="about__header-navigation nav-tab-wrapper wp-clearfix" aria-label="<?php esc_attr_e( 'Secondary menu' ); ?>">
     34        <a href="about.php" class="nav-tab"><?php _e( 'What&#8217;s New' ); ?></a>
     35        <a href="credits.php" class="nav-tab"><?php _e( 'Credits' ); ?></a>
     36        <a href="freedoms.php" class="nav-tab"><?php _e( 'Freedoms' ); ?></a>
     37        <a href="privacy.php" class="nav-tab nav-tab-active" aria-current="page"><?php _e( 'Privacy' ); ?></a>
     38    </nav>
    3939
    4040    <div class="about__section has-2-columns is-wider-right">
Note: See TracChangeset for help on using the changeset viewer.