Make WordPress Core

Changeset 23083


Ignore:
Timestamp:
12/06/2012 12:41:06 AM (12 years ago)
Author:
nacin
Message:

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.

Location:
trunk
Files:
9 edited

Legend:

Unmodified
Added
Removed
  • trunk/wp-admin/css/wp-admin.css

    r23004 r23083  
    34083408}
    34093409
     3410#post-body-content .compat-attachment-fields {
     3411    margin-bottom: 20px;
     3412}
     3413
    34103414.compat-attachment-fields th {
    34113415    padding-top: 5px;
     
    43904394    margin-bottom: 8px;
    43914395    padding: 2px 10px;
     4396}
     4397
     4398.wp_attachment_details {
     4399    margin-bottom: 20px;
    43924400}
    43934401
  • trunk/wp-admin/edit-form-advanced.php

    r22963 r23083  
    108108    wp_enqueue_style( 'imgareaselect' );
    109109    add_meta_box( 'submitdiv', __('Save'), 'attachment_submit_meta_box', null, 'side', 'core' );
    110     add_meta_box( 'attachmentdata', __('Attachment Page Content'), 'attachment_content_meta_box', null, 'normal', 'core' );
    111110    add_action( 'edit_form_after_title', 'edit_form_image_editor' );
    112111} else {
  • trunk/wp-admin/includes/ajax-actions.php

    r23058 r23083  
    18851885        $post['post_excerpt'] = $changes['caption'];
    18861886
     1887    if ( isset( $changes['description'] ) )
     1888        $post['post_content'] = $changes['description'];
     1889
    18871890    if ( isset( $changes['alt'] ) ) {
    18881891        $alt = get_post_meta( $id, '_wp_attachment_image_alt', true );
     
    19231926    if ( 'attachment' != $post['post_type'] )
    19241927        wp_send_json_error();
    1925 
    1926     // Handle the description field automatically, if a plugin adds it back.
    1927     if ( isset( $attachment_data['post_content'] ) )
    1928         $post['post_content'] = $attachment_data['post_content'];
    19291928
    19301929    $post = apply_filters( 'attachment_fields_to_save', $post, $attachment_data );
  • trunk/wp-admin/includes/media.php

    r23072 r23083  
    12871287    $default_args = array(
    12881288        'errors' => null,
    1289         'taxonomies' => false,
    1290         'description' => false,
     1289        'in_modal' => false,
    12911290    );
    12921291
     
    12981297    $form_fields = array();
    12991298
    1300     if ( $args['taxonomies'] ) {
     1299    if ( $args['in_modal'] ) {
    13011300        foreach ( get_attachment_taxonomies($post) as $taxonomy ) {
    13021301            $t = (array) get_taxonomy($taxonomy);
     
    13301329
    13311330    unset( $form_fields['image-size'], $form_fields['align'], $form_fields['image_alt'],
    1332         $form_fields['post_title'], $form_fields['post_excerpt'],
     1331        $form_fields['post_title'], $form_fields['post_excerpt'], $form_fields['post_content'],
    13331332        $form_fields['url'], $form_fields['menu_order'], $form_fields['image_url'] );
    13341333
    1335     if ( ! $args['description'] )
    1336         unset( $form_fields['post_content'] );
    1337 
    13381334    $media_meta = apply_filters( 'media_meta', '', $post );
    13391335
    13401336    $defaults = array(
    1341         'input'      => 'text',
    1342         'required'   => false,
    1343         'value'      => '',
    1344         'extra_rows' => array(),
     1337        'input'         => 'text',
     1338        'required'      => false,
     1339        'value'         => '',
     1340        'extra_rows'    => array(),
     1341        'show_in_edit'  => true,
     1342        'show_in_modal' => true,
    13451343    );
    13461344
     
    13611359
    13621360        $field = array_merge( $defaults, $field );
     1361
     1362        if ( ( ! $field['show_in_edit'] && ! $args['in_modal'] ) || ( ! $field['show_in_modal'] && $args['in_modal'] ) )
     1363            continue;
    13631364
    13641365        if ( $field['input'] == 'hidden' ) {
     
    22832284    $att_url = wp_get_attachment_url( $post->ID );
    22842285
    2285     $image_edit_button = '';
    2286     if ( wp_attachment_is_image( $post->ID ) && wp_image_editor_supports( array( 'mime_type' => $post->post_mime_type ) ) ) {
    2287         $nonce = wp_create_nonce( "image_editor-$post->ID" );
    2288         $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>";
    2289     }
    2290 
     2286    if ( wp_attachment_is_image( $post->ID ) ) :
     2287        $image_edit_button = '';
     2288        if ( wp_image_editor_supports( array( 'mime_type' => $post->post_mime_type ) ) ) {
     2289            $nonce = wp_create_nonce( "image_editor-$post->ID" );
     2290            $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>";
     2291        }
    22912292    ?>
    22922293    <div class="wp_attachment_holder">
     
    22992300        <div style="display:none" class="image-editor" id="image-editor-<?php echo $attachment_id; ?>"></div>
    23002301    </div>
     2302    <?php endif; ?>
    23012303
    23022304    <div class="wp_attachment_details">
     
    23122314        </p>
    23132315    <?php endif; ?>
     2316
     2317    <?php
     2318        $quicktags_settings = array( 'buttons' => 'strong,em,link,block,del,ins,img,ul,ol,li,code,spell,close' );
     2319        $editor_args = array(
     2320            'textarea_name' => 'content',
     2321            'textarea_rows' => 5,
     2322            'media_buttons' => false,
     2323            'tinymce' => false,
     2324            'quicktags' => $quicktags_settings,
     2325        );
     2326    ?>
     2327
     2328    <label for="content"><strong><?php _e( 'Description' ); ?></strong></label>
     2329    <?php wp_editor( $post->post_content, 'attachment_content', $editor_args ); ?>
    23142330
    23152331    </div>
     
    23492365    </div>
    23502366    <div class="misc-pub-section">
    2351         <?php _e( 'File type:' ); ?> <strong><?php echo $post->post_mime_type; ?></strong>
     2367        <?php _e( 'File type:' ); ?> <strong><?php
     2368            if ( preg_match( '/^.*?\.(\w+)$/', get_attached_file( $post->ID ), $matches ) )
     2369                echo esc_html( strtoupper( $matches[1] ) );
     2370            else
     2371                echo strtoupper( str_replace( 'image/', '', $post->post_mime_type ) );
     2372        ?></strong>
    23522373    </div>
    23532374
  • trunk/wp-admin/includes/meta-boxes.php

    r23044 r23083  
    293293</div>
    294294
    295 <?php
    296 }
    297 
    298 /**
    299  * Display attachment/media-specific information
    300  *
    301  * @since 3.5.0
    302  *
    303  * @param object $post
    304  */
    305 function attachment_content_meta_box( $post ) {
    306     $quicktags_settings = array( 'buttons' => 'strong,em,link,block,del,ins,img,ul,ol,li,code,spell,close' );
    307     $editor_args = array(
    308         'textarea_name' => 'content',
    309         'textarea_rows' => 5,
    310         'media_buttons' => false,
    311         'tinymce' => false,
    312         'quicktags' => $quicktags_settings,
    313     );
    314 ?>
    315 <p>
    316     <label class="screen-reader-text" for="content"><strong><?php _e( 'Attachment Page Content' ); ?></strong></label>
    317     <?php wp_editor( $post->post_content, 'attachment_content', $editor_args ); ?>
    318 </p>
    319295<?php
    320296}
  • trunk/wp-includes/js/media-editor.js

    r23069 r23083  
    555555
    556556                options = {
    557                     id: attachment.id
     557                    id:           attachment.id,
     558                    post_content: attachment.description
    558559                };
    559560
  • trunk/wp-includes/js/media-views.js

    r23076 r23083  
    28302830                    height:        '',
    28312831                    compat:        false,
    2832                     alt:           ''
     2832                    alt:           '',
     2833                    description:   '',
    28332834                });
    28342835
  • trunk/wp-includes/js/tinymce/plugins/wpeditimage/editimage.html

    r22948 r23083  
    7474        </tr>
    7575
     76        <tr>
     77            <th valign="top" scope="row" class="label">
     78                <label for="img_title">
     79                <span class="alignleft">{#wpeditimage.img_title}</span>
     80                </label>
     81            </th>
     82            <td class="field">
     83                <input type="text" id="img_title" name="img_title" value="" aria-required="true" size="60" />
     84            </td>
     85        </tr>
     86
     87        <tr>
     88            <th valign="top" scope="row" class="label">
     89                <label for="img_alt">
     90                <span class="alignleft">{#wpeditimage.alt}</span>
     91                </label>
     92            </th>
     93            <td class="field">
     94                <input type="text" id="img_alt" name="img_alt" value="" size="60" />
     95            </td>
     96        </tr>
     97
    7698        <tr id="cap_field">
    7799            <th valign="top" scope="row" class="label">
     
    82104            <td class="field">
    83105                <textarea id="img_cap_text"></textarea>
    84             </td>
    85         </tr>
    86 
    87         <tr>
    88             <th valign="top" scope="row" class="label">
    89                 <label for="img_alt">
    90                 <span class="alignleft">{#wpeditimage.alt}</span>
    91                 </label>
    92             </th>
    93             <td class="field">
    94                 <input type="text" id="img_alt" name="img_alt" value="" size="60" />
    95106            </td>
    96107        </tr>
     
    148159        <tr>
    149160            <th valign="top" scope="row" class="label">
    150                 <label for="img_title">
    151                 <span class="alignleft">{#wpeditimage.img_title}</span>
    152                 </label>
    153             </th>
    154             <td class="field">
    155                 <input type="text" id="img_title" name="img_title" value="" aria-required="true" size="60" />
    156             </td>
    157         </tr>
    158 
    159         <tr>
    160             <th valign="top" scope="row" class="label">
    161161                <label for="img_classes">
    162162                <span class="alignleft">{#wpeditimage.css}</span>
  • trunk/wp-includes/media.php

    r23076 r23083  
    13961396
    13971397    if ( function_exists('get_compat_media_markup') )
    1398         $response['compat'] = get_compat_media_markup( $attachment->ID, array( 'taxonomies' => true, 'description' => true ) );
     1398        $response['compat'] = get_compat_media_markup( $attachment->ID, array( 'in_modal' => true ) );
    13991399
    14001400    return apply_filters( 'wp_prepare_attachment_for_js', $response, $attachment, $meta );
     
    17411741                <span><?php _e('Title'); ?></span>
    17421742                <input type="text" value="{{ data.title }}" {{ maybeReadOnly }}
    1743                 <# if ( 'video' === data.type ) { #>
    1744                     placeholder="<?php esc_attr_e('Describe this video&hellip;'); ?>"
    1745                 <# } else if ( 'audio' === data.type ) { #>
    1746                     placeholder="<?php esc_attr_e('Describe this audio file&hellip;'); ?>"
    1747                 <# } else { #>
    1748                     placeholder="<?php esc_attr_e('Describe this media file&hellip;'); ?>"
    1749                 <# } #>/>
     1743                <# if ( ! maybeReadOnly ) { #>
     1744                    <# if ( 'video' === data.type ) { #>
     1745                        placeholder="<?php esc_attr_e('Describe this video&hellip;'); ?>"
     1746                    <# } else if ( 'audio' === data.type ) { #>
     1747                        placeholder="<?php esc_attr_e('Describe this audio file&hellip;'); ?>"
     1748                    <# } else { #>
     1749                        placeholder="<?php esc_attr_e('Describe this media file&hellip;'); ?>"
     1750                    <# } #>
     1751                <# } #>
     1752                />
    17501753            </label>
    17511754        <# } #>
     1755            <label class="setting" data-setting="description">
     1756                <span><?php _e('Description'); ?></span>
     1757                <textarea {{ maybeReadOnly }}>{{ data.description }}</textarea>
     1758            </label>
    17521759    </script>
    17531760
Note: See TracChangeset for help on using the changeset viewer.