Post format UI refresh.

* Post format switcher does not go away after clicking
* Refresh of format switcher style
* Highlighting of active post format
* Prompt text goes under the switcher
* Better animations

see #24046. props wonderboymusic, johnjamesjacoby, aaroncampbell, PeteMall.

Also, because I forgot it on [24006]: props saracannon.

git-svn-id: http://core.svn.wordpress.org/trunk@24098 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/colors-classic.css

@@ -164,6 +164,7 @@ textarea.disabled {
 	color: #fff;
 }
 
+.post-format-options,
 .widget .widget-top,
 .postbox h3,
 .stuffbox h3,
@@ -688,6 +689,7 @@ table.widefat span.spam a,
 	background-image: linear-gradient(to top, #eff8ff, #f7fcfe);
 }
 
+.post-format-options,
 .postbox h3 {
 	color: #174f69;
 }

wp-admin/css/colors-fresh.css

@@ -164,6 +164,7 @@ textarea.disabled {
 	color: #fff;
 }
 
+.post-format-options,
 .widget .widget-top,
 .postbox h3,
 .stuffbox h3,
@@ -690,6 +691,7 @@ table.widefat span.spam a,
 	background-image: linear-gradient(to top, #f5f5f5, #f9f9f9);
 }
 
+.post-format-options,
 .postbox h3 {
 	color: #464646;
 }

wp-admin/css/wp-admin.css

@@ -4000,6 +4000,9 @@ body .ui-tooltip {
 }
 
 .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,18 +4104,36 @@ body .ui-tooltip {
 }
 
 .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;
+	min-width: 62px;
-	margin-right: 33px;
+	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,7 +4148,7 @@ body .ui-tooltip {
 	margin-top: 4px;
 }
 
-.post-format-change, .post-format-set .post-format-options {
+.post-format-set .post-format-options {
 	display: none;
 }
 
@@ -4136,7 +4157,7 @@ body .ui-tooltip {
 }
 
 #poststuff .post-format-change {
-	margin: 11px 0 13px;
+	margin: -7px 0 13px 2px;
 	padding: 0;
 	font-size: 1.5em;
 	line-height: 18px;
@@ -4150,43 +4171,43 @@ body .ui-tooltip {
 	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

@@ -136,15 +136,12 @@ if ( post_type_supports( $post_type, 'post-formats' ) && apply_filters( 'enable_
 	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 );
@@ -425,6 +422,9 @@ wp_nonce_field( 'closedpostboxes', 'closedpostboxesnonce', false );
 <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,7 +10,6 @@ wp_nonce_field( 'show-post-format-ui_' . $post_type, 'show_post_format_ui_nonce'
 
 ?>
 <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 ); ?>" />

wp-admin/js/post-formats.js

@@ -1,88 +1,131 @@
+/*globals window, $, jQuery, document, _, postFormats, tinymce, ajaxurl, wp, getUserSetting */
+
 window.wp = window.wp || {};
 
 (function ($) {
-	var container, $container, mediaFrame, lastMimeType, mediaPreview, lastHeight = 360, content, insertMediaButton,
+	"use strict";
+
+	var mediaFrame, insertMediaButton, container, icon, formatField,
+		lastMimeType,
+		classRegex = /\s?\bwp-format-[^ ]+/g,
+		shortHeight = 120,
+		lastHeight = 360,
 		initialFormat = 'standard',
 		shortClass = 'short-format',
+		noTitleFormats = ['status'],
+		noMediaFormats = ['status', 'aside', 'image', 'audio', 'video'],
 		shortContentFormats = ['status', 'aside'],
-		noUIFormats = ['standard', 'chat', 'status', 'aside', 'gallery'],
+		noUIFormats = ['standard', 'chat', 'status', 'aside', 'gallery'];
-		$screenIcon = $( '.icon32' );
-
 
 	function switchFormatClass( format ) {
-		container.get(0).className = container.get(0).className.replace( /\s?\bwp-format-[^ ]+/g, '' );
+		formatField.val( format );
-		container.addClass('wp-format-' + format);
+
-		$screenIcon.get(0).className = $screenIcon.get(0).className.replace( /\s?\bwp-format-[^ ]+/g, '' );
+		container
-		$screenIcon.addClass('wp-format-' + format);
+			.prop( 'className', container.prop( 'className' ).replace( classRegex, '' ) )
+			.addClass( 'wp-format-' + format );
+
+		icon
+			.prop( 'className', icon.prop( 'className' ).replace( classRegex, '' ) )
+			.addClass( 'wp-format-' + format );
 	}
 
 	function resizeContent( format, noAnimate ) {
-		var height;
+		var height, content = $( '#content, #content_ifr' );
 
-		content = $('#content, #content_ifr');
+		height = content.outerHeight();
-
+		if ( shortHeight < height ) {
-		height = content.height();
-		if ( 120 < height ) {
 			lastHeight = height;
 		}
 
 		if ( -1 < $.inArray( format, shortContentFormats ) ) {
 			if ( ! content.hasClass( shortClass ) ) {
 				content.addClass( shortClass );
-				if ( noAnimate ) {
+				_(content).each(function (elem) {
-					content.each(function () {
+					$(elem)[noAnimate ? 'css' : 'animate']( { height : shortHeight } );
-						$(this).css({ height : 120 });
 				});
-				} else {
-					content.each(function () {
-						$(this).animate({ height : 120 });
-					});
-				}
 			}
 		} else {
 			content.removeClass( shortClass ).animate( { height : lastHeight } );
 		}
 	}
 
-	function switchFormat($this) {
+	function switchFormat(elem) {
-		var editor, body,
+		var editor, body, formatTo, formatFrom,
-			parent = $this.parent(),
+			format = elem.data( 'wp-format' ),
-			format = $this.data('wp-format'),
+			titlePrompt = $( '#title-prompt-text' ),
 			description = $( '.post-format-description' ),
-			postTitle = $('#title');
+			postTitle = $( '#title'),
+			fields = $( '.post-formats-fields' ),
+			tinyIcon = $( '.post-format-change span.icon' );
 
-		if ( typeof container === 'undefined' )
+		if ( format === postFormats.currentPostFormat ) {
-			container = $('#post-body-content');
+			return;
+		}
 
-		parent.slideUp().find('a.active').removeClass('active');
+		elem.addClass( 'active' ).siblings().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
-			switchFormatClass( format ); // No slide
+		formatTo = -1 < $.inArray( format, noMediaFormats );
-			$container.hide();
+		formatFrom = -1 < $.inArray( postFormats.currentPostFormat, noMediaFormats );
-		} else {
+		if ( formatFrom ? !formatTo : formatTo ) { // XOR
-			$container.slideUp( 200, function(){
+			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 );
+		}
+
+		// Animate the fields moving going away or coming in
+		formatTo = -1 < $.inArray( format, noUIFormats );
+		formatFrom = -1 < $.inArray( postFormats.currentPostFormat, noUIFormats );
+		if ( formatTo && formatFrom ) { // To/from have no UI. No slide.
+			console.log( 'both no UI' );
 			switchFormatClass( format );
-				$container.slideDown( 400 );
+			fields.hide();
+		} else if ( formatFrom ) { // Only destination has UI. Slide down.
+			console.log( 'destination only' );
+			fields.hide();
+			switchFormatClass( format );
+			fields.slideDown( 400 );
+		} else if ( formatTo ) { // Only source has UI. Slide up.
+			console.log( 'source only' );
+			fields.slideUp( 200, function(){
+				switchFormatClass( format );
+			});
+		} else { // Both have UI. Slide both ways.
+			console.log( 'both' );
+			fields.slideUp( 200, function(){
+				switchFormatClass( format );
+				fields.slideDown( 400 );
 			});
 		}
 
 		resizeContent( format );
-
 		postTitle.focus();
 
-		if ( '' === postTitle.val() )
+		if ( '' === postTitle.val() ) {
-			$('#title-prompt-text').removeClass('screen-reader-text');
+			titlePrompt.removeClass( 'screen-reader-text' );
+
+			postTitle.keydown( function (e) {
+				titlePrompt.addClass( 'screen-reader-text' );
+				$( e.currentTarget ).unbind( e );
+			} );
+		}
 
 		// Update description line
-		description.html($this.data('description'));
+		description.html( elem.data( 'description' ) );
+		tinyIcon
+			.show()
+			.prop( 'className', tinyIcon.prop( 'className' ).replace( classRegex, '' ) )
+			.addClass( 'wp-format-' + format );
 
-		if (description.not(':visible'))
+		if ( description.not( ':visible' ) ) {
 			description.slideDown( 'fast' );
+		}
 
-		if ( typeof tinymce != 'undefined' ) {
+		if ( tinymce ) {
 			editor = tinymce.get( 'content' );
 
 			if ( editor ) {
@@ -94,17 +137,16 @@ window.wp = window.wp || {};
 
 		// If gallery, force it to open to gallery state
 		insertMediaButton.toggleClass( 'gallery', 'gallery' === format );
-
 		postFormats.currentPostFormat = format;
 	}
 
-
-
 	$(function () {
+		container = $( '#post-body-content' );
+		icon = $( '.icon32' );
+		formatField = $( '#post_format' );
 		insertMediaButton = $( '#insert-media-button' ).toggleClass( 'gallery', 'gallery' === postFormats.currentPostFormat );
-		$container = $( '.post-formats-fields' );
-
 		initialFormat = $( '.post-format-options .active' ).data( 'wp-format' );
+
 		if ( -1 < $.inArray( initialFormat, shortContentFormats ) ) {
 			resizeContent( initialFormat, true );
 		}
@@ -119,25 +161,20 @@ window.wp = window.wp || {};
 			} );
 		} );
 
-		$('.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();
-			switchFormat($(this));
+			switchFormat( $( e.currentTarget ) );
 		} );
 
 		// Media selection
-		$('.wp-format-media-select').click(function(event) {
+		$( '.wp-format-media-select' ).click( function (e) {
-			event.preventDefault();
+			e.preventDefault();
-			var $el = $(this), mime = 'image',
-				$holder = $el.closest('.wp-format-media-holder'),
-				$field = $( '#wp_format_' + $holder.data('format') );
 
+			var $el = $(e.currentTarget), mediaPreview, mime = 'image', $holder, $field;
+
+			$holder = $el.closest( '.wp-format-media-holder' );
+			$field = $( '#wp_format_' + $holder.data( 'format' ) );
 			mime = $holder.data( 'format' );
 
 			// If the media frame already exists, reopen it.
@@ -167,15 +204,17 @@ window.wp = window.wp || {};
 				if ( 'video' === format ) {
 					if ( attachment.width ) {
 						w = attachment.width;
-						if ( w > 600 )
+						if ( w > 600 ) {
 							w = 600;
+						}
 						dimensions += ' width="' + w + '"';
 					}
 
 					if ( attachment.height ) {
 						h = attachment.height;
-						if ( attachment.width && w < attachment.width )
+						if ( attachment.width && w < attachment.width ) {
 							h = Math.round( ( h * w ) / attachment.width );
+						}
 						dimensions += ' height="' + h + '"';
 					}
 				}
@@ -211,15 +250,24 @@ window.wp = window.wp || {};
 						size : getUserSetting( 'imgsize' ),
 						link : getUserSetting( 'urlbutton' )
 					}, attachment);
+
 					// set the hidden input's value
 					$field.val( html );
+
 					$( '#image-preview' ).remove();
-					if ( attachment.width )
+
+					if ( attachment.width ) {
 						w = attachment.width > 600 ? 600 : attachment.width;
-					if ( attachment.height )
+					}
+
+					if ( attachment.height ) {
 						h = attachment.height;
-					if ( w < attachment.width )
+					}
+
+					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 + '"' : '',
@@ -232,4 +280,4 @@ window.wp = window.wp || {};
 			mediaFrame.open();
 		});
 	});
-})(jQuery);
+}( jQuery ) );