wp/wp-includes/media-template.php
changeset 21 48c4eec2b7e6
parent 19 3d72ae0968f4
child 22 8c2e4d02f4ef
--- a/wp/wp-includes/media-template.php	Thu Sep 29 08:06:27 2022 +0200
+++ b/wp/wp-includes/media-template.php	Fri Sep 05 18:40:08 2025 +0200
@@ -8,7 +8,7 @@
  */
 
 /**
- * Output the markup for a audio tag to be used in an Underscore template
+ * Outputs the markup for an audio tag to be used in an Underscore template
  * when data.model is passed.
  *
  * @since 3.9.0
@@ -48,7 +48,7 @@
 }
 
 /**
- * Output the markup for a video tag to be used in an Underscore template
+ * Outputs the markup for a video tag to be used in an Underscore template
  * when data.model is passed.
  *
  * @since 3.9.0
@@ -159,11 +159,12 @@
 	$alt_text_description = sprintf(
 		/* translators: 1: Link to tutorial, 2: Additional link attributes, 3: Accessibility text. */
 		__( '<a href="%1$s" %2$s>Learn how to describe the purpose of the image%3$s</a>. Leave empty if the image is purely decorative.' ),
-		esc_url( 'https://www.w3.org/WAI/tutorials/images/decision-tree' ),
+		/* translators: Localized tutorial, if one exists. W3C Web Accessibility Initiative link has list of existing translations. */
+		esc_url( __( 'https://www.w3.org/WAI/tutorials/images/decision-tree/' ) ),
 		'target="_blank" rel="noopener"',
 		sprintf(
 			'<span class="screen-reader-text"> %s</span>',
-			/* translators: Accessibility text. */
+			/* translators: Hidden accessibility text. */
 			__( '(opens in a new tab)' )
 		)
 	);
@@ -184,7 +185,7 @@
 		</div>
 		<h2 class="media-frame-actions-heading screen-reader-text">
 		<?php
-			/* translators: Accessibility text. */
+			/* translators: Hidden accessibility text. */
 			_e( 'Selected media actions' );
 		?>
 		</h2>
@@ -196,7 +197,12 @@
 	<script type="text/html" id="tmpl-media-modal">
 		<div tabindex="0" class="<?php echo $class; ?>" role="dialog" aria-labelledby="media-frame-title">
 			<# if ( data.hasCloseButton ) { #>
-				<button type="button" class="media-modal-close"><span class="media-modal-icon"><span class="screen-reader-text"><?php _e( 'Close dialog' ); ?></span></span></button>
+				<button type="button" class="media-modal-close"><span class="media-modal-icon"><span class="screen-reader-text">
+					<?php
+					/* translators: Hidden accessibility text. */
+					_e( 'Close dialog' );
+					?>
+				</span></span></button>
 			<# } #>
 			<div class="media-modal-content" role="document"></div>
 		</div>
@@ -221,7 +227,12 @@
 	<script type="text/html" id="tmpl-uploader-inline">
 		<# var messageClass = data.message ? 'has-upload-message' : 'no-upload-message'; #>
 		<# if ( data.canClose ) { #>
-		<button class="close dashicons dashicons-no"><span class="screen-reader-text"><?php _e( 'Close uploader' ); ?></span></button>
+		<button class="close dashicons dashicons-no"><span class="screen-reader-text">
+			<?php
+			/* translators: Hidden accessibility text. */
+			_e( 'Close uploader' );
+			?>
+		</span></button>
 		<# } #>
 		<div class="uploader-inline-content {{ messageClass }}">
 		<# if ( data.message ) { #>
@@ -310,10 +321,20 @@
 	<?php // Template for the view switchers, used for example in the Media Grid. ?>
 	<script type="text/html" id="tmpl-media-library-view-switcher">
 		<a href="<?php echo esc_url( add_query_arg( 'mode', 'list', admin_url( 'upload.php' ) ) ); ?>" class="view-list">
-			<span class="screen-reader-text"><?php _e( 'List view' ); ?></span>
+			<span class="screen-reader-text">
+				<?php
+				/* translators: Hidden accessibility text. */
+				_e( 'List view' );
+				?>
+			</span>
 		</a>
 		<a href="<?php echo esc_url( add_query_arg( 'mode', 'grid', admin_url( 'upload.php' ) ) ); ?>" class="view-grid current" aria-current="page">
-			<span class="screen-reader-text"><?php _e( 'Grid view' ); ?></span>
+			<span class="screen-reader-text">
+				<?php
+				/* translators: Hidden accessibility text. */
+				_e( 'Grid view' );
+				?>
+			</span>
 		</a>
 	</script>
 
@@ -342,8 +363,8 @@
 	<?php // Template for the Attachment Details layout in the media browser. ?>
 	<script type="text/html" id="tmpl-edit-attachment-frame">
 		<div class="edit-media-header">
-			<button class="left dashicons"<# if ( ! data.hasPrevious ) { #> disabled<# } #>><span class="screen-reader-text"><?php _e( 'Edit previous media item' ); ?></span></button>
-			<button class="right dashicons"<# if ( ! data.hasNext ) { #> disabled<# } #>><span class="screen-reader-text"><?php _e( 'Edit next media item' ); ?></span></button>
+			<button class="left dashicons"<# if ( ! data.hasPrevious ) { #> disabled<# } #>><span class="screen-reader-text"><?php /* translators: Hidden accessibility text. */ _e( 'Edit previous media item' ); ?></span></button>
+			<button class="right dashicons"<# if ( ! data.hasNext ) { #> disabled<# } #>><span class="screen-reader-text"><?php /* translators: Hidden accessibility text. */ _e( 'Edit next media item' ); ?></span></button>
 			<button type="button" class="media-modal-close"><span class="media-modal-icon"><span class="screen-reader-text"><?php _e( 'Close dialog' ); ?></span></span></button>
 		</div>
 		<div class="media-frame-title"></div>
@@ -353,14 +374,25 @@
 	<?php // Template for the Attachment Details two columns layout. ?>
 	<script type="text/html" id="tmpl-attachment-details-two-column">
 		<div class="attachment-media-view {{ data.orientation }}">
-			<h2 class="screen-reader-text"><?php _e( 'Attachment Preview' ); ?></h2>
+			<?php
+			if ( isset( $_GET['error'] ) && 'deprecated' === $_GET['error'] ) {
+				wp_admin_notice(
+					__( 'The Edit Media screen is deprecated as of WordPress 6.3. Please use the Media Library instead.' ),
+					array(
+						'id'                 => 'message',
+						'additional_classes' => array( 'error' ),
+					)
+				);
+			}
+			?>
+			<h2 class="screen-reader-text"><?php /* translators: Hidden accessibility text. */ _e( 'Attachment Preview' ); ?></h2>
 			<div class="thumbnail thumbnail-{{ data.type }}">
 				<# if ( data.uploading ) { #>
 					<div class="media-progress-bar"><div></div></div>
+				<# } else if ( data.sizes && data.sizes.full ) { #>
+					<img class="details-image" src="{{ data.sizes.full.url }}" draggable="false" alt="" />
 				<# } else if ( data.sizes && data.sizes.large ) { #>
 					<img class="details-image" src="{{ data.sizes.large.url }}" draggable="false" alt="" />
-				<# } else if ( data.sizes && data.sizes.full ) { #>
-					<img class="details-image" src="{{ data.sizes.full.url }}" draggable="false" alt="" />
 				<# } else if ( -1 === jQuery.inArray( data.type, [ 'audio', 'video' ] ) ) { #>
 					<img class="details-image icon" src="{{ data.icon }}" draggable="false" alt="" />
 				<# } #>
@@ -404,7 +436,12 @@
 				<span class="saved"><?php esc_html_e( 'Saved.' ); ?></span>
 			</span>
 			<div class="details">
-				<h2 class="screen-reader-text"><?php _e( 'Details' ); ?></h2>
+				<h2 class="screen-reader-text">
+					<?php
+					/* translators: Hidden accessibility text. */
+					_e( 'Details' );
+					?>
+				</h2>
 				<div class="uploaded"><strong><?php _e( 'Uploaded on:' ); ?></strong> {{ data.dateFormatted }}</div>
 				<div class="uploaded-by">
 					<strong><?php _e( 'Uploaded by:' ); ?></strong>
@@ -438,14 +475,16 @@
 					<# } #>
 
 					<# if ( data.originalImageURL && data.originalImageName ) { #>
-						<?php _e( 'Original image:' ); ?>
-						<a href="{{ data.originalImageURL }}">{{data.originalImageName}}</a>
+						<div class="word-wrap-break-word">
+							<strong><?php _e( 'Original image:' ); ?></strong>
+							<a href="{{ data.originalImageURL }}">{{data.originalImageName}}</a>
+						</div>
 					<# } #>
 				<# } #>
 
 				<# if ( data.fileLength && data.fileLengthHumanReadable ) { #>
 					<div class="file-length"><strong><?php _e( 'Length:' ); ?></strong>
-						<span aria-hidden="true">{{ data.fileLength }}</span>
+						<span aria-hidden="true">{{ data.fileLengthHumanReadable }}</span>
 						<span class="screen-reader-text">{{ data.fileLengthHumanReadable }}</span>
 					</div>
 				<# } #>
@@ -473,9 +512,9 @@
 			<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>
 				<# } #>
@@ -519,7 +558,10 @@
 
 			<div class="actions">
 				<# if ( data.link ) { #>
-					<a class="view-attachment" href="{{ data.link }}"><?php _e( 'View attachment page' ); ?></a>
+					<?php
+					$view_media_text = ( '1' === get_option( 'wp_attachment_pages_enabled' ) ) ? __( 'View attachment page' ) : __( 'View media file' );
+					?>
+					<a class="view-attachment" href="{{ data.link }}"><?php echo $view_media_text; ?></a>
 				<# } #>
 				<# if ( data.can.save ) { #>
 					<# if ( data.link ) { #>
@@ -527,6 +569,10 @@
 					<# } #>
 					<a href="{{ data.editLink }}"><?php _e( 'Edit more details' ); ?></a>
 				<# } #>
+				<# if ( data.can.save && data.link ) { #>
+					<span class="links-separator">|</span>
+					<a href="{{ data.url }}" download><?php _e( 'Download file' ); ?></a>
+				<# } #>
 				<# if ( ! data.uploading && data.can.remove ) { #>
 					<# if ( data.link || data.can.save ) { #>
 						<span class="links-separator">|</span>
@@ -571,11 +617,21 @@
 				<# } #>
 			</div>
 			<# if ( data.buttons.close ) { #>
-				<button type="button" class="button-link attachment-close media-modal-icon"><span class="screen-reader-text"><?php _e( 'Remove' ); ?></span></button>
+				<button type="button" class="button-link attachment-close media-modal-icon"><span class="screen-reader-text">
+					<?php
+					/* translators: Hidden accessibility text. */
+					_e( 'Remove' );
+					?>
+				</span></button>
 			<# } #>
 		</div>
 		<# if ( data.buttons.check ) { #>
-			<button type="button" class="check" tabindex="-1"><span class="media-modal-icon"></span><span class="screen-reader-text"><?php _e( 'Deselect' ); ?></span></button>
+			<button type="button" class="check" tabindex="-1"><span class="media-modal-icon"></span><span class="screen-reader-text">
+				<?php
+				/* translators: Hidden accessibility text. */
+				_e( 'Deselect' );
+				?>
+			</span></button>
 		<# } #>
 		<#
 		var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly';
@@ -661,8 +717,10 @@
 					<# } #>
 
 					<# if ( data.originalImageURL && data.originalImageName ) { #>
-						<?php _e( 'Original image:' ); ?>
-						<a href="{{ data.originalImageURL }}">{{data.originalImageName}}</a>
+						<div class="word-wrap-break-word">
+							<?php _e( 'Original image:' ); ?>
+							<a href="{{ data.originalImageURL }}">{{data.originalImageName}}</a>
+						</div>
 					<# } #>
 
 					<# if ( data.can.save && data.sizes ) { #>
@@ -672,7 +730,7 @@
 
 				<# if ( data.fileLength && data.fileLengthHumanReadable ) { #>
 					<div class="file-length"><?php _e( 'Length:' ); ?>
-						<span aria-hidden="true">{{ data.fileLength }}</span>
+						<span aria-hidden="true">{{ data.fileLengthHumanReadable }}</span>
 						<span class="screen-reader-text">{{ data.fileLengthHumanReadable }}</span>
 					</div>
 				<# } #>
@@ -702,9 +760,9 @@
 		</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>
 		<# } #>
@@ -782,7 +840,7 @@
 						<?php esc_html_e( 'Right' ); ?>
 					</option>
 					<option value="none" selected>
-						<?php esc_html_e( 'None' ); ?>
+						<?php echo esc_html_x( 'None', 'Alignment option' ); ?>
 					</option>
 				</select>
 			</span>
@@ -809,7 +867,7 @@
 				<option value="file">
 			<# } else { #>
 				<option value="none" selected>
-					<?php esc_html_e( 'None' ); ?>
+					<?php echo esc_html_x( 'None', 'Media item link option' ); ?>
 				</option>
 				<option value="file">
 			<# } #>
@@ -894,7 +952,7 @@
 					<?php esc_html_e( 'Media File' ); ?>
 				</option>
 				<option value="none" <# if ( 'none' === wp.media.galleryDefaults.link ) { #>selected="selected"<# } #>>
-					<?php esc_html_e( 'None' ); ?>
+					<?php echo esc_html_x( 'None', 'Media item link option' ); ?>
 				</option>
 			</select>
 		</span>
@@ -1010,7 +1068,7 @@
 
 		<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>
 
@@ -1038,7 +1096,7 @@
 						<?php esc_html_e( 'Right' ); ?>
 					</button>
 					<button class="button active" value="none">
-						<?php esc_html_e( 'None' ); ?>
+						<?php echo esc_html_x( 'None', 'Alignment option' ); ?>
 					</button>
 				</span>
 			</span>
@@ -1055,7 +1113,7 @@
 						<?php esc_html_e( 'Custom URL' ); ?>
 					</button>
 					<button class="button active" value="none">
-						<?php esc_html_e( 'None' ); ?>
+						<?php echo esc_html_x( 'None', 'Media item link option' ); ?>
 					</button>
 				</span>
 			</span>
@@ -1073,7 +1131,7 @@
 				<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>
 
@@ -1102,7 +1160,7 @@
 									<?php esc_html_e( 'Right' ); ?>
 								</button>
 								<button class="button active" value="none">
-									<?php esc_html_e( 'None' ); ?>
+									<?php echo esc_html_x( 'None', 'Alignment option' ); ?>
 								</button>
 							</span>
 						</span>
@@ -1178,7 +1236,7 @@
 								<?php esc_html_e( 'Custom URL' ); ?>
 							</option>
 							<option value="none">
-								<?php esc_html_e( 'None' ); ?>
+								<?php echo esc_html_x( 'None', 'Media item link option' ); ?>
 							</option>
 						</select>
 					</span>
@@ -1298,7 +1356,7 @@
 						<span class="button-group button-large" data-setting="preload">
 							<button class="button" value="auto"><?php _ex( 'Auto', 'auto preload' ); ?></button>
 							<button class="button" value="metadata"><?php _e( 'Metadata' ); ?></button>
-							<button class="button active" value="none"><?php _e( 'None' ); ?></button>
+							<button class="button active" value="none"><?php _ex( 'None', 'Preload value' ); ?></button>
 						</span>
 					</span>
 				</fieldset>
@@ -1397,7 +1455,7 @@
 						<span class="button-group button-large" data-setting="preload">
 							<button class="button" value="auto"><?php _ex( 'Auto', 'auto preload' ); ?></button>
 							<button class="button" value="metadata"><?php _e( 'Metadata' ); ?></button>
-							<button class="button active" value="none"><?php _e( 'None' ); ?></button>
+							<button class="button active" value="none"><?php _ex( 'None', 'Preload value' ); ?></button>
 						</span>
 					</span>
 				</fieldset>
@@ -1434,7 +1492,7 @@
 							);
 						?>
 						</span>
-						<button type="button" class="button-link remove-setting remove-track"><?php _ex( 'Remove video track', 'media' ); ?></button><br/>
+						<button type="button" class="button-link remove-setting remove-track"><?php _ex( 'Remove video track', 'media' ); ?></button><br />
 						<# } ); #>
 					<# } else { #>
 					<span class="name"><?php _e( 'Tracks (subtitles, captions, descriptions, chapters, or metadata)' ); ?></span><br />
@@ -1466,7 +1524,7 @@
 						<# } #>
 					</dl>
 					<# if ( index % data.columns === data.columns - 1 ) { #>
-						<br style="clear: both;">
+						<br style="clear: both;" />
 					<# } #>
 				<# } ); #>
 			</div>
@@ -1493,7 +1551,7 @@
 			<div class="favicon">
 				<img id="preview-favicon" src="{{ data.url }}" alt="<?php esc_attr_e( 'Preview as a browser icon' ); ?>" />
 			</div>
-			<span class="browser-title" aria-hidden="true"><# print( '<?php bloginfo( 'name' ); ?>' ) #></span>
+			<span class="browser-title" aria-hidden="true"><# print( '<?php echo esc_js( get_bloginfo( 'name' ) ); ?>' ) #></span>
 		</div>
 
 		<strong aria-hidden="true"><?php _e( 'As an app icon' ); ?></strong>