Upstream
/
WordPress
mirror of https://github.com/WordPress/WordPress.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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.
Built from https://develop.svn.wordpress.org/trunk@54243


git-svn-id: http://core.svn.wordpress.org/trunk@53802 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
joedolson 2022-09-20 04:02:10 +00:00
parent 8731d43633
commit ee24b9b733
11 changed files with 72 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -782,8 +782,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 {
@ -850,6 +850,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;
}
@ -1232,11 +1237,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
wp-admin/css/media-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

22
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
wp-admin/css/media.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
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
wp-includes/css/media-views-rtl.css
View File

@ -101,6 +101,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"],
@ -530,6 +531,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: right;
width: 100%;
@ -2799,6 +2807,7 @@
.media-frame textarea,
.media-frame select {
font-size: 16px;
line-height: 1.5;
}
.media-frame .media-toolbar input[type="search"] {

4
wp-includes/css/media-views-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

9
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"] {

4
wp-includes/css/media-views.min.css vendored
View File

File diff suppressed because one or more lines are too long

12
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>

2
wp-includes/version.php
View File

@ -16,7 +16,7 @@
*
* @global string $wp_version
*/
$wp_version = '6.1-alpha-54242';
$wp_version = '6.1-alpha-54243';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.