Upstream
/
WordPress
mirror of https://github.com/WordPress/WordPress.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Help/About: Iterate on the 5.7 About Page. 

Adds a more obviously interactive comparison for viewing the color scheme differences. Improvements on RTL and IE11. Update strings to be more clear and consistent. Switch to the CDN for loading images.

Props sarahricker, desrosj, melchoyce, SergeyBiryukov, tikifez, clorith, marybaum, audrasjb, francina, hellofromTonya.
Fixes #52693. See #52347.


Built from https://develop.svn.wordpress.org/trunk@50478


git-svn-id: http://core.svn.wordpress.org/trunk@50089 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
ryelle 2021-03-02 19:50:04 +00:00
parent 37b71d9d40
commit f4f117144e
6 changed files with 142 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

107
wp-admin/about.php
View File

@ -9,6 +9,9 @@
/** WordPress Administration Bootstrap */
require_once __DIR__ . '/admin.php';
wp_enqueue_script( 'wp-components' );
wp_enqueue_style( 'wp-components' );
/* translators: Page title of the About WordPress page in the admin. */
$title = _x( 'About', 'page title' );
@ -90,7 +93,8 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
</div>
<div class="column about__image">
<video controls>
<source src="https://make.wordpress.org/core/files/2021/02/about-57-drag-drop-image.mp4" type="video/mp4" />
<source src="https://s.w.org/images/core/5.7/about-57-drag-drop-image.mp4" type="video/mp4" />
<source src="https://s.w.org/images/core/5.7/about-57-drag-drop-image.mp4" type="video/webm" />
</video>
</div>
</div>
@ -112,12 +116,12 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
</p>
<p>
<?php
_e( '<strong>Social Icons block:</strong> you can now change the size of the icons in the Social Icons block.' );
_e( '<strong>Social Icons block:</strong> now you can change the size of the icons.' );
?>
</p>
</div>
<div class="column about__image">
<img src="https://make.wordpress.org/core/files/2021/02/about-57-cover-1.jpg" alt="" />
<img src="https://s.w.org/images/core/5.7/about-57-cover.jpg" alt="" />
</div>
</div>
@ -130,14 +134,15 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
</div>
<div class="about__section has-subtle-background-color">
<div class="column about__image">
<div class="about__image-comparison">
<figure class="column about__image" id="about-image-comparison">
<div class="about__image-comparison no-js">
<img src="https://s.w.org/images/core/5.7/about-57-color-old.png" alt="<?php esc_attr_e( 'Dashboard with old color scheme.' ); ?>" />
<div class="about__image-comparison-resize">
<img src="https://make.wordpress.org/core/files/2021/02/about-57-color-new.png" />
<img src="https://s.w.org/images/core/5.7/about-57-color-new.png" alt="<?php esc_attr_e( 'Dashboard with new color scheme.' ); ?>" />
</div>
<img src="https://make.wordpress.org/core/files/2021/02/about-57-color-old.png" />
</div>
</div>
<figcaption><?php _e( 'Above, the Dashboard before and after the color update in 5.7.' ); ?></figcaption>
</figure>
</div>
<div class="about__section has-2-columns has-subtle-background-color">
@ -193,14 +198,14 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
<h3><?php _e( 'New Robots API' ); ?></h3>
<p>
<?php
_e( 'The new Robots API lets you include the filter directives in the robots meta tag, and the API includes the directive <code>max-image-preview: large</code> by default. That means search engines can show bigger image previews (unless the blog is marked as not public), which can boost your traffic.' )
_e( 'The new Robots API lets you include the filter directives in the robots meta tag, and the API includes the <code>max-image-preview: large</code> directive by default. That means search engines can show bigger image previews, which can boost your traffic (unless the site is marked <em>not-public</em>).' );
?>
</p>
</div>
<div class="column">
<h3><?php _e( 'Ongoing cleanup after update to jQuery 3.5.1' ); ?></h3>
<p><?php _e( 'For years jQuery helped make things move on the screen in ways the basic tools couldn’t—but that keeps changing, and so does jQuery.' ); ?></p>
<p><?php _e( 'One side effect: it generated a set of cryptic messages on the dashboard that informed only developers. In 5.7, you will get far fewer of those messages, and they will be in plain language.' ); ?></p>
<p><?php _e( 'In 5.7, jQuery gets more focused and less intrusive, with fewer messages in the console.' ); ?></p>
<h3><?php _e( 'Lazy-load your iframes' ); ?></h3>
<p><?php _e( 'Now it’s simple to let iframes lazy-load. Just add the <code>loading="lazy"</code> attribute to iframe tags on the front end.' ); ?></p>
</div>
@ -234,9 +239,87 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
<a href="<?php echo esc_url( self_admin_url() ); ?>"><?php is_blog_admin() ? _e( 'Go to Dashboard &rarr; Home' ) : _e( 'Go to Dashboard' ); ?></a>
</div>
</div>
<?php
require_once ABSPATH . 'wp-admin/admin-footer.php';
<?php require_once ABSPATH . 'wp-admin/admin-footer.php'; ?>
<script>
wp.domReady( function() {
var createElement = wp.element.createElement;
var Fragment = wp.element.Fragment;
var render = wp.element.render;
var useState = wp.element.useState;
var ResizableBox = wp.components.ResizableBox;
var container = document.getElementById( 'about-image-comparison' );
var images = container ? container.querySelectorAll( 'img' ) : [];
if ( ! images.length ) {
// Something's wrong, return early.
return;
}
var beforeImage = images.item( 0 );
var afterImage = images.item( 1 );
var caption = container.querySelector( 'figcaption' ).innerText;
function ImageComparison( props ) {
var stateHelper = useState( props.width );
var width = stateHelper[0];
var setWidth = stateHelper[1];
return createElement(
'div',
{
className: 'about__image-comparison'
},
createElement( 'img', { src: beforeImage.src, alt: beforeImage.alt } ),
createElement(
ResizableBox,
{
size: {
width: width,
height: props.height
},
onResizeStop: function( event, direction, elt, delta ) {
setWidth( parseInt( width + delta.width, 10 ) );
},
showHandle: true,
enable: {
top: false,
right: ! wp.i18n.isRTL(),
bottom: false,
left: wp.i18n.isRTL(),
},
className: 'about__image-comparison-resize'
},
createElement(
'div',
{
style: { width: '100%', height: '100%', overflow: 'hidden' }
},
createElement('img', { src: afterImage.src, alt: afterImage.alt } )
)
)
);
}
render(
createElement(
Fragment,
{},
createElement(
ImageComparison,
{
width: beforeImage.clientWidth / 2,
height: beforeImage.clientHeight
}
),
createElement( 'figcaption', {}, caption )
),
container
);
} );
</script>
<?php
// These are strings we may use to describe maintenance/security releases, where we aim for no new strings.
return;

38
wp-admin/css/about-rtl.css
View File

@ -113,6 +113,11 @@
color: var(--text-light);
}
.about__container .has-accent-background-color a {
color: #fff;
color: var(--text-light);
}
.about__container .has-transparent-background-color {
background-color: transparent;
}
@ -552,6 +557,11 @@
height: auto;
}
.about__container .about__image figcaption {
margin-top: 0.5em;
text-align: center;
}
.about__container .about__image .wp-video {
margin-right: auto;
margin-left: auto;
@ -560,7 +570,6 @@
.about__container .about__image-comparison {
position: relative;
display: inline-block;
line-height: 0;
max-width: 100%;
}
@ -576,29 +585,26 @@
}
.about__container .about__image-comparison-resize {
position: absolute;
position: absolute !important; /* Needed to override inline style on ResizableBox */
top: 0;
bottom: 0;
right: 0;
width: 50%;
max-width: 100%;
overflow: hidden;
resize: horizontal;
border-left: 2px solid white;
}
.about__container .about__image-comparison-resize:after {
content: "";
display: block;
position: absolute;
left: 0;
bottom: 0;
width: 20px;
height: 20px;
font-family: dashicons;
font-size: 20px;
line-height: 1;
.about__container .about__image-comparison.no-js .about__image-comparison-resize {
overflow: hidden;
border-left: 2px solid #007cba;
border-left: 2px solid var(--wp-admin-theme-color);
}
.about__container .about__image-comparison-resize .components-resizable-box__side-handle::before {
width: 4px;
left: calc(50% - 2px);
transition: none;
animation: none;
opacity: 1;
}
.about__container .about__image + h3 {

2
wp-admin/css/about-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

38
wp-admin/css/about.css
View File

@ -112,6 +112,11 @@
color: var(--text-light);
}
.about__container .has-accent-background-color a {
color: #fff;
color: var(--text-light);
}
.about__container .has-transparent-background-color {
background-color: transparent;
}
@ -551,6 +556,11 @@
height: auto;
}
.about__container .about__image figcaption {
margin-top: 0.5em;
text-align: center;
}
.about__container .about__image .wp-video {
margin-left: auto;
margin-right: auto;
@ -559,7 +569,6 @@
.about__container .about__image-comparison {
position: relative;
display: inline-block;
line-height: 0;
max-width: 100%;
}
@ -575,29 +584,26 @@
}
.about__container .about__image-comparison-resize {
position: absolute;
position: absolute !important; /* Needed to override inline style on ResizableBox */
top: 0;
bottom: 0;
left: 0;
width: 50%;
max-width: 100%;
overflow: hidden;
resize: horizontal;
border-right: 2px solid white;
}
.about__container .about__image-comparison-resize:after {
content: "";
display: block;
position: absolute;
right: 0;
bottom: 0;
width: 20px;
height: 20px;
font-family: dashicons;
font-size: 20px;
line-height: 1;
.about__container .about__image-comparison.no-js .about__image-comparison-resize {
overflow: hidden;
border-right: 2px solid #007cba;
border-right: 2px solid var(--wp-admin-theme-color);
}
.about__container .about__image-comparison-resize .components-resizable-box__side-handle::before {
width: 4px;
right: calc(50% - 2px);
transition: none;
animation: none;
opacity: 1;
}
.about__container .about__image + h3 {

2
wp-admin/css/about.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
wp-includes/version.php
View File

@ -13,7 +13,7 @@
*
* @global string $wp_version
*/
$wp_version = '5.8-alpha-50476';
$wp_version = '5.8-alpha-50478';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.