WordPress.org

Make WordPress Core

Changeset 23083


Ignore:
Timestamp:
12/06/12 00:41:06 (19 months 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.