<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[50478] trunk/src/wp-admin: Help/About: Iterate on the 5.7 About Page.</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { white-space: pre-line; overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta" style="font-size: 105%">
<dt style="float: left; width: 6em; font-weight: bold">Revision</dt> <dd><a style="font-weight: bold" href="https://core.trac.wordpress.org/changeset/50478">50478</a><script type="application/ld+json">{"@context":"http://schema.org","@type":"EmailMessage","description":"Review this Commit","action":{"@type":"ViewAction","url":"https://core.trac.wordpress.org/changeset/50478","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>ryelle</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2021-03-02 19:48:41 +0000 (Tue, 02 Mar 2021)</dd>
</dl>
<pre style='padding-left: 1em; margin: 2em 0; border-left: 2px solid #ccc; line-height: 1.25; font-size: 105%; font-family: sans-serif'>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 <a href="https://core.trac.wordpress.org/ticket/52693">#52693</a>. See <a href="https://core.trac.wordpress.org/ticket/52347">#52347</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcwpadminaboutphp">trunk/src/wp-admin/about.php</a></li>
<li><a href="#trunksrcwpadmincssaboutcss">trunk/src/wp-admin/css/about.css</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunksrcwpadminaboutphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/about.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/about.php 2021-03-02 18:19:42 UTC (rev 50477)
+++ trunk/src/wp-admin/about.php 2021-03-02 19:48:41 UTC (rev 50478)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -9,6 +9,9 @@
</span><span class="cx" style="display: block; padding: 0 10px"> /** WordPress Administration Bootstrap */
</span><span class="cx" style="display: block; padding: 0 10px"> require_once __DIR__ . '/admin.php';
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+wp_enqueue_script( 'wp-components' );
+wp_enqueue_style( 'wp-components' );
+
</ins><span class="cx" style="display: block; padding: 0 10px"> /* translators: Page title of the About WordPress page in the admin. */
</span><span class="cx" style="display: block; padding: 0 10px"> $title = _x( 'About', 'page title' );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -90,7 +93,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="column about__image">
</span><span class="cx" style="display: block; padding: 0 10px"> <video controls>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <source src="https://make.wordpress.org/core/files/2021/02/about-57-drag-drop-image.mp4" type="video/mp4" />
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <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" />
</ins><span class="cx" style="display: block; padding: 0 10px"> </video>
</span><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -112,12 +116,12 @@
</span><span class="cx" style="display: block; padding: 0 10px"> </p>
</span><span class="cx" style="display: block; padding: 0 10px"> <p>
</span><span class="cx" style="display: block; padding: 0 10px"> <?php
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- _e( '<strong>Social Icons block:</strong> you can now change the size of the icons in the Social Icons block.' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ _e( '<strong>Social Icons block:</strong> now you can change the size of the icons.' );
</ins><span class="cx" style="display: block; padding: 0 10px"> ?>
</span><span class="cx" style="display: block; padding: 0 10px"> </p>
</span><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="column about__image">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <img src="https://make.wordpress.org/core/files/2021/02/about-57-cover-1.jpg" alt="" />
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <img src="https://s.w.org/images/core/5.7/about-57-cover.jpg" alt="" />
</ins><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -130,14 +134,15 @@
</span><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="about__section has-subtle-background-color">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <div class="column about__image">
- <div class="about__image-comparison">
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <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.' ); ?>" />
</ins><span class="cx" style="display: block; padding: 0 10px"> <div class="about__image-comparison-resize">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <img src="https://make.wordpress.org/core/files/2021/02/about-57-color-new.png" />
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <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.' ); ?>" />
</ins><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <img src="https://make.wordpress.org/core/files/2021/02/about-57-color-old.png" />
</del><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- </div>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <figcaption><?php _e( 'Above, the Dashboard before and after the color update in 5.7.' ); ?></figcaption>
+ </figure>
</ins><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="about__section has-2-columns has-subtle-background-color">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -193,7 +198,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> <h3><?php _e( 'New Robots API' ); ?></h3>
</span><span class="cx" style="display: block; padding: 0 10px"> <p>
</span><span class="cx" style="display: block; padding: 0 10px"> <?php
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- _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.' )
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ _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>).' );
</ins><span class="cx" style="display: block; padding: 0 10px"> ?>
</span><span class="cx" style="display: block; padding: 0 10px"> </p>
</span><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -200,7 +205,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="column">
</span><span class="cx" style="display: block; padding: 0 10px"> <h3><?php _e( 'Ongoing cleanup after update to jQuery 3.5.1' ); ?></h3>
</span><span class="cx" style="display: block; padding: 0 10px"> <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>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <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>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <p><?php _e( 'In 5.7, jQuery gets more focused and less intrusive, with fewer messages in the console.' ); ?></p>
</ins><span class="cx" style="display: block; padding: 0 10px"> <h3><?php _e( 'Lazy-load your iframes' ); ?></h3>
</span><span class="cx" style="display: block; padding: 0 10px"> <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>
</span><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -234,10 +239,88 @@
</span><span class="cx" style="display: block; padding: 0 10px"> <a href="<?php echo esc_url( self_admin_url() ); ?>"><?php is_blog_admin() ? _e( 'Go to Dashboard → Home' ) : _e( 'Go to Dashboard' ); ?></a>
</span><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+<?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>
</ins><span class="cx" style="display: block; padding: 0 10px"> <?php
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-require_once ABSPATH . 'wp-admin/admin-footer.php';
-
</del><span class="cx" style="display: block; padding: 0 10px"> // These are strings we may use to describe maintenance/security releases, where we aim for no new strings.
</span><span class="cx" style="display: block; padding: 0 10px"> return;
</span><span class="cx" style="display: block; padding: 0 10px">
</span></span></pre></div>
<a id="trunksrcwpadmincssaboutcss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/css/about.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/css/about.css 2021-03-02 18:19:42 UTC (rev 50477)
+++ trunk/src/wp-admin/css/about.css 2021-03-02 19:48:41 UTC (rev 50478)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -112,6 +112,11 @@
</span><span class="cx" style="display: block; padding: 0 10px"> color: var(--text-light);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.about__container .has-accent-background-color a {
+ color: #fff;
+ color: var(--text-light);
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .about__container .has-transparent-background-color {
</span><span class="cx" style="display: block; padding: 0 10px"> background-color: transparent;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -551,6 +556,11 @@
</span><span class="cx" style="display: block; padding: 0 10px"> height: auto;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.about__container .about__image figcaption {
+ margin-top: 0.5em;
+ text-align: center;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .about__container .about__image .wp-video {
</span><span class="cx" style="display: block; padding: 0 10px"> margin-left: auto;
</span><span class="cx" style="display: block; padding: 0 10px"> margin-right: auto;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -559,7 +569,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> .about__container .about__image-comparison {
</span><span class="cx" style="display: block; padding: 0 10px"> position: relative;
</span><span class="cx" style="display: block; padding: 0 10px"> display: inline-block;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- line-height: 0;
</del><span class="cx" style="display: block; padding: 0 10px"> max-width: 100%;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -575,31 +584,28 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .about__container .about__image-comparison-resize {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- position: absolute;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ position: absolute !important; /* Needed to override inline style on ResizableBox */
</ins><span class="cx" style="display: block; padding: 0 10px"> top: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> bottom: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> left: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> width: 50%;
</span><span class="cx" style="display: block; padding: 0 10px"> max-width: 100%;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- overflow: hidden;
- resize: horizontal;
- border-right: 2px solid white;
</del><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.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;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.about__container .about__image-comparison.no-js .about__image-comparison-resize {
</ins><span class="cx" style="display: block; padding: 0 10px"> overflow: hidden;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ border-right: 2px solid #007cba;
+ border-right: 2px solid var(--wp-admin-theme-color);
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.about__container .about__image-comparison-resize .components-resizable-box__side-handle::before {
+ width: 4px;
+ right: calc(50% - 2px);
+ transition: none;
+ animation: none;
+ opacity: 1;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .about__container .about__image + h3 {
</span><span class="cx" style="display: block; padding: 0 10px"> margin-top: 1.5em;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span></span></pre>
</div>
</div>
</body>
</html>