First pass at integrating featured images with the new media workflow.

Updates the featured image when the publish/update button is clicked (rather than instantly). Uses the existing post_thumbnail_meta_box() function. Does not remove the old featured image meta box JS, ajax handler, or CSS.

see #21776, #21390.


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

wp-admin/css/wp-admin.css

@@ -23,6 +23,7 @@ TABLE OF CONTENTS:
 11.0 - Write/Edit Post Screen
 	11.1 - Custom Fields
 	11.2 - Post Revisions
+	11.3 - Featured Images
 12.0 - Categories
 13.0 - Tags
 14.0 - Media Screen
@@ -3239,6 +3240,34 @@ table.diff .diff-deletedline del, table.diff .diff-addedline ins {
 	text-decoration: none;
 }
 
+/*------------------------------------------------------------------------------
+  11.3 - Featured Images
+------------------------------------------------------------------------------*/
+
+#select-featured-image {
+	padding: 4px 0;
+	overflow: hidden;
+}
+
+#select-featured-image img {
+	max-width: 100%;
+	height: auto;
+	margin-bottom: 10px;
+}
+
+#select-featured-image a {
+	float: left;
+	clear: both;
+}
+
+#select-featured-image .remove {
+	display: none;
+	margin-top: 10px;
+}
+
+#select-featured-image.has-featured-image .remove {
+	display: inline-block;
+}
 
 /*------------------------------------------------------------------------------
   12.0 - Categories

wp-admin/includes/meta-boxes.php

@@ -911,6 +911,75 @@ function link_advanced_meta_box($link) {
  * @since 2.9.0
  */
 function post_thumbnail_meta_box( $post ) {
-	$thumbnail_id = get_post_meta( $post->ID, '_thumbnail_id', true );
+	global $_wp_additional_image_sizes;
-	echo _wp_post_thumbnail_html( $thumbnail_id );
+
-}
+	?><script type="text/javascript">
+	jQuery( function($) {
+		var $element     = $('#select-featured-image'),
+			$thumbnailId = $element.find('input[name="thumbnail_id"]'),
+			title        = '<?php _e( "Choose a Featured Image" ); ?>',
+			workflow, setFeaturedImage;
+
+		setFeaturedImage = function( thumbnailId ) {
+			$element.find('img').remove();
+			$element.toggleClass( 'has-featured-image', -1 != thumbnailId );
+			$thumbnailId.val( thumbnailId );
+		};
+
+		$element.on( 'click', '.choose, img', function( event ) {
+			event.preventDefault();
+
+			if ( ! workflow ) {
+				workflow = wp.media();
+				workflow.selection.on( 'add', function( model ) {
+					var sizes = model.get('sizes'),
+						size;
+
+					setFeaturedImage( model.id );
+
+					// @todo: might need a size hierarchy equivalent.
+					if ( sizes )
+						size = sizes['post-thumbnail'] || sizes.medium;
+
+					// @todo: Need a better way of accessing full size
+					// data besides just calling toJSON().
+					size = size || model.toJSON();
+
+					workflow.modal.close();
+					workflow.selection.clear();
+
+					$( '<img />', {
+						src:    size.url,
+						width:  size.width
+					}).prependTo( $element );
+				});
+				workflow.modal.title( title );
+			}
+
+			workflow.modal.open();
+		});
+
+		$element.on( 'click', '.remove', function( event ) {
+			event.preventDefault();
+			setFeaturedImage( -1 );
+		});
+	});
+	</script>
+
+	<?php
+	$thumbnail_id   = get_post_meta( $post->ID, '_thumbnail_id', true );
+	$thumbnail_size = isset( $_wp_additional_image_sizes['post-thumbnail'] ) ? 'post-thumbnail' : 'medium';
+	$thumbnail_html = wp_get_attachment_image( $thumbnail_id, $thumbnail_size );
+
+	$classes = empty( $thumbnail_id ) ? '' : 'has-featured-image';
+
+	?><div id="select-featured-image"
+		class="<?php echo esc_attr( $classes ); ?>"
+		data-post-id="<?php echo esc_attr( $post->ID ); ?>">
+		<?php echo $thumbnail_html; ?>
+		<input type="hidden" name="thumbnail_id" value="<?php echo esc_attr( $thumbnail_id ); ?>" />
+		<a href="#" class="choose button-secondary"><?php _e( 'Choose a Featured Image' ); ?></a>
+		<a href="#" class="remove"><?php _e( 'Remove Featured Image' ); ?></a>
+	</div>
+	<?php
+}

wp-admin/includes/post.php

@@ -198,6 +198,14 @@ function edit_post( $post_data = null ) {
 			set_post_format( $post_ID, false );
 	}
 
+	// Featured Images
+	if ( isset( $post_data['thumbnail_id'] ) ) {
+		if ( '-1' == $post_data['thumbnail_id'] )
+			delete_post_thumbnail( $post_ID );
+		else
+			set_post_thumbnail( $post_ID, $post_data['thumbnail_id'] );
+	}
+
 	// Meta Stuff
 	if ( isset($post_data['meta']) && $post_data['meta'] ) {
 		foreach ( $post_data['meta'] as $key => $value ) {

wp-includes/script-loader.php

@@ -318,7 +318,6 @@ function wp_default_scripts( &$scripts ) {
 	$scripts->add( 'media-views',  "/wp-includes/js/media-views$suffix.js",  array( 'media-models', 'wp-plupload' ), false, 1 );
 	did_action( 'init' ) && $scripts->localize( 'media-views', '_wpMediaViewsL10n', array(
 		'insertMedia'         => __( 'Insert Media' ),
-		'chooseFeatured'      => __( 'Choose a Featured Image' ),
 		'selectMediaSingular' => __( 'Select a media file:' ),
 		'selectMediaMultiple' => __( 'Select one or more media files:' ),
 	) );