vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2026-10-06 15:47:05 +00:00
Code Issues Actions 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
Download Patch File Download Diff File Expand all files Collapse all files
src/wp-includes/css/media-views.css
+9
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"] {
src/wp-includes/media-template.php
+6 -6
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>