Restore the Description field to the media UI in 3.5.

We tried in vain -- a noble but ultimately failed effort -- to reduce the number of fields for attachments from four (title, caption, alt, description) to one (caption for images, title otherwise). Alternative text needed to stay for accessibility reasons, of course.

Eventually title returned due to heavy plugin reliance. Description is too used by too many plugins (often times incorrectly -- the caption is more likely the proper field), hence its less-than-triumphant return today.

Version 3.5 has tried to streamline media in a number of ways. Removing fields may have been too much at once, as it forced not only a user interface change, but a paradigm change as well.

Finally, on upload we populate the description field with IPTC/EXIF captions, rather than the caption field. See #22768, this should be fixed. For now, Description stays.

This commit also restores 'Title' attribute editing to the main tab of the Edit Image dialog. The "Title" field no longer populates title attributes for <img> tags by design (for accessibility and other purposes, see #18984). So, here is a more obvious 'workaround' for the tooltip community.

Finally, this:
 * Cleans up the post.php attachment editor, including by showing a prettier form of the mime type.
 * Enables plugins to specifically hide attachment_fields_to_edit from either post.php (where you can create meta boxes) or the modal (which you may not want to clutter), for compatibility reasons.
 * Hides the 'Describe this file...' placeholder when a field is read-only in the modal.

props nacin, helenyhou.
fixes #22759.



git-svn-id: http://core.svn.wordpress.org/trunk@23083 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrew Nacin 2012-12-06 00:41:06 +00:00
parent a13a011265
commit 173806d7a1
9 changed files with 84 additions and 72 deletions

View File

@ -3407,6 +3407,10 @@ td.plugin-title p {
display: none;
}
#post-body-content .compat-attachment-fields {
margin-bottom: 20px;
}
.compat-attachment-fields th {
padding-top: 5px;
padding-right: 10px;
@ -4391,6 +4395,10 @@ span.imgedit-scale-warn {
padding: 2px 10px;
}
.wp_attachment_details {
margin-bottom: 20px;
}
/*------------------------------------------------------------------------------
15.0 - Comments Screen
------------------------------------------------------------------------------*/

View File

@ -107,7 +107,6 @@ if ( 'attachment' == $post_type ) {
wp_enqueue_script( 'image-edit' );
wp_enqueue_style( 'imgareaselect' );
add_meta_box( 'submitdiv', __('Save'), 'attachment_submit_meta_box', null, 'side', 'core' );
add_meta_box( 'attachmentdata', __('Attachment Page Content'), 'attachment_content_meta_box', null, 'normal', 'core' );
add_action( 'edit_form_after_title', 'edit_form_image_editor' );
} else {
add_meta_box( 'submitdiv', __( 'Publish' ), 'post_submit_meta_box', null, 'side', 'core' );

View File

@ -1884,6 +1884,9 @@ function wp_ajax_save_attachment() {
if ( isset( $changes['caption'] ) )
$post['post_excerpt'] = $changes['caption'];
if ( isset( $changes['description'] ) )
$post['post_content'] = $changes['description'];
if ( isset( $changes['alt'] ) ) {
$alt = get_post_meta( $id, '_wp_attachment_image_alt', true );
$new_alt = stripslashes( $changes['alt'] );
@ -1923,10 +1926,6 @@ function wp_ajax_save_attachment_compat() {
if ( 'attachment' != $post['post_type'] )
wp_send_json_error();
// Handle the description field automatically, if a plugin adds it back.
if ( isset( $attachment_data['post_content'] ) )
$post['post_content'] = $attachment_data['post_content'];
$post = apply_filters( 'attachment_fields_to_save', $post, $attachment_data );
if ( isset( $post['errors'] ) ) {

View File

@ -1286,8 +1286,7 @@ function get_compat_media_markup( $attachment_id, $args = null ) {
$default_args = array(
'errors' => null,
'taxonomies' => false,
'description' => false,
'in_modal' => false,
);
$user_can_edit = current_user_can( 'edit_post', $attachment_id );
@ -1297,7 +1296,7 @@ function get_compat_media_markup( $attachment_id, $args = null ) {
$form_fields = array();
if ( $args['taxonomies'] ) {
if ( $args['in_modal'] ) {
foreach ( get_attachment_taxonomies($post) as $taxonomy ) {
$t = (array) get_taxonomy($taxonomy);
if ( ! $t['public'] || ! $t['show_ui'] )
@ -1329,19 +1328,18 @@ function get_compat_media_markup( $attachment_id, $args = null ) {
$form_fields = apply_filters( 'attachment_fields_to_edit', $form_fields, $post );
unset( $form_fields['image-size'], $form_fields['align'], $form_fields['image_alt'],
$form_fields['post_title'], $form_fields['post_excerpt'],
$form_fields['post_title'], $form_fields['post_excerpt'], $form_fields['post_content'],
$form_fields['url'], $form_fields['menu_order'], $form_fields['image_url'] );
if ( ! $args['description'] )
unset( $form_fields['post_content'] );
$media_meta = apply_filters( 'media_meta', '', $post );
$defaults = array(
'input' => 'text',
'required' => false,
'value' => '',
'extra_rows' => array(),
'input' => 'text',
'required' => false,
'value' => '',
'extra_rows' => array(),
'show_in_edit' => true,
'show_in_modal' => true,
);
$hidden_fields = array();
@ -1361,6 +1359,9 @@ function get_compat_media_markup( $attachment_id, $args = null ) {
$field = array_merge( $defaults, $field );
if ( ( ! $field['show_in_edit'] && ! $args['in_modal'] ) || ( ! $field['show_in_modal'] && $args['in_modal'] ) )
continue;
if ( $field['input'] == 'hidden' ) {
$hidden_fields[$name] = $field['value'];
continue;
@ -2282,12 +2283,12 @@ function edit_form_image_editor() {
$att_url = wp_get_attachment_url( $post->ID );
$image_edit_button = '';
if ( wp_attachment_is_image( $post->ID ) && wp_image_editor_supports( array( 'mime_type' => $post->post_mime_type ) ) ) {
$nonce = wp_create_nonce( "image_editor-$post->ID" );
$image_edit_button = "<input type='button' id='imgedit-open-btn-$post->ID' onclick='imageEdit.open( $post->ID, \"$nonce\" )' class='button' value='" . esc_attr__( 'Edit Image' ) . "' /> <span class='spinner'></span>";
}
if ( wp_attachment_is_image( $post->ID ) ) :
$image_edit_button = '';
if ( wp_image_editor_supports( array( 'mime_type' => $post->post_mime_type ) ) ) {
$nonce = wp_create_nonce( "image_editor-$post->ID" );
$image_edit_button = "<input type='button' id='imgedit-open-btn-$post->ID' onclick='imageEdit.open( $post->ID, \"$nonce\" )' class='button' value='" . esc_attr__( 'Edit Image' ) . "' /> <span class='spinner'></span>";
}
?>
<div class="wp_attachment_holder">
<div class="imgedit-response" id="imgedit-response-<?php echo $attachment_id; ?>"></div>
@ -2298,6 +2299,7 @@ function edit_form_image_editor() {
</div>
<div style="display:none" class="image-editor" id="image-editor-<?php echo $attachment_id; ?>"></div>
</div>
<?php endif; ?>
<div class="wp_attachment_details">
<p>
@ -2312,6 +2314,20 @@ function edit_form_image_editor() {
</p>
<?php endif; ?>
<?php
$quicktags_settings = array( 'buttons' => 'strong,em,link,block,del,ins,img,ul,ol,li,code,spell,close' );
$editor_args = array(
'textarea_name' => 'content',
'textarea_rows' => 5,
'media_buttons' => false,
'tinymce' => false,
'quicktags' => $quicktags_settings,
);
?>
<label for="content"><strong><?php _e( 'Description' ); ?></strong></label>
<?php wp_editor( $post->post_content, 'attachment_content', $editor_args ); ?>
</div>
<?php
$extras = get_compat_media_markup( $post->ID );
@ -2348,7 +2364,12 @@ function attachment_submitbox_metadata() {
<?php _e( 'File name:' ); ?> <strong><?php echo $filename; ?></strong>
</div>
<div class="misc-pub-section">
<?php _e( 'File type:' ); ?> <strong><?php echo $post->post_mime_type; ?></strong>
<?php _e( 'File type:' ); ?> <strong><?php
if ( preg_match( '/^.*?\.(\w+)$/', get_attached_file( $post->ID ), $matches ) )
echo esc_html( strtoupper( $matches[1] ) );
else
echo strtoupper( str_replace( 'image/', '', $post->post_mime_type ) );
?></strong>
</div>
<?php if ( $media_dims ) : ?>

View File

@ -295,30 +295,6 @@ function attachment_submit_meta_box( $post ) {
<?php
}
/**
* Display attachment/media-specific information
*
* @since 3.5.0
*
* @param object $post
*/
function attachment_content_meta_box( $post ) {
$quicktags_settings = array( 'buttons' => 'strong,em,link,block,del,ins,img,ul,ol,li,code,spell,close' );
$editor_args = array(
'textarea_name' => 'content',
'textarea_rows' => 5,
'media_buttons' => false,
'tinymce' => false,
'quicktags' => $quicktags_settings,
);
?>
<p>
<label class="screen-reader-text" for="content"><strong><?php _e( 'Attachment Page Content' ); ?></strong></label>
<?php wp_editor( $post->post_content, 'attachment_content', $editor_args ); ?>
</p>
<?php
}
/**
* Display post format form elements.
*

View File

@ -554,7 +554,8 @@
props = wp.media.string.props( props, attachment );
options = {
id: attachment.id
id: attachment.id,
post_content: attachment.description
};
if ( props.linkUrl )

View File

@ -2829,7 +2829,8 @@
width: '',
height: '',
compat: false,
alt: ''
alt: '',
description: '',
});
options.buttons = this.buttons;

View File

@ -73,14 +73,14 @@ if ( 'rtl' == tinyMCEPopup.editor.getParam('directionality','') )
</td>
</tr>
<tr id="cap_field">
<tr>
<th valign="top" scope="row" class="label">
<label for="img_cap">
<span class="alignleft">{#wpeditimage.caption}</span>
<label for="img_title">
<span class="alignleft">{#wpeditimage.img_title}</span>
</label>
</th>
<td class="field">
<textarea id="img_cap_text"></textarea>
<input type="text" id="img_title" name="img_title" value="" aria-required="true" size="60" />
</td>
</tr>
@ -95,6 +95,17 @@ if ( 'rtl' == tinyMCEPopup.editor.getParam('directionality','') )
</td>
</tr>
<tr id="cap_field">
<th valign="top" scope="row" class="label">
<label for="img_cap">
<span class="alignleft">{#wpeditimage.caption}</span>
</label>
</th>
<td class="field">
<textarea id="img_cap_text"></textarea>
</td>
</tr>
<tr>
<th valign="top" scope="row" class="label">
<label for="link_href">
@ -145,17 +156,6 @@ if ( 'rtl' == tinyMCEPopup.editor.getParam('directionality','') )
</td>
</tr>
<tr>
<th valign="top" scope="row" class="label">
<label for="img_title">
<span class="alignleft">{#wpeditimage.img_title}</span>
</label>
</th>
<td class="field">
<input type="text" id="img_title" name="img_title" value="" aria-required="true" size="60" />
</td>
</tr>
<tr>
<th valign="top" scope="row" class="label">
<label for="img_classes">

View File

@ -1395,7 +1395,7 @@ function wp_prepare_attachment_for_js( $attachment ) {
}
if ( function_exists('get_compat_media_markup') )
$response['compat'] = get_compat_media_markup( $attachment->ID, array( 'taxonomies' => true, 'description' => true ) );
$response['compat'] = get_compat_media_markup( $attachment->ID, array( 'in_modal' => true ) );
return apply_filters( 'wp_prepare_attachment_for_js', $response, $attachment, $meta );
}
@ -1740,15 +1740,22 @@ function wp_print_media_templates() {
<label class="setting" data-setting="title">
<span><?php _e('Title'); ?></span>
<input type="text" value="{{ data.title }}" {{ maybeReadOnly }}
<# if ( 'video' === data.type ) { #>
placeholder="<?php esc_attr_e('Describe this video&hellip;'); ?>"
<# } else if ( 'audio' === data.type ) { #>
placeholder="<?php esc_attr_e('Describe this audio file&hellip;'); ?>"
<# } else { #>
placeholder="<?php esc_attr_e('Describe this media file&hellip;'); ?>"
<# } #>/>
<# if ( ! maybeReadOnly ) { #>
<# if ( 'video' === data.type ) { #>
placeholder="<?php esc_attr_e('Describe this video&hellip;'); ?>"
<# } else if ( 'audio' === data.type ) { #>
placeholder="<?php esc_attr_e('Describe this audio file&hellip;'); ?>"
<# } else { #>
placeholder="<?php esc_attr_e('Describe this media file&hellip;'); ?>"
<# } #>
<# } #>
/>
</label>
<# } #>
<label class="setting" data-setting="description">
<span><?php _e('Description'); ?></span>
<textarea {{ maybeReadOnly }}>{{ data.description }}</textarea>
</label>
</script>
<script type="text/html" id="tmpl-media-selection">