Changeset 48783

Timestamp:

08/11/2020 04:51:22 PM (4 years ago)

Author:

desrosj

Message:

Help/About: Final adjustments to the 5.5 About page.

• Final CDN asset URLs.
• Some minor color adjustments.

Props ryelle, marybaum, davidbaumwald, audrasjb, estelaris, afercia, cbringmann, andreamiddleton, desrosj, SergeyBiryukov, ocean90, nrqsnchz, spacedmonkey, whyisjake, man4toman.
Fixes #50416.

Location:

trunk/src/wp-admin

Files:

• about.php (modified) (2 diffs)
• css/about.css (modified) (2 diffs)

trunk/src/wp-admin/about.php

@@ -115 +115 @@
             <div class="column about__image is-vertically-aligned-center">
                 <figure aria-labelledby="about-block-pattern" class="about__image">
-                    <video controls poster="https://s.w.org/images/core/5.5/temp-block-patterns-poster.png">
-                        <source src="https://s.w.org/images/core/5.5/temp-block-patterns.mp4" type="video/mp4" />
-                        <source src="https://s.w.org/images/core/5.5/temp-block-patterns.webm" type="video/webm" />
+                    <video controls poster="https://s.w.org/images/core/5.5/block-patterns-poster.png">
+                        <source src="https://s.w.org/images/core/5.5/block-patterns.mp4" type="video/mp4" />
+                        <source src="https://s.w.org/images/core/5.5/block-patterns.webm" type="video/webm" />
                     </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. After scrolling through options including buttons and columns, a pattern called "Large header with a heading" is chosen. This adds a cover block, which is customized with a photo and the name of the WordPress 5.5 jazz musician.' ); ?></figcaption>
@@ -123 +123 @@
                 <hr />
                 <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 controls poster="https://s.w.org/images/core/5.5/inline-image-editing-poster.png">
+                        <source src="https://s.w.org/images/core/5.5/inline-image-editing.mp4" type="video/mp4" />
+                        <source src="https://s.w.org/images/core/5.5/inline-image-editing-1.webm" type="video/webm" />
                     </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>
+                    <figcaption id="about-image-editor" class="screen-reader-text"><?php _e( 'Video: An image is added with an image block. In the block toolbar, an icon called "Crop" is selected, which changes the toolbar to show image resizing tools. First, zoom is used to zoom into the center of the image. Next, aspect ratio is clicked. This shows a dropdown of common aspect ratios. Square is chosen, and the image is moved within the new square outline. The crop is completed by clicking "Apply."' ); ?></figcaption>
                 </figure>
             </div>

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

@@ -31 +31 @@
     --accent-3: #b04329;
     /* Navigation colors. */
-    --nav-background: var( --subtle-background );
-    --nav-border: var( --accent-1 );
+    --nav-background: var(--subtle-background);
+    --nav-border: var(--accent-1);
     --nav-color: var(--accent-3);
     --nav-current: var(--accent-3);
@@ -99 +99 @@
 
 .about__section {
-    background: #f3f4f5;
+    background: #fff;
     background: var(--background);
     clear: both;