wp/wp-includes/media-template.php
changeset 21 48c4eec2b7e6
parent 19 3d72ae0968f4
child 22 8c2e4d02f4ef
equal deleted inserted replaced
20:7b1b88e27a20 21:48c4eec2b7e6
     6  * @subpackage Media
     6  * @subpackage Media
     7  * @since 3.5.0
     7  * @since 3.5.0
     8  */
     8  */
     9 
     9 
    10 /**
    10 /**
    11  * Output the markup for a audio tag to be used in an Underscore template
    11  * Outputs the markup for an audio tag to be used in an Underscore template
    12  * when data.model is passed.
    12  * when data.model is passed.
    13  *
    13  *
    14  * @since 3.9.0
    14  * @since 3.9.0
    15  */
    15  */
    16 function wp_underscore_audio_template() {
    16 function wp_underscore_audio_template() {
    46 </audio>
    46 </audio>
    47 	<?php
    47 	<?php
    48 }
    48 }
    49 
    49 
    50 /**
    50 /**
    51  * Output the markup for a video tag to be used in an Underscore template
    51  * Outputs the markup for a video tag to be used in an Underscore template
    52  * when data.model is passed.
    52  * when data.model is passed.
    53  *
    53  *
    54  * @since 3.9.0
    54  * @since 3.9.0
    55  */
    55  */
    56 function wp_underscore_video_template() {
    56 function wp_underscore_video_template() {
   157 	$class = 'media-modal wp-core-ui';
   157 	$class = 'media-modal wp-core-ui';
   158 
   158 
   159 	$alt_text_description = sprintf(
   159 	$alt_text_description = sprintf(
   160 		/* translators: 1: Link to tutorial, 2: Additional link attributes, 3: Accessibility text. */
   160 		/* translators: 1: Link to tutorial, 2: Additional link attributes, 3: Accessibility text. */
   161 		__( '<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.' ),
   161 		__( '<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.' ),
   162 		esc_url( 'https://www.w3.org/WAI/tutorials/images/decision-tree' ),
   162 		/* translators: Localized tutorial, if one exists. W3C Web Accessibility Initiative link has list of existing translations. */
       
   163 		esc_url( __( 'https://www.w3.org/WAI/tutorials/images/decision-tree/' ) ),
   163 		'target="_blank" rel="noopener"',
   164 		'target="_blank" rel="noopener"',
   164 		sprintf(
   165 		sprintf(
   165 			'<span class="screen-reader-text"> %s</span>',
   166 			'<span class="screen-reader-text"> %s</span>',
   166 			/* translators: Accessibility text. */
   167 			/* translators: Hidden accessibility text. */
   167 			__( '(opens in a new tab)' )
   168 			__( '(opens in a new tab)' )
   168 		)
   169 		)
   169 	);
   170 	);
   170 	?>
   171 	?>
   171 
   172 
   182 			<div class="media-frame-router"></div>
   183 			<div class="media-frame-router"></div>
   183 			<div class="media-frame-content"></div>
   184 			<div class="media-frame-content"></div>
   184 		</div>
   185 		</div>
   185 		<h2 class="media-frame-actions-heading screen-reader-text">
   186 		<h2 class="media-frame-actions-heading screen-reader-text">
   186 		<?php
   187 		<?php
   187 			/* translators: Accessibility text. */
   188 			/* translators: Hidden accessibility text. */
   188 			_e( 'Selected media actions' );
   189 			_e( 'Selected media actions' );
   189 		?>
   190 		?>
   190 		</h2>
   191 		</h2>
   191 		<div class="media-frame-toolbar"></div>
   192 		<div class="media-frame-toolbar"></div>
   192 		<div class="media-frame-uploader"></div>
   193 		<div class="media-frame-uploader"></div>
   194 
   195 
   195 	<?php // Template for the media modal. ?>
   196 	<?php // Template for the media modal. ?>
   196 	<script type="text/html" id="tmpl-media-modal">
   197 	<script type="text/html" id="tmpl-media-modal">
   197 		<div tabindex="0" class="<?php echo $class; ?>" role="dialog" aria-labelledby="media-frame-title">
   198 		<div tabindex="0" class="<?php echo $class; ?>" role="dialog" aria-labelledby="media-frame-title">
   198 			<# if ( data.hasCloseButton ) { #>
   199 			<# if ( data.hasCloseButton ) { #>
   199 				<button type="button" class="media-modal-close"><span class="media-modal-icon"><span class="screen-reader-text"><?php _e( 'Close dialog' ); ?></span></span></button>
   200 				<button type="button" class="media-modal-close"><span class="media-modal-icon"><span class="screen-reader-text">
       
   201 					<?php
       
   202 					/* translators: Hidden accessibility text. */
       
   203 					_e( 'Close dialog' );
       
   204 					?>
       
   205 				</span></span></button>
   200 			<# } #>
   206 			<# } #>
   201 			<div class="media-modal-content" role="document"></div>
   207 			<div class="media-modal-content" role="document"></div>
   202 		</div>
   208 		</div>
   203 		<div class="media-modal-backdrop"></div>
   209 		<div class="media-modal-backdrop"></div>
   204 	</script>
   210 	</script>
   219 
   225 
   220 	<?php // Template for the inline uploader, used for example in the Media Library admin page - Add New. ?>
   226 	<?php // Template for the inline uploader, used for example in the Media Library admin page - Add New. ?>
   221 	<script type="text/html" id="tmpl-uploader-inline">
   227 	<script type="text/html" id="tmpl-uploader-inline">
   222 		<# var messageClass = data.message ? 'has-upload-message' : 'no-upload-message'; #>
   228 		<# var messageClass = data.message ? 'has-upload-message' : 'no-upload-message'; #>
   223 		<# if ( data.canClose ) { #>
   229 		<# if ( data.canClose ) { #>
   224 		<button class="close dashicons dashicons-no"><span class="screen-reader-text"><?php _e( 'Close uploader' ); ?></span></button>
   230 		<button class="close dashicons dashicons-no"><span class="screen-reader-text">
       
   231 			<?php
       
   232 			/* translators: Hidden accessibility text. */
       
   233 			_e( 'Close uploader' );
       
   234 			?>
       
   235 		</span></button>
   225 		<# } #>
   236 		<# } #>
   226 		<div class="uploader-inline-content {{ messageClass }}">
   237 		<div class="uploader-inline-content {{ messageClass }}">
   227 		<# if ( data.message ) { #>
   238 		<# if ( data.message ) { #>
   228 			<h2 class="upload-message">{{ data.message }}</h2>
   239 			<h2 class="upload-message">{{ data.message }}</h2>
   229 		<# } #>
   240 		<# } #>
   308 	</script>
   319 	</script>
   309 
   320 
   310 	<?php // Template for the view switchers, used for example in the Media Grid. ?>
   321 	<?php // Template for the view switchers, used for example in the Media Grid. ?>
   311 	<script type="text/html" id="tmpl-media-library-view-switcher">
   322 	<script type="text/html" id="tmpl-media-library-view-switcher">
   312 		<a href="<?php echo esc_url( add_query_arg( 'mode', 'list', admin_url( 'upload.php' ) ) ); ?>" class="view-list">
   323 		<a href="<?php echo esc_url( add_query_arg( 'mode', 'list', admin_url( 'upload.php' ) ) ); ?>" class="view-list">
   313 			<span class="screen-reader-text"><?php _e( 'List view' ); ?></span>
   324 			<span class="screen-reader-text">
       
   325 				<?php
       
   326 				/* translators: Hidden accessibility text. */
       
   327 				_e( 'List view' );
       
   328 				?>
       
   329 			</span>
   314 		</a>
   330 		</a>
   315 		<a href="<?php echo esc_url( add_query_arg( 'mode', 'grid', admin_url( 'upload.php' ) ) ); ?>" class="view-grid current" aria-current="page">
   331 		<a href="<?php echo esc_url( add_query_arg( 'mode', 'grid', admin_url( 'upload.php' ) ) ); ?>" class="view-grid current" aria-current="page">
   316 			<span class="screen-reader-text"><?php _e( 'Grid view' ); ?></span>
   332 			<span class="screen-reader-text">
       
   333 				<?php
       
   334 				/* translators: Hidden accessibility text. */
       
   335 				_e( 'Grid view' );
       
   336 				?>
       
   337 			</span>
   317 		</a>
   338 		</a>
   318 	</script>
   339 	</script>
   319 
   340 
   320 	<?php // Template for the uploading status UI. ?>
   341 	<?php // Template for the uploading status UI. ?>
   321 	<script type="text/html" id="tmpl-uploader-status">
   342 	<script type="text/html" id="tmpl-uploader-status">
   340 	</script>
   361 	</script>
   341 
   362 
   342 	<?php // Template for the Attachment Details layout in the media browser. ?>
   363 	<?php // Template for the Attachment Details layout in the media browser. ?>
   343 	<script type="text/html" id="tmpl-edit-attachment-frame">
   364 	<script type="text/html" id="tmpl-edit-attachment-frame">
   344 		<div class="edit-media-header">
   365 		<div class="edit-media-header">
   345 			<button class="left dashicons"<# if ( ! data.hasPrevious ) { #> disabled<# } #>><span class="screen-reader-text"><?php _e( 'Edit previous media item' ); ?></span></button>
   366 			<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>
   346 			<button class="right dashicons"<# if ( ! data.hasNext ) { #> disabled<# } #>><span class="screen-reader-text"><?php _e( 'Edit next media item' ); ?></span></button>
   367 			<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>
   347 			<button type="button" class="media-modal-close"><span class="media-modal-icon"><span class="screen-reader-text"><?php _e( 'Close dialog' ); ?></span></span></button>
   368 			<button type="button" class="media-modal-close"><span class="media-modal-icon"><span class="screen-reader-text"><?php _e( 'Close dialog' ); ?></span></span></button>
   348 		</div>
   369 		</div>
   349 		<div class="media-frame-title"></div>
   370 		<div class="media-frame-title"></div>
   350 		<div class="media-frame-content"></div>
   371 		<div class="media-frame-content"></div>
   351 	</script>
   372 	</script>
   352 
   373 
   353 	<?php // Template for the Attachment Details two columns layout. ?>
   374 	<?php // Template for the Attachment Details two columns layout. ?>
   354 	<script type="text/html" id="tmpl-attachment-details-two-column">
   375 	<script type="text/html" id="tmpl-attachment-details-two-column">
   355 		<div class="attachment-media-view {{ data.orientation }}">
   376 		<div class="attachment-media-view {{ data.orientation }}">
   356 			<h2 class="screen-reader-text"><?php _e( 'Attachment Preview' ); ?></h2>
   377 			<?php
       
   378 			if ( isset( $_GET['error'] ) && 'deprecated' === $_GET['error'] ) {
       
   379 				wp_admin_notice(
       
   380 					__( 'The Edit Media screen is deprecated as of WordPress 6.3. Please use the Media Library instead.' ),
       
   381 					array(
       
   382 						'id'                 => 'message',
       
   383 						'additional_classes' => array( 'error' ),
       
   384 					)
       
   385 				);
       
   386 			}
       
   387 			?>
       
   388 			<h2 class="screen-reader-text"><?php /* translators: Hidden accessibility text. */ _e( 'Attachment Preview' ); ?></h2>
   357 			<div class="thumbnail thumbnail-{{ data.type }}">
   389 			<div class="thumbnail thumbnail-{{ data.type }}">
   358 				<# if ( data.uploading ) { #>
   390 				<# if ( data.uploading ) { #>
   359 					<div class="media-progress-bar"><div></div></div>
   391 					<div class="media-progress-bar"><div></div></div>
       
   392 				<# } else if ( data.sizes && data.sizes.full ) { #>
       
   393 					<img class="details-image" src="{{ data.sizes.full.url }}" draggable="false" alt="" />
   360 				<# } else if ( data.sizes && data.sizes.large ) { #>
   394 				<# } else if ( data.sizes && data.sizes.large ) { #>
   361 					<img class="details-image" src="{{ data.sizes.large.url }}" draggable="false" alt="" />
   395 					<img class="details-image" src="{{ data.sizes.large.url }}" draggable="false" alt="" />
   362 				<# } else if ( data.sizes && data.sizes.full ) { #>
       
   363 					<img class="details-image" src="{{ data.sizes.full.url }}" draggable="false" alt="" />
       
   364 				<# } else if ( -1 === jQuery.inArray( data.type, [ 'audio', 'video' ] ) ) { #>
   396 				<# } else if ( -1 === jQuery.inArray( data.type, [ 'audio', 'video' ] ) ) { #>
   365 					<img class="details-image icon" src="{{ data.icon }}" draggable="false" alt="" />
   397 					<img class="details-image icon" src="{{ data.icon }}" draggable="false" alt="" />
   366 				<# } #>
   398 				<# } #>
   367 
   399 
   368 				<# if ( 'audio' === data.type ) { #>
   400 				<# if ( 'audio' === data.type ) { #>
   402 			<span class="settings-save-status" role="status">
   434 			<span class="settings-save-status" role="status">
   403 				<span class="spinner"></span>
   435 				<span class="spinner"></span>
   404 				<span class="saved"><?php esc_html_e( 'Saved.' ); ?></span>
   436 				<span class="saved"><?php esc_html_e( 'Saved.' ); ?></span>
   405 			</span>
   437 			</span>
   406 			<div class="details">
   438 			<div class="details">
   407 				<h2 class="screen-reader-text"><?php _e( 'Details' ); ?></h2>
   439 				<h2 class="screen-reader-text">
       
   440 					<?php
       
   441 					/* translators: Hidden accessibility text. */
       
   442 					_e( 'Details' );
       
   443 					?>
       
   444 				</h2>
   408 				<div class="uploaded"><strong><?php _e( 'Uploaded on:' ); ?></strong> {{ data.dateFormatted }}</div>
   445 				<div class="uploaded"><strong><?php _e( 'Uploaded on:' ); ?></strong> {{ data.dateFormatted }}</div>
   409 				<div class="uploaded-by">
   446 				<div class="uploaded-by">
   410 					<strong><?php _e( 'Uploaded by:' ); ?></strong>
   447 					<strong><?php _e( 'Uploaded by:' ); ?></strong>
   411 						<# if ( data.authorLink ) { #>
   448 						<# if ( data.authorLink ) { #>
   412 							<a href="{{ data.authorLink }}">{{ data.authorName }}</a>
   449 							<a href="{{ data.authorLink }}">{{ data.authorName }}</a>
   436 							?>
   473 							?>
   437 						</div>
   474 						</div>
   438 					<# } #>
   475 					<# } #>
   439 
   476 
   440 					<# if ( data.originalImageURL && data.originalImageName ) { #>
   477 					<# if ( data.originalImageURL && data.originalImageName ) { #>
   441 						<?php _e( 'Original image:' ); ?>
   478 						<div class="word-wrap-break-word">
   442 						<a href="{{ data.originalImageURL }}">{{data.originalImageName}}</a>
   479 							<strong><?php _e( 'Original image:' ); ?></strong>
       
   480 							<a href="{{ data.originalImageURL }}">{{data.originalImageName}}</a>
       
   481 						</div>
   443 					<# } #>
   482 					<# } #>
   444 				<# } #>
   483 				<# } #>
   445 
   484 
   446 				<# if ( data.fileLength && data.fileLengthHumanReadable ) { #>
   485 				<# if ( data.fileLength && data.fileLengthHumanReadable ) { #>
   447 					<div class="file-length"><strong><?php _e( 'Length:' ); ?></strong>
   486 					<div class="file-length"><strong><?php _e( 'Length:' ); ?></strong>
   448 						<span aria-hidden="true">{{ data.fileLength }}</span>
   487 						<span aria-hidden="true">{{ data.fileLengthHumanReadable }}</span>
   449 						<span class="screen-reader-text">{{ data.fileLengthHumanReadable }}</span>
   488 						<span class="screen-reader-text">{{ data.fileLengthHumanReadable }}</span>
   450 					</div>
   489 					</div>
   451 				<# } #>
   490 				<# } #>
   452 
   491 
   453 				<# if ( 'audio' === data.type && data.meta.bitrate ) { #>
   492 				<# if ( 'audio' === data.type && data.meta.bitrate ) { #>
   471 			</div>
   510 			</div>
   472 
   511 
   473 			<div class="settings">
   512 			<div class="settings">
   474 				<# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
   513 				<# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
   475 				<# if ( 'image' === data.type ) { #>
   514 				<# if ( 'image' === data.type ) { #>
   476 					<span class="setting has-description" data-setting="alt">
   515 					<span class="setting alt-text has-description" data-setting="alt">
   477 						<label for="attachment-details-two-column-alt-text" class="name"><?php _e( 'Alternative Text' ); ?></label>
   516 						<label for="attachment-details-two-column-alt-text" class="name"><?php _e( 'Alternative Text' ); ?></label>
   478 						<input type="text" id="attachment-details-two-column-alt-text" value="{{ data.alt }}" aria-describedby="alt-text-description" {{ maybeReadOnly }} />
   517 						<textarea id="attachment-details-two-column-alt-text" aria-describedby="alt-text-description" {{ maybeReadOnly }}>{{ data.alt }}</textarea>
   479 					</span>
   518 					</span>
   480 					<p class="description" id="alt-text-description"><?php echo $alt_text_description; ?></p>
   519 					<p class="description" id="alt-text-description"><?php echo $alt_text_description; ?></p>
   481 				<# } #>
   520 				<# } #>
   482 				<?php if ( post_type_supports( 'attachment', 'title' ) ) : ?>
   521 				<?php if ( post_type_supports( 'attachment', 'title' ) ) : ?>
   483 				<span class="setting" data-setting="title">
   522 				<span class="setting" data-setting="title">
   517 				<div class="attachment-compat"></div>
   556 				<div class="attachment-compat"></div>
   518 			</div>
   557 			</div>
   519 
   558 
   520 			<div class="actions">
   559 			<div class="actions">
   521 				<# if ( data.link ) { #>
   560 				<# if ( data.link ) { #>
   522 					<a class="view-attachment" href="{{ data.link }}"><?php _e( 'View attachment page' ); ?></a>
   561 					<?php
       
   562 					$view_media_text = ( '1' === get_option( 'wp_attachment_pages_enabled' ) ) ? __( 'View attachment page' ) : __( 'View media file' );
       
   563 					?>
       
   564 					<a class="view-attachment" href="{{ data.link }}"><?php echo $view_media_text; ?></a>
   523 				<# } #>
   565 				<# } #>
   524 				<# if ( data.can.save ) { #>
   566 				<# if ( data.can.save ) { #>
   525 					<# if ( data.link ) { #>
   567 					<# if ( data.link ) { #>
   526 						<span class="links-separator">|</span>
   568 						<span class="links-separator">|</span>
   527 					<# } #>
   569 					<# } #>
   528 					<a href="{{ data.editLink }}"><?php _e( 'Edit more details' ); ?></a>
   570 					<a href="{{ data.editLink }}"><?php _e( 'Edit more details' ); ?></a>
       
   571 				<# } #>
       
   572 				<# if ( data.can.save && data.link ) { #>
       
   573 					<span class="links-separator">|</span>
       
   574 					<a href="{{ data.url }}" download><?php _e( 'Download file' ); ?></a>
   529 				<# } #>
   575 				<# } #>
   530 				<# if ( ! data.uploading && data.can.remove ) { #>
   576 				<# if ( ! data.uploading && data.can.remove ) { #>
   531 					<# if ( data.link || data.can.save ) { #>
   577 					<# if ( data.link || data.can.save ) { #>
   532 						<span class="links-separator">|</span>
   578 						<span class="links-separator">|</span>
   533 					<# } #>
   579 					<# } #>
   569 						<div>{{ data.filename }}</div>
   615 						<div>{{ data.filename }}</div>
   570 					</div>
   616 					</div>
   571 				<# } #>
   617 				<# } #>
   572 			</div>
   618 			</div>
   573 			<# if ( data.buttons.close ) { #>
   619 			<# if ( data.buttons.close ) { #>
   574 				<button type="button" class="button-link attachment-close media-modal-icon"><span class="screen-reader-text"><?php _e( 'Remove' ); ?></span></button>
   620 				<button type="button" class="button-link attachment-close media-modal-icon"><span class="screen-reader-text">
       
   621 					<?php
       
   622 					/* translators: Hidden accessibility text. */
       
   623 					_e( 'Remove' );
       
   624 					?>
       
   625 				</span></button>
   575 			<# } #>
   626 			<# } #>
   576 		</div>
   627 		</div>
   577 		<# if ( data.buttons.check ) { #>
   628 		<# if ( data.buttons.check ) { #>
   578 			<button type="button" class="check" tabindex="-1"><span class="media-modal-icon"></span><span class="screen-reader-text"><?php _e( 'Deselect' ); ?></span></button>
   629 			<button type="button" class="check" tabindex="-1"><span class="media-modal-icon"></span><span class="screen-reader-text">
       
   630 				<?php
       
   631 				/* translators: Hidden accessibility text. */
       
   632 				_e( 'Deselect' );
       
   633 				?>
       
   634 			</span></button>
   579 		<# } #>
   635 		<# } #>
   580 		<#
   636 		<#
   581 		var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly';
   637 		var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly';
   582 		if ( data.describe ) {
   638 		if ( data.describe ) {
   583 			if ( 'image' === data.type ) { #>
   639 			if ( 'image' === data.type ) { #>
   659 							?>
   715 							?>
   660 						</div>
   716 						</div>
   661 					<# } #>
   717 					<# } #>
   662 
   718 
   663 					<# if ( data.originalImageURL && data.originalImageName ) { #>
   719 					<# if ( data.originalImageURL && data.originalImageName ) { #>
   664 						<?php _e( 'Original image:' ); ?>
   720 						<div class="word-wrap-break-word">
   665 						<a href="{{ data.originalImageURL }}">{{data.originalImageName}}</a>
   721 							<?php _e( 'Original image:' ); ?>
       
   722 							<a href="{{ data.originalImageURL }}">{{data.originalImageName}}</a>
       
   723 						</div>
   666 					<# } #>
   724 					<# } #>
   667 
   725 
   668 					<# if ( data.can.save && data.sizes ) { #>
   726 					<# if ( data.can.save && data.sizes ) { #>
   669 						<a class="edit-attachment" href="{{ data.editLink }}&amp;image-editor" target="_blank"><?php _e( 'Edit Image' ); ?></a>
   727 						<a class="edit-attachment" href="{{ data.editLink }}&amp;image-editor" target="_blank"><?php _e( 'Edit Image' ); ?></a>
   670 					<# } #>
   728 					<# } #>
   671 				<# } #>
   729 				<# } #>
   672 
   730 
   673 				<# if ( data.fileLength && data.fileLengthHumanReadable ) { #>
   731 				<# if ( data.fileLength && data.fileLengthHumanReadable ) { #>
   674 					<div class="file-length"><?php _e( 'Length:' ); ?>
   732 					<div class="file-length"><?php _e( 'Length:' ); ?>
   675 						<span aria-hidden="true">{{ data.fileLength }}</span>
   733 						<span aria-hidden="true">{{ data.fileLengthHumanReadable }}</span>
   676 						<span class="screen-reader-text">{{ data.fileLengthHumanReadable }}</span>
   734 						<span class="screen-reader-text">{{ data.fileLengthHumanReadable }}</span>
   677 					</div>
   735 					</div>
   678 				<# } #>
   736 				<# } #>
   679 
   737 
   680 				<# if ( data.mediaStates ) { #>
   738 				<# if ( data.mediaStates ) { #>
   700 				</div>
   758 				</div>
   701 			</div>
   759 			</div>
   702 		</div>
   760 		</div>
   703 		<# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
   761 		<# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
   704 		<# if ( 'image' === data.type ) { #>
   762 		<# if ( 'image' === data.type ) { #>
   705 			<span class="setting has-description" data-setting="alt">
   763 			<span class="setting alt-text has-description" data-setting="alt">
   706 				<label for="attachment-details-alt-text" class="name"><?php _e( 'Alt Text' ); ?></label>
   764 				<label for="attachment-details-alt-text" class="name"><?php _e( 'Alt Text' ); ?></label>
   707 				<input type="text" id="attachment-details-alt-text" value="{{ data.alt }}" aria-describedby="alt-text-description" {{ maybeReadOnly }} />
   765 				<textarea id="attachment-details-alt-text" aria-describedby="alt-text-description" {{ maybeReadOnly }}>{{ data.alt }}</textarea>
   708 			</span>
   766 			</span>
   709 			<p class="description" id="alt-text-description"><?php echo $alt_text_description; ?></p>
   767 			<p class="description" id="alt-text-description"><?php echo $alt_text_description; ?></p>
   710 		<# } #>
   768 		<# } #>
   711 		<?php if ( post_type_supports( 'attachment', 'title' ) ) : ?>
   769 		<?php if ( post_type_supports( 'attachment', 'title' ) ) : ?>
   712 		<span class="setting" data-setting="title">
   770 		<span class="setting" data-setting="title">
   780 					</option>
   838 					</option>
   781 					<option value="right">
   839 					<option value="right">
   782 						<?php esc_html_e( 'Right' ); ?>
   840 						<?php esc_html_e( 'Right' ); ?>
   783 					</option>
   841 					</option>
   784 					<option value="none" selected>
   842 					<option value="none" selected>
   785 						<?php esc_html_e( 'None' ); ?>
   843 						<?php echo esc_html_x( 'None', 'Alignment option' ); ?>
   786 					</option>
   844 					</option>
   787 				</select>
   845 				</select>
   788 			</span>
   846 			</span>
   789 		<# } #>
   847 		<# } #>
   790 
   848 
   807 					<?php esc_html_e( 'Embed Media Player' ); ?>
   865 					<?php esc_html_e( 'Embed Media Player' ); ?>
   808 				</option>
   866 				</option>
   809 				<option value="file">
   867 				<option value="file">
   810 			<# } else { #>
   868 			<# } else { #>
   811 				<option value="none" selected>
   869 				<option value="none" selected>
   812 					<?php esc_html_e( 'None' ); ?>
   870 					<?php echo esc_html_x( 'None', 'Media item link option' ); ?>
   813 				</option>
   871 				</option>
   814 				<option value="file">
   872 				<option value="file">
   815 			<# } #>
   873 			<# } #>
   816 				<# if ( data.model.canEmbed ) { #>
   874 				<# if ( data.model.canEmbed ) { #>
   817 					<?php esc_html_e( 'Link to Media File' ); ?>
   875 					<?php esc_html_e( 'Link to Media File' ); ?>
   892 				</option>
   950 				</option>
   893 				<option value="file" <# if ( 'file' === wp.media.galleryDefaults.link ) { #>selected="selected"<# } #>>
   951 				<option value="file" <# if ( 'file' === wp.media.galleryDefaults.link ) { #>selected="selected"<# } #>>
   894 					<?php esc_html_e( 'Media File' ); ?>
   952 					<?php esc_html_e( 'Media File' ); ?>
   895 				</option>
   953 				</option>
   896 				<option value="none" <# if ( 'none' === wp.media.galleryDefaults.link ) { #>selected="selected"<# } #>>
   954 				<option value="none" <# if ( 'none' === wp.media.galleryDefaults.link ) { #>selected="selected"<# } #>>
   897 					<?php esc_html_e( 'None' ); ?>
   955 					<?php echo esc_html_x( 'None', 'Media item link option' ); ?>
   898 				</option>
   956 				</option>
   899 			</select>
   957 			</select>
   900 		</span>
   958 		</span>
   901 
   959 
   902 		<span class="setting">
   960 		<span class="setting">
  1008 			</div>
  1066 			</div>
  1009 		</div>
  1067 		</div>
  1010 
  1068 
  1011 		<span class="setting alt-text has-description">
  1069 		<span class="setting alt-text has-description">
  1012 			<label for="embed-image-settings-alt-text" class="name"><?php _e( 'Alternative Text' ); ?></label>
  1070 			<label for="embed-image-settings-alt-text" class="name"><?php _e( 'Alternative Text' ); ?></label>
  1013 			<input type="text" id="embed-image-settings-alt-text" data-setting="alt" aria-describedby="alt-text-description" />
  1071 			<textarea id="embed-image-settings-alt-text" data-setting="alt" aria-describedby="alt-text-description"></textarea>
  1014 		</span>
  1072 		</span>
  1015 		<p class="description" id="alt-text-description"><?php echo $alt_text_description; ?></p>
  1073 		<p class="description" id="alt-text-description"><?php echo $alt_text_description; ?></p>
  1016 
  1074 
  1017 		<?php
  1075 		<?php
  1018 		/** This filter is documented in wp-admin/includes/media.php */
  1076 		/** This filter is documented in wp-admin/includes/media.php */
  1036 					</button>
  1094 					</button>
  1037 					<button class="button" value="right">
  1095 					<button class="button" value="right">
  1038 						<?php esc_html_e( 'Right' ); ?>
  1096 						<?php esc_html_e( 'Right' ); ?>
  1039 					</button>
  1097 					</button>
  1040 					<button class="button active" value="none">
  1098 					<button class="button active" value="none">
  1041 						<?php esc_html_e( 'None' ); ?>
  1099 						<?php echo esc_html_x( 'None', 'Alignment option' ); ?>
  1042 					</button>
  1100 					</button>
  1043 				</span>
  1101 				</span>
  1044 			</span>
  1102 			</span>
  1045 		</fieldset>
  1103 		</fieldset>
  1046 
  1104 
  1053 					</button>
  1111 					</button>
  1054 					<button class="button" value="custom">
  1112 					<button class="button" value="custom">
  1055 						<?php esc_html_e( 'Custom URL' ); ?>
  1113 						<?php esc_html_e( 'Custom URL' ); ?>
  1056 					</button>
  1114 					</button>
  1057 					<button class="button active" value="none">
  1115 					<button class="button active" value="none">
  1058 						<?php esc_html_e( 'None' ); ?>
  1116 						<?php echo esc_html_x( 'None', 'Media item link option' ); ?>
  1059 					</button>
  1117 					</button>
  1060 				</span>
  1118 				</span>
  1061 			</span>
  1119 			</span>
  1062 			<span class="setting">
  1120 			<span class="setting">
  1063 				<label for="embed-image-settings-link-to-custom" class="name"><?php _e( 'URL' ); ?></label>
  1121 				<label for="embed-image-settings-link-to-custom" class="name"><?php _e( 'URL' ); ?></label>
  1071 		<div class="media-embed">
  1129 		<div class="media-embed">
  1072 			<div class="embed-media-settings">
  1130 			<div class="embed-media-settings">
  1073 				<div class="column-settings">
  1131 				<div class="column-settings">
  1074 					<span class="setting alt-text has-description">
  1132 					<span class="setting alt-text has-description">
  1075 						<label for="image-details-alt-text" class="name"><?php _e( 'Alternative Text' ); ?></label>
  1133 						<label for="image-details-alt-text" class="name"><?php _e( 'Alternative Text' ); ?></label>
  1076 						<input type="text" id="image-details-alt-text" data-setting="alt" value="{{ data.model.alt }}" aria-describedby="alt-text-description" />
  1134 						<textarea id="image-details-alt-text" data-setting="alt" aria-describedby="alt-text-description">{{ data.model.alt }}</textarea>
  1077 					</span>
  1135 					</span>
  1078 					<p class="description" id="alt-text-description"><?php echo $alt_text_description; ?></p>
  1136 					<p class="description" id="alt-text-description"><?php echo $alt_text_description; ?></p>
  1079 
  1137 
  1080 					<?php
  1138 					<?php
  1081 					/** This filter is documented in wp-admin/includes/media.php */
  1139 					/** This filter is documented in wp-admin/includes/media.php */
  1100 								</button>
  1158 								</button>
  1101 								<button class="button" value="right">
  1159 								<button class="button" value="right">
  1102 									<?php esc_html_e( 'Right' ); ?>
  1160 									<?php esc_html_e( 'Right' ); ?>
  1103 								</button>
  1161 								</button>
  1104 								<button class="button active" value="none">
  1162 								<button class="button active" value="none">
  1105 									<?php esc_html_e( 'None' ); ?>
  1163 									<?php echo esc_html_x( 'None', 'Alignment option' ); ?>
  1106 								</button>
  1164 								</button>
  1107 							</span>
  1165 							</span>
  1108 						</span>
  1166 						</span>
  1109 					</fieldset>
  1167 					</fieldset>
  1110 
  1168 
  1176 						<# } #>
  1234 						<# } #>
  1177 							<option value="custom">
  1235 							<option value="custom">
  1178 								<?php esc_html_e( 'Custom URL' ); ?>
  1236 								<?php esc_html_e( 'Custom URL' ); ?>
  1179 							</option>
  1237 							</option>
  1180 							<option value="none">
  1238 							<option value="none">
  1181 								<?php esc_html_e( 'None' ); ?>
  1239 								<?php echo esc_html_x( 'None', 'Media item link option' ); ?>
  1182 							</option>
  1240 							</option>
  1183 						</select>
  1241 						</select>
  1184 					</span>
  1242 					</span>
  1185 					<span class="setting">
  1243 					<span class="setting">
  1186 						<label for="image-details-link-to-custom" class="name"><?php _e( 'URL' ); ?></label>
  1244 						<label for="image-details-link-to-custom" class="name"><?php _e( 'URL' ); ?></label>
  1296 					<legend class="name"><?php _e( 'Preload' ); ?></legend>
  1354 					<legend class="name"><?php _e( 'Preload' ); ?></legend>
  1297 					<span class="setting preload">
  1355 					<span class="setting preload">
  1298 						<span class="button-group button-large" data-setting="preload">
  1356 						<span class="button-group button-large" data-setting="preload">
  1299 							<button class="button" value="auto"><?php _ex( 'Auto', 'auto preload' ); ?></button>
  1357 							<button class="button" value="auto"><?php _ex( 'Auto', 'auto preload' ); ?></button>
  1300 							<button class="button" value="metadata"><?php _e( 'Metadata' ); ?></button>
  1358 							<button class="button" value="metadata"><?php _e( 'Metadata' ); ?></button>
  1301 							<button class="button active" value="none"><?php _e( 'None' ); ?></button>
  1359 							<button class="button active" value="none"><?php _ex( 'None', 'Preload value' ); ?></button>
  1302 						</span>
  1360 						</span>
  1303 					</span>
  1361 					</span>
  1304 				</fieldset>
  1362 				</fieldset>
  1305 
  1363 
  1306 				<span class="setting-group">
  1364 				<span class="setting-group">
  1395 					<legend class="name"><?php _e( 'Preload' ); ?></legend>
  1453 					<legend class="name"><?php _e( 'Preload' ); ?></legend>
  1396 					<span class="setting preload">
  1454 					<span class="setting preload">
  1397 						<span class="button-group button-large" data-setting="preload">
  1455 						<span class="button-group button-large" data-setting="preload">
  1398 							<button class="button" value="auto"><?php _ex( 'Auto', 'auto preload' ); ?></button>
  1456 							<button class="button" value="auto"><?php _ex( 'Auto', 'auto preload' ); ?></button>
  1399 							<button class="button" value="metadata"><?php _e( 'Metadata' ); ?></button>
  1457 							<button class="button" value="metadata"><?php _e( 'Metadata' ); ?></button>
  1400 							<button class="button active" value="none"><?php _e( 'None' ); ?></button>
  1458 							<button class="button active" value="none"><?php _ex( 'None', 'Preload value' ); ?></button>
  1401 						</span>
  1459 						</span>
  1402 					</span>
  1460 					</span>
  1403 				</fieldset>
  1461 				</fieldset>
  1404 
  1462 
  1405 				<span class="setting-group">
  1463 				<span class="setting-group">
  1432 								'label',
  1490 								'label',
  1433 								'kind'
  1491 								'kind'
  1434 							);
  1492 							);
  1435 						?>
  1493 						?>
  1436 						</span>
  1494 						</span>
  1437 						<button type="button" class="button-link remove-setting remove-track"><?php _ex( 'Remove video track', 'media' ); ?></button><br/>
  1495 						<button type="button" class="button-link remove-setting remove-track"><?php _ex( 'Remove video track', 'media' ); ?></button><br />
  1438 						<# } ); #>
  1496 						<# } ); #>
  1439 					<# } else { #>
  1497 					<# } else { #>
  1440 					<span class="name"><?php _e( 'Tracks (subtitles, captions, descriptions, chapters, or metadata)' ); ?></span><br />
  1498 					<span class="name"><?php _e( 'Tracks (subtitles, captions, descriptions, chapters, or metadata)' ); ?></span><br />
  1441 					<em><?php _e( 'There are no associated subtitles.' ); ?></em>
  1499 					<em><?php _e( 'There are no associated subtitles.' ); ?></em>
  1442 					<# } #>
  1500 					<# } #>
  1464 								{{{ data.verifyHTML( attachment.caption ) }}}
  1522 								{{{ data.verifyHTML( attachment.caption ) }}}
  1465 							</dd>
  1523 							</dd>
  1466 						<# } #>
  1524 						<# } #>
  1467 					</dl>
  1525 					</dl>
  1468 					<# if ( index % data.columns === data.columns - 1 ) { #>
  1526 					<# if ( index % data.columns === data.columns - 1 ) { #>
  1469 						<br style="clear: both;">
  1527 						<br style="clear: both;" />
  1470 					<# } #>
  1528 					<# } #>
  1471 				<# } ); #>
  1529 				<# } ); #>
  1472 			</div>
  1530 			</div>
  1473 		<# } else { #>
  1531 		<# } else { #>
  1474 			<div class="wpview-error">
  1532 			<div class="wpview-error">
  1491 			<img src="<?php echo esc_url( admin_url( 'images/' . ( is_rtl() ? 'browser-rtl.png' : 'browser.png' ) ) ); ?>" class="browser-preview" width="182" height="" alt="" />
  1549 			<img src="<?php echo esc_url( admin_url( 'images/' . ( is_rtl() ? 'browser-rtl.png' : 'browser.png' ) ) ); ?>" class="browser-preview" width="182" height="" alt="" />
  1492 
  1550 
  1493 			<div class="favicon">
  1551 			<div class="favicon">
  1494 				<img id="preview-favicon" src="{{ data.url }}" alt="<?php esc_attr_e( 'Preview as a browser icon' ); ?>" />
  1552 				<img id="preview-favicon" src="{{ data.url }}" alt="<?php esc_attr_e( 'Preview as a browser icon' ); ?>" />
  1495 			</div>
  1553 			</div>
  1496 			<span class="browser-title" aria-hidden="true"><# print( '<?php bloginfo( 'name' ); ?>' ) #></span>
  1554 			<span class="browser-title" aria-hidden="true"><# print( '<?php echo esc_js( get_bloginfo( 'name' ) ); ?>' ) #></span>
  1497 		</div>
  1555 		</div>
  1498 
  1556 
  1499 		<strong aria-hidden="true"><?php _e( 'As an app icon' ); ?></strong>
  1557 		<strong aria-hidden="true"><?php _e( 'As an app icon' ); ?></strong>
  1500 		<div class="app-icon-preview">
  1558 		<div class="app-icon-preview">
  1501 			<img id="preview-app-icon" src="{{ data.url }}" alt="<?php esc_attr_e( 'Preview as an app icon' ); ?>" />
  1559 			<img id="preview-app-icon" src="{{ data.url }}" alt="<?php esc_attr_e( 'Preview as an app icon' ); ?>" />