sergiotarxz/Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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

Browse Source 
- 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.

git-svn-id: https://develop.svn.wordpress.org/trunk@48783 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Jonathan Desrosiers 2020-08-11 16:51:22 +00:00
parent a84a5029be
commit 56b096195a
2 changed files with 10 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/wp-admin/about.php
View File

@ -114,18 +114,19 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
<div class="about__section has-2-columns has-subtle-background-color">
<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>
</figure>
<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>
<div class="column">

6
src/wp-admin/css/about.css
View File

@ -30,8 +30,8 @@
--accent-2: #bd7331;
--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);
}
@ -98,7 +98,7 @@
}
.about__section {
background: #f3f4f5;
background: #fff;
background: var(--background);
clear: both;
}