Changeset 48733

Timestamp:

08/04/2020 05:42:44 PM (6 years ago)

Author:

desrosj

Message:

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

Merges [48729-48730] to the 5.5 branch.
Props audrasjb, SergeyBiryukov.
See #50416.

Location:

branches/5.5/src/wp-admin

Files:

• about.php (modified) (8 diffs)
• credits.php (modified) (1 diff)
• css/about.css (modified) (16 diffs)

branches/5.5/src/wp-admin/about.php

@@ -62 +62 @@
                 <hr />
 
-                <div class="about__section has-2-columns is-wider-left">
+                <div class="about__section has-1-column">
                         <div class="column">
                                 <h2><?php _e( 'Speed' ); ?></h2>
@@ -70 +70 @@
                                 <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>
                         </div>
-                        <div class="column is-edge-to-edge" style="background-color:skyblue;">
-                        </div>
-                </div>
-
-                <hr class="is-small" />
-
-                <div class="about__section has-2-columns is-wider-right">
-                        <div class="column is-edge-to-edge" style="background-color:skyblue;">
-                        </div>
+                </div>
+
+                <div class="about__section has-1-column">
                         <div class="column">
                                 <h2><?php _ex( 'Search', 'sitemap' ); ?></h2>
@@ -88 +82 @@
                 </div>
 
-                <hr class="is-small" />
-
-                <div class="about__section has-2-columns is-wider-left">
+                <hr />
+
+                <div class="about__section has-2-columns has-accent-background-color is-wider-right">
                         <div class="column">
                                 <h2><?php _e( 'Security' ); ?></h2>
@@ -99 +93 @@
                                 <p><?php _e( 'If updating plugins and themes manually is your thing, now that’s easier too — just upload a ZIP file.' ); ?></p>
                         </div>
-                        <div class="column is-edge-to-edge" style="background-color:skyblue;">
-                        </div>
-                </div>
-
-                <hr />
-
-                <div class="about__section">
-                        <div class="column is-edge-to-edge" style="height:200px;background-color:skyblue;">
-                        </div>
+                        <div class="column about__image is-vertically-aligned-center">
+                                <figure aria-labelledby="about-security" class="about__image">
+                                        <video controls poster="https://make.wordpress.org/core/files/2020/08/security-poster.png">
+                                                <source src="https://make.wordpress.org/core/files/2020/08/wp55-about-page-security-section.mp4" type="video/mp4" />
+                                        </video>
+                                        <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>
+                                </figure>
+                        </div>
+                </div>
+
+                <hr />
+
+                <div class="about__section has-subtle-background-color">
                         <div class="column">
                                 <h2><?php _e( 'Highlights from the block editor' ); ?></h2>
@@ -113 +111 @@
                         </div>
                 </div>
-                <div class="about__section has-2-columns">
-                        <div class="column">
+                <div class="about__section has-2-columns  has-subtle-background-color">
+                        <div class="column">
+                                <figure aria-labelledby="about-block-pattern" class="about__image">
+                                        <video controls poster="https://make.wordpress.org/core/files/2020/07/block-pattern-poster.png">
+                                                <source src="https://make.wordpress.org/core/files/2020/07/block-patterns.mp4" type="video/mp4" />
+                                        </video>
+                                        <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>
+                                </figure>
+                                <h3><?php _e( 'Block patterns' ); ?></h3>
+                                <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>
+                                <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>
+                        </div>
+                        <div class="column">
+                                <figure aria-labelledby="about-image-editor" class="about__image">
+                                        <video controls poster="https://make.wordpress.org/core/files/2020/07/image-editor-poster.png">
+                                                <source src="https://make.wordpress.org/core/files/2020/07/image-editor.mp4" type="video/mp4" />
+                                        </video>
+                                        <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>
+                                </figure>
                                 <h3><?php _e( 'Inline image editing' ); ?></h3>
                                 <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>
-                                <h3><?php _e( 'Block patterns' ); ?></h3>
-                                <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>
-                                <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>
-                        </div>
-                        <div class="column">
+
                                 <h3><?php _e( 'The New Block Directory' ); ?></h3>
                                 <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>
@@ -132 +143 @@
                 <hr />
 
-                <div class="about__section has-2-columns">
+                <div class="about__section has-1-column">
                         <div class="column">
                                 <h2><?php _e( 'Accessibility' ); ?></h2>
@@ -138 +149 @@
                                 <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>
                                 <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>
-                        </div>
-                        <div class="column is-edge-to-edge" style="background-color:skyblue;">
                         </div>
                 </div>
@@ -212 +221 @@
                                                 ?>
                                         </li>
-                                        <li><?php _e( 'New filters let custom post types associated with the category taxonomy have a default term beyond “Uncategorized”.' ); ?></li>
+                                        <li><?php _e( 'Custom post types associated with the category taxonomy can now opt-in to supporting the default term.' ); ?></li>
+                                        <li>
+                                                <?php
+                                                printf(
+                                                        /* translators: %s: 'register_taxonomy' function name. */
+                                                        __( 'Default terms can now be specified for custom taxonomies in %s.' ),
+                                                        '<code>register_taxonomy()</code>'
+                                                );
+                                                ?>
+                                        </li>
+                                        <li>
+                                                <?php
+                                                printf(
+                                                        /* translators: %s: 'register_meta' function name. */
+                                                        __( 'The REST API now officially supports specifying default metadata values through %s.' ),
+                                                        '<code>register_meta()</code>'
+                                                );
+                                                ?>
+                                        </li>
                                         <li><?php _e( 'You will find updated versions of these bundled libraries: SimplePie, Twemoji, Masonry, imagesLoaded, getID3, Moment.js, and clipboard.js.' ); ?></li>
                                 </ul>
                         </div>
-                </div>
-
-                <hr class="is-small" />
-
-                <div class="about__section">
-
                 </div>
 

branches/5.5/src/wp-admin/credits.php

@@ -75 +75 @@
                         <?php endif; ?>
                 </div>
-
-                <div class="about__image aligncenter">
-                        <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="" />
-                </div>
         </div>
 

branches/5.5/src/wp-admin/css/about.css

@@ -21 +21 @@
 .about__container {
         /* Section backgrounds */
-        --background: #f3f4f5;
+        --background: #fff;
         --subtle-background: #f2edd4;
         /* Main text color */
@@ -29 +29 @@
         --accent-1: #ebcd3d; /* Accent background */
         --accent-2: #bd7331;
-        --accent-3: #bc5131;
+        --accent-3: #b04329;
         /* Navigation colors. */
         --nav-background: var( --subtle-background );
@@ -109 +109 @@
 }
 
-
 .about__container .has-transparent-background-color {
         background-color: transparent;
@@ -115 +114 @@
 
 .about__container .has-accent-color {
-        color: #bc5131;
+        color: #b04329;
         color: var(--accent-3);
 }
@@ -181 +180 @@
 .about__section.is-feature p + p {
         margin-top: 1rem;
+}
+
+.about__section.has-1-column {
+        margin-left: auto;
+        margin-right: auto;
+        max-width: 36em;
 }
 
@@ -290 +295 @@
 
 @media screen and (max-width: 782px) {
+        .about__section.has-2-columns.is-wider-right,
+        .about__section.has-2-columns.is-wider-left,
         .about__section.has-3-columns,
         .about__section.has-4-columns {
@@ -314 +321 @@
                 padding-top: 16px;
                 padding-bottom: 16px;
-                width: 100%;
         }
 
@@ -354 +360 @@
 
 .about__section a {
-        color: #bc5131;
+        color: #b04329;
         color: var(--accent-3);
         text-decoration: underline;
@@ -384 +390 @@
 .about__container img {
         margin: 0;
+        max-width: 100%;
         vertical-align: middle;
 }
 
 .about__container .about__image {
-        display: -ms-grid;
-        display: grid;
-        align-items: center;
-        justify-content: center;
-        height: 100%;
-        overflow: hidden;
+        margin: 0;
 }
 
@@ -402 +404 @@
 }
 
+.about__container .about__image .wp-video {
+        margin-left: auto;
+        margin-right: auto;
+}
+
+.about__container .about__image + h3 {
+        margin-top: 1.5em;
+}
+
 .about__container hr {
         margin: 0;
@@ -438 +449 @@
 
 .about__header {
-        padding-top: 10vh;
+        padding-top: 8em;
         margin-bottom: 32px;
         background-color: #ebcd3d;
@@ -448 +459 @@
 .about__header-title {
         display: flex;
-        align-items: flex-start;
+        align-items: center;
         justify-content: center;
+        height: 20vh;
+        max-height: 16em;
+        padding: 32px;
         text-align: center;
-        padding: 10vh 32px 15vh;
 }
 
@@ -473 +486 @@
         font-size: 1.5em;
         line-height: 1.4;
-        background: #bc5131;
+        background: #b04329;
         background: var(--accent-3);
         color: #f2edd4;
@@ -483 +496 @@
 }
 
+.about__header-text:last-of-type {
+        display: inline-block;
+        float: right;
+        margin-left: 0;
+        margin-right: -16px;
+        margin-bottom: 4em;
+}
+
 .about__header-navigation {
+        clear: both;
         padding-top: 0;
         background: #f2edd4;
         background: var(--nav-background);
-        color: #bc5131;
+        color: #b04329;
         color: var(--nav-color);
         border-bottom: 3px solid #ebcd3d;
@@ -516 +538 @@
         margin-bottom: -3px;
         border-width: 0 0 6px;
-        border-color: #bc5131;
+        border-color: #b04329;
         border-color: var(--nav-current);
 }
@@ -526 +548 @@
         color: #f2edd4;
         color: var(--text-light);
-        border-color: #bc5131;
+        border-color: #b04329;
         border-color: var(--nav-current);
 }