<!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>[40849] trunk/src/wp-admin: About: Introduce design and add link to Media Widgets API dev note.</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 { 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/40849">40849</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/40849","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>melchoyce</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2017-05-27 15:03:08 +0000 (Sat, 27 May 2017)</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'>About: Introduce design and add link to Media Widgets API dev note.
Props: ryelle rclations melchoyce westonruter.
See <a href="https://core.trac.wordpress.org/ticket/40721">#40721</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 2017-05-27 02:08:59 UTC (rev 40848)
+++ trunk/src/wp-admin/about.php 2017-05-27 15:03:08 UTC (rev 40849)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -44,36 +44,45 @@
</span><span class="cx" style="display: block; padding: 0 10px"> </h2>
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="feature-section one-col">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <h2><?php _e( 'An Update with You in Mind' ); ?></h2>
- <p class="lead-description"><?php _e( 'WordPress 4.8 adds some great new features — gear up for a more intuitive WordPress!' ); ?></p>
- <p><?php _e( 'Though some updates are tiny (TinyMCE, that is — see what we did there?) they’ve been developed by hundreds of Core Contributors and Committers with <em>you</em> in mind.' ); ?></p>
- <p><?php _e( 'Get ready for new features you’ll welcome like an old friend: link improvements, <em>three</em> new media widgets covering images, audio, and video, an updated text widget that supports visual editing, and an upgraded news section in your dashboard which brings in nearby and upcoming WordPress events.' ); ?></p>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <div class="col">
+ <h2><?php _e( 'An Update with You in Mind' ); ?></h2>
+ <p class="lead-description"><?php _e( 'WordPress 4.8 adds some great new features — gear up for a more intuitive WordPress!' ); ?></p>
+ <p><?php _e( 'Though some updates are tiny (TinyMCE, that is — see what we did there?) they’ve been developed by hundreds of Core Contributors and Committers with <em>you</em> in mind.' ); ?></p>
+ <p><?php _e( 'Get ready for new features you’ll welcome like an old friend: link improvements, <em>three</em> new media widgets covering images, audio, and video, an updated text widget that supports visual editing, and an upgraded news section in your dashboard which brings in nearby and upcoming WordPress events.' ); ?></p>
+ </div>
</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"> <hr />
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> <h2><?php _e( 'Exciting Widget Updates' ); ?></h2>
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+ <div class="headline-feature one-col">
+ <div class="col">
+ <picture>
+ <!-- Large image -->
+ <source media="(min-width: 1050px)" srcset="https://cldup.com/-951havc3C.png" />
+ <!-- Medium image -->
+ <source media="(min-width: 601px)" srcset="https://cldup.com/60ktdYzv0l.png" />
+ <!-- Small image -->
+ <img src="https://cldup.com/mwvU0Zi5wW.png" alt="" />
+ </picture>
+ </div>
+ </div>
+
</ins><span class="cx" style="display: block; padding: 0 10px"> <div class="feature-section two-col">
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="col">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <div style="height:254px;width:480px;background:black;"></div>
</del><span class="cx" style="display: block; padding: 0 10px"> <h3><?php _e( 'Image Widget' ); ?></h3>
</span><span class="cx" style="display: block; padding: 0 10px"> <p><?php _e( 'Adding an image to a widget is now a simple task that is achievable for any WordPress user without hiring a developer. (Don’t tell them we told you that.) Simply insert your image right within the widget settings — try adding a headshot and brief bio — and see it appear, automatically.' );?></p>
</span><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="col">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <div style="height:254px;width:480px;background:black;"></div>
</del><span class="cx" style="display: block; padding: 0 10px"> <h3><?php _e( 'Video Widget' ); ?></h3>
</span><span class="cx" style="display: block; padding: 0 10px"> <p><?php _e( 'A welcome video is a great way to humanize the branding of your website. It creates trust and empathy in your visitors. You can now add any video from your Media Library to a sidebar on your site with the new Video Widget. So, you, too, can be liked and trusted instantly.' ); ?></p>
</span><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>
-
- <div class="feature-section two-col">
</del><span class="cx" style="display: block; padding: 0 10px"> <div class="col">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <div style="height:254px;width:480px;background:black;"></div>
</del><span class="cx" style="display: block; padding: 0 10px"> <h3><?php _e( 'Audio Widget' ); ?></h3>
</span><span class="cx" style="display: block; padding: 0 10px"> <p><?php _e( 'Are you a podcaster or musician? Adding a widget with your audio file has never been easier. Upload your audio file to the media library, go to the widget settings, select your file, and you’re done. This would be a great way to add a more intimate welcome message, too!' );?></p>
</span><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="col">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <div style="height:254px;width:480px;background:black;"></div>
</del><span class="cx" style="display: block; padding: 0 10px"> <h3><?php _e( 'Rich Text Widget' ); ?></h3>
</span><span class="cx" style="display: block; padding: 0 10px"> <p><?php _e( 'This feature deserves a ticker-tape parade down Main Street. Rich-text editing capabilities are now native for text widgets. Simply, add a widget anywhere and format away. Create lists, add emphasis with bold or italics, and easily insert links. Have fun with your new-found formatting powers, but try to use them for good!' ); ?></p>
</span><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -90,7 +99,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> <?php
</span><span class="cx" style="display: block; padding: 0 10px"> echo wp_video_shortcode( array(
</span><span class="cx" style="display: block; padding: 0 10px"> 'mp4' => 'https://s.w.org/images/core/4.7/starter-content-v1.mp4',
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- 'poster' => 'https://s.w.org/images/core/4.7/starter-content.jpg?v2',
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 'poster' => 'https://cldup.com/ZS8FEi0AE9.png',
</ins><span class="cx" style="display: block; padding: 0 10px"> 'width' => 1140,
</span><span class="cx" style="display: block; padding: 0 10px"> 'height' => 624,
</span><span class="cx" style="display: block; padding: 0 10px"> // 'class' => 'wp-video-shortcode feature-video',
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -102,7 +111,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> <hr />
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="feature-section two-col">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <div class="col" style="height:254px;width:480px;background:black;"></div>
</del><span class="cx" style="display: block; padding: 0 10px"> <div class="col">
</span><span class="cx" style="display: block; padding: 0 10px"> <h3><?php _e( 'Nearby WordPress Events' ); ?></h3>
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -110,6 +118,9 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> <p><?php _e( 'Being part of the community can help you improve your WordPress skills and network with people you wouldn’t otherwise meet. Now you can easily find your local events just by logging in to your dashboard.' ); ?>
</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">+ <div class="col">
+ <img src="https://cldup.com/GuISab3_X1.png" alt="" />
+ </div>
</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"> <hr />
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -136,15 +147,12 @@
</span><span class="cx" style="display: block; padding: 0 10px"> <h3><a href="https://make.wordpress.org/core/2017/05/22/multisite-focused-changes-in-4-8/"><?php _e( 'Multisite Updates' ); ?></a></h3>
</span><span class="cx" style="display: block; padding: 0 10px"> <p><?php _e( 'New capabilities checks have been added to 4.8 with an eye towards removing calls to <code>is_super_admin()</code>. Additionally, new hooks, network-specific site functions, and user count controls have been added.' ); ?></p>
</span><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>
-
- <div class="under-the-hood three-col">
</del><span class="cx" style="display: block; padding: 0 10px"> <div class="col">
</span><span class="cx" style="display: block; padding: 0 10px"> <h3><a href="https://make.wordpress.org/core/2017/05/23/addition-of-tinymce-to-the-text-widget/"><?php _e( 'Text-Editor JavaScript API' ); ?></a></h3>
</span><span class="cx" style="display: block; padding: 0 10px"> <p><?php _e( 'With the addition of TinyMCE to the text widget in 4.8 comes a new JavaScript API for instantiating the editor after page load. This can be used to add an editor instance to any textarea and customize it with buttons and functions.' ); ?></p>
</span><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="col">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <h3><?php _e( 'Media Widgets API' ); ?></h3>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <h3><a href="https://make.wordpress.org/core/2017/05/26/media-widgets-for-images-video-and-audio/"><?php _e( 'Media Widgets API' ); ?></a></h3>
</ins><span class="cx" style="display: block; padding: 0 10px"> <p><?php _e( 'The introduction of a new base media widget REST API schema to 4.8 opens up possibilities for more media widgets (such as galleries or playlists) in the future. The three new media widgets are powered by a shared base class that covers most of the interactions with the media modal. That class also makes it easier to create new media widgets and paves the way for more to come.' ); ?></p>
</span><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="col">
</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 2017-05-27 02:08:59 UTC (rev 40848)
+++ trunk/src/wp-admin/css/about.css 2017-05-27 15:03:08 UTC (rev 40849)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -161,45 +161,41 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /* 1.2 - Structure */
</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-wrap [class$=col] .col {
- float: left;
- position: relative;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.about-wrap [class$="-col"] {
+ display: -ms-flexbox;
+ display: -webkit-flex;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ flex-wrap: wrap;
</ins><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-wrap .two-col .col {
- margin-right: 4.799999999%;
- width: 47.6%;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.about-wrap .feature-section.one-col {
+ margin: 0 auto;
+ max-width: 700px;
</ins><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-wrap .two-col img {
- margin-bottom: 1.5em;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.about-wrap [class$="-col"] .col {
+ -webkit-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
</ins><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-wrap .feature-section.two-col .col {
- display: inline-block;
- float: none;
- margin-top: 1em;
- margin-right: 4.799999999%;
- width: -webkit-calc( 47.6% - 4px );
- width: calc( 47.6% - 4px );
- vertical-align: top;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.about-wrap .two-col .col {
+ min-width: 47%;
+ max-width: 47%;
</ins><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-wrap .three-col .col {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- margin-right: 4.999999999%;
- width: 29.95%;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ align-self: flex-start;
+ min-width: 31%;
+ max-width: 31%;
</ins><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-wrap .two-col .col:nth-of-type(2n),
-.about-wrap .three-col .col:nth-of-type(3n) {
- margin-right: 0;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.about-wrap .two-col img {
+ margin-bottom: 1.5em;
</ins><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-wrap .under-the-hood {
- clear: both;
- overflow: hidden;
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> .about-wrap .feature-video .mejs-controls {
</span><span class="cx" style="display: block; padding: 0 10px"> display: none !important;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -298,9 +294,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> padding-top: 35px;
</span><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-wrap .headline-feature {
- margin: 0 auto;
- max-width: 80%;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.about-wrap .headline-feature img {
+ border: none;
</ins><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-wrap .feature-section .media-container {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -446,6 +441,11 @@
</span><span class="cx" style="display: block; padding: 0 10px"> column-count: 1;
</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-wrap .two-col .col,
+ .about-wrap .three-col .col {
+ min-width: 48% !important;
+ }
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .about-wrap .three-col img {
</span><span class="cx" style="display: block; padding: 0 10px"> display: block;
</span><span class="cx" style="display: block; padding: 0 10px"> margin: 0 auto;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -475,8 +475,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .about-wrap .two-col .col,
</span><span class="cx" style="display: block; padding: 0 10px"> .about-wrap .three-col .col {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- width: 100% !important;
- float: none !important;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ min-width: 100% !important;
</ins><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-wrap .under-the-hood.three-col .col,
</span></span></pre>
</div>
</div>
</body>
</html>