Add the ability to click "Edit" and kick out to the advanced image editor from within the Media modal. New window, with "Refresh" offered on your return. fixes #22743. props koopersmith, nacin, helenyhou.

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

wp-admin/css/wp-admin.css

@@ -4150,23 +4150,26 @@ borger color while dragging a file over the uploader drop area */
 	margin: 8px 0;
 }
 
+.post-php .imgedit-wrap table {
+	width: 100%;
+}
+
 .describe .imgedit-wrap table td,
 .wp_attachment_holder .imgedit-wrap table td {
 	vertical-align: top;
 	padding-top: 0;
 }
 
-.imgedit-wrap p,
-.describe .imgedit-wrap table td {
-	font-size: 11px;
-	line-height: 18px;
-}
-
 .describe .imgedit-wrap table td.imgedit-settings {
 	padding: 0 5px;
 }
 
+.wp_attachment_holder .imgedit-wrap table td.imgedit-settings {
+	width: 250px;
+}
+
 td.imgedit-settings input {
+	margin-top: 0;
 	vertical-align: middle;
 }
 
@@ -4349,19 +4352,10 @@ td.imgedit-settings input {
 	margin-bottom: 8px;
 }
 
-.imgedit-help ul li {
-	font-size: 11px;
-}
-
 a.imgedit-help-toggle {
 	text-decoration: none;
 }
 
-#wpbody-content .imgedit-response div {
-	width: 600px;
-	margin: 8px;
-}
-
 .form-table td.imgedit-response {
 	padding: 0;
 }
@@ -4389,8 +4383,8 @@ span.imgedit-scale-warn {
 .imgedit-group {
 	border-width: 1px;
 	border-style: solid;
-	-webkit-border-radius: 8px;
-	border-radius: 8px;
+	-webkit-border-radius: 3px;
+	border-radius: 3px;
 	margin-bottom: 8px;
 	padding: 2px 10px;
 }

wp-admin/includes/image-edit.php

@@ -191,7 +191,7 @@ function wp_image_editor($post_id, $msg = false) {
 	</td></tr>
 	</tbody></table>
 	<div class="imgedit-wait" id="imgedit-wait-<?php echo $post_id; ?>"></div>
-	<script type="text/javascript">imageEdit.init(<?php echo $post_id; ?>);</script>
+	<script type="text/javascript">jQuery( function() { imageEdit.init(<?php echo $post_id; ?>); });</script>
 	<div class="hidden" id="imgedit-leaving-<?php echo $post_id; ?>"><?php _e("There are unsaved changes that will be lost. 'OK' to continue, 'Cancel' to return to the Image Editor."); ?></div>
 	</div>
 <?php

wp-admin/includes/media.php

@@ -2270,20 +2270,18 @@ function multisite_over_quota_message() {
 function edit_form_image_editor() {
 	$post = get_post();
 
+	$open = isset( $_GET['image-editor'] );
+	if ( $open )
+		require_once ABSPATH . 'wp-admin/includes/image-edit.php';
+
 	$thumb_url = false;
 	if ( $attachment_id = intval( $post->ID ) )
-		$thumb_url = wp_get_attachment_image_src( $attachment_id, array( 900, 600 ), true );
+		$thumb_url = wp_get_attachment_image_src( $attachment_id, array( 900, 450 ), true );
 
 	$filename = esc_html( basename( $post->guid ) );
 	$title = esc_attr( $post->post_title );
 	$alt_text = get_post_meta( $post->ID, '_wp_attachment_image_alt', true );
 
-	$media_dims = '';
-	$meta = wp_get_attachment_metadata( $post->ID );
-	if ( is_array( $meta ) && array_key_exists( 'width', $meta ) && array_key_exists( 'height', $meta ) )
-		$media_dims .= "<span id='media-dims-$post->ID'>{$meta['width']}&nbsp;&times;&nbsp;{$meta['height']}</span> ";
-	$media_dims = apply_filters( 'media_meta', $media_dims, $post );
-
 	$att_url = wp_get_attachment_url( $post->ID );
 
 	if ( wp_attachment_is_image( $post->ID ) ) :
@@ -2296,11 +2294,13 @@ function edit_form_image_editor() {
 	<div class="wp_attachment_holder">
 		<div class="imgedit-response" id="imgedit-response-<?php echo $attachment_id; ?>"></div>
 
-		<div class="wp_attachment_image" id="media-head-<?php echo $attachment_id; ?>">
+		<div<?php if ( $open ) echo ' style="display:none"'; ?> class="wp_attachment_image" id="media-head-<?php echo $attachment_id; ?>">
 			<p id="thumbnail-head-<?php echo $attachment_id; ?>"><img class="thumbnail" src="<?php echo set_url_scheme( $thumb_url[0] ); ?>" style="max-width:100%" alt="" /></p>
 			<p><?php echo $image_edit_button; ?></p>
 		</div>
-		<div style="display:none" class="image-editor" id="image-editor-<?php echo $attachment_id; ?>"></div>
+		<div<?php if ( ! $open ) echo ' style="display:none"'; ?> class="image-editor" id="image-editor-<?php echo $attachment_id; ?>">
+			<?php if ( $open ) wp_image_editor( $attachment_id ); ?>
+		</div>
 	</div>
 	<?php endif; ?>
 

wp-includes/css/media-views.css

@@ -1308,6 +1308,7 @@
 	float: left;
 	max-width: 120px;
 	max-height: 120px;
+	margin-top: 5px;
 	margin-right: 10px;
 	margin-bottom: 5px;
 }
@@ -1347,17 +1348,30 @@
 	max-width: 100%;
 }
 
-.attachment-info .delete-attachment a {
-	color: red;
-	padding: 2px 4px;
-	margin: -2px -4px;
+.attachment-info .edit-attachment,
+.attachment-info .refresh-attachment,
+.attachment-info .delete-attachment {
+	display: block;
 	text-decoration: none;
 	white-space: nowrap;
 }
 
-.attachment-info .delete-attachment a:hover {
-	color: #fff;
-	background: red;
+.attachment-info .refresh-attachment,
+.attachment-details.needs-refresh .attachment-info .edit-attachment {
+	display: none;
+}
+
+.attachment-details.needs-refresh .attachment-info .refresh-attachment,
+.attachment-info .edit-attachment {
+	display: block;
+}
+
+.attachment-info .delete-attachment {
+	color: #bc0b0b;
+}
+
+.attachment-info .delete-attachment:hover {
+	color: red;
 }
 
 /**

wp-includes/js/media-views.js

@@ -4021,7 +4021,9 @@
 			'change [data-setting] input':    'updateSetting',
 			'change [data-setting] select':   'updateSetting',
 			'change [data-setting] textarea': 'updateSetting',
-			'click .delete-attachment':       'deleteAttachment'
+			'click .delete-attachment':       'deleteAttachment',
+			'click .edit-attachment':         'editAttachment',
+			'click .refresh-attachment':      'refreshAttachment'
 		},
 
 		initialize: function() {
@@ -4038,11 +4040,21 @@
 			return this;
 		},
 
-		deleteAttachment: function(event) {
+		deleteAttachment: function( event ) {
 			event.preventDefault();
 
 			if ( confirm( l10n.warnDelete ) )
 				this.model.destroy();
+		},
+
+		editAttachment: function( event ) {
+			this.$el.addClass('needs-refresh');
+		},
+
+		refreshAttachment: function( event ) {
+			this.$el.removeClass('needs-refresh');
+			event.preventDefault();
+			this.model.fetch();
 		}
 	});
 

wp-includes/media.php

@@ -1337,10 +1337,13 @@ function wp_prepare_attachment_for_js( $attachment ) {
 			'update' => false,
 			'delete' => false,
 		),
+		'editLink'   => false,
 	);
 
-	if ( current_user_can( 'edit_post', $attachment->ID ) )
+	if ( current_user_can( 'edit_post', $attachment->ID ) ) {
 		$response['nonces']['update'] = wp_create_nonce( 'update-post_' . $attachment->ID );
+		$response['editLink'] = get_edit_post_link( $attachment->ID, 'raw' );
+	}
 
 	if ( current_user_can( 'delete_post', $attachment->ID ) )
 		$response['nonces']['delete'] = wp_create_nonce( 'delete-post_' . $attachment->ID );
@@ -1703,14 +1706,22 @@ function wp_print_media_templates() {
 			<div class="details">
 				<div class="filename">{{ data.filename }}</div>
 				<div class="uploaded">{{ data.dateFormatted }}</div>
-				<# if ( 'image' === data.type && ! data.uploading && data.width && data.height ) { #>
-					<div class="dimensions">{{ data.width }} &times; {{ data.height }}</div>
+
+				<# if ( 'image' === data.type && ! data.uploading ) { #>
+					<# if ( data.width && data.height ) { #>
+						<div class="dimensions">{{ data.width }} &times; {{ data.height }}</div>
+					<# } #>
+
+					<# if ( data.can.save ) { #>
+						<a class="edit-attachment" href="{{ data.editLink }}&amp;image-editor" target="_blank"><?php _e( 'Edit Image' ); ?></a>
+						<a class="refresh-attachment" href="#"><?php _e( 'Refresh' ); ?></a>
+					<# } #>
 				<# } #>
+
 				<# if ( ! data.uploading && data.can.remove ) { #>
-					<div class="delete-attachment">
-						<a href="#"><?php _e( 'Delete Permanently' ); ?></a>
-					</div>
+					<a class="delete-attachment" href="#"><?php _e( 'Delete Permanently' ); ?></a>
 				<# } #>
+
 				<div class="compat-meta">
 					<# if ( data.compat && data.compat.meta ) { #>
 						{{{ data.compat.meta }}}