WordPress.org
Get WordPress

Make WordPress Core

Changeset 55499


Ignore:
Timestamp:
03/09/2023 04:28:25 PM (4 years 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.