<!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>[33498] trunk/src/wp-admin: About: Second pass at 4.3 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 { 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/33498">33498</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/33498","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>obenland</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2015-07-29 19:57:00 +0000 (Wed, 29 Jul 2015)</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: Second pass at 4.3 about page.

Adds images and videos for major and minor features.
Restores a mangled placeholder in Formatting Shortcuts description.

Assets still need to be moved to the .org CDN once deemed final.

Props ryelle, melchoyce, helen.
See <a href="https://core.trac.wordpress.org/ticket/32929">#32929</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      2015-07-29 19:37:06 UTC (rev 33497)
+++ trunk/src/wp-admin/about.php        2015-07-29 19:57:00 UTC (rev 33498)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -24,24 +24,28 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> $major_features = array(
</span><span class="cx" style="display: block; padding: 0 10px">        array(
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                'src'         => '',
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         'src'         => array(
+                       'mp4'  => 'https://cldup.com/2k26HVNP6P.mp4',
+                       'ogv'  => '',
+                       'webm' => '',
+               ),
</ins><span class="cx" style="display: block; padding: 0 10px">                 'heading'     => 'Formatting Shortcuts',
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">                /* Translators: 1: asterisks; 2: number sign; */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                'description' => sprintf( 'Your writing flow just got faster with new formatting shortcuts in WordPress 4.3. Use asterisks to create lists and number signs to make a heading. No more breaking your flow; your text looks great with a %1$s and a %2$.', '<code>*</code>', '<code>#</code>' ),
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         'description' => sprintf( 'Your writing flow just got faster with new formatting shortcuts in WordPress 4.3. Use asterisks to create lists and number signs to make a heading. No more breaking your flow; your text looks great with a %1$s and a %2$s.', '<code>*</code>', '<code>#</code>' ),
</ins><span class="cx" style="display: block; padding: 0 10px">         ),
</span><span class="cx" style="display: block; padding: 0 10px">        array(
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                'src'         => '',
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         'src'         => 'https://cldup.com/k23oK-g_v1.jpg',
</ins><span class="cx" style="display: block; padding: 0 10px">                 'heading'     => 'Menus in the Customizer',
</span><span class="cx" style="display: block; padding: 0 10px">                'description' => 'Create your menu, update it, and preview it in the customizer, before sharing it with the world. With every release, it becomes easier and faster to build your site from the front-end. And a streamlined customizer design mean a mobile-first, accessibility ready interface.',
</span><span class="cx" style="display: block; padding: 0 10px">        ),
</span><span class="cx" style="display: block; padding: 0 10px">        array(
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                'src'         => '',
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         'src'         => 'https://cldup.com/t1HCztI0PR.jpg',
</ins><span class="cx" style="display: block; padding: 0 10px">                 'heading'     => 'Better Passwords',
</span><span class="cx" style="display: block; padding: 0 10px">                'description' => 'Keep your site more secure with WordPress’ improved approach to passwords. Instead of receiving passwords via email, you’ll get a password reset link. When you add new users to your site, WordPress will automatically generate a secure password.',
</span><span class="cx" style="display: block; padding: 0 10px">        ),
</span><span class="cx" style="display: block; padding: 0 10px">        array(
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                'src'         => '',
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         'src'         => 'https://cldup.com/8LxuMwmsvE.jpg',
</ins><span class="cx" style="display: block; padding: 0 10px">                 'heading'     => 'Site Icons',
</span><span class="cx" style="display: block; padding: 0 10px">                'description' => 'Site icons represent your site in browser tabs, bookmark menus, and on the home screen of mobile devices. Add your unique site icon in the customizer; it will even stay in place when you switch themes. Make your whole site reflect your brand.',
</span><span class="cx" style="display: block; padding: 0 10px">        ),
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -50,17 +54,17 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> $minor_features = array(
</span><span class="cx" style="display: block; padding: 0 10px">        array(
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                'src'         => '',
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         'src'         => 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MDAgNDAwIj48cGF0aCBmaWxsPSIjMDBhMGQyIiBkPSJNNTAgMjE1aDI0MHYzMEg1MHpNNTAgMjc1aDI0MHYzMEg1MHpNNTAgMTU1aDI0MHYzMEg1MHpNNTAgOTVoMjQwdjMwSDUwek0zMTAuMSA5NWwxOS45IDMwIDIwLjEtMzAiLz48L3N2Zz4=',
</ins><span class="cx" style="display: block; padding: 0 10px">                 'heading'     => 'A smoother admin experience',
</span><span class="cx" style="display: block; padding: 0 10px">                'description' => 'Refinements to the list view across the admin make your WordPress more accessible and easier to work with on any device.',
</span><span class="cx" style="display: block; padding: 0 10px">        ),
</span><span class="cx" style="display: block; padding: 0 10px">        array(
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                'src'         => '',
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         'src'         => 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PHBhdGggZmlsbD0iIzAwYTBkMiIgZD0iTTUgMmgxMHEuODIgMCAxLjQxLjU5VDE3IDR2OHEwIC44Mi0uNTkgMS40MVQxNSAxNGgtMmwtNSA1di01SDVxLS44MiAwLTEuNDEtLjU5VDMgMTJWNHEwLS44Mi41OS0xLjQxVDUgMnptOC41IDguNUwxMSA4bDIuNS0yLjUtMS0xTDEwIDcgNy41IDQuNWwtMSAxTDkgOGwtMi41IDIuNSAxIDFMMTAgOWwyLjUgMi41eiIvPjwvc3ZnPg==',
</ins><span class="cx" style="display: block; padding: 0 10px">                 'heading'     => 'Comments turned off on pages',
</span><span class="cx" style="display: block; padding: 0 10px">                'description' => 'All new pages that you create will have comments turned off. Keep discussions to your blog, right where they’re supposed to happen.',
</span><span class="cx" style="display: block; padding: 0 10px">        ),
</span><span class="cx" style="display: block; padding: 0 10px">        array(
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                'src'         => '',
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         'src'         => 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZmlsbD0iIzAwYTBkMiIgZD0iTTI5LjMyOCA1LjcxMnEuMDQ4LS4xNDQuMDk2LS4zODR0LS4wNjQtLjgxNi0uNTI4LS45NzZxLS4zODQtLjM2OC0uODcyLS40NjR0LS43OTIgMGwtLjI4OC4wOHEtMS40NTYuNzItNS44OCAzLjczNnQtNi4zOTIgNS4xNzZxLS43MzYuODMyLTEuNDA4IDIuMzJ0LS44OCAzIC41NDQgMi4zOTJxLjgzMi43MzYgMi4zNDQuNTc2dDMuMDcyLS44MjQgMi4yNDgtMS4zNTJxMi4xNDQtMi4xNDQgNS4xNjgtNi42NTZ0My42MzItNS44MDh6TTIuMjQgMjguMjRxMS4wNTYtLjY4OCAxLjcxMi0xLjUyOHQuOTUyLTEuNjE2LjU0NC0xLjUyLjcyLTEuNDggMS4yNC0xLjI4cTEuMDg4LS44IDIuNTA0LS43MDR0Mi40MjQgMS4xNjhxLjgxNi44OC44MjQgMi42NHQtMS4wOCAyLjg5NnEtMS4yMTYgMS4xMi0yLjkwNCAxLjYyNHQtMy40MjQuNDI0LTMuNTEyLS42MjR6Ii8+PC9zdmc+',
</ins><span class="cx" style="display: block; padding: 0 10px">                 'heading'     => 'Customize your site quickly' ,
</span><span class="cx" style="display: block; padding: 0 10px">                'description' => 'Wherever you are on the front-end, you can click the customize button in the toolbar to swiftly make changes to your site.',
</span><span class="cx" style="display: block; padding: 0 10px">        ),
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -87,7 +91,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">        <div class="wrap about-wrap">
</span><span class="cx" style="display: block; padding: 0 10px">                <h1><?php printf( __( 'Welcome to WordPress&nbsp;%s' ), $display_version ); ?></h1>
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                <div class="about-text"><?php /* @TODO Fun tag line. */ printf( 'Thank you for updating to WordPress %s!', $display_version ); ?></div>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         <div class="about-text"><?php printf( 'Thank you for updating! WordPress %s: faster workflow, easier customization, strong by default.', $display_version ); ?></div>
</ins><span class="cx" style="display: block; padding: 0 10px">                 <div class="wp-badge"><?php printf( __( 'Version %s' ), $display_version ); ?></div>
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">                <h2 class="nav-tab-wrapper">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -105,7 +109,26 @@
</span><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">                        <?php foreach ( $major_features as $feature ) : ?>
</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">-                                <img src="<?php echo esc_url( $feature['src'] ); ?>" />
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                         <div class="media-container">
+                                       <?php
+                                       // Video.
+                                       if ( is_array( $feature['src'] ) ) :
+                                               echo wp_video_shortcode( array(
+                                                       'mp4'      => $feature['src']['mp4'],
+                                                       'ogv'      => $feature['src']['ogv'],
+                                                       'webm'     => $feature['src']['webm'],
+                                                       'loop'     => true,
+                                                       'autoplay' => true,
+                                                       'width'    => 500,
+                                                       'height'   => 284
+                                               ) );
+
+                                       // Image.
+                                       else:
+                                       ?>
+                                       <img src="<?php echo esc_url( $feature['src'] ); ?>" />
+                                       <?php endif; ?>
+                               </div>
</ins><span class="cx" style="display: block; padding: 0 10px">                                 <h3><?php echo $feature['heading']; ?></h3>
</span><span class="cx" style="display: block; padding: 0 10px">                                <p><?php echo $feature['description']; ?></p>
</span><span class="cx" style="display: block; padding: 0 10px">                        </div>
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -115,7 +138,9 @@
</span><span class="cx" style="display: block; padding: 0 10px">                <div class="feature-section three-col">
</span><span class="cx" style="display: block; padding: 0 10px">                        <?php foreach ( $minor_features as $feature ) : ?>
</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">-                                <img src="<?php echo esc_url( $feature['src'] ); ?>" />
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                         <div class="svg-container">
+                                       <img src="<?php echo esc_attr( $feature['src'] ); ?>" />
+                               </div>
</ins><span class="cx" style="display: block; padding: 0 10px">                                 <h3><?php echo $feature['heading']; ?></h3>
</span><span class="cx" style="display: block; padding: 0 10px">                                <p><?php echo $feature['description']; ?></p>
</span><span class="cx" style="display: block; padding: 0 10px">                        </div>
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -128,7 +153,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">                        <div class="feature-section under-the-hood three-col">
</span><span class="cx" style="display: block; padding: 0 10px">                                <?php foreach ( $tech_features as $feature ) : ?>
</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 echo $feature['heading']; ?></h3>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                 <h4><?php echo $feature['heading']; ?></h4>
</ins><span class="cx" style="display: block; padding: 0 10px">                                         <p><?php echo $feature['description']; ?></p>
</span><span class="cx" style="display: block; padding: 0 10px">                                </div>
</span><span class="cx" style="display: block; padding: 0 10px">                                <?php endforeach; ?>
</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  2015-07-29 19:37:06 UTC (rev 33497)
+++ trunk/src/wp-admin/css/about.css    2015-07-29 19:57:00 UTC (rev 33498)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -236,6 +236,21 @@
</span><span class="cx" style="display: block; padding: 0 10px">        max-width: 95%;
</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 .feature-section .media-container {
+       border: 1px solid #ddd;
+       overflow: hidden;
+}
+
+.about-wrap .feature-section .svg-container {
+       padding: 50px 0;
+       text-align: center;
+       background-color: #e1e1e3;
+}
+
+.about-wrap .feature-section .svg-container img {
+       max-width: 150px;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .about-wrap .feature-section:not(.under-the-hood) .col {
</span><span class="cx" style="display: block; padding: 0 10px">        margin-top: 40px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -367,10 +382,6 @@
</span><span class="cx" style="display: block; padding: 0 10px">                border-bottom: 1px solid rgba(0, 0, 0, 0.1);
</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 .two-col .col h3 {
-               margin-top: 0;
-       }
-
</del><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">@@ -423,15 +434,16 @@
</span><span class="cx" style="display: block; padding: 0 10px">                border-bottom: 1px solid #ccc;
</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 .feature-section .svg-container {
+               padding-top: 20px;
+               padding-bottom: 20px;
+       }
+
</ins><span class="cx" style="display: block; padding: 0 10px">         .about-wrap .three-col .col,
</span><span class="cx" style="display: block; padding: 0 10px">        .about-wrap .headline-feature .feature-section .col {
</span><span class="cx" style="display: block; padding: 0 10px">                width: 100% !important;
</span><span class="cx" style="display: block; padding: 0 10px">                float: none !important;
</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 .dfw p {
-               max-width: 90%;
-       }
</del><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"> @media only screen and (max-width: 400px) {
</span></span></pre>
</div>
</div>

</body>
</html>