mirror_php/wordpress
1
0
Fork 0
mirror of git://develop.git.wordpress.org/ synced 2025-03-15 09:29:48 +01:00
Code Issues Actions 11 Packages Projects Releases Wiki Activity

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

Browse Source 
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.

git-svn-id: https://develop.svn.wordpress.org/trunk@54243 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Joe Dolson 2022-09-20 04:00:35 +00:00
parent f450acf7af
commit 4c173550a2
5 changed files with 52 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/wp-admin/css/media.css
View File

@ -781,8 +781,8 @@ border color while dragging a file over the uploader drop area */
.edit-attachment-frame input,
.edit-attachment-frame textarea {
padding: 6px 8px;
line-height: 1.14285714;
padding: 4px 8px;
line-height: 1.42857143;
}
.edit-attachment-frame .attachment-info {
@ -849,6 +849,11 @@ border color while dragging a file over the uploader drop area */
margin-bottom: 5px;
}
.wp_attachment_details #attachment_alt {
max-width: 500px;
height: 3.28571428em;
}
.wp_attachment_details .attachment-alt-text-description {
margin-top: 5px;
}
@ -1231,11 +1236,24 @@ audio, video {
}
@media screen and (max-width: 782px) {
.edit-attachment-frame input,
.edit-attachment-frame textarea {
line-height: 1.5;
}
.wp_attachment_details label[for="content"] {
font-size: 14px;
line-height: 1.5;
}
.wp_attachment_details textarea {
line-height: 1.5;
}
.wp_attachment_details #attachment_alt {
height: 3.375em;
}
.media-upload-form .media-item.error,
.media-upload-form .media-item .error {
font-size: 13px;

2
src/wp-admin/includes/media.php
View File

@ -3207,7 +3207,7 @@ function edit_form_image_editor( $post ) {
<?php if ( 'image' === substr( $post->post_mime_type, 0, 5 ) ) : ?>
<p class="attachment-alt-text">
<label for="attachment_alt"><strong><?php _e( 'Alternative Text' ); ?></strong></label><br />
<input type="text" class="widefat" name="_wp_attachment_image_alt" id="attachment_alt" aria-describedby="alt-text-description" value="<?php echo esc_attr( $alt_text ); ?>" />
<textarea class="widefat" name="_wp_attachment_image_alt" id="attachment_alt" aria-describedby="alt-text-description"><?php echo esc_attr( $alt_text ); ?></textarea>
</p>
<p class="attachment-alt-text-description" id="alt-text-description">
<?php

9
src/wp-includes/css/media-views.css
View File

@ -100,6 +100,7 @@
color: #2c3338;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
font-size: 13px;
line-height: 1.38461538;
}
.media-frame input[type="text"],
@ -529,6 +530,13 @@
resize: vertical;
}
.media-sidebar .alt-text textarea,
.attachment-details .alt-text textarea,
.compat-item .alt-text textarea,
.alt-text textarea {
height: 50px;
}
.compat-item {
float: left;
width: 100%;
@ -2798,6 +2806,7 @@
.media-frame textarea,
.media-frame select {
font-size: 16px;
line-height: 1.5;
}
.media-frame .media-toolbar input[type="search"] {

12
src/wp-includes/media-template.php
View File

@ -475,9 +475,9 @@ function wp_print_media_templates() {
<div class="settings">
<# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
<# if ( 'image' === data.type ) { #>
<span class="setting has-description" data-setting="alt">
<span class="setting alt-text has-description" data-setting="alt">
<label for="attachment-details-two-column-alt-text" class="name"><?php _e( 'Alternative Text' ); ?></label>
<input type="text" id="attachment-details-two-column-alt-text" value="{{ data.alt }}" aria-describedby="alt-text-description" {{ maybeReadOnly }} />
<textarea id="attachment-details-two-column-alt-text" aria-describedby="alt-text-description" {{ maybeReadOnly }}>{{ data.alt }}</textarea>
</span>
<p class="description" id="alt-text-description"><?php echo $alt_text_description; ?></p>
<# } #>
@ -706,9 +706,9 @@ function wp_print_media_templates() {
</div>
<# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
<# if ( 'image' === data.type ) { #>
<span class="setting has-description" data-setting="alt">
<span class="setting alt-text has-description" data-setting="alt">
<label for="attachment-details-alt-text" class="name"><?php _e( 'Alt Text' ); ?></label>
<input type="text" id="attachment-details-alt-text" value="{{ data.alt }}" aria-describedby="alt-text-description" {{ maybeReadOnly }} />
<textarea id="attachment-details-alt-text" aria-describedby="alt-text-description" {{ maybeReadOnly }}>{{ data.alt }}</textarea>
</span>
<p class="description" id="alt-text-description"><?php echo $alt_text_description; ?></p>
<# } #>
@ -1014,7 +1014,7 @@ function wp_print_media_templates() {
<span class="setting alt-text has-description">
<label for="embed-image-settings-alt-text" class="name"><?php _e( 'Alternative Text' ); ?></label>
<input type="text" id="embed-image-settings-alt-text" data-setting="alt" aria-describedby="alt-text-description" />
<textarea id="embed-image-settings-alt-text" data-setting="alt" aria-describedby="alt-text-description"></textarea>
</span>
<p class="description" id="alt-text-description"><?php echo $alt_text_description; ?></p>
@ -1077,7 +1077,7 @@ function wp_print_media_templates() {
<div class="column-settings">
<span class="setting alt-text has-description">
<label for="image-details-alt-text" class="name"><?php _e( 'Alternative Text' ); ?></label>
<input type="text" id="image-details-alt-text" data-setting="alt" value="{{ data.model.alt }}" aria-describedby="alt-text-description" />
<textarea id="image-details-alt-text" data-setting="alt" aria-describedby="alt-text-description">{{ data.model.alt }}</textarea>
</span>
<p class="description" id="alt-text-description"><?php echo $alt_text_description; ?></p>

32
tests/qunit/index.html
View File

@ -1171,10 +1171,10 @@
<div class="settings">
<# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
<# if ( 'image' === data.type ) { #>
<label class="setting" data-setting="alt">
<span class="name">Alternative Text</span>
<input type="text" value="{{ data.alt }}" aria-describedby="alt-text-description" {{ maybeReadOnly }} />
</label>
<span class="setting alt-text has-description" data-setting="alt">
<label for="attachment-details-two-column-alt-text" class="name">Alternative Text</label>
<textarea id="attachment-details-two-column-alt-text" aria-describedby="alt-text-description" {{ maybeReadOnly }}>{{ data.alt }}</textarea>
</span>
<p class="description" id="alt-text-description"><a href="https://www.w3.org/WAI/tutorials/images/decision-tree" target="_blank" rel="noopener">Describe the purpose of the image<span class="screen-reader-text"> (opens in a new tab)</span></a>. Leave empty if the image is purely decorative.</p>
<# } #>
<label class="setting" data-setting="title">
@ -1336,10 +1336,10 @@
<# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
<# if ( 'image' === data.type ) { #>
<label class="setting" data-setting="alt">
<span class="name">Alt Text</span>
<input type="text" value="{{ data.alt }}" aria-describedby="alt-text-description" {{ maybeReadOnly }} />
</label>
<span class="setting alt-text has-description" data-setting="alt">
<label for="attachment-details-alt-text" class="name">Alt Text</label>
<textarea id="attachment-details-alt-text" aria-describedby="alt-text-description" {{ maybeReadOnly }}>{{ data.alt }}</textarea>
</span>
<p class="description" id="alt-text-description"><a href="https://www.w3.org/WAI/tutorials/images/decision-tree" target="_blank" rel="noopener">Describe the purpose of the image<span class="screen-reader-text"> (opens in a new tab)</span></a>. Leave empty if the image is purely decorative.</p>
<# } #>
<label class="setting" data-setting="title">
@ -1628,10 +1628,10 @@
<img src="{{ data.model.url }}" draggable="false" alt="" />
</div>
<label class="setting alt-text has-description">
<span>Alternative Text</span>
<input type="text" data-setting="alt" aria-describedby="alt-text-description" />
</label>
<span class="setting alt-text has-description">
<label for="embed-image-settings-alt-text" class="name">Alternative Text</label>
<textarea id="embed-image-settings-alt-text" data-setting="alt" aria-describedby="alt-text-description"></textarea>
</span>
<p class="description" id="alt-text-description"><a href="https://www.w3.org/WAI/tutorials/images/decision-tree" target="_blank" rel="noopener">Describe the purpose of the image<span class="screen-reader-text"> (opens in a new tab)</span></a>. Leave empty if the image is purely decorative.</p>
<label class="setting caption">
@ -1683,10 +1683,10 @@
</div>
</div>
<div class="column-settings">
<label class="setting alt-text has-description">
<span>Alternative Text</span>
<input type="text" data-setting="alt" value="{{ data.model.alt }}" aria-describedby="alt-text-description" />
</label>
<span class="setting alt-text has-description">
<label for="image-details-alt-text" class="name">Alternative Text</label>
<textarea id="image-details-alt-text" data-setting="alt" aria-describedby="alt-text-description">{{ data.model.alt }}</textarea>
</span>
<p class="description" id="alt-text-description"><a href="https://www.w3.org/WAI/tutorials/images/decision-tree" target="_blank" rel="noopener">Describe the purpose of the image<span class="screen-reader-text"> (opens in a new tab)</span></a>. Leave empty if the image is purely decorative.</p>
<label class="setting caption">