WordPress.org

Make WordPress Core

Changeset 48729


Ignore:
Timestamp:
08/04/2020 05:24:35 PM (8 weeks ago)
Author:
desrosj
Message:

Help/About: String updates and accessibility improvements to the 5.5 About page.

Props ryelle, nrqsnchz, desrosj, audrasjb, marybaum, spacedmonkey, SergeyBiryukov, estelaris, afercia, ocean90.
See #50416.

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

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/about.php

    r48721 r48729  
    2929                    <span><?php echo $display_version; ?></span>
    3030                </p>
     31            </div>
     32
     33            <div class="about__header-text">
     34                Musician Name
    3135            </div>
    3236
     
    6266        <hr />
    6367
    64         <div class="about__section has-2-columns is-wider-left">
     68        <div class="about__section has-1-column">
    6569            <div class="column">
    6670                <h2><?php _e( 'Speed' ); ?></h2>
     
    7074                <p><?php _e( 'On mobile, lazy loading can also keep browsers from loading files meant for other devices. That can save your readers money on data — and help preserve battery life.' ); ?></p>
    7175            </div>
    72             <div class="column is-edge-to-edge" style="background-color:skyblue;">
    73             </div>
    74         </div>
    75 
    76         <hr class="is-small" />
    77 
    78         <div class="about__section has-2-columns is-wider-right">
    79             <div class="column is-edge-to-edge" style="background-color:skyblue;">
    80             </div>
     76        </div>
     77
     78        <div class="about__section has-1-column">
    8179            <div class="column">
    8280                <h2><?php _ex( 'Search', 'sitemap' ); ?></h2>
     
    8886        </div>
    8987
    90         <hr class="is-small" />
    91 
    92         <div class="about__section has-2-columns is-wider-left">
     88        <hr />
     89
     90        <div class="about__section has-2-columns has-accent-background-color is-wider-right">
    9391            <div class="column">
    9492                <h2><?php _e( 'Security' ); ?></h2>
     
    9997                <p><?php _e( 'If updating plugins and themes manually is your thing, now that’s easier too — just upload a ZIP file.' ); ?></p>
    10098            </div>
    101             <div class="column is-edge-to-edge" style="background-color:skyblue;">
    102             </div>
    103         </div>
    104 
    105         <hr />
    106 
    107         <div class="about__section">
    108             <div class="column is-edge-to-edge" style="height:200px;background-color:skyblue;">
    109             </div>
     99            <div class="column about__image is-vertically-aligned-center">
     100                <figure aria-labelledby="about-security" class="about__image">
     101                    <video controls poster="https://make.wordpress.org/core/files/2020/08/security-poster.png">
     102                        <source src="https://make.wordpress.org/core/files/2020/08/wp55-about-page-security-section.mp4" type="video/mp4" />
     103                    </video>
     104                    <figcaption id="about-security" class="screen-reader-text"><?php _e( 'Video: Installed plugin screen, which shows a new column, Automatic Updates. In this column are buttons that say "Enable auto-updates." When clicked, the auto-updates feature is turned on for that plugin, and the button switches to say "Disable auto-updates". Two plugins have updates, the updates are automatically queued up in 4 hours.' ); ?></figcaption>
     105                </figure>
     106            </div>
     107        </div>
     108
     109        <hr />
     110
     111        <div class="about__section has-subtle-background-color">
    110112            <div class="column">
    111113                <h2><?php _e( 'Highlights from the block editor' ); ?></h2>
     
    113115            </div>
    114116        </div>
    115         <div class="about__section has-2-columns">
    116             <div class="column">
     117        <div class="about__section has-2-columns  has-subtle-background-color">
     118            <div class="column">
     119                <figure aria-labelledby="about-block-pattern" class="about__image">
     120                    <video controls poster="https://make.wordpress.org/core/files/2020/07/block-pattern-poster.png">
     121                        <source src="https://make.wordpress.org/core/files/2020/07/block-patterns.mp4" type="video/mp4" />
     122                    </video>
     123                    <figcaption id="about-block-pattern" class="screen-reader-text"><?php _e( 'Video: In the editor, the block inserter shows two tabs, Blocks and Patterns. The Patterns tab is selected. There are different block layouts in this tab. A section called "Button" has patterns for two buttons, three buttons. Next is a section called "Column", with two columns, two columns with images, three columns of text with buttons.' ); ?></figcaption>
     124                </figure>
     125                <h3><?php _e( 'Block patterns' ); ?></h3>
     126                <p><?php _e( 'New block patterns make it simple and fun to create complex, beautiful layouts, using combinations of text and media that you can mix and match to fit your story.' ); ?></p>
     127                <p><?php _e( 'You will also find block patterns in a wide variety of plugins and themes, with more added all the time. Pick any of them from a single place — just click and go!' ); ?></p>
     128            </div>
     129            <div class="column">
     130                <figure aria-labelledby="about-image-editor" class="about__image">
     131                    <video controls poster="https://make.wordpress.org/core/files/2020/07/image-editor-poster.png">
     132                        <source src="https://make.wordpress.org/core/files/2020/07/image-editor.mp4" type="video/mp4" />
     133                    </video>
     134                    <figcaption id="about-image-editor" class="screen-reader-text"><?php _e( 'Video: In the new image editor, an image icon gets dragged and dropped into the space, which turns blue to accept the upload. The image expands to fill the editor. Dragging a handle on the right side of the image widens it to scale and resizes the editor to fit. Next the cursor moves to a text area below the image and clicks to bring up standard block text-editing tools and write a caption for the image. Clicking in the image dismisses the text tools, and the cursor now moves to a toolbar at the top of the image space. A click on the Crop icon reveals a dropdown set of common aspect ratios; lingering briefly on one choice demos the crop. Applying it requires a confirmation click in the toolbar.' ); ?></figcaption>
     135                </figure>
    117136                <h3><?php _e( 'Inline image editing' ); ?></h3>
    118137                <p><?php _e( 'Crop, rotate, and zoom your photos right from the image block. If you spend a lot of time on images, this could save you hours!' ); ?></p>
    119                 <h3><?php _e( 'Block patterns' ); ?></h3>
    120                 <p><?php _e( 'New block patterns make it simple and fun to create complex, beautiful layouts, using combinations of text and media that you can mix and match to fit your story.' ); ?></p>
    121                 <p><?php _e( 'You will also find block patterns in a wide variety of plugins and themes, with more added all the time. Pick any of them from a single dropdown — just click and go!' ); ?></p>
    122             </div>
    123             <div class="column">
     138
    124139                <h3><?php _e( 'The New Block Directory' ); ?></h3>
    125140                <p><?php _e( 'Now it’s easier than ever to find the block you need. The new block directory is built right into the block editor, so you can install new block types to your site without ever leaving the editor.' ); ?></p>
     
    132147        <hr />
    133148
    134         <div class="about__section has-2-columns">
     149        <div class="about__section has-1-column">
    135150            <div class="column">
    136151                <h2><?php _e( 'Accessibility' ); ?></h2>
     
    138153                <p><?php _e( 'Now you can copy links in media screens and modal dialogs with a button, instead of trying to highlight a line of text.' ); ?></p>
    139154                <p><?php _e( 'You can also move meta boxes with the keyboard, and edit images in WordPress with your assistive device, as it can read you the instructions in the image editor.' ); ?></p>
    140             </div>
    141             <div class="column is-edge-to-edge" style="background-color:skyblue;">
    142155            </div>
    143156        </div>
     
    212225                        ?>
    213226                    </li>
    214                     <li><?php _e( 'New filters let custom post types associated with the category taxonomy have a default term beyond “Uncategorized”.' ); ?></li>
     227                    <li><?php _e( 'Custom post types associated with the category taxonomy can now opt-in to supporting the default term.' ); ?></li>
     228                    <li>
     229                        <?php
     230                        printf(
     231                            /* translators: %s: 'register_taxonomy' function name. */
     232                            __( 'Default terms can now be specified for custom taxonomies in %s.' ),
     233                            '<code>register_taxonomy()</code>'
     234                        );
     235                        ?>
     236                    </li>
     237                    <li>
     238                        <?php
     239                        printf(
     240                            /* translators: %s: 'register_meta' function name. */
     241                            __( 'The REST API now officially supports specifying default metadata values through %s.' ),
     242                            '<code>register_meta()</code>'
     243                        );
     244                        ?>
     245                    </li>
    215246                    <li><?php _e( 'You will find updated versions of these bundled libraries: SimplePie, Twemoji, Masonry, imagesLoaded, getID3, Moment.js, and clipboard.js.' ); ?></li>
    216247                </ul>
    217248            </div>
    218         </div>
    219 
    220         <hr class="is-small" />
    221 
    222         <div class="about__section">
    223 
    224249        </div>
    225250
  • trunk/src/wp-admin/credits.php

    r48675 r48729  
    3131                <span><?php echo $display_version; ?></span>
    3232            </p>
     33        </div>
     34
     35        <div class="about__header-text">
     36            Musician Name
    3337        </div>
    3438
     
    7478
    7579            <?php endif; ?>
    76         </div>
    77 
    78         <div class="about__image aligncenter">
    79             <img src="data:image/svg+xml;charset=utf8,%3Csvg width='1000' height='300' viewbox='0 0 1000 300' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23F3F4F5' d='M0 0h1000v300H0z'/%3E%3Cpath style='mix-blend-mode:multiply' d='M39.6 140.22l931.1 3.36.8 76.5-929.5 6.6-2.4-86.46z' fill='%23216DD2'/%3E%3Cpath style='mix-blend-mode:multiply' d='M963.7 275.14s-.9-59.58-1-64.14c-.1-4.2-932.3 1.74-932.3 1.74L29 268.48v8.4' fill='%237FCDE6'/%3E%3Cpath style='mix-blend-mode:multiply' d='M958 73.32L47.8 70.26l1.2 78.66 907.3 4.26 1.7-79.86z' fill='%23072CF0'/%3E%3Cpath style='mix-blend-mode:multiply' d='M34 91.32l910.4-2.16L939.2 21 33.3 23.82l.7 67.5z' fill='%230188D9'/%3E%3C/svg%3E" alt="" />
    8080        </div>
    8181    </div>
  • trunk/src/wp-admin/css/about.css

    r48675 r48729  
    2121.about__container {
    2222    /* Section backgrounds */
    23     --background: #f3f4f5;
     23    --background: #fff;
    2424    --subtle-background: #f2edd4;
    2525    /* Main text color */
     
    2929    --accent-1: #ebcd3d; /* Accent background */
    3030    --accent-2: #bd7331;
    31     --accent-3: #bc5131;
     31    --accent-3: #b04329;
    3232    /* Navigation colors. */
    3333    --nav-background: var( --subtle-background );
     
    109109}
    110110
    111 
    112111.about__container .has-transparent-background-color {
    113112    background-color: transparent;
     
    115114
    116115.about__container .has-accent-color {
    117     color: #bc5131;
     116    color: #b04329;
    118117    color: var(--accent-3);
    119118}
     
    181180.about__section.is-feature p + p {
    182181    margin-top: 1rem;
     182}
     183
     184.about__section.has-1-column {
     185    margin-left: auto;
     186    margin-right: auto;
     187    max-width: 36em;
    183188}
    184189
     
    290295
    291296@media screen and (max-width: 782px) {
     297    .about__section.has-2-columns.is-wider-right,
     298    .about__section.has-2-columns.is-wider-left,
    292299    .about__section.has-3-columns,
    293300    .about__section.has-4-columns {
     
    314321        padding-top: 16px;
    315322        padding-bottom: 16px;
    316         width: 100%;
    317323    }
    318324
     
    354360
    355361.about__section a {
    356     color: #bc5131;
     362    color: #b04329;
    357363    color: var(--accent-3);
    358364    text-decoration: underline;
     
    384390.about__container img {
    385391    margin: 0;
     392    max-width: 100%;
    386393    vertical-align: middle;
    387394}
    388395
    389396.about__container .about__image {
    390     display: -ms-grid;
    391     display: grid;
    392     align-items: center;
    393     justify-content: center;
    394     height: 100%;
    395     overflow: hidden;
     397    margin: 0;
    396398}
    397399
     
    402404}
    403405
     406.about__container .about__image .wp-video {
     407    margin-left: auto;
     408    margin-right: auto;
     409}
     410
     411.about__container .about__image + h3 {
     412    margin-top: 1.5em;
     413}
     414
    404415.about__container hr {
    405416    margin: 0;
     
    438449
    439450.about__header {
    440     padding-top: 10vh;
     451    padding-top: 8em;
    441452    margin-bottom: 32px;
    442453    background-color: #ebcd3d;
     
    448459.about__header-title {
    449460    display: flex;
    450     align-items: flex-start;
     461    align-items: center;
    451462    justify-content: center;
     463    height: 20vh;
     464    max-height: 16em;
     465    padding: 32px;
    452466    text-align: center;
    453     padding: 10vh 32px 15vh;
    454467}
    455468
     
    473486    font-size: 1.5em;
    474487    line-height: 1.4;
    475     background: #bc5131;
     488    background: #b04329;
    476489    background: var(--accent-3);
    477490    color: #f2edd4;
     
    483496}
    484497
     498.about__header-text:last-of-type {
     499    display: inline-block;
     500    float: right;
     501    margin-left: 0;
     502    margin-right: -16px;
     503    margin-bottom: 4em;
     504}
     505
    485506.about__header-navigation {
     507    clear: both;
    486508    padding-top: 0;
    487509    background: #f2edd4;
    488510    background: var(--nav-background);
    489     color: #bc5131;
     511    color: #b04329;
    490512    color: var(--nav-color);
    491513    border-bottom: 3px solid #ebcd3d;
     
    516538    margin-bottom: -3px;
    517539    border-width: 0 0 6px;
    518     border-color: #bc5131;
     540    border-color: #b04329;
    519541    border-color: var(--nav-current);
    520542}
     
    526548    color: #f2edd4;
    527549    color: var(--text-light);
    528     border-color: #bc5131;
     550    border-color: #b04329;
    529551    border-color: var(--nav-current);
    530552}
  • trunk/src/wp-admin/freedoms.php

    r48675 r48729  
    3434                <span><?php echo $display_version; ?></span>
    3535            </p>
     36        </div>
     37
     38        <div class="about__header-text">
     39            Musician Name
    3640        </div>
    3741
  • trunk/src/wp-admin/privacy.php

    r48675 r48729  
    2828                <span><?php echo $display_version; ?></span>
    2929            </p>
     30        </div>
     31
     32        <div class="about__header-text">
     33            Musician Name
    3034        </div>
    3135
Note: See TracChangeset for help on using the changeset viewer.