Make WordPress Core


Ignore:
Timestamp:
09/20/2022 04:00:35 AM (2 years ago)
Author:
joedolson
Message:

Media: Change alt attribute field to textarea in media library.

Change the input field used for alt attributes in the media library views from a text input to a textarea. This gives users more flexibility in resizing the field for easier management of longer alt attributes.

This patch includes a less-common use of esc_attr for a textarea. This is because the primary usage of the alt attribute will be escaped using esc_attr, and the value in editing should match the value output on the front end.

Props edent, sabernhardt, afercia, JavierCasares, audrasjb, joedolson.
Fixes #50066.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/media-template.php

    r54063 r54243  
    476476                <# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
    477477                <# if ( 'image' === data.type ) { #>
    478                     <span class="setting has-description" data-setting="alt">
     478                    <span class="setting alt-text has-description" data-setting="alt">
    479479                        <label for="attachment-details-two-column-alt-text" class="name"><?php _e( 'Alternative Text' ); ?></label>
    480                         <input type="text" id="attachment-details-two-column-alt-text" value="{{ data.alt }}" aria-describedby="alt-text-description" {{ maybeReadOnly }} />
     480                        <textarea id="attachment-details-two-column-alt-text" aria-describedby="alt-text-description" {{ maybeReadOnly }}>{{ data.alt }}</textarea>
    481481                    </span>
    482482                    <p class="description" id="alt-text-description"><?php echo $alt_text_description; ?></p>
     
    707707        <# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
    708708        <# if ( 'image' === data.type ) { #>
    709             <span class="setting has-description" data-setting="alt">
     709            <span class="setting alt-text has-description" data-setting="alt">
    710710                <label for="attachment-details-alt-text" class="name"><?php _e( 'Alt Text' ); ?></label>
    711                 <input type="text" id="attachment-details-alt-text" value="{{ data.alt }}" aria-describedby="alt-text-description" {{ maybeReadOnly }} />
     711                <textarea id="attachment-details-alt-text" aria-describedby="alt-text-description" {{ maybeReadOnly }}>{{ data.alt }}</textarea>
    712712            </span>
    713713            <p class="description" id="alt-text-description"><?php echo $alt_text_description; ?></p>
     
    10151015        <span class="setting alt-text has-description">
    10161016            <label for="embed-image-settings-alt-text" class="name"><?php _e( 'Alternative Text' ); ?></label>
    1017             <input type="text" id="embed-image-settings-alt-text" data-setting="alt" aria-describedby="alt-text-description" />
     1017            <textarea id="embed-image-settings-alt-text" data-setting="alt" aria-describedby="alt-text-description"></textarea>
    10181018        </span>
    10191019        <p class="description" id="alt-text-description"><?php echo $alt_text_description; ?></p>
     
    10781078                    <span class="setting alt-text has-description">
    10791079                        <label for="image-details-alt-text" class="name"><?php _e( 'Alternative Text' ); ?></label>
    1080                         <input type="text" id="image-details-alt-text" data-setting="alt" value="{{ data.model.alt }}" aria-describedby="alt-text-description" />
     1080                        <textarea id="image-details-alt-text" data-setting="alt" aria-describedby="alt-text-description">{{ data.model.alt }}</textarea>
    10811081                    </span>
    10821082                    <p class="description" id="alt-text-description"><?php echo $alt_text_description; ?></p>
Note: See TracChangeset for help on using the changeset viewer.