Ticket #24046: 24046.10.diff

wp-admin/css/colors-classic.css

@@ -164 +164 @@
         color: #fff;
 }
 
+.post-format-options,
 .widget .widget-top,
 .postbox h3,
 .stuffbox h3,
@@ -688 +689 @@
         background-image: linear-gradient(to top, #eff8ff, #f7fcfe);
 }
 
+.post-format-options,
 .postbox h3 {
         color: #174f69;
 }

wp-admin/css/colors-fresh.css

@@ -164 +164 @@
         color: #fff;
 }
 
+.post-format-options,
 .widget .widget-top,
 .postbox h3,
 .stuffbox h3,
@@ -690 +691 @@
         background-image: linear-gradient(to top, #f5f5f5, #f9f9f9);
 }
 
+.post-format-options,
 .postbox h3 {
         color: #464646;
 }

wp-admin/css/wp-admin.css

@@ -4000 +4000 @@
 }
 
 .wp-format-status #titlewrap,
+.wp-format-image .wp-media-buttons .insert-media,
+.wp-format-audio .wp-media-buttons .insert-media,
+.wp-format-video .wp-media-buttons .insert-media,
 .wp-format-aside .wp-media-buttons .insert-media,
 .wp-format-status .wp-media-buttons .insert-media {
         display: none;
@@ -4101 +4104 @@
 }
 
 .post-format-options {
-        height: 50px;
+        border-width: 1px;
+        border-style: solid;
+        -webkit-border-radius: 3px;
+        border-radius: 3px;
+        border-color: #CCC;
         margin: 13px 0 10px;
-        padding: 0;
+        padding: 5px;
 }
 
 .post-format-options a {
         display: inline-block;
-        height: 34px;
-        margin-right: 33px;
+        min-width: 62px;
+        padding:5px;
+        border:1px solid transparent;
+        margin-right: 10px;
         position: relative;
         text-decoration: none;
         text-align: center;
+        transition: opacity 0.1s linear;
+        opacity: 0.6;
+}
+
+.post-format-options:hover a {
+        opacity: 1.0;
+}
+.post-format-options a:hover,
+.post-format-options a.active {
+        opacity: 1.0;
+        background-color: #fff;
+        border-color: #ccc;
 }
 
 .post-format-options a div {
@@ -4127 +4148 @@
         margin-top: 4px;
 }
 
-.post-format-change, .post-format-set .post-format-options {
+.post-format-set .post-format-options {
         display: none;
 }
 
@@ -4150 +4171 @@
         width: 16px;
 }
 
-.post-format-change span.icon.standard {
+.post-format-change span.icon.wp-format-standard {
         background: url(../images/post-formats.png) no-repeat -8px -8px;
 }
 
-.post-format-change span.icon.image {
+.post-format-change span.icon.wp-format-image {
         background: url(../images/post-formats.png) no-repeat -40px -8px;
 }
 
-.post-format-change span.icon.gallery {
+.post-format-change span.icon.wp-format-gallery {
         background: url(../images/post-formats.png) no-repeat -72px -8px;
 }
 
-.post-format-change span.icon.audio {
+.post-format-change span.icon.wp-format-audio {
         background: url(../images/post-formats.png) no-repeat -104px -8px;
 }
 
-.post-format-change span.icon.video {
+.post-format-change span.icon.wp-format-video {
         background: url(../images/post-formats.png) no-repeat -136px -8px;
 }
 
-.post-format-change span.icon.chat {
+.post-format-change span.icon.wp-format-chat {
         background: url(../images/post-formats.png) no-repeat -168px -8px;
 }
 
-.post-format-change span.icon.status {
+.post-format-change span.icon.wp-format-status {
         background: url(../images/post-formats.png) no-repeat -200px -8px;
 }
 
-.post-format-change span.icon.aside {
+.post-format-change span.icon.wp-format-aside {
         background: url(../images/post-formats.png) no-repeat -232px -8px;
 }
 
-.post-format-change span.icon.quote {
+.post-format-change span.icon.wp-format-quote {
         background: url(../images/post-formats.png) no-repeat -264px -8px;
 }
 
-.post-format-change span.icon.link {
+.post-format-change span.icon.wp-format-link {
         background: url(../images/post-formats.png) no-repeat -296px -8px;
 }
 

wp-admin/edit-form-advanced.php

@@ -135 +135 @@
         wp_enqueue_script( 'wp-mediaelement' );
         wp_enqueue_style( 'wp-mediaelement' );
         $post_format = get_post_format();
-        $post_format_set_class = 'post-format-set';
 
         if ( ! $post_format ) {
                 $post_format = 'standard';
 
                 if ( ! empty( $_REQUEST['format'] ) && in_array( $_REQUEST['format'], get_post_format_slugs() ) )
                         $post_format = $_REQUEST['format'];
-                elseif ( 'auto-draft' == $post->post_status )
-                        $post_format_set_class = '';
         }
 
         $user_wants = get_user_option( 'post_formats_' . $post_type );
@@ -424 +421 @@
 <div id="poststuff">
 <div id="post-body" class="metabox-holder columns-<?php echo 1 == get_current_screen()->get_columns() ? '1' : '2'; ?>">
 <div id="post-body-content"<?php echo $format_class; ?>>
+<div class="wp-post-format-ui<?php if ( ! $show_post_format_ui ) echo ' no-ui' ?>">
+        <div class="post-format-change"><span class="icon <?php echo esc_attr( 'wp-format-' . $post_format ); ?>"></span> <span class="post-format-description"><?php echo $all_post_formats[$post_format]['description']; ?></span></div>
+</div>
 <?php if ( post_type_supports($post_type, 'title') ) { ?>
 <div id="titlediv">
 <div id="titlewrap">

wp-admin/includes/post-formats.php

@@ -10 +10 @@
 
 ?>
 <div class="wp-post-format-ui<?php if ( ! $show_post_format_ui ) echo ' no-ui' ?>">
-        <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>
         <div class="post-formats-fields">
 
                 <input type="hidden" name="post_format" id="post_format" value="<?php echo esc_attr( $post_format ); ?>" />
@@ -144 +143 @@
                         </div>
                 </div>
         </div>
-</div>
- No newline at end of file
+</div>

wp-admin/js/post-formats.js

@@ -4 +4 @@
         var container, $container, mediaFrame, lastMimeType, mediaPreview, lastHeight = 360, content, insertMediaButton,
                 initialFormat = 'standard',
                 shortClass = 'short-format',
+                noTitleFormats = ['status'],
+                noMediaFormats = ['status', 'aside', 'image', 'audio', 'video'],
                 shortContentFormats = ['status', 'aside'],
                 noUIFormats = ['standard', 'chat', 'status', 'aside', 'gallery'],
                 $screenIcon = $( '.icon32' );
 
 
         function switchFormatClass( format ) {
+                $('#post_format').val(format);
                 container.get(0).className = container.get(0).className.replace( /\s?\bwp-format-[^ ]+/g, '' );
                 container.addClass('wp-format-' + format);
                 $screenIcon.get(0).className = $screenIcon.get(0).className.replace( /\s?\bwp-format-[^ ]+/g, '' );
@@ -45 +48 @@
         }
 
         function switchFormat($this) {
-                var editor, body,
+                var editor, body, formatTo, formatFrom,
                         parent = $this.parent(),
                         format = $this.data('wp-format'),
                         description = $('.post-format-description'),
                         postTitle = $('#title');
 
+                if ( format === postFormats.currentPostFormat )
+                        return;
+
                 if ( typeof container === 'undefined' )
                         container = $('#post-body-content');
 
-                parent.slideUp().find('a.active').removeClass('active');
+                parent.find('a.active').removeClass('active');
                 $this.addClass('active');
-                $('#post_format').val(format);
-                $('.post-format-change').show().find('span.icon').removeClass(postFormats.currentPostFormat).addClass(format);
 
-                if ( -1 < $.inArray( format, noUIFormats ) ) {
+                // Animate the media button going away or coming back
+                formatTo = -1 < $.inArray( format, noMediaFormats );
+                formatFrom = -1 < $.inArray( postFormats.currentPostFormat, noMediaFormats );
+                if ( formatFrom ? !formatTo : formatTo ) // XOR
+                        insertMediaButton.fadeToggle( 200 ).css( 'display', 'inline-block' );
+
+                // Animate the title going away or coming back
+                formatTo = -1 < $.inArray( format, noTitleFormats );
+                formatFrom = -1 < $.inArray( postFormats.currentPostFormat, noTitleFormats );
+                if ( formatFrom ? !formatTo : formatTo ) // XOR
+                        $('#titlewrap').fadeToggle( 200 );
+
+                if ( -1 < $.inArray( format, noUIFormats ) && -1 < $.inArray( postFormats.currentPostFormat, noUIFormats ) ) {
                         switchFormatClass( format ); // No slide
-                        $container.hide();
+                        $container.slideUp();
                 } else {
-                        $container.slideUp( 200, function(){
+                        $container.slideUp( 400, function(){
                                 switchFormatClass( format );
-                                $container.slideDown( 400 );
+                                if ( -1 == $.inArray( format, noUIFormats ) )
+                                        $container.slideDown( 400 );
                         });
                 }
 
@@ -78 +95 @@
 
                 // Update description line
                 description.html($this.data('description'));
+                var tinyIcon = $('.post-format-change').show().find('span.icon');
+                tinyIcon.attr('class', tinyIcon.attr('class').replace(/\s?\bwp-format-[^ ]+/g, '' )).addClass( 'wp-format-' + format);
 
                 if (description.not(':visible'))
                         description.slideDown('fast');
@@ -119 +138 @@
                         });
                 });
 
-                $('.post-format-change a').click(function() {
-                        $('.post-formats-fields, .post-format-change').slideUp();
-                        $('.post-format-options').slideDown();
-                        return false;
-                });
-
                 // Post formats selection
                 $('.post-format-options').on( 'click', 'a', function (e) {
                         e.preventDefault();