<!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>[24006] trunk: New Post Format UI chooser treatment in response to testing.</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, #logmsg > ol { margin-left: 0; 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">
<dt>Revision</dt> <dd><a href="http://core.trac.wordpress.org/changeset/24006">24006</a></dd>
<dt>Author</dt> <dd>markjaquith</dd>
<dt>Date</dt> <dd>2013-04-17 04:08:46 +0000 (Wed, 17 Apr 2013)</dd>
</dl>
<h3>Log Message</h3>
<pre>New Post Format UI chooser treatment in response to testing.
* Bigger icons
* Format description under each
* UI hides after choice
* Saving without choosing implies "Standard"
* Helpful text, with "Change format" link
see <a href="http://core.trac.wordpress.org/ticket/24046">#24046</a>. props lessbloat, wonderboymusic.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkwpadmincsswpadminrtlcss">trunk/wp-admin/css/wp-admin-rtl.css</a></li>
<li><a href="#trunkwpadmincsswpadmincss">trunk/wp-admin/css/wp-admin.css</a></li>
<li><a href="#trunkwpadmineditformadvancedphp">trunk/wp-admin/edit-form-advanced.php</a></li>
<li><a href="#trunkwpadminincludespostformatsphp">trunk/wp-admin/includes/post-formats.php</a></li>
<li><a href="#trunkwpadminjspostformatsjs">trunk/wp-admin/js/post-formats.js</a></li>
<li><a href="#trunkwpincludesjsmediaeditorjs">trunk/wp-includes/js/media-editor.js</a></li>
<li><a href="#trunkwpincludesmediaphp">trunk/wp-includes/media.php</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkwpadmincsswpadminrtlcss"></a>
<div class="modfile"><h4>Modified: trunk/wp-admin/css/wp-admin-rtl.css (24005 => 24006)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-admin/css/wp-admin-rtl.css 2013-04-16 22:35:55 UTC (rev 24005)
+++ trunk/wp-admin/css/wp-admin-rtl.css 2013-04-17 04:08:46 UTC (rev 24006)
</span><span class="lines">@@ -971,29 +971,8 @@
</span><span class="cx"> 11.4 - Post format selection
</span><span class="cx"> ------------------------------------------------------------------------------*/
</span><span class="cx">
</span><del>-.post-format-options a {
- border-left: 1px solid #ebebeb;
- border-right: none;
-}
</del><span class="cx">
</span><del>-.post-format-options a:first-child {
- -webkit-border-bottom-left-radius: 0;
- -webkit-border-top-left-radius: 0;
- border-bottom-left-radius: 0;
- border-top-left-radius: 0;
-}
</del><span class="cx">
</span><del>-.post-format-options a:last-child {
- -webkit-border-bottom-right-radius: 3px;
- -webkit-border-top-right-radius: 3px;
- border-bottom-right-radius: 3px;
- border-top-right-radius: 3px;
-}
-
-.post-format-tip {
- float: left;
-}
-
</del><span class="cx"> /*------------------------------------------------------------------------------
</span><span class="cx"> 12.0 - Categories
</span><span class="cx"> ------------------------------------------------------------------------------*/
</span></span></pre></div>
<a id="trunkwpadmincsswpadmincss"></a>
<div class="modfile"><h4>Modified: trunk/wp-admin/css/wp-admin.css (24005 => 24006)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-admin/css/wp-admin.css 2013-04-16 22:35:55 UTC (rev 24005)
+++ trunk/wp-admin/css/wp-admin.css 2013-04-17 04:08:46 UTC (rev 24006)
</span><span class="lines">@@ -3024,7 +3024,7 @@
</span><span class="cx">
</span><span class="cx"> #titlediv {
</span><span class="cx"> position: relative;
</span><del>- margin-bottom: 10px;
</del><ins>+ margin-bottom: 5px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #titlediv label {
</span><span class="lines">@@ -3047,6 +3047,7 @@
</span><span class="cx"> height: 1.7em;
</span><span class="cx"> width: 100%;
</span><span class="cx"> outline: none;
</span><ins>+ margin: 1px 0;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #titlediv #title-prompt-text,
</span><span class="lines">@@ -3087,10 +3088,10 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #edit-slug-box {
</span><del>- line-height: 23px;
- min-height: 23px;
</del><ins>+ line-height: 24px;
+ min-height: 25px; /* Yes, line-height + 1 */
</ins><span class="cx"> margin-top: 5px;
</span><del>- padding: 0 10px;
</del><ins>+ padding-right: 6px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #edit-slug-box .cancel {
</span><span class="lines">@@ -3930,6 +3931,7 @@
</span><span class="cx">
</span><span class="cx"> .post-formats-fields {
</span><span class="cx"> display: none;
</span><ins>+ margin-bottom: 15px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .wp-format-gallery .post-formats-fields,
</span><span class="lines">@@ -3960,6 +3962,7 @@
</span><span class="cx"> font-size: 1.2em;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+.wp-format-image label,
</ins><span class="cx"> .wp-format-video label,
</span><span class="cx"> .wp-format-audio label {
</span><span class="cx"> float: left;
</span><span class="lines">@@ -3969,18 +3972,12 @@
</span><span class="cx"> float: left;
</span><span class="cx"> overflow: hidden;
</span><span class="cx"> width: 40%;
</span><del>- height: 200px;
</del><ins>+ height: auto;
+ padding: 55px 0 20px;
</ins><span class="cx"> border: 1px dashed #dfdfdf;
</span><span class="cx"> background: #f5f5f5 url(../images/media-button-2x.png) no-repeat 50% 25%;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.wp-format-media-holder.empty,
-.wp-format-audio .wp-format-media-holder,
-.wp-format-video .wp-format-media-holder {
- height: auto;
- padding: 55px 0 20px;
-}
-
</del><span class="cx"> .wp-format-media-holder:hover {
</span><span class="cx"> background-color: #eee;
</span><span class="cx"> }
</span><span class="lines">@@ -4005,9 +4002,7 @@
</span><span class="cx"> max-height: 100%;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.empty .wp-format-media-select,
-.wp-format-audio .wp-format-media-select,
-.wp-format-video .wp-format-media-select {
</del><ins>+.wp-format-media-select {
</ins><span class="cx"> height: 20px;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -4022,6 +4017,7 @@
</span><span class="cx"> margin: 5px 0;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+#wp_format_image,
</ins><span class="cx"> #wp_format_audio,
</span><span class="cx"> #wp_format_video {
</span><span class="cx"> float: left;
</span><span class="lines">@@ -4030,149 +4026,210 @@
</span><span class="cx"> min-height: 97px;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-#icon-edit.standard {
</del><ins>+#icon-edit.standard,
+.post-format-options .standard {
</ins><span class="cx"> background: url(../images/post-formats32.png) no-repeat -3px -4px;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-#icon-edit.image {
</del><ins>+#icon-edit.image,
+.post-format-options .image {
</ins><span class="cx"> background: url(../images/post-formats32.png) no-repeat -43px -4px;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-#icon-edit.gallery {
</del><ins>+#icon-edit.gallery,
+.post-format-options .gallery {
</ins><span class="cx"> background: url(../images/post-formats32.png) no-repeat -83px -4px;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-#icon-edit.audio {
</del><ins>+#icon-edit.audio,
+.post-format-options .audio {
</ins><span class="cx"> background: url(../images/post-formats32.png) no-repeat -123px -4px;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-#icon-edit.video {
</del><ins>+#icon-edit.video,
+.post-format-options .video {
</ins><span class="cx"> background: url(../images/post-formats32.png) no-repeat -163px -4px;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-#icon-edit.chat {
</del><ins>+#icon-edit.chat,
+.post-format-options .chat {
</ins><span class="cx"> background: url(../images/post-formats32.png) no-repeat -202px -4px;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-#icon-edit.status {
</del><ins>+#icon-edit.status,
+.post-format-options .status {
</ins><span class="cx"> background: url(../images/post-formats32.png) no-repeat -242px -4px;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-#icon-edit.aside {
</del><ins>+#icon-edit.aside,
+.post-format-options .aside {
</ins><span class="cx"> background: url(../images/post-formats32.png) no-repeat -282px -4px;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-#icon-edit.quote {
</del><ins>+#icon-edit.quote,
+.post-format-options .quote {
</ins><span class="cx"> background: url(../images/post-formats32.png) no-repeat -322px -4px;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-#icon-edit.link {
</del><ins>+#icon-edit.link,
+.post-format-options .link {
</ins><span class="cx"> background: url(../images/post-formats32.png) no-repeat -362px -4px;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .post-format-description {
</span><span class="cx"> color: #666;
</span><del>- display: none;
- margin: 10px 0;
</del><ins>+ font-size: 12px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .post-format-options {
</span><del>- height: 29px;
- background: #f9f9f9;
- border: 1px solid #dfdfdf;
- -webkit-border-radius: 3px;
- border-radius: 3px;
- margin: 0 0 9px 1px;
</del><ins>+ height: 50px;
+ margin: 13px 0 10px;
</ins><span class="cx"> padding: 0;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .post-format-options a {
</span><del>- border-right: 1px solid #ebebeb;
</del><span class="cx"> display: inline-block;
</span><del>- height: 16px;
- width: 16px;
- padding: 6px;
</del><ins>+ height: 34px;
+ margin-right: 33px;
</ins><span class="cx"> position: relative;
</span><span class="cx"> text-decoration: none;
</span><ins>+ text-align: center;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-.post-format-options a:first-child {
- -webkit-border-bottom-left-radius: 3px;
- -webkit-border-top-left-radius: 3px;
- border-bottom-left-radius: 3px;
- border-top-left-radius: 3px;
</del><ins>+.post-format-options a div {
+ height: 34px;
+ width: 34px;
+ margin: 0 auto;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-.post-format-options a.active,
-.post-format-options a:focus,
-.post-format-options a:hover {
- background: #eee;
- -webkit-box-shadow: inset 0 0 10px #ddd;
- box-shadow: inset 0 0 10px #ddd;
- outline: none;
- opacity: 1;
</del><ins>+.post-format-title {
+ color: #777;
+ display: block;
+ margin-top: 4px;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-.post-format-options a div {
</del><ins>+.post-format-change, .post-format-set .post-format-options {
+ display: none;
+}
+
+.post-format-set .post-format-change {
+ display: block;
+}
+
+#poststuff .post-format-change {
+ margin: 11px 0 13px;
+ padding: 0;
+ font-size: 1.5em;
+ line-height: 18px;
+ clear: left;
+}
+
+.post-format-change span.icon {
+ float: left;
</ins><span class="cx"> height: 16px;
</span><ins>+ margin: 2px 5px 0 0;
</ins><span class="cx"> width: 16px;
</span><del>- opacity: 0.4;
</del><span class="cx"> }
</span><span class="cx">
</span><del>-.post-format-options a.active div,
-.post-format-options a:focus div,
-.post-format-options a:hover div {
- opacity: 1;
-}
-
-.post-format-options .standard {
</del><ins>+.post-format-change span.icon.standard {
</ins><span class="cx"> background: url(../images/post-formats.png) no-repeat -8px -8px;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.post-format-options .image {
</del><ins>+.post-format-change span.icon.image {
</ins><span class="cx"> background: url(../images/post-formats.png) no-repeat -40px -8px;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.post-format-options .gallery {
</del><ins>+.post-format-change span.icon.gallery {
</ins><span class="cx"> background: url(../images/post-formats.png) no-repeat -72px -8px;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.post-format-options .audio {
</del><ins>+.post-format-change span.icon.audio {
</ins><span class="cx"> background: url(../images/post-formats.png) no-repeat -104px -8px;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.post-format-options .video {
</del><ins>+.post-format-change span.icon.video {
</ins><span class="cx"> background: url(../images/post-formats.png) no-repeat -136px -8px;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.post-format-options .chat {
</del><ins>+.post-format-change span.icon.chat {
</ins><span class="cx"> background: url(../images/post-formats.png) no-repeat -168px -8px;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.post-format-options .status {
</del><ins>+.post-format-change span.icon.status {
</ins><span class="cx"> background: url(../images/post-formats.png) no-repeat -200px -8px;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.post-format-options .aside {
</del><ins>+.post-format-change span.icon.aside {
</ins><span class="cx"> background: url(../images/post-formats.png) no-repeat -232px -8px;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.post-format-options .quote {
</del><ins>+.post-format-change span.icon.quote {
</ins><span class="cx"> background: url(../images/post-formats.png) no-repeat -264px -8px;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.post-format-options .link {
</del><ins>+.post-format-change span.icon.link {
</ins><span class="cx"> background: url(../images/post-formats.png) no-repeat -296px -8px;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.post-format-tip {
- color: #999;
- font-size: 14px;
- float: right;
- padding: 6px 10px;
- text-transform: capitalize;
</del><ins>+.post-format-change a {
+ font-size: 12px;
</ins><span class="cx"> }
</span><span class="cx">
</span><ins>+@media only screen and (max-width: 782px) {
+ .post-format-options {
+ height: 33px;
+ }
+
+ .post-format-options a {
+ margin-right: 19px;
+ }
+
+ .post-format-options a div {
+ height: 18px;
+ width: 16px;
+ }
+
+ .post-format-options .standard {
+ background: url(../images/post-formats.png) no-repeat -8px -8px;
+ }
+
+ .post-format-options .image {
+ background: url(../images/post-formats.png) no-repeat -40px -8px;
+ }
+
+ .post-format-options .gallery {
+ background: url(../images/post-formats.png) no-repeat -72px -8px;
+ }
+
+ .post-format-options .audio {
+ background: url(../images/post-formats.png) no-repeat -104px -8px;
+ }
+
+ .post-format-options .video {
+ background: url(../images/post-formats.png) no-repeat -136px -8px;
+ }
+
+ .post-format-options .chat {
+ background: url(../images/post-formats.png) no-repeat -168px -8px;
+ }
+
+ .post-format-options .status {
+ background: url(../images/post-formats.png) no-repeat -200px -8px;
+ }
+
+ .post-format-options .aside {
+ background: url(../images/post-formats.png) no-repeat -232px -8px;
+ }
+
+ .post-format-options .quote {
+ background: url(../images/post-formats.png) no-repeat -264px -8px;
+ }
+
+ .post-format-options .link {
+ background: url(../images/post-formats.png) no-repeat -296px -8px;
+ }
+}
+
</ins><span class="cx"> /*------------------------------------------------------------------------------
</span><span class="cx"> 12.0 - Categories
</span><span class="cx"> ------------------------------------------------------------------------------*/
</span></span></pre></div>
<a id="trunkwpadmineditformadvancedphp"></a>
<div class="modfile"><h4>Modified: trunk/wp-admin/edit-form-advanced.php (24005 => 24006)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-admin/edit-form-advanced.php 2013-04-16 22:35:55 UTC (rev 24005)
+++ trunk/wp-admin/edit-form-advanced.php 2013-04-17 04:08:46 UTC (rev 24006)
</span><span class="lines">@@ -133,19 +133,23 @@
</span><span class="cx"> wp_enqueue_script( 'wp-mediaelement' );
</span><span class="cx"> wp_enqueue_style( 'wp-mediaelement' );
</span><span class="cx"> $post_format = get_post_format();
</span><ins>+ $post_format_set_class = 'post-format-set';
</ins><span class="cx">
</span><del>- if ( ! $post_format )
</del><ins>+ if ( ! $post_format ) {
</ins><span class="cx"> $post_format = 'standard';
</span><ins>+ if ( 'auto-draft' == $post->post_status )
+ $post_format_set_class = '';
+ }
</ins><span class="cx">
</span><span class="cx"> $format_class = " class='wp-format-{$post_format}'";
</span><span class="cx">
</span><span class="cx">
</span><span class="cx"> $all_post_formats = array(
</span><span class="cx"> 'standard' => array (
</span><del>- 'description' => __( 'Add a title and use the editor to compose your post.' )
</del><ins>+ 'description' => __( 'Use the editor below to compose your post.' )
</ins><span class="cx"> ),
</span><span class="cx"> 'image' => array (
</span><del>- 'description' => __( 'Select or upload an image to use for your post.' )
</del><ins>+ 'description' => __( 'Select or upload an image for your post.' )
</ins><span class="cx"> ),
</span><span class="cx"> 'gallery' => array (
</span><span class="cx"> 'description' => __( 'Use the Add Media button to select or upload images for your gallery.' )
</span><span class="lines">@@ -166,10 +170,10 @@
</span><span class="cx"> 'description' => __( 'Use the editor to compose a status update. What&#8217;s new?' )
</span><span class="cx"> ),
</span><span class="cx"> 'quote' => array (
</span><del>- 'description' => __( 'Copy a quotation into the box. Also add the source and URL if you have them.' )
</del><ins>+ 'description' => __( 'Copy a quotation into the box below. Add a source and URL if you have them.' )
</ins><span class="cx"> ),
</span><span class="cx"> 'aside' => array (
</span><del>- 'description' => __( 'An aside is a quick thought or side topic. Use the editor to compose one.' )
</del><ins>+ 'description' => __( 'Use the editor to share a quick thought or side topic.' )
</ins><span class="cx"> )
</span><span class="cx"> );
</span><span class="cx"> $post_format_options = '';
</span><span class="lines">@@ -181,7 +185,7 @@
</span><span class="cx"> $active_post_type_slug = $slug;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- $post_format_options .= '<a ' . $class . ' href="?format=' . $slug . '" data-description="' . $attr['description'] . '" data-wp-format="' . $slug . '" title="' . ucfirst( sprintf( __( '%s Post' ), $slug ) ) . '"><div class="' . $slug . '"></div></a>';
</del><ins>+ $post_format_options .= '<a ' . $class . ' href="?format=' . $slug . '" data-description="' . $attr['description'] . '" data-wp-format="' . $slug . '" title="' . ucfirst( $slug ) . '"><div class="' . $slug . '"></div><span class="post-format-title">' . ucfirst( $slug ) . '</span></a>';
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> $current_post_format = array( 'currentPostFormat' => esc_html( $active_post_type_slug ) );
</span><span class="lines">@@ -358,7 +362,7 @@
</span><span class="cx"> require_once('./admin-header.php');
</span><span class="cx"> ?>
</span><span class="cx">
</span><del>-<div class="wrap">
</del><ins>+<div class="wrap <?php echo $post_format_set_class; ?>">
</ins><span class="cx"> <?php screen_icon(); ?>
</span><span class="cx"> <h2><?php
</span><span class="cx"> echo esc_html( $title );
</span><span class="lines">@@ -374,6 +378,11 @@
</span><span class="cx"> <div id="lost-connection-notice" class="error hidden">
</span><span class="cx"> <p><?php _e("You have lost your connection with the server, and saving has been disabled. This message will vanish once you've reconnected."); ?></p>
</span><span class="cx"> </div>
</span><ins>+<?php if ( ! empty( $post_format_options ) ) : ?>
+<div class="post-format-options">
+ <?php echo $post_format_options; ?>
+</div>
+<?php endif; ?>
</ins><span class="cx"> <form name="post" action="post.php" method="post" id="post"<?php do_action('post_edit_form_tag'); ?>>
</span><span class="cx"> <?php wp_nonce_field($nonce_action); ?>
</span><span class="cx"> <input type="hidden" id="user-id" name="user_ID" value="<?php echo (int) $user_ID ?>" />
</span><span class="lines">@@ -400,14 +409,6 @@
</span><span class="cx"> <div id="poststuff">
</span><span class="cx"> <div id="post-body" class="metabox-holder columns-<?php echo 1 == get_current_screen()->get_columns() ? '1' : '2'; ?>">
</span><span class="cx"> <div id="post-body-content"<?php echo $format_class; ?>>
</span><del>-
-<?php if ( ! empty( $post_format_options ) ) : ?>
-<div class="post-format-options">
- <span class="post-format-tip">Standard Post</span>
- <?php echo $post_format_options; ?>
-</div>
-<?php endif; ?>
-
</del><span class="cx"> <?php if ( post_type_supports($post_type, 'title') ) { ?>
</span><span class="cx"> <div id="titlediv">
</span><span class="cx"> <div id="titlewrap">
</span><span class="lines">@@ -424,7 +425,7 @@
</span><span class="cx"> if ( $post_type_object->public && ! ( 'pending' == get_post_status( $post ) && !current_user_can( $post_type_object->cap->publish_posts ) ) ) {
</span><span class="cx"> $has_sample_permalink = $sample_permalink_html && 'auto-draft' != $post->post_status;
</span><span class="cx"> ?>
</span><del>- <div id="edit-slug-box" class="hide-if-no-js<?php if ( ! $has_sample_permalink ) echo ' hidden' ?>">
</del><ins>+ <div id="edit-slug-box" class="hide-if-no-js">
</ins><span class="cx"> <?php
</span><span class="cx"> if ( $has_sample_permalink )
</span><span class="cx"> echo $sample_permalink_html;
</span></span></pre></div>
<a id="trunkwpadminincludespostformatsphp"></a>
<div class="modfile"><h4>Modified: trunk/wp-admin/includes/post-formats.php (24005 => 24006)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-admin/includes/post-formats.php 2013-04-16 22:35:55 UTC (rev 24005)
+++ trunk/wp-admin/includes/post-formats.php 2013-04-17 04:08:46 UTC (rev 24006)
</span><span class="lines">@@ -1,9 +1,10 @@
</span><span class="cx"> <?php
</span><span class="cx"> global $wp_embed;
</span><ins>+
</ins><span class="cx"> $format_meta = get_post_format_meta( $post_ID );
</span><span class="cx">
</span><span class="cx"> ?>
</span><del>-<div class="post-format-description"></div>
</del><ins>+<div class="post-format-change"><span class="icon <?php echo esc_attr( $post_format ); ?>"></span> <span class="post-format-description"><?php echo $all_post_formats[$post_format]['description']; ?></span> <a href="#"><?php _e('Change format'); ?></a></div>
</ins><span class="cx"> <div class="post-formats-fields">
</span><span class="cx">
</span><span class="cx"> <input type="hidden" name="post_format" id="post_format" value="<?php echo esc_attr( $post_format ); ?>" />
</span><span class="lines">@@ -18,27 +19,38 @@
</span><span class="cx"> <input type="text" id="wp_format_quote_source" name="_wp_format_quote_source" value="<?php echo esc_attr( $format_meta['quote_source'] ); ?>" class="widefat" />
</span><span class="cx"> </div>
</span><span class="cx">
</span><del>- <?php
- $image = false;
- if ( ! empty( $format_meta['image'] ) && is_numeric( $format_meta['image'] ) ) {
- $format_meta['image'] = absint( $format_meta['image'] );
- $image = wp_get_attachment_url( $format_meta['image'] );
- }
- ?>
</del><span class="cx"> <div class="field wp-format-image">
</span><del>- <div data-format="image" class="wp-format-media-holder hide-if-no-js<?php if ( ! $image ) echo ' empty'; ?>">
</del><ins>+ <?php if ( ! empty( $format_meta['image'] ) ) : ?>
+ <div id="image-preview" class="wp-format-media-preview">
+ <?php
+ if ( is_numeric( $format_meta['image'] ) ) {
+ $format_meta['image'] = absint( $format_meta['image'] );
+ $image = wp_get_attachment_url( $format_meta['image'] );
+ printf( '<img src="%s" alt="%s" />', esc_url( $image ), get_the_title( $format_meta['image'] ) );
+ } elseif ( preg_match( '/' . get_shortcode_regex() . '/s', $format_meta['image'] ) ) {
+ echo do_shortcode( $format_meta['image'] );
+ } elseif ( ! preg_match( '#<[^>]+>#', $format_meta['image'] ) ) {
+ printf( '<img src="%s" alt="" />', esc_url( $format_meta['image'] ) );
+ } else {
+ echo $format_meta['image'];
+ }
+ ?>
+ </div>
+ <?php endif ?>
+ <label for="wp_format_image"><?php
+ if ( current_user_can( 'unfiltered_html' ) )
+ _e( 'Image HTML or URL' );
+ else
+ _e( 'Image URL' );
+ ?></label>
+ <textarea id="wp_format_image" type="text" name="_wp_format_image" class="widefat"><?php esc_html_e( $format_meta['image'] ); ?></textarea>
+ <div data-format="image" class="wp-format-media-holder hide-if-no-js">
</ins><span class="cx"> <a href="#" class="wp-format-media-select"
</span><span class="cx"> data-choose="<?php esc_attr_e( 'Choose an Image' ); ?>"
</span><span class="cx"> data-update="<?php esc_attr_e( 'Select Image' ); ?>">
</span><del>- <?php
- if ( $image )
- printf( '<img src="%s" alt="%s" />', esc_url( $image ), get_the_title( $format_meta['image'] ) );
- else
- _e( 'Select / Upload Image' );
- ?>
</del><ins>+ <?php _e( 'Select / Upload Image' ); ?>
</ins><span class="cx"> </a>
</span><span class="cx"> </div>
</span><del>- <input id="wp_format_image" type="hidden" name="_wp_format_image" value="<?php echo esc_attr( $format_meta['image'] ); ?>" />
</del><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="field wp-format-link wp-format-quote wp-format-image">
</span><span class="lines">@@ -46,11 +58,8 @@
</span><span class="cx"> <input type="text" id="wp_format_url" name="_wp_format_url" value="<?php echo esc_url( $format_meta['url'] ); ?>" class="widefat" />
</span><span class="cx"> </div>
</span><span class="cx">
</span><del>- <?php
- $show_video_preview = ! empty( $format_meta['video'] );
- ?>
- <div class="field wp-format-video<?php if ( $show_video_preview ) echo ' has-media-preview'; ?>">
- <?php if ( $show_video_preview ): ?>
</del><ins>+ <div class="field wp-format-video">
+ <?php if ( ! empty( $format_meta['video'] ) ): ?>
</ins><span class="cx"> <div id="video-preview" class="wp-format-media-preview">
</span><span class="cx"> <?php
</span><span class="cx"> if ( is_numeric( $format_meta['video'] ) ) {
</span><span class="lines">@@ -76,7 +85,7 @@
</span><span class="cx"> _e( 'Video URL' );
</span><span class="cx"> ?></label>
</span><span class="cx"> <textarea id="wp_format_video" type="text" name="_wp_format_video" class="widefat"><?php esc_html_e( $format_meta['video'] ); ?></textarea>
</span><del>- <div data-format="video" class="wp-format-media-holder hide-if-no-js<?php if ( ! $image ) echo ' empty'; ?>">
</del><ins>+ <div data-format="video" class="wp-format-media-holder hide-if-no-js">
</ins><span class="cx"> <a href="#" class="wp-format-media-select"
</span><span class="cx"> data-choose="<?php esc_attr_e( 'Choose a Video' ); ?>"
</span><span class="cx"> data-update="<?php esc_attr_e( 'Select Video' ); ?>">
</span><span class="lines">@@ -85,11 +94,8 @@
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><del>- <?php
- $show_audio_preview = ! empty( $format_meta['audio'] );
- ?>
- <div class="field wp-format-audio<?php if ( $show_audio_preview ) echo ' has-media-preview' ?>">
- <?php if ( $show_audio_preview ): ?>
</del><ins>+ <div class="field wp-format-audio">
+ <?php if ( ! empty( $format_meta['audio'] ) ): ?>
</ins><span class="cx"> <div id="audio-preview" class="wp-format-media-preview">
</span><span class="cx"> <?php
</span><span class="cx"> if ( is_numeric( $format_meta['audio'] ) ) {
</span><span class="lines">@@ -114,9 +120,8 @@
</span><span class="cx"> else
</span><span class="cx"> _e( 'Audio URL' );
</span><span class="cx"> ?></label>
</span><del>- <textarea id="wp_format_audio" name="_wp_format_audio" class="widefat"><?php esc_html_e( $format_meta['audio'] );
-?></textarea>
- <div data-format="audio" class="wp-format-media-holder hide-if-no-js<?php if ( empty( $format_meta['audio'] ) ) echo ' empty'; ?>">
</del><ins>+ <textarea id="wp_format_audio" name="_wp_format_audio" class="widefat"><?php esc_html_e( $format_meta['audio'] ); ?></textarea>
+ <div data-format="audio" class="wp-format-media-holder hide-if-no-js">
</ins><span class="cx"> <a href="#" class="wp-format-media-select" data-choose="<?php esc_attr_e( 'Choose Audio' ); ?>" data-update="<?php esc_attr_e( 'Select Audio' ); ?>">
</span><span class="cx"> <?php _e( 'Select Audio From Media Library' ) ?>
</span><span class="cx"> </a>
</span></span></pre></div>
<a id="trunkwpadminjspostformatsjs"></a>
<div class="modfile"><h4>Modified: trunk/wp-admin/js/post-formats.js (24005 => 24006)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-admin/js/post-formats.js 2013-04-16 22:35:55 UTC (rev 24005)
+++ trunk/wp-admin/js/post-formats.js 2013-04-17 04:08:46 UTC (rev 24006)
</span><span class="lines">@@ -1,103 +1,101 @@
</span><span class="cx"> window.wp = window.wp || {};
</span><span class="cx">
</span><span class="cx"> (function($) {
</span><del>- var container, mediaFrame, lastMimeType, lastMenu, mediaPreview, noUIFormats = ['standard', 'chat', 'status', 'aside', 'gallery'];
</del><ins>+ var container, mediaFrame, lastMimeType, lastMenu, mediaPreview,
+ noUIFormats = ['standard', 'chat', 'status', 'aside', 'gallery'],
+ $container = $( '.post-formats-fields' );
</ins><span class="cx">
</span><span class="cx"> function switchFormatClass( format ) {
</span><del>- container.get(0).className = container.get(0).className.replace( /\bwp-format-[^ ]+/, '' );
</del><ins>+ container.get(0).className = container.get(0).className.replace( /\bwp-format-[^ ]+/g, '' );
</ins><span class="cx"> container.addClass('wp-format-' + format);
</span><span class="cx"> }
</span><span class="cx">
</span><del>- $(function(){
- var $container = $( '.post-formats-fields' );
</del><ins>+ function switchFormat ($this) {
+ var editor, body,
+ parent = $this.parent(),
+ format = $this.data('wp-format'),
+ description = $('.post-format-description'),
+ postTitle = $('#title');
</ins><span class="cx">
</span><del>- // Post formats selection
- $('.post-format-options').on( 'click', 'a', function(e){
- e.preventDefault();
- var $this = $(this), editor, body,
- parent = $this.parent(),
- format = $this.data('wp-format'),
- description = $('.post-format-description');
-
</del><span class="cx"> if ( typeof container === 'undefined' )
</span><span class="cx"> container = $('#post-body-content');
</span><span class="cx">
</span><del>- // Already on this post format. Bail.
- if ( format === postFormats.currentPostFormat )
- return;
</del><ins>+ parent.slideUp().find('a.active').removeClass('active');
+ $this.addClass('active');
+ $('#post_format').val(format);
+ $('.post-format-change').show().find('span.icon').removeClass(postFormats.currentPostFormat).addClass(format);
+ // container.addClass('wp-format-set');
</ins><span class="cx">
</span><del>- parent.find('a.active').removeClass('active');
- $this.addClass('active');
- $('#icon-edit').removeClass(postFormats.currentPostFormat).addClass(format);
- $('#post_format').val(format);
</del><ins>+ if ( -1 < $.inArray( format, noUIFormats ) ) {
+ switchFormatClass( format ); // No slide
+ $container.hide();
+ } else {
+ $container.slideUp( 200, function(){
+ switchFormatClass( format );
+ $container.slideDown( 400 );
+ });
+ }
</ins><span class="cx">
</span><del>- if ( -1 < $.inArray( format, noUIFormats ) && -1 < $.inArray( postFormats.currentPostFormat, noUIFormats ) ) {
- switchFormatClass( format ); // No slide
- } else {
- $container.slideUp( 200, function(){
- switchFormatClass( format );
- $container.slideDown( 400 );
- });
- }
</del><ins>+ postTitle.focus();
</ins><span class="cx">
</span><del>- $('#title').focus();
</del><ins>+ if ( '' === postTitle.val() )
+ $('#title-prompt-text').removeClass('screen-reader-text');
</ins><span class="cx">
</span><del>- // Update description line
- description.html($this.data('description'));
</del><ins>+ // Update description line
+ description.html($this.data('description'));
</ins><span class="cx">
</span><del>- if (description.not(':visible'))
- description.slideDown('fast');
</del><ins>+ if (description.not(':visible'))
+ description.slideDown('fast');
</ins><span class="cx">
</span><del>- if ( typeof tinymce != 'undefined' ) {
- editor = tinymce.get('content');
</del><ins>+ if ( typeof tinymce != 'undefined' ) {
+ editor = tinymce.get('content');
</ins><span class="cx">
</span><del>- if ( editor ) {
- body = editor.getBody();
- body.className = body.className.replace( /\bpost-format-[^ ]+/, '' );
- editor.dom.addClass( body, 'post-format-' + format );
- }
</del><ins>+ if ( editor ) {
+ body = editor.getBody();
+ body.className = body.className.replace( /\bpost-format-[^ ]+/, '' );
+ editor.dom.addClass( body, 'post-format-' + format );
</ins><span class="cx"> }
</span><ins>+ }
</ins><span class="cx">
</span><del>- postFormats.currentPostFormat = format;
- }).on('mouseenter focusin', 'a', function () {
- $('.post-format-tip').html( $(this).prop('title') );
- }).on('mouseleave focusout', 'a', function () {
- $('.post-format-tip').html( $('.post-format-options a.active').prop('title') );
</del><ins>+ postFormats.currentPostFormat = format;
+ }
+
+ $(function(){
+
+ $('.post-format-change a').click(function () {
+ $('.post-formats-fields, .post-format-change').slideUp();
+ $('.post-format-options').slideDown();
+ return false;
</ins><span class="cx"> });
</span><span class="cx">
</span><ins>+ // Post formats selection
+ $('.post-format-options').on( 'click', 'a', function(e){
+ e.preventDefault();
+ switchFormat($(this));
+ });
+
</ins><span class="cx"> // Media selection
</span><span class="cx"> $('.wp-format-media-select').click(function (event) {
</span><span class="cx"> event.preventDefault();
</span><del>- var $el = $(this), $holder, $field, mime = 'image', menu = '',
</del><ins>+ var $el = $(this), mime,
</ins><span class="cx"> $holder = $el.closest('.wp-format-media-holder'),
</span><span class="cx"> $field = $( '#wp_format_' + $holder.data('format') );
</span><span class="cx">
</span><del>- switch ( $holder.data('format') ) {
- case 'audio':
- mime = 'audio';
- break;
- case 'video':
- mime = 'video';
- break;
- }
</del><ins>+ mime = $holder.data('format');
</ins><span class="cx">
</span><span class="cx"> // If the media frame already exists, reopen it.
</span><del>- if ( mediaFrame && lastMimeType === mime && lastMenu === menu ) {
</del><ins>+ if ( mediaFrame && lastMimeType === mime ) {
</ins><span class="cx"> mediaFrame.open();
</span><span class="cx"> return;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> lastMimeType = mime;
</span><del>- lastMenu = menu;
</del><span class="cx">
</span><span class="cx"> // Create the media frame.
</span><span class="cx"> mediaFrame = wp.media.frames.formatMedia = wp.media({
</span><span class="cx"> // Set the title of the modal.
</span><span class="cx"> title: $el.data('choose'),
</span><span class="cx">
</span><del>- // Set the menu sidebar of the modal, if applicable
- toolbar: menu,
-
</del><span class="cx"> // Tell the modal to show only items matching the current mime type.
</span><span class="cx"> library: {
</span><span class="cx"> type: mime
</span><span class="lines">@@ -142,7 +140,7 @@
</span><span class="cx"> // When an image is selected, run a callback.
</span><span class="cx"> mediaFrame.on( 'select', function () {
</span><span class="cx"> // Grab the selected attachment.
</span><del>- var attachment = mediaFrame.state().get('selection').first().toJSON();
</del><ins>+ var w = 0, h = 0, html, attachment = mediaFrame.state().get('selection').first().toJSON();
</ins><span class="cx">
</span><span class="cx"> if ( 0 === attachment.mime.indexOf('audio') ) {
</span><span class="cx"> $field.val(attachment.url);
</span><span class="lines">@@ -157,11 +155,22 @@
</span><span class="cx"> // show one preview at a time
</span><span class="cx"> mediaPreview(attachment);
</span><span class="cx"> } else {
</span><ins>+ html = wp.media.string.image({}, attachment);
</ins><span class="cx"> // set the hidden input's value
</span><del>- $field.val(attachment.id);
- // Show the image in the placeholder
- $el.html('<img src="' + attachment.url + '" />');
- $holder.removeClass('empty').show();
</del><ins>+ $field.val(html);
+ $('#image-preview').remove();
+ if ( attachment.width )
+ w = attachment.width > 600 ? 600 : attachment.width;
+ if ( attachment.height )
+ h = attachment.height;
+ if ( w < attachment.width )
+ h = Math.round( ( h * w ) / attachment.width );
+ $holder.parent().prepend( ['<div id="image-preview" class="wp-format-media-preview">',
+ '<img src="', attachment.url, '"',
+ w ? ' width="' + w + '"' : '',
+ h ? ' height="' + h + '"' : '',
+ ' />',
+ '</div>'].join('') );
</ins><span class="cx"> }
</span><span class="cx"> });
</span><span class="cx">
</span></span></pre></div>
<a id="trunkwpincludesjsmediaeditorjs"></a>
<div class="modfile"><h4>Modified: trunk/wp-includes/js/media-editor.js (24005 => 24006)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-includes/js/media-editor.js 2013-04-16 22:35:55 UTC (rev 24005)
+++ trunk/wp-includes/js/media-editor.js 2013-04-17 04:08:46 UTC (rev 24006)
</span><span class="lines">@@ -191,7 +191,7 @@
</span><span class="cx"> props = wp.media.string.props( props, attachment );
</span><span class="cx"> classes = props.classes || [];
</span><span class="cx">
</span><del>- img.src = props.url;
</del><ins>+ img.src = attachment.url;
</ins><span class="cx"> _.extend( img, _.pick( props, 'width', 'height', 'alt' ) );
</span><span class="cx">
</span><span class="cx"> // Only assign the align class to the image if we're not printing
</span></span></pre></div>
<a id="trunkwpincludesmediaphp"></a>
<div class="modfile"><h4>Modified: trunk/wp-includes/media.php (24005 => 24006)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-includes/media.php 2013-04-16 22:35:55 UTC (rev 24005)
+++ trunk/wp-includes/media.php 2013-04-17 04:08:46 UTC (rev 24006)
</span><span class="lines">@@ -2406,7 +2406,16 @@
</span><span class="cx"> $link_fmt = '<a href="' . esc_url( $meta['url'] ) . '">%s</a>';
</span><span class="cx">
</span><span class="cx"> if ( ! empty( $meta['image'] ) ) {
</span><del>- $post->format_content = sprintf( $link_fmt, wp_get_attachment_image( $meta['image'], $attached_size ) );
</del><ins>+ if ( is_numeric( $meta['image'] ) )
+ $image = wp_get_attachment_image( absint( $meta['image'] ), $attached_size );
+ elseif ( preg_match( '/' . get_shortcode_regex() . '/s', $meta['image'] ) )
+ $image = do_shortcode( $meta['image'] );
+ elseif ( ! preg_match( '#<[^>]+>#', $meta['image'] ) )
+ $image = sprintf( '<img src="%s" alt="" />', esc_url( $meta['image'] ) );
+ else
+ $image = $meta['image'];
+
+ $post->format_content = sprintf( $link_fmt, $image );
</ins><span class="cx"> return $post->format_content;
</span><span class="cx"> }
</span><span class="cx">
</span></span></pre>
</div>
</div>
</body>
</html>