wp/wp-includes/media-template.php
changeset 9 177826044cd9
parent 7 cf61fcea0001
child 16 a86126ab1dd4
equal deleted inserted replaced
8:c7c34916027a 9:177826044cd9
    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() {
    17 	$audio_types = wp_get_audio_extensions();
    17 	$audio_types = wp_get_audio_extensions();
    18 ?>
    18 	?>
    19 <audio style="visibility: hidden"
    19 <audio style="visibility: hidden"
    20 	controls
    20 	controls
    21 	class="wp-audio-shortcode"
    21 	class="wp-audio-shortcode"
    22 	width="{{ _.isUndefined( data.model.width ) ? 400 : data.model.width }}"
    22 	width="{{ _.isUndefined( data.model.width ) ? 400 : data.model.width }}"
    23 	preload="{{ _.isUndefined( data.model.preload ) ? 'none' : data.model.preload }}"
    23 	preload="{{ _.isUndefined( data.model.preload ) ? 'none' : data.model.preload }}"
    24 	<#
    24 	<#
    25 	<?php foreach ( array( 'autoplay', 'loop' ) as $attr ):
    25 	<?php
    26 	?>if ( ! _.isUndefined( data.model.<?php echo $attr ?> ) && data.model.<?php echo $attr ?> ) {
    26 	foreach ( array( 'autoplay', 'loop' ) as $attr ) :
    27 		#> <?php echo $attr ?><#
    27 		?>
       
    28 	if ( ! _.isUndefined( data.model.<?php echo $attr; ?> ) && data.model.<?php echo $attr; ?> ) {
       
    29 		#> <?php echo $attr; ?><#
    28 	}
    30 	}
    29 	<?php endforeach ?>#>
    31 	<?php endforeach ?>#>
    30 >
    32 >
    31 	<# if ( ! _.isEmpty( data.model.src ) ) { #>
    33 	<# if ( ! _.isEmpty( data.model.src ) ) { #>
    32 	<source src="{{ data.model.src }}" type="{{ wp.media.view.settings.embedMimes[ data.model.src.split('.').pop() ] }}" />
    34 	<source src="{{ data.model.src }}" type="{{ wp.media.view.settings.embedMimes[ data.model.src.split('.').pop() ] }}" />
    33 	<# } #>
    35 	<# } #>
    34 
    36 
    35 	<?php foreach ( $audio_types as $type ):
    37 	<?php
    36 	?><# if ( ! _.isEmpty( data.model.<?php echo $type ?> ) ) { #>
    38 	foreach ( $audio_types as $type ) :
    37 	<source src="{{ data.model.<?php echo $type ?> }}" type="{{ wp.media.view.settings.embedMimes[ '<?php echo $type ?>' ] }}" />
    39 		?>
       
    40 	<# if ( ! _.isEmpty( data.model.<?php echo $type; ?> ) ) { #>
       
    41 	<source src="{{ data.model.<?php echo $type; ?> }}" type="{{ wp.media.view.settings.embedMimes[ '<?php echo $type; ?>' ] }}" />
    38 	<# } #>
    42 	<# } #>
    39 	<?php endforeach;
    43 		<?php
    40 ?></audio>
    44 	endforeach;
    41 <?php
    45 	?>
       
    46 </audio>
       
    47 	<?php
    42 }
    48 }
    43 
    49 
    44 /**
    50 /**
    45  * Output the markup for a video tag to be used in an Underscore template
    51  * Output the markup for a video tag to be used in an Underscore template
    46  * when data.model is passed.
    52  * when data.model is passed.
    47  *
    53  *
    48  * @since 3.9.0
    54  * @since 3.9.0
    49  */
    55  */
    50 function wp_underscore_video_template() {
    56 function wp_underscore_video_template() {
    51 	$video_types = wp_get_video_extensions();
    57 	$video_types = wp_get_video_extensions();
    52 ?>
    58 	?>
    53 <#  var w_rule = '', classes = [],
    59 <#  var w_rule = '', classes = [],
    54 		w, h, settings = wp.media.view.settings,
    60 		w, h, settings = wp.media.view.settings,
    55 		isYouTube = isVimeo = false;
    61 		isYouTube = isVimeo = false;
    56 
    62 
    57 	if ( ! _.isEmpty( data.model.src ) ) {
    63 	if ( ! _.isEmpty( data.model.src ) ) {
    67 
    73 
    68 	if ( w !== data.model.width ) {
    74 	if ( w !== data.model.width ) {
    69 		h = Math.ceil( ( data.model.height * w ) / data.model.width );
    75 		h = Math.ceil( ( data.model.height * w ) / data.model.width );
    70 	} else {
    76 	} else {
    71 		h = data.model.height;
    77 		h = data.model.height;
    72  	}
    78 	}
    73 
    79 
    74 	if ( w ) {
    80 	if ( w ) {
    75 		w_rule = 'width: ' + w + 'px; ';
    81 		w_rule = 'width: ' + w + 'px; ';
    76 	}
    82 	}
    77 
    83 
    88 <video controls
    94 <video controls
    89 	class="wp-video-shortcode {{ classes.join( ' ' ) }}"
    95 	class="wp-video-shortcode {{ classes.join( ' ' ) }}"
    90 	<# if ( w ) { #>width="{{ w }}"<# } #>
    96 	<# if ( w ) { #>width="{{ w }}"<# } #>
    91 	<# if ( h ) { #>height="{{ h }}"<# } #>
    97 	<# if ( h ) { #>height="{{ h }}"<# } #>
    92 	<?php
    98 	<?php
    93 	$props = array( 'poster' => '', 'preload' => 'metadata' );
    99 	$props = array(
    94 	foreach ( $props as $key => $value ):
   100 		'poster'  => '',
       
   101 		'preload' => 'metadata',
       
   102 	);
       
   103 	foreach ( $props as $key => $value ) :
    95 		if ( empty( $value ) ) {
   104 		if ( empty( $value ) ) {
    96 		?><#
   105 			?>
    97 		if ( ! _.isUndefined( data.model.<?php echo $key ?> ) && data.model.<?php echo $key ?> ) {
   106 		<#
    98 			#> <?php echo $key ?>="{{ data.model.<?php echo $key ?> }}"<#
   107 		if ( ! _.isUndefined( data.model.<?php echo $key; ?> ) && data.model.<?php echo $key; ?> ) {
       
   108 			#> <?php echo $key; ?>="{{ data.model.<?php echo $key; ?> }}"<#
    99 		} #>
   109 		} #>
   100 		<?php } else {
   110 			<?php
   101 			echo $key ?>="{{ _.isUndefined( data.model.<?php echo $key ?> ) ? '<?php echo $value ?>' : data.model.<?php echo $key ?> }}"<?php
   111 		} else {
       
   112 			echo $key
       
   113 			?>
       
   114 			="{{ _.isUndefined( data.model.<?php echo $key; ?> ) ? '<?php echo $value; ?>' : data.model.<?php echo $key; ?> }}"
       
   115 			<?php
   102 		}
   116 		}
   103 	endforeach;
   117 	endforeach;
   104 	?><#
   118 	?>
   105 	<?php foreach ( array( 'autoplay', 'loop' ) as $attr ):
   119 	<#
   106 	?> if ( ! _.isUndefined( data.model.<?php echo $attr ?> ) && data.model.<?php echo $attr ?> ) {
   120 	<?php
   107 		#> <?php echo $attr ?><#
   121 	foreach ( array( 'autoplay', 'loop' ) as $attr ) :
       
   122 		?>
       
   123 	if ( ! _.isUndefined( data.model.<?php echo $attr; ?> ) && data.model.<?php echo $attr; ?> ) {
       
   124 		#> <?php echo $attr; ?><#
   108 	}
   125 	}
   109 	<?php endforeach ?>#>
   126 	<?php endforeach ?>#>
   110 >
   127 >
   111 	<# if ( ! _.isEmpty( data.model.src ) ) {
   128 	<# if ( ! _.isEmpty( data.model.src ) ) {
   112 		if ( isYouTube ) { #>
   129 		if ( isYouTube ) { #>
   116 		<# } else { #>
   133 		<# } else { #>
   117 		<source src="{{ data.model.src }}" type="{{ settings.embedMimes[ data.model.src.split('.').pop() ] }}" />
   134 		<source src="{{ data.model.src }}" type="{{ settings.embedMimes[ data.model.src.split('.').pop() ] }}" />
   118 		<# }
   135 		<# }
   119 	} #>
   136 	} #>
   120 
   137 
   121 	<?php foreach ( $video_types as $type ):
   138 	<?php
   122 	?><# if ( data.model.<?php echo $type ?> ) { #>
   139 	foreach ( $video_types as $type ) :
   123 	<source src="{{ data.model.<?php echo $type ?> }}" type="{{ settings.embedMimes[ '<?php echo $type ?>' ] }}" />
   140 		?>
       
   141 	<# if ( data.model.<?php echo $type; ?> ) { #>
       
   142 	<source src="{{ data.model.<?php echo $type; ?> }}" type="{{ settings.embedMimes[ '<?php echo $type; ?>' ] }}" />
   124 	<# } #>
   143 	<# } #>
   125 	<?php endforeach; ?>
   144 	<?php endforeach; ?>
   126 	{{{ data.model.content }}}
   145 	{{{ data.model.content }}}
   127 </video>
   146 </video>
   128 </div>
   147 </div>
   129 <?php
   148 	<?php
   130 }
   149 }
   131 
   150 
   132 /**
   151 /**
   133  * Prints the templates used in the media manager.
   152  * Prints the templates used in the media manager.
   134  *
   153  *
   137  * @global bool $is_IE
   156  * @global bool $is_IE
   138  */
   157  */
   139 function wp_print_media_templates() {
   158 function wp_print_media_templates() {
   140 	global $is_IE;
   159 	global $is_IE;
   141 	$class = 'media-modal wp-core-ui';
   160 	$class = 'media-modal wp-core-ui';
   142 	if ( $is_IE && strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE 7') !== false )
   161 	if ( $is_IE && strpos( $_SERVER['HTTP_USER_AGENT'], 'MSIE 7' ) !== false ) {
   143 		$class .= ' ie7';
   162 		$class .= ' ie7';
       
   163 	}
       
   164 
       
   165 	$alt_text_description = sprintf(
       
   166 		/* translators: 1: link to tutorial, 2: additional link attributes, 3: accessibility text */
       
   167 		__( '<a href="%1$s" %2$s>Describe the purpose of the image%3$s</a>. Leave empty if the image is purely decorative.' ),
       
   168 		esc_url( 'https://www.w3.org/WAI/tutorials/images/decision-tree' ),
       
   169 		'target="_blank" rel="noopener noreferrer"',
       
   170 		sprintf(
       
   171 			'<span class="screen-reader-text"> %s</span>',
       
   172 			/* translators: accessibility text */
       
   173 			__( '(opens in a new tab)' )
       
   174 		)
       
   175 	);
   144 	?>
   176 	?>
   145 	<!--[if lte IE 8]>
   177 	<!--[if lte IE 8]>
   146 	<style>
   178 	<style>
   147 		.attachment:focus {
   179 		.attachment:focus {
   148 			outline: #1e8cbe solid;
   180 			outline: #1e8cbe solid;
   151 			outline: #1e8cbe solid;
   183 			outline: #1e8cbe solid;
   152 		}
   184 		}
   153 	</style>
   185 	</style>
   154 	<![endif]-->
   186 	<![endif]-->
   155 	<script type="text/html" id="tmpl-media-frame">
   187 	<script type="text/html" id="tmpl-media-frame">
       
   188 		<div class="media-frame-title" id="media-frame-title"></div>
   156 		<div class="media-frame-menu"></div>
   189 		<div class="media-frame-menu"></div>
   157 		<div class="media-frame-title"></div>
       
   158 		<div class="media-frame-router"></div>
   190 		<div class="media-frame-router"></div>
   159 		<div class="media-frame-content"></div>
   191 		<div class="media-frame-content"></div>
   160 		<div class="media-frame-toolbar"></div>
   192 		<div class="media-frame-toolbar"></div>
   161 		<div class="media-frame-uploader"></div>
   193 		<div class="media-frame-uploader"></div>
   162 	</script>
   194 	</script>
   163 
   195 
   164 	<script type="text/html" id="tmpl-media-modal">
   196 	<script type="text/html" id="tmpl-media-modal">
   165 		<div tabindex="0" class="<?php echo $class; ?>">
   197 		<div tabindex="0" class="<?php echo $class; ?>" role="dialog" aria-modal="true" aria-labelledby="media-frame-title">
   166 			<button type="button" class="media-modal-close"><span class="media-modal-icon"><span class="screen-reader-text"><?php _e( 'Close media panel' ); ?></span></span></button>
   198 			<# if ( data.hasCloseButton ) { #>
   167 			<div class="media-modal-content"></div>
   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 			<# } #>
       
   201 			<div class="media-modal-content" role="document"></div>
   168 		</div>
   202 		</div>
   169 		<div class="media-modal-backdrop"></div>
   203 		<div class="media-modal-backdrop"></div>
   170 	</script>
   204 	</script>
   171 
   205 
   172 	<script type="text/html" id="tmpl-uploader-window">
   206 	<script type="text/html" id="tmpl-uploader-window">
   194 			<h2 class="upload-instructions"><?php printf( __( 'The web browser on your device cannot be used to upload files. You may be able to use the <a href="%s">native app for your device</a> instead.' ), 'https://apps.wordpress.org/' ); ?></h2>
   228 			<h2 class="upload-instructions"><?php printf( __( 'The web browser on your device cannot be used to upload files. You may be able to use the <a href="%s">native app for your device</a> instead.' ), 'https://apps.wordpress.org/' ); ?></h2>
   195 		<?php elseif ( is_multisite() && ! is_upload_space_available() ) : ?>
   229 		<?php elseif ( is_multisite() && ! is_upload_space_available() ) : ?>
   196 			<h2 class="upload-instructions"><?php _e( 'Upload Limit Exceeded' ); ?></h2>
   230 			<h2 class="upload-instructions"><?php _e( 'Upload Limit Exceeded' ); ?></h2>
   197 			<?php
   231 			<?php
   198 			/** This action is documented in wp-admin/includes/media.php */
   232 			/** This action is documented in wp-admin/includes/media.php */
   199 			do_action( 'upload_ui_over_quota' ); ?>
   233 			do_action( 'upload_ui_over_quota' );
       
   234 			?>
   200 
   235 
   201 		<?php else : ?>
   236 		<?php else : ?>
   202 			<div class="upload-ui">
   237 			<div class="upload-ui">
   203 				<h2 class="upload-instructions drop-instructions"><?php _e( 'Drop files anywhere to upload' ); ?></h2>
   238 				<h2 class="upload-instructions drop-instructions"><?php _e( 'Drop files anywhere to upload' ); ?></h2>
   204 				<p class="upload-instructions drop-instructions"><?php _ex( 'or', 'Uploader: Drop files here - or - Select Files' ); ?></p>
   239 				<p class="upload-instructions drop-instructions"><?php _ex( 'or', 'Uploader: Drop files here - or - Select Files' ); ?></p>
   227 				if ( ! $max_upload_size ) {
   262 				if ( ! $max_upload_size ) {
   228 					$max_upload_size = 0;
   263 					$max_upload_size = 0;
   229 				}
   264 				}
   230 				?>
   265 				?>
   231 
   266 
   232 				<p class="max-upload-size"><?php
   267 				<p class="max-upload-size">
       
   268 				<?php
   233 					printf( __( 'Maximum upload file size: %s.' ), esc_html( size_format( $max_upload_size ) ) );
   269 					printf( __( 'Maximum upload file size: %s.' ), esc_html( size_format( $max_upload_size ) ) );
   234 				?></p>
   270 				?>
       
   271 				</p>
   235 
   272 
   236 				<# if ( data.suggestedWidth && data.suggestedHeight ) { #>
   273 				<# if ( data.suggestedWidth && data.suggestedHeight ) { #>
   237 					<p class="suggested-dimensions">
   274 					<p class="suggested-dimensions">
   238 						<?php
   275 						<?php
   239 							/* translators: 1: suggested width number, 2: suggested height number. */
   276 							/* translators: 1: suggested width number, 2: suggested height number. */
   242 					</p>
   279 					</p>
   243 				<# } #>
   280 				<# } #>
   244 
   281 
   245 				<?php
   282 				<?php
   246 				/** This action is documented in wp-admin/includes/media.php */
   283 				/** This action is documented in wp-admin/includes/media.php */
   247 				do_action( 'post-upload-ui' ); ?>
   284 				do_action( 'post-upload-ui' );
       
   285 				?>
   248 			</div>
   286 			</div>
   249 		<?php endif; ?>
   287 		<?php endif; ?>
   250 		</div>
   288 		</div>
   251 	</script>
   289 	</script>
   252 
   290 
   253 	<script type="text/html" id="tmpl-media-library-view-switcher">
   291 	<script type="text/html" id="tmpl-media-library-view-switcher">
   254 		<a href="<?php echo esc_url( add_query_arg( 'mode', 'list', $_SERVER['REQUEST_URI'] ) ) ?>" class="view-list">
   292 		<a href="<?php echo esc_url( add_query_arg( 'mode', 'list', $_SERVER['REQUEST_URI'] ) ); ?>" class="view-list">
   255 			<span class="screen-reader-text"><?php _e( 'List View' ); ?></span>
   293 			<span class="screen-reader-text"><?php _e( 'List View' ); ?></span>
   256 		</a>
   294 		</a>
   257 		<a href="<?php echo esc_url( add_query_arg( 'mode', 'grid', $_SERVER['REQUEST_URI'] ) ) ?>" class="view-grid current">
   295 		<a href="<?php echo esc_url( add_query_arg( 'mode', 'grid', $_SERVER['REQUEST_URI'] ) ); ?>" class="view-grid current">
   258 			<span class="screen-reader-text"><?php _e( 'Grid View' ); ?></span>
   296 			<span class="screen-reader-text"><?php _e( 'Grid View' ); ?></span>
   259 		</a>
   297 		</a>
   260 	</script>
   298 	</script>
   261 
   299 
   262 	<script type="text/html" id="tmpl-uploader-status">
   300 	<script type="text/html" id="tmpl-uploader-status">
   281 
   319 
   282 	<script type="text/html" id="tmpl-edit-attachment-frame">
   320 	<script type="text/html" id="tmpl-edit-attachment-frame">
   283 		<div class="edit-media-header">
   321 		<div class="edit-media-header">
   284 			<button class="left dashicons <# if ( ! data.hasPrevious ) { #> disabled <# } #>"><span class="screen-reader-text"><?php _e( 'Edit previous media item' ); ?></span></button>
   322 			<button class="left dashicons <# if ( ! data.hasPrevious ) { #> disabled <# } #>"><span class="screen-reader-text"><?php _e( 'Edit previous media item' ); ?></span></button>
   285 			<button class="right dashicons <# if ( ! data.hasNext ) { #> disabled <# } #>"><span class="screen-reader-text"><?php _e( 'Edit next media item' ); ?></span></button>
   323 			<button class="right dashicons <# if ( ! data.hasNext ) { #> disabled <# } #>"><span class="screen-reader-text"><?php _e( 'Edit next media item' ); ?></span></button>
       
   324 			<button type="button" class="media-modal-close"><span class="media-modal-icon"><span class="screen-reader-text"><?php _e( 'Close dialog' ); ?></span></span></button>
   286 		</div>
   325 		</div>
   287 		<div class="media-frame-title"></div>
   326 		<div class="media-frame-title"></div>
   288 		<div class="media-frame-content"></div>
   327 		<div class="media-frame-content"></div>
   289 	</script>
   328 	</script>
   290 
   329 
   335 			</div>
   374 			</div>
   336 		</div>
   375 		</div>
   337 		<div class="attachment-info">
   376 		<div class="attachment-info">
   338 			<span class="settings-save-status">
   377 			<span class="settings-save-status">
   339 				<span class="spinner"></span>
   378 				<span class="spinner"></span>
   340 				<span class="saved"><?php esc_html_e('Saved.'); ?></span>
   379 				<span class="saved"><?php esc_html_e( 'Saved.' ); ?></span>
   341 			</span>
   380 			</span>
   342 			<div class="details">
   381 			<div class="details">
   343 				<div class="filename"><strong><?php _e( 'File name:' ); ?></strong> {{ data.filename }}</div>
   382 				<div class="filename"><strong><?php _e( 'File name:' ); ?></strong> {{ data.filename }}</div>
   344 				<div class="filename"><strong><?php _e( 'File type:' ); ?></strong> {{ data.mime }}</div>
   383 				<div class="filename"><strong><?php _e( 'File type:' ); ?></strong> {{ data.mime }}</div>
   345 				<div class="uploaded"><strong><?php _e( 'Uploaded on:' ); ?></strong> {{ data.dateFormatted }}</div>
   384 				<div class="uploaded"><strong><?php _e( 'Uploaded on:' ); ?></strong> {{ data.dateFormatted }}</div>
   346 
   385 
   347 				<div class="file-size"><strong><?php _e( 'File size:' ); ?></strong> {{ data.filesizeHumanReadable }}</div>
   386 				<div class="file-size"><strong><?php _e( 'File size:' ); ?></strong> {{ data.filesizeHumanReadable }}</div>
   348 				<# if ( 'image' === data.type && ! data.uploading ) { #>
   387 				<# if ( 'image' === data.type && ! data.uploading ) { #>
   349 					<# if ( data.width && data.height ) { #>
   388 					<# if ( data.width && data.height ) { #>
   350 						<div class="dimensions"><strong><?php _e( 'Dimensions:' ); ?></strong> {{ data.width }} &times; {{ data.height }}</div>
   389 						<div class="dimensions"><strong><?php _e( 'Dimensions:' ); ?></strong>
       
   390 							<?php
       
   391 							/* translators: 1: a number of pixels wide, 2: a number of pixels tall. */
       
   392 							printf( __( '%1$s by %2$s pixels' ), '{{ data.width }}', '{{ data.height }}' );
       
   393 							?>
       
   394 						</div>
   351 					<# } #>
   395 					<# } #>
   352 				<# } #>
   396 				<# } #>
   353 
   397 
   354 				<# if ( data.fileLength ) { #>
   398 				<# if ( data.fileLength && data.fileLengthHumanReadable ) { #>
   355 					<div class="file-length"><strong><?php _e( 'Length:' ); ?></strong> {{ data.fileLength }}</div>
   399 					<div class="file-length"><strong><?php _e( 'Length:' ); ?></strong>
       
   400 						<span aria-hidden="true">{{ data.fileLength }}</span>
       
   401 						<span class="screen-reader-text">{{ data.fileLengthHumanReadable }}</span>
       
   402 					</div>
   356 				<# } #>
   403 				<# } #>
   357 
   404 
   358 				<# if ( 'audio' === data.type && data.meta.bitrate ) { #>
   405 				<# if ( 'audio' === data.type && data.meta.bitrate ) { #>
   359 					<div class="bitrate">
   406 					<div class="bitrate">
   360 						<strong><?php _e( 'Bitrate:' ); ?></strong> {{ Math.round( data.meta.bitrate / 1000 ) }}kb/s
   407 						<strong><?php _e( 'Bitrate:' ); ?></strong> {{ Math.round( data.meta.bitrate / 1000 ) }}kb/s
   370 					<# } #>
   417 					<# } #>
   371 				</div>
   418 				</div>
   372 			</div>
   419 			</div>
   373 
   420 
   374 			<div class="settings">
   421 			<div class="settings">
   375 				<label class="setting" data-setting="url">
       
   376 					<span class="name"><?php _e('URL'); ?></span>
       
   377 					<input type="text" value="{{ data.url }}" readonly />
       
   378 				</label>
       
   379 				<# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
   422 				<# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
       
   423 				<# if ( 'image' === data.type ) { #>
       
   424 					<label class="setting" data-setting="alt">
       
   425 						<span class="name"><?php _e( 'Alternative Text' ); ?></span>
       
   426 						<input type="text" value="{{ data.alt }}" aria-describedby="alt-text-description" {{ maybeReadOnly }} />
       
   427 					</label>
       
   428 					<p class="description" id="alt-text-description"><?php echo $alt_text_description; ?></p>
       
   429 				<# } #>
   380 				<?php if ( post_type_supports( 'attachment', 'title' ) ) : ?>
   430 				<?php if ( post_type_supports( 'attachment', 'title' ) ) : ?>
   381 				<label class="setting" data-setting="title">
   431 				<label class="setting" data-setting="title">
   382 					<span class="name"><?php _e('Title'); ?></span>
   432 					<span class="name"><?php _e( 'Title' ); ?></span>
   383 					<input type="text" value="{{ data.title }}" {{ maybeReadOnly }} />
   433 					<input type="text" value="{{ data.title }}" {{ maybeReadOnly }} />
   384 				</label>
   434 				</label>
   385 				<?php endif; ?>
   435 				<?php endif; ?>
   386 				<# if ( 'audio' === data.type ) { #>
   436 				<# if ( 'audio' === data.type ) { #>
   387 				<?php foreach ( array(
   437 				<?php
       
   438 				foreach ( array(
   388 					'artist' => __( 'Artist' ),
   439 					'artist' => __( 'Artist' ),
   389 					'album' => __( 'Album' ),
   440 					'album'  => __( 'Album' ),
   390 				) as $key => $label ) : ?>
   441 				) as $key => $label ) :
   391 				<label class="setting" data-setting="<?php echo esc_attr( $key ) ?>">
   442 					?>
   392 					<span class="name"><?php echo $label ?></span>
   443 				<label class="setting" data-setting="<?php echo esc_attr( $key ); ?>">
   393 					<input type="text" value="{{ data.<?php echo $key ?> || data.meta.<?php echo $key ?> || '' }}" />
   444 					<span class="name"><?php echo $label; ?></span>
       
   445 					<input type="text" value="{{ data.<?php echo $key; ?> || data.meta.<?php echo $key; ?> || '' }}" />
   394 				</label>
   446 				</label>
   395 				<?php endforeach; ?>
   447 				<?php endforeach; ?>
   396 				<# } #>
   448 				<# } #>
   397 				<label class="setting" data-setting="caption">
   449 				<label class="setting" data-setting="caption">
   398 					<span class="name"><?php _e( 'Caption' ); ?></span>
   450 					<span class="name"><?php _e( 'Caption' ); ?></span>
   399 					<textarea {{ maybeReadOnly }}>{{ data.caption }}</textarea>
   451 					<textarea {{ maybeReadOnly }}>{{ data.caption }}</textarea>
   400 				</label>
   452 				</label>
   401 				<# if ( 'image' === data.type ) { #>
       
   402 					<label class="setting" data-setting="alt">
       
   403 						<span class="name"><?php _e( 'Alt Text' ); ?></span>
       
   404 						<input type="text" value="{{ data.alt }}" {{ maybeReadOnly }} />
       
   405 					</label>
       
   406 				<# } #>
       
   407 				<label class="setting" data-setting="description">
   453 				<label class="setting" data-setting="description">
   408 					<span class="name"><?php _e('Description'); ?></span>
   454 					<span class="name"><?php _e( 'Description' ); ?></span>
   409 					<textarea {{ maybeReadOnly }}>{{ data.description }}</textarea>
   455 					<textarea {{ maybeReadOnly }}>{{ data.description }}</textarea>
   410 				</label>
   456 				</label>
   411 				<label class="setting">
   457 				<div class="setting">
   412 					<span class="name"><?php _e( 'Uploaded By' ); ?></span>
   458 					<span class="name"><?php _e( 'Uploaded By' ); ?></span>
   413 					<span class="value">{{ data.authorName }}</span>
   459 					<span class="value">{{ data.authorName }}</span>
   414 				</label>
   460 				</div>
   415 				<# if ( data.uploadedToTitle ) { #>
   461 				<# if ( data.uploadedToTitle ) { #>
   416 					<label class="setting">
   462 					<div class="setting">
   417 						<span class="name"><?php _e( 'Uploaded To' ); ?></span>
   463 						<span class="name"><?php _e( 'Uploaded To' ); ?></span>
   418 						<# if ( data.uploadedToLink ) { #>
   464 						<# if ( data.uploadedToLink ) { #>
   419 							<span class="value"><a href="{{ data.uploadedToLink }}">{{ data.uploadedToTitle }}</a></span>
   465 							<span class="value"><a href="{{ data.uploadedToLink }}">{{ data.uploadedToTitle }}</a></span>
   420 						<# } else { #>
   466 						<# } else { #>
   421 							<span class="value">{{ data.uploadedToTitle }}</span>
   467 							<span class="value">{{ data.uploadedToTitle }}</span>
   422 						<# } #>
   468 						<# } #>
   423 					</label>
   469 					</div>
   424 				<# } #>
   470 				<# } #>
       
   471 				<label class="setting" data-setting="url">
       
   472 					<span class="name"><?php _e( 'Copy Link' ); ?></span>
       
   473 					<input type="text" value="{{ data.url }}" readonly />
       
   474 				</label>
   425 				<div class="attachment-compat"></div>
   475 				<div class="attachment-compat"></div>
   426 			</div>
   476 			</div>
   427 
   477 
   428 			<div class="actions">
   478 			<div class="actions">
   429 				<a class="view-attachment" href="{{ data.link }}"><?php _e( 'View attachment page' ); ?></a>
   479 				<a class="view-attachment" href="{{ data.link }}"><?php _e( 'View attachment page' ); ?></a>
   430 				<# if ( data.can.save ) { #> |
   480 				<# if ( data.can.save ) { #> |
   431 					<a href="post.php?post={{ data.id }}&action=edit"><?php _e( 'Edit more details' ); ?></a>
   481 					<a href="{{ data.editLink }}"><?php _e( 'Edit more details' ); ?></a>
   432 				<# } #>
   482 				<# } #>
   433 				<# if ( ! data.uploading && data.can.remove ) { #> |
   483 				<# if ( ! data.uploading && data.can.remove ) { #> |
   434 					<?php if ( MEDIA_TRASH ): ?>
   484 					<?php if ( MEDIA_TRASH ) : ?>
   435 						<# if ( 'trash' === data.status ) { #>
   485 						<# if ( 'trash' === data.status ) { #>
   436 							<button type="button" class="button-link untrash-attachment"><?php _e( 'Untrash' ); ?></button>
   486 							<button type="button" class="button-link untrash-attachment"><?php _e( 'Restore from Trash' ); ?></button>
   437 						<# } else { #>
   487 						<# } else { #>
   438 							<button type="button" class="button-link trash-attachment"><?php _ex( 'Trash', 'verb' ); ?></button>
   488 							<button type="button" class="button-link trash-attachment"><?php _e( 'Move to Trash' ); ?></button>
   439 						<# } #>
   489 						<# } #>
   440 					<?php else: ?>
   490 					<?php else : ?>
   441 						<button type="button" class="button-link delete-attachment"><?php _e( 'Delete Permanently' ); ?></button>
   491 						<button type="button" class="button-link delete-attachment"><?php _e( 'Delete Permanently' ); ?></button>
   442 					<?php endif; ?>
   492 					<?php endif; ?>
   443 				<# } #>
   493 				<# } #>
   444 			</div>
   494 			</div>
   445 
   495 
   480 		<#
   530 		<#
   481 		var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly';
   531 		var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly';
   482 		if ( data.describe ) {
   532 		if ( data.describe ) {
   483 			if ( 'image' === data.type ) { #>
   533 			if ( 'image' === data.type ) { #>
   484 				<input type="text" value="{{ data.caption }}" class="describe" data-setting="caption"
   534 				<input type="text" value="{{ data.caption }}" class="describe" data-setting="caption"
   485 					placeholder="<?php esc_attr_e('Caption this image&hellip;'); ?>" {{ maybeReadOnly }} />
   535 					placeholder="<?php esc_attr_e( 'Caption this image&hellip;' ); ?>" {{ maybeReadOnly }} />
   486 			<# } else { #>
   536 			<# } else { #>
   487 				<input type="text" value="{{ data.title }}" class="describe" data-setting="title"
   537 				<input type="text" value="{{ data.title }}" class="describe" data-setting="title"
   488 					<# if ( 'video' === data.type ) { #>
   538 					<# if ( 'video' === data.type ) { #>
   489 						placeholder="<?php esc_attr_e('Describe this video&hellip;'); ?>"
   539 						placeholder="<?php esc_attr_e( 'Describe this video&hellip;' ); ?>"
   490 					<# } else if ( 'audio' === data.type ) { #>
   540 					<# } else if ( 'audio' === data.type ) { #>
   491 						placeholder="<?php esc_attr_e('Describe this audio file&hellip;'); ?>"
   541 						placeholder="<?php esc_attr_e( 'Describe this audio file&hellip;' ); ?>"
   492 					<# } else { #>
   542 					<# } else { #>
   493 						placeholder="<?php esc_attr_e('Describe this media file&hellip;'); ?>"
   543 						placeholder="<?php esc_attr_e( 'Describe this media file&hellip;' ); ?>"
   494 					<# } #> {{ maybeReadOnly }} />
   544 					<# } #> {{ maybeReadOnly }} />
   495 			<# }
   545 			<# }
   496 		} #>
   546 		} #>
   497 	</script>
   547 	</script>
   498 
   548 
   499 	<script type="text/html" id="tmpl-attachment-details">
   549 	<script type="text/html" id="tmpl-attachment-details">
   500 		<h2>
   550 		<h2>
   501 			<?php _e( 'Attachment Details' ); ?>
   551 			<?php _e( 'Attachment Details' ); ?>
   502 			<span class="settings-save-status">
   552 			<span class="settings-save-status">
   503 				<span class="spinner"></span>
   553 				<span class="spinner"></span>
   504 				<span class="saved"><?php esc_html_e('Saved.'); ?></span>
   554 				<span class="saved"><?php esc_html_e( 'Saved.' ); ?></span>
   505 			</span>
   555 			</span>
   506 		</h2>
   556 		</h2>
   507 		<div class="attachment-info">
   557 		<div class="attachment-info">
   508 			<div class="thumbnail thumbnail-{{ data.type }}">
   558 			<div class="thumbnail thumbnail-{{ data.type }}">
   509 				<# if ( data.uploading ) { #>
   559 				<# if ( data.uploading ) { #>
   519 				<div class="uploaded">{{ data.dateFormatted }}</div>
   569 				<div class="uploaded">{{ data.dateFormatted }}</div>
   520 
   570 
   521 				<div class="file-size">{{ data.filesizeHumanReadable }}</div>
   571 				<div class="file-size">{{ data.filesizeHumanReadable }}</div>
   522 				<# if ( 'image' === data.type && ! data.uploading ) { #>
   572 				<# if ( 'image' === data.type && ! data.uploading ) { #>
   523 					<# if ( data.width && data.height ) { #>
   573 					<# if ( data.width && data.height ) { #>
   524 						<div class="dimensions">{{ data.width }} &times; {{ data.height }}</div>
   574 						<div class="dimensions">
       
   575 							<?php
       
   576 							/* translators: 1: a number of pixels wide, 2: a number of pixels tall. */
       
   577 							printf( __( '%1$s by %2$s pixels' ), '{{ data.width }}', '{{ data.height }}' );
       
   578 							?>
       
   579 						</div>
   525 					<# } #>
   580 					<# } #>
   526 
   581 
   527 					<# if ( data.can.save && data.sizes ) { #>
   582 					<# if ( data.can.save && data.sizes ) { #>
   528 						<a class="edit-attachment" href="{{ data.editLink }}&amp;image-editor" target="_blank"><?php _e( 'Edit Image' ); ?></a>
   583 						<a class="edit-attachment" href="{{ data.editLink }}&amp;image-editor" target="_blank"><?php _e( 'Edit Image' ); ?></a>
   529 					<# } #>
   584 					<# } #>
   530 				<# } #>
   585 				<# } #>
   531 
   586 
   532 				<# if ( data.fileLength ) { #>
   587 				<# if ( data.fileLength && data.fileLengthHumanReadable ) { #>
   533 					<div class="file-length"><?php _e( 'Length:' ); ?> {{ data.fileLength }}</div>
   588 					<div class="file-length"><?php _e( 'Length:' ); ?>
       
   589 						<span aria-hidden="true">{{ data.fileLength }}</span>
       
   590 						<span class="screen-reader-text">{{ data.fileLengthHumanReadable }}</span>
       
   591 					</div>
   534 				<# } #>
   592 				<# } #>
   535 
   593 
   536 				<# if ( ! data.uploading && data.can.remove ) { #>
   594 				<# if ( ! data.uploading && data.can.remove ) { #>
   537 					<?php if ( MEDIA_TRASH ): ?>
   595 					<?php if ( MEDIA_TRASH ) : ?>
   538 					<# if ( 'trash' === data.status ) { #>
   596 					<# if ( 'trash' === data.status ) { #>
   539 						<button type="button" class="button-link untrash-attachment"><?php _e( 'Untrash' ); ?></button>
   597 						<button type="button" class="button-link untrash-attachment"><?php _e( 'Restore from Trash' ); ?></button>
   540 					<# } else { #>
   598 					<# } else { #>
   541 						<button type="button" class="button-link trash-attachment"><?php _ex( 'Trash', 'verb' ); ?></button>
   599 						<button type="button" class="button-link trash-attachment"><?php _e( 'Move to Trash' ); ?></button>
   542 					<# } #>
   600 					<# } #>
   543 					<?php else: ?>
   601 					<?php else : ?>
   544 						<button type="button" class="button-link delete-attachment"><?php _e( 'Delete Permanently' ); ?></button>
   602 						<button type="button" class="button-link delete-attachment"><?php _e( 'Delete Permanently' ); ?></button>
   545 					<?php endif; ?>
   603 					<?php endif; ?>
   546 				<# } #>
   604 				<# } #>
   547 
   605 
   548 				<div class="compat-meta">
   606 				<div class="compat-meta">
   551 					<# } #>
   609 					<# } #>
   552 				</div>
   610 				</div>
   553 			</div>
   611 			</div>
   554 		</div>
   612 		</div>
   555 
   613 
   556 		<label class="setting" data-setting="url">
       
   557 			<span class="name"><?php _e('URL'); ?></span>
       
   558 			<input type="text" value="{{ data.url }}" readonly />
       
   559 		</label>
       
   560 		<# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
   614 		<# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
       
   615 		<# if ( 'image' === data.type ) { #>
       
   616 			<label class="setting" data-setting="alt">
       
   617 				<span class="name"><?php _e( 'Alt Text' ); ?></span>
       
   618 				<input type="text" value="{{ data.alt }}" aria-describedby="alt-text-description" {{ maybeReadOnly }} />
       
   619 			</label>
       
   620 			<p class="description" id="alt-text-description"><?php echo $alt_text_description; ?></p>
       
   621 		<# } #>
   561 		<?php if ( post_type_supports( 'attachment', 'title' ) ) : ?>
   622 		<?php if ( post_type_supports( 'attachment', 'title' ) ) : ?>
   562 		<label class="setting" data-setting="title">
   623 		<label class="setting" data-setting="title">
   563 			<span class="name"><?php _e('Title'); ?></span>
   624 			<span class="name"><?php _e( 'Title' ); ?></span>
   564 			<input type="text" value="{{ data.title }}" {{ maybeReadOnly }} />
   625 			<input type="text" value="{{ data.title }}" {{ maybeReadOnly }} />
   565 		</label>
   626 		</label>
   566 		<?php endif; ?>
   627 		<?php endif; ?>
   567 		<# if ( 'audio' === data.type ) { #>
   628 		<# if ( 'audio' === data.type ) { #>
   568 		<?php foreach ( array(
   629 		<?php
       
   630 		foreach ( array(
   569 			'artist' => __( 'Artist' ),
   631 			'artist' => __( 'Artist' ),
   570 			'album' => __( 'Album' ),
   632 			'album'  => __( 'Album' ),
   571 		) as $key => $label ) : ?>
   633 		) as $key => $label ) :
   572 		<label class="setting" data-setting="<?php echo esc_attr( $key ) ?>">
   634 			?>
   573 			<span class="name"><?php echo $label ?></span>
   635 		<label class="setting" data-setting="<?php echo esc_attr( $key ); ?>">
   574 			<input type="text" value="{{ data.<?php echo $key ?> || data.meta.<?php echo $key ?> || '' }}" />
   636 			<span class="name"><?php echo $label; ?></span>
       
   637 			<input type="text" value="{{ data.<?php echo $key; ?> || data.meta.<?php echo $key; ?> || '' }}" />
   575 		</label>
   638 		</label>
   576 		<?php endforeach; ?>
   639 		<?php endforeach; ?>
   577 		<# } #>
   640 		<# } #>
   578 		<label class="setting" data-setting="caption">
   641 		<label class="setting" data-setting="caption">
   579 			<span class="name"><?php _e('Caption'); ?></span>
   642 			<span class="name"><?php _e( 'Caption' ); ?></span>
   580 			<textarea {{ maybeReadOnly }}>{{ data.caption }}</textarea>
   643 			<textarea {{ maybeReadOnly }}>{{ data.caption }}</textarea>
   581 		</label>
   644 		</label>
   582 		<# if ( 'image' === data.type ) { #>
       
   583 			<label class="setting" data-setting="alt">
       
   584 				<span class="name"><?php _e('Alt Text'); ?></span>
       
   585 				<input type="text" value="{{ data.alt }}" {{ maybeReadOnly }} />
       
   586 			</label>
       
   587 		<# } #>
       
   588 		<label class="setting" data-setting="description">
   645 		<label class="setting" data-setting="description">
   589 			<span class="name"><?php _e('Description'); ?></span>
   646 			<span class="name"><?php _e( 'Description' ); ?></span>
   590 			<textarea {{ maybeReadOnly }}>{{ data.description }}</textarea>
   647 			<textarea {{ maybeReadOnly }}>{{ data.description }}</textarea>
       
   648 		</label>
       
   649 		<label class="setting" data-setting="url">
       
   650 			<span class="name"><?php _e( 'Copy Link' ); ?></span>
       
   651 			<input type="text" value="{{ data.url }}" readonly />
   591 		</label>
   652 		</label>
   592 	</script>
   653 	</script>
   593 
   654 
   594 	<script type="text/html" id="tmpl-media-selection">
   655 	<script type="text/html" id="tmpl-media-selection">
   595 		<div class="selection-info">
   656 		<div class="selection-info">
   607 	<script type="text/html" id="tmpl-attachment-display-settings">
   668 	<script type="text/html" id="tmpl-attachment-display-settings">
   608 		<h2><?php _e( 'Attachment Display Settings' ); ?></h2>
   669 		<h2><?php _e( 'Attachment Display Settings' ); ?></h2>
   609 
   670 
   610 		<# if ( 'image' === data.type ) { #>
   671 		<# if ( 'image' === data.type ) { #>
   611 			<label class="setting align">
   672 			<label class="setting align">
   612 				<span><?php _e('Alignment'); ?></span>
   673 				<span><?php _e( 'Alignment' ); ?></span>
   613 				<select class="alignment"
   674 				<select class="alignment"
   614 					data-setting="align"
   675 					data-setting="align"
   615 					<# if ( data.userSettings ) { #>
   676 					<# if ( data.userSettings ) { #>
   616 						data-user-setting="align"
   677 						data-user-setting="align"
   617 					<# } #>>
   678 					<# } #>>
   633 		<# } #>
   694 		<# } #>
   634 
   695 
   635 		<div class="setting">
   696 		<div class="setting">
   636 			<label>
   697 			<label>
   637 				<# if ( data.model.canEmbed ) { #>
   698 				<# if ( data.model.canEmbed ) { #>
   638 					<span><?php _e('Embed or Link'); ?></span>
   699 					<span><?php _e( 'Embed or Link' ); ?></span>
   639 				<# } else { #>
   700 				<# } else { #>
   640 					<span><?php _e('Link To'); ?></span>
   701 					<span><?php _e( 'Link To' ); ?></span>
   641 				<# } #>
   702 				<# } #>
   642 
   703 
   643 				<select class="link-to"
   704 				<select class="link-to"
   644 					data-setting="link"
   705 					data-setting="link"
   645 					<# if ( data.userSettings && ! data.model.canEmbed ) { #>
   706 					<# if ( data.userSettings && ! data.model.canEmbed ) { #>
   680 			<input type="text" class="link-to-custom" data-setting="linkUrl" />
   741 			<input type="text" class="link-to-custom" data-setting="linkUrl" />
   681 		</div>
   742 		</div>
   682 
   743 
   683 		<# if ( 'undefined' !== typeof data.sizes ) { #>
   744 		<# if ( 'undefined' !== typeof data.sizes ) { #>
   684 			<label class="setting">
   745 			<label class="setting">
   685 				<span><?php _e('Size'); ?></span>
   746 				<span><?php _e( 'Size' ); ?></span>
   686 				<select class="size" name="size"
   747 				<select class="size" name="size"
   687 					data-setting="size"
   748 					data-setting="size"
   688 					<# if ( data.userSettings ) { #>
   749 					<# if ( data.userSettings ) { #>
   689 						data-user-setting="imgsize"
   750 						data-user-setting="imgsize"
   690 					<# } #>>
   751 					<# } #>>
   691 					<?php
   752 					<?php
   692 					/** This filter is documented in wp-admin/includes/media.php */
   753 					/** This filter is documented in wp-admin/includes/media.php */
   693 					$sizes = apply_filters( 'image_size_names_choose', array(
   754 					$sizes = apply_filters(
   694 						'thumbnail' => __('Thumbnail'),
   755 						'image_size_names_choose',
   695 						'medium'    => __('Medium'),
   756 						array(
   696 						'large'     => __('Large'),
   757 							'thumbnail' => __( 'Thumbnail' ),
   697 						'full'      => __('Full Size'),
   758 							'medium'    => __( 'Medium' ),
   698 					) );
   759 							'large'     => __( 'Large' ),
   699 
   760 							'full'      => __( 'Full Size' ),
   700 					foreach ( $sizes as $value => $name ) : ?>
   761 						)
       
   762 					);
       
   763 
       
   764 					foreach ( $sizes as $value => $name ) :
       
   765 						?>
   701 						<#
   766 						<#
   702 						var size = data.sizes['<?php echo esc_js( $value ); ?>'];
   767 						var size = data.sizes['<?php echo esc_js( $value ); ?>'];
   703 						if ( size ) { #>
   768 						if ( size ) { #>
   704 							<option value="<?php echo esc_attr( $value ); ?>" <?php selected( $value, 'full' ); ?>>
   769 							<option value="<?php echo esc_attr( $value ); ?>" <?php selected( $value, 'full' ); ?>>
   705 								<?php echo esc_html( $name ); ?> &ndash; {{ size.width }} &times; {{ size.height }}
   770 								<?php echo esc_html( $name ); ?> &ndash; {{ size.width }} &times; {{ size.height }}
   713 
   778 
   714 	<script type="text/html" id="tmpl-gallery-settings">
   779 	<script type="text/html" id="tmpl-gallery-settings">
   715 		<h2><?php _e( 'Gallery Settings' ); ?></h2>
   780 		<h2><?php _e( 'Gallery Settings' ); ?></h2>
   716 
   781 
   717 		<label class="setting">
   782 		<label class="setting">
   718 			<span><?php _e('Link To'); ?></span>
   783 			<span><?php _e( 'Link To' ); ?></span>
   719 			<select class="link-to"
   784 			<select class="link-to"
   720 				data-setting="link"
   785 				data-setting="link"
   721 				<# if ( data.userSettings ) { #>
   786 				<# if ( data.userSettings ) { #>
   722 					data-user-setting="urlbutton"
   787 					data-user-setting="urlbutton"
   723 				<# } #>>
   788 				<# } #>>
   735 				</option>
   800 				</option>
   736 			</select>
   801 			</select>
   737 		</label>
   802 		</label>
   738 
   803 
   739 		<label class="setting">
   804 		<label class="setting">
   740 			<span><?php _e('Columns'); ?></span>
   805 			<span><?php _e( 'Columns' ); ?></span>
   741 			<select class="columns" name="columns"
   806 			<select class="columns" name="columns"
   742 				data-setting="columns">
   807 				data-setting="columns">
   743 				<?php for ( $i = 1; $i <= 9; $i++ ) : ?>
   808 				<?php for ( $i = 1; $i <= 9; $i++ ) : ?>
   744 					<option value="<?php echo esc_attr( $i ); ?>" <#
   809 					<option value="<?php echo esc_attr( $i ); ?>" <#
   745 						if ( <?php echo $i ?> == wp.media.galleryDefaults.columns ) { #>selected="selected"<# }
   810 						if ( <?php echo $i; ?> == wp.media.galleryDefaults.columns ) { #>selected="selected"<# }
   746 					#>>
   811 					#>>
   747 						<?php echo esc_html( $i ); ?>
   812 						<?php echo esc_html( $i ); ?>
   748 					</option>
   813 					</option>
   749 				<?php endfor; ?>
   814 				<?php endfor; ?>
   750 			</select>
   815 			</select>
   763 					data-user-setting="imgsize"
   828 					data-user-setting="imgsize"
   764 				<# } #>
   829 				<# } #>
   765 				>
   830 				>
   766 				<?php
   831 				<?php
   767 				/** This filter is documented in wp-admin/includes/media.php */
   832 				/** This filter is documented in wp-admin/includes/media.php */
   768 				$size_names = apply_filters( 'image_size_names_choose', array(
   833 				$size_names = apply_filters(
   769 					'thumbnail' => __( 'Thumbnail' ),
   834 					'image_size_names_choose',
   770 					'medium'    => __( 'Medium' ),
   835 					array(
   771 					'large'     => __( 'Large' ),
   836 						'thumbnail' => __( 'Thumbnail' ),
   772 					'full'      => __( 'Full Size' ),
   837 						'medium'    => __( 'Medium' ),
   773 				) );
   838 						'large'     => __( 'Large' ),
   774 
   839 						'full'      => __( 'Full Size' ),
   775 				foreach ( $size_names as $size => $label ) : ?>
   840 					)
       
   841 				);
       
   842 
       
   843 				foreach ( $size_names as $size => $label ) :
       
   844 					?>
   776 					<option value="<?php echo esc_attr( $size ); ?>">
   845 					<option value="<?php echo esc_attr( $size ); ?>">
   777 						<?php echo esc_html( $label ); ?>
   846 						<?php echo esc_html( $label ); ?>
   778 					</option>
   847 					</option>
   779 				<?php endforeach; ?>
   848 				<?php endforeach; ?>
   780 			</select>
   849 			</select>
   828 	<script type="text/html" id="tmpl-embed-image-settings">
   897 	<script type="text/html" id="tmpl-embed-image-settings">
   829 		<div class="thumbnail">
   898 		<div class="thumbnail">
   830 			<img src="{{ data.model.url }}" draggable="false" alt="" />
   899 			<img src="{{ data.model.url }}" draggable="false" alt="" />
   831 		</div>
   900 		</div>
   832 
   901 
       
   902 		<label class="setting alt-text has-description">
       
   903 			<span><?php _e( 'Alternative Text' ); ?></span>
       
   904 			<input type="text" data-setting="alt" aria-describedby="alt-text-description" />
       
   905 		</label>
       
   906 		<p class="description" id="alt-text-description"><?php echo $alt_text_description; ?></p>
       
   907 
   833 		<?php
   908 		<?php
   834 		/** This filter is documented in wp-admin/includes/media.php */
   909 		/** This filter is documented in wp-admin/includes/media.php */
   835 		if ( ! apply_filters( 'disable_captions', '' ) ) : ?>
   910 		if ( ! apply_filters( 'disable_captions', '' ) ) :
       
   911 			?>
   836 			<label class="setting caption">
   912 			<label class="setting caption">
   837 				<span><?php _e('Caption'); ?></span>
   913 				<span><?php _e( 'Caption' ); ?></span>
   838 				<textarea data-setting="caption" />
   914 				<textarea data-setting="caption" />
   839 			</label>
   915 			</label>
   840 		<?php endif; ?>
   916 		<?php endif; ?>
   841 
   917 
   842 		<label class="setting alt-text">
       
   843 			<span><?php _e('Alt Text'); ?></span>
       
   844 			<input type="text" data-setting="alt" />
       
   845 		</label>
       
   846 
       
   847 		<div class="setting align">
   918 		<div class="setting align">
   848 			<span><?php _e('Align'); ?></span>
   919 			<span><?php _e( 'Align' ); ?></span>
   849 			<div class="button-group button-large" data-setting="align">
   920 			<div class="button-group button-large" data-setting="align">
   850 				<button class="button" value="left">
   921 				<button class="button" value="left">
   851 					<?php esc_html_e( 'Left' ); ?>
   922 					<?php esc_html_e( 'Left' ); ?>
   852 				</button>
   923 				</button>
   853 				<button class="button" value="center">
   924 				<button class="button" value="center">
   861 				</button>
   932 				</button>
   862 			</div>
   933 			</div>
   863 		</div>
   934 		</div>
   864 
   935 
   865 		<div class="setting link-to">
   936 		<div class="setting link-to">
   866 			<span><?php _e('Link To'); ?></span>
   937 			<span><?php _e( 'Link To' ); ?></span>
   867 			<div class="button-group button-large" data-setting="link">
   938 			<div class="button-group button-large" data-setting="link">
   868 				<button class="button" value="file">
   939 				<button class="button" value="file">
   869 					<?php esc_html_e( 'Image URL' ); ?>
   940 					<?php esc_html_e( 'Image URL' ); ?>
   870 				</button>
   941 				</button>
   871 				<button class="button" value="custom">
   942 				<button class="button" value="custom">
   893 							</div>
   964 							</div>
   894 						<# } #>
   965 						<# } #>
   895 					</div>
   966 					</div>
   896 				</div>
   967 				</div>
   897 				<div class="column-settings">
   968 				<div class="column-settings">
       
   969 					<label class="setting alt-text has-description">
       
   970 						<span><?php _e( 'Alternative Text' ); ?></span>
       
   971 						<input type="text" data-setting="alt" value="{{ data.model.alt }}" aria-describedby="alt-text-description" />
       
   972 					</label>
       
   973 					<p class="description" id="alt-text-description"><?php echo $alt_text_description; ?></p>
       
   974 
   898 					<?php
   975 					<?php
   899 					/** This filter is documented in wp-admin/includes/media.php */
   976 					/** This filter is documented in wp-admin/includes/media.php */
   900 					if ( ! apply_filters( 'disable_captions', '' ) ) : ?>
   977 					if ( ! apply_filters( 'disable_captions', '' ) ) :
       
   978 						?>
   901 						<label class="setting caption">
   979 						<label class="setting caption">
   902 							<span><?php _e('Caption'); ?></span>
   980 							<span><?php _e( 'Caption' ); ?></span>
   903 							<textarea data-setting="caption">{{ data.model.caption }}</textarea>
   981 							<textarea data-setting="caption">{{ data.model.caption }}</textarea>
   904 						</label>
   982 						</label>
   905 					<?php endif; ?>
   983 					<?php endif; ?>
   906 
   984 
   907 					<label class="setting alt-text">
       
   908 						<span><?php _e('Alternative Text'); ?></span>
       
   909 						<input type="text" data-setting="alt" value="{{ data.model.alt }}" />
       
   910 					</label>
       
   911 
       
   912 					<h2><?php _e( 'Display Settings' ); ?></h2>
   985 					<h2><?php _e( 'Display Settings' ); ?></h2>
   913 					<div class="setting align">
   986 					<div class="setting align">
   914 						<span><?php _e('Align'); ?></span>
   987 						<span><?php _e( 'Align' ); ?></span>
   915 						<div class="button-group button-large" data-setting="align">
   988 						<div class="button-group button-large" data-setting="align">
   916 							<button class="button" value="left">
   989 							<button class="button" value="left">
   917 								<?php esc_html_e( 'Left' ); ?>
   990 								<?php esc_html_e( 'Left' ); ?>
   918 							</button>
   991 							</button>
   919 							<button class="button" value="center">
   992 							<button class="button" value="center">
   929 					</div>
  1002 					</div>
   930 
  1003 
   931 					<# if ( data.attachment ) { #>
  1004 					<# if ( data.attachment ) { #>
   932 						<# if ( 'undefined' !== typeof data.attachment.sizes ) { #>
  1005 						<# if ( 'undefined' !== typeof data.attachment.sizes ) { #>
   933 							<label class="setting size">
  1006 							<label class="setting size">
   934 								<span><?php _e('Size'); ?></span>
  1007 								<span><?php _e( 'Size' ); ?></span>
   935 								<select class="size" name="size"
  1008 								<select class="size" name="size"
   936 									data-setting="size"
  1009 									data-setting="size"
   937 									<# if ( data.userSettings ) { #>
  1010 									<# if ( data.userSettings ) { #>
   938 										data-user-setting="imgsize"
  1011 										data-user-setting="imgsize"
   939 									<# } #>>
  1012 									<# } #>>
   940 									<?php
  1013 									<?php
   941 									/** This filter is documented in wp-admin/includes/media.php */
  1014 									/** This filter is documented in wp-admin/includes/media.php */
   942 									$sizes = apply_filters( 'image_size_names_choose', array(
  1015 									$sizes = apply_filters(
   943 										'thumbnail' => __('Thumbnail'),
  1016 										'image_size_names_choose',
   944 										'medium'    => __('Medium'),
  1017 										array(
   945 										'large'     => __('Large'),
  1018 											'thumbnail' => __( 'Thumbnail' ),
   946 										'full'      => __('Full Size'),
  1019 											'medium'    => __( 'Medium' ),
   947 									) );
  1020 											'large'     => __( 'Large' ),
   948 
  1021 											'full'      => __( 'Full Size' ),
   949 									foreach ( $sizes as $value => $name ) : ?>
  1022 										)
       
  1023 									);
       
  1024 
       
  1025 									foreach ( $sizes as $value => $name ) :
       
  1026 										?>
   950 										<#
  1027 										<#
   951 										var size = data.sizes['<?php echo esc_js( $value ); ?>'];
  1028 										var size = data.sizes['<?php echo esc_js( $value ); ?>'];
   952 										if ( size ) { #>
  1029 										if ( size ) { #>
   953 											<option value="<?php echo esc_attr( $value ); ?>">
  1030 											<option value="<?php echo esc_attr( $value ); ?>">
   954 												<?php echo esc_html( $name ); ?> &ndash; {{ size.width }} &times; {{ size.height }}
  1031 												<?php echo esc_html( $name ); ?> &ndash; {{ size.width }} &times; {{ size.height }}
   965 								<label><span><?php _e( 'Width' ); ?> <small>(px)</small></span> <input data-setting="customWidth" type="number" step="1" value="{{ data.model.customWidth }}" /></label><span class="sep">&times;</span><label><span><?php _e( 'Height' ); ?> <small>(px)</small></span><input data-setting="customHeight" type="number" step="1" value="{{ data.model.customHeight }}" /></label>
  1042 								<label><span><?php _e( 'Width' ); ?> <small>(px)</small></span> <input data-setting="customWidth" type="number" step="1" value="{{ data.model.customWidth }}" /></label><span class="sep">&times;</span><label><span><?php _e( 'Height' ); ?> <small>(px)</small></span><input data-setting="customHeight" type="number" step="1" value="{{ data.model.customHeight }}" /></label>
   966 							</div>
  1043 							</div>
   967 					<# } #>
  1044 					<# } #>
   968 
  1045 
   969 					<div class="setting link-to">
  1046 					<div class="setting link-to">
   970 						<span><?php _e('Link To'); ?></span>
  1047 						<span><?php _e( 'Link To' ); ?></span>
   971 						<select data-setting="link">
  1048 						<select data-setting="link">
   972 						<# if ( data.attachment ) { #>
  1049 						<# if ( data.attachment ) { #>
   973 							<option value="file">
  1050 							<option value="file">
   974 								<?php esc_html_e( 'Media File' ); ?>
  1051 								<?php esc_html_e( 'Media File' ); ?>
   975 							</option>
  1052 							</option>
   993 					<div class="advanced-section">
  1070 					<div class="advanced-section">
   994 						<h2><button type="button" class="button-link advanced-toggle"><?php _e( 'Advanced Options' ); ?></button></h2>
  1071 						<h2><button type="button" class="button-link advanced-toggle"><?php _e( 'Advanced Options' ); ?></button></h2>
   995 						<div class="advanced-settings hidden">
  1072 						<div class="advanced-settings hidden">
   996 							<div class="advanced-image">
  1073 							<div class="advanced-image">
   997 								<label class="setting title-text">
  1074 								<label class="setting title-text">
   998 									<span><?php _e('Image Title Attribute'); ?></span>
  1075 									<span><?php _e( 'Image Title Attribute' ); ?></span>
   999 									<input type="text" data-setting="title" value="{{ data.model.title }}" />
  1076 									<input type="text" data-setting="title" value="{{ data.model.title }}" />
  1000 								</label>
  1077 								</label>
  1001 								<label class="setting extra-classes">
  1078 								<label class="setting extra-classes">
  1002 									<span><?php _e('Image CSS Class'); ?></span>
  1079 									<span><?php _e( 'Image CSS Class' ); ?></span>
  1003 									<input type="text" data-setting="extraClasses" value="{{ data.model.extraClasses }}" />
  1080 									<input type="text" data-setting="extraClasses" value="{{ data.model.extraClasses }}" />
  1004 								</label>
  1081 								</label>
  1005 							</div>
  1082 							</div>
  1006 							<div class="advanced-link">
  1083 							<div class="advanced-link">
  1007 								<div class="setting link-target">
  1084 								<div class="setting link-target">
  1008 									<label><input type="checkbox" data-setting="linkTargetBlank" value="_blank" <# if ( data.model.linkTargetBlank ) { #>checked="checked"<# } #>><?php _e( 'Open link in a new tab' ); ?></label>
  1085 									<label><input type="checkbox" data-setting="linkTargetBlank" value="_blank" <# if ( data.model.linkTargetBlank ) { #>checked="checked"<# } #>><?php _e( 'Open link in a new tab' ); ?></label>
  1009 								</div>
  1086 								</div>
  1010 								<label class="setting link-rel">
  1087 								<label class="setting link-rel">
  1011 									<span><?php _e('Link Rel'); ?></span>
  1088 									<span><?php _e( 'Link Rel' ); ?></span>
  1012 									<input type="text" data-setting="linkRel" value="{{ data.model.linkRel }}" />
  1089 									<input type="text" data-setting="linkRel" value="{{ data.model.linkRel }}" />
  1013 								</label>
  1090 								</label>
  1014 								<label class="setting link-class-name">
  1091 								<label class="setting link-class-name">
  1015 									<span><?php _e('Link CSS Class'); ?></span>
  1092 									<span><?php _e( 'Link CSS Class' ); ?></span>
  1016 									<input type="text" data-setting="linkClassName" value="{{ data.model.linkClassName }}" />
  1093 									<input type="text" data-setting="linkClassName" value="{{ data.model.linkClassName }}" />
  1017 								</label>
  1094 								</label>
  1018 							</div>
  1095 							</div>
  1019 						</div>
  1096 						</div>
  1020 					</div>
  1097 					</div>
  1035 		}; #>
  1112 		}; #>
  1036 
  1113 
  1037 		<?php $audio_types = wp_get_audio_extensions(); ?>
  1114 		<?php $audio_types = wp_get_audio_extensions(); ?>
  1038 		<div class="media-embed media-embed-details">
  1115 		<div class="media-embed media-embed-details">
  1039 			<div class="embed-media-settings embed-audio-settings">
  1116 			<div class="embed-media-settings embed-audio-settings">
  1040 				<?php wp_underscore_audio_template() ?>
  1117 				<?php wp_underscore_audio_template(); ?>
  1041 
  1118 
  1042 				<# if ( ! _.isEmpty( data.model.src ) ) {
  1119 				<# if ( ! _.isEmpty( data.model.src ) ) {
  1043 					ext = data.model.src.split('.').pop();
  1120 					ext = data.model.src.split('.').pop();
  1044 					if ( html5types[ ext ] ) {
  1121 					if ( html5types[ ext ] ) {
  1045 						delete html5types[ ext ];
  1122 						delete html5types[ ext ];
  1046 					}
  1123 					}
  1047 				#>
  1124 				#>
  1048 				<label class="setting">
  1125 				<div class="setting">
  1049 					<span>SRC</span>
  1126 					<label for="audio-source"><?php _e( 'URL' ); ?></label>
  1050 					<input type="text" disabled="disabled" data-setting="src" value="{{ data.model.src }}" />
  1127 					<input type="text" id="audio-source" readonly data-setting="src" value="{{ data.model.src }}" />
  1051 					<button type="button" class="button-link remove-setting"><?php _e( 'Remove audio source' ); ?></button>
  1128 					<button type="button" class="button-link remove-setting"><?php _e( 'Remove audio source' ); ?></button>
  1052 				</label>
  1129 				</div>
  1053 				<# } #>
  1130 				<# } #>
  1054 				<?php
  1131 				<?php
  1055 
  1132 
  1056 				foreach ( $audio_types as $type ):
  1133 				foreach ( $audio_types as $type ) :
  1057 				?><# if ( ! _.isEmpty( data.model.<?php echo $type ?> ) ) {
  1134 					?>
  1058 					if ( ! _.isUndefined( html5types.<?php echo $type ?> ) ) {
  1135 				<# if ( ! _.isEmpty( data.model.<?php echo $type; ?> ) ) {
  1059 						delete html5types.<?php echo $type ?>;
  1136 					if ( ! _.isUndefined( html5types.<?php echo $type; ?> ) ) {
       
  1137 						delete html5types.<?php echo $type; ?>;
  1060 					}
  1138 					}
  1061 				#>
  1139 				#>
  1062 				<label class="setting">
  1140 				<div class="setting">
  1063 					<span><?php echo strtoupper( $type ) ?></span>
  1141 					<label for="<?php echo $type . '-source'; ?>"><?php echo strtoupper( $type ); ?></span>
  1064 					<input type="text" disabled="disabled" data-setting="<?php echo $type ?>" value="{{ data.model.<?php echo $type ?> }}" />
  1142 					<input type="text" id="<?php echo $type . '-source'; ?>" readonly data-setting="<?php echo $type; ?>" value="{{ data.model.<?php echo $type; ?> }}" />
  1065 					<button type="button" class="button-link remove-setting"><?php _e( 'Remove audio source' ); ?></button>
  1143 					<button type="button" class="button-link remove-setting"><?php _e( 'Remove audio source' ); ?></button>
  1066 				</label>
  1144 				</div>
  1067 				<# } #>
  1145 				<# } #>
  1068 				<?php endforeach ?>
  1146 				<?php endforeach ?>
  1069 
  1147 
  1070 				<# if ( ! _.isEmpty( html5types ) ) { #>
  1148 				<# if ( ! _.isEmpty( html5types ) ) { #>
  1071 				<div class="setting">
  1149 				<div class="setting">
  1072 					<span><?php _e( 'Add alternate sources for maximum HTML5 playback:' ) ?></span>
  1150 					<span><?php _e( 'Add alternate sources for maximum HTML5 playback:' ); ?></span>
  1073 					<div class="button-large">
  1151 					<div class="button-large">
  1074 					<# _.each( html5types, function (mime, type) { #>
  1152 					<# _.each( html5types, function (mime, type) { #>
  1075 					<button class="button add-media-source" data-mime="{{ mime }}">{{ type }}</button>
  1153 					<button class="button add-media-source" data-mime="{{ mime }}">{{ type }}</button>
  1076 					<# } ) #>
  1154 					<# } ) #>
  1077 					</div>
  1155 					</div>
  1118 				if ( data.model.width && w !== data.model.width ) {
  1196 				if ( data.model.width && w !== data.model.width ) {
  1119 					h = Math.ceil( ( h * w ) / data.model.width );
  1197 					h = Math.ceil( ( h * w ) / data.model.width );
  1120 				}
  1198 				}
  1121 				#>
  1199 				#>
  1122 
  1200 
  1123 				<?php wp_underscore_video_template() ?>
  1201 				<?php wp_underscore_video_template(); ?>
  1124 
  1202 
  1125 				<# if ( ! _.isEmpty( data.model.src ) ) {
  1203 				<# if ( ! _.isEmpty( data.model.src ) ) {
  1126 					ext = data.model.src.split('.').pop();
  1204 					ext = data.model.src.split('.').pop();
  1127 					if ( html5types[ ext ] ) {
  1205 					if ( html5types[ ext ] ) {
  1128 						delete html5types[ ext ];
  1206 						delete html5types[ ext ];
  1129 					}
  1207 					}
  1130 				#>
  1208 				#>
  1131 				<label class="setting">
  1209 				<div class="setting">
  1132 					<span>SRC</span>
  1210 					<label for="video-source"><?php _e( 'URL' ); ?></label>
  1133 					<input type="text" disabled="disabled" data-setting="src" value="{{ data.model.src }}" />
  1211 					<input type="text" id="video-source" readonly data-setting="src" value="{{ data.model.src }}" />
  1134 					<button type="button" class="button-link remove-setting"><?php _e( 'Remove video source' ); ?></button>
  1212 					<button type="button" class="button-link remove-setting"><?php _e( 'Remove video source' ); ?></button>
  1135 				</label>
  1213 				</div>
  1136 				<# } #>
  1214 				<# } #>
  1137 				<?php foreach ( $video_types as $type ):
  1215 				<?php
  1138 				?><# if ( ! _.isEmpty( data.model.<?php echo $type ?> ) ) {
  1216 				foreach ( $video_types as $type ) :
  1139 					if ( ! _.isUndefined( html5types.<?php echo $type ?> ) ) {
  1217 					?>
  1140 						delete html5types.<?php echo $type ?>;
  1218 				<# if ( ! _.isEmpty( data.model.<?php echo $type; ?> ) ) {
       
  1219 					if ( ! _.isUndefined( html5types.<?php echo $type; ?> ) ) {
       
  1220 						delete html5types.<?php echo $type; ?>;
  1141 					}
  1221 					}
  1142 				#>
  1222 				#>
  1143 				<label class="setting">
  1223 				<div class="setting">
  1144 					<span><?php echo strtoupper( $type ) ?></span>
  1224 					<label for="<?php echo $type . '-source'; ?>"><?php echo strtoupper( $type ); ?></label>
  1145 					<input type="text" disabled="disabled" data-setting="<?php echo $type ?>" value="{{ data.model.<?php echo $type ?> }}" />
  1225 					<input type="text" id="<?php echo $type . '-source'; ?>" readonly data-setting="<?php echo $type; ?>" value="{{ data.model.<?php echo $type; ?> }}" />
  1146 					<button type="button" class="button-link remove-setting"><?php _e( 'Remove video source' ); ?></button>
  1226 					<button type="button" class="button-link remove-setting"><?php _e( 'Remove video source' ); ?></button>
  1147 				</label>
  1227 				</div>
  1148 				<# } #>
  1228 				<# } #>
  1149 				<?php endforeach ?>
  1229 				<?php endforeach ?>
  1150 				</div>
  1230 				</div>
  1151 
  1231 
  1152 				<# if ( ! _.isEmpty( html5types ) ) { #>
  1232 				<# if ( ! _.isEmpty( html5types ) ) { #>
  1159 					</div>
  1239 					</div>
  1160 				</div>
  1240 				</div>
  1161 				<# } #>
  1241 				<# } #>
  1162 
  1242 
  1163 				<# if ( ! _.isEmpty( data.model.poster ) ) { #>
  1243 				<# if ( ! _.isEmpty( data.model.poster ) ) { #>
  1164 				<label class="setting">
  1244 				<div class="setting">
  1165 					<span><?php _e( 'Poster Image' ); ?></span>
  1245 					<label for="poster-image"><?php _e( 'Poster Image' ); ?></label>
  1166 					<input type="text" disabled="disabled" data-setting="poster" value="{{ data.model.poster }}" />
  1246 					<input type="text" id="poster-image" readonly data-setting="poster" value="{{ data.model.poster }}" />
  1167 					<button type="button" class="button-link remove-setting"><?php _e( 'Remove poster image' ); ?></button>
  1247 					<button type="button" class="button-link remove-setting"><?php _e( 'Remove poster image' ); ?></button>
  1168 				</label>
  1248 				</div>
  1169 				<# } #>
  1249 				<# } #>
  1170 				<div class="setting preload">
  1250 				<div class="setting preload">
  1171 					<span><?php _e( 'Preload' ); ?></span>
  1251 					<span><?php _e( 'Preload' ); ?></span>
  1172 					<div class="button-group button-large" data-setting="preload">
  1252 					<div class="button-group button-large" data-setting="preload">
  1173 						<button class="button" value="auto"><?php _ex( 'Auto', 'auto preload' ); ?></button>
  1253 						<button class="button" value="auto"><?php _ex( 'Auto', 'auto preload' ); ?></button>
  1184 				<label class="setting checkbox-setting">
  1264 				<label class="setting checkbox-setting">
  1185 					<input type="checkbox" data-setting="loop" />
  1265 					<input type="checkbox" data-setting="loop" />
  1186 					<span><?php _e( 'Loop' ); ?></span>
  1266 					<span><?php _e( 'Loop' ); ?></span>
  1187 				</label>
  1267 				</label>
  1188 
  1268 
  1189 				<label class="setting" data-setting="content">
  1269 				<div class="setting" data-setting="content">
  1190 					<span><?php _e( 'Tracks (subtitles, captions, descriptions, chapters, or metadata)' ); ?></span>
       
  1191 					<#
  1270 					<#
  1192 					var content = '';
  1271 					var content = '';
  1193 					if ( ! _.isEmpty( data.model.content ) ) {
  1272 					if ( ! _.isEmpty( data.model.content ) ) {
  1194 						var tracks = jQuery( data.model.content ).filter( 'track' );
  1273 						var tracks = jQuery( data.model.content ).filter( 'track' );
  1195 						_.each( tracks.toArray(), function (track) {
  1274 						_.each( tracks.toArray(), function (track) {
  1196 							content += track.outerHTML; #>
  1275 							content += track.outerHTML; #>
  1197 						<p>
  1276 						<label for="video-track"><?php _e( 'Tracks (subtitles, captions, descriptions, chapters, or metadata)' ); ?></span>
  1198 							<input class="content-track" type="text" value="{{ track.outerHTML }}" />
  1277 						<input class="content-track" type="text" id="video-track" readonly value="{{ track.outerHTML }}" />
  1199 							<button type="button" class="button-link remove-setting remove-track"><?php _ex( 'Remove video track', 'media' ); ?></button>
  1278 						<button type="button" class="button-link remove-setting remove-track"><?php _ex( 'Remove video track', 'media' ); ?></button>
  1200 						</p>
       
  1201 						<# } ); #>
  1279 						<# } ); #>
  1202 					<# } else { #>
  1280 					<# } else { #>
       
  1281 					<span><?php _e( 'Tracks (subtitles, captions, descriptions, chapters, or metadata)' ); ?></span>
  1203 					<em><?php _e( 'There are no associated subtitles.' ); ?></em>
  1282 					<em><?php _e( 'There are no associated subtitles.' ); ?></em>
  1204 					<# } #>
  1283 					<# } #>
  1205 					<textarea class="hidden content-setting">{{ content }}</textarea>
  1284 					<textarea class="hidden content-setting">{{ content }}</textarea>
  1206 				</label>
  1285 				</div>
  1207 			</div>
  1286 			</div>
  1208 		</div>
  1287 		</div>
  1209 	</script>
  1288 	</script>
  1210 
  1289 
  1211 	<script type="text/html" id="tmpl-editor-gallery">
  1290 	<script type="text/html" id="tmpl-editor-gallery">
  1213 			<div class="gallery gallery-columns-{{ data.columns }}">
  1292 			<div class="gallery gallery-columns-{{ data.columns }}">
  1214 				<# _.each( data.attachments, function( attachment, index ) { #>
  1293 				<# _.each( data.attachments, function( attachment, index ) { #>
  1215 					<dl class="gallery-item">
  1294 					<dl class="gallery-item">
  1216 						<dt class="gallery-icon">
  1295 						<dt class="gallery-icon">
  1217 							<# if ( attachment.thumbnail ) { #>
  1296 							<# if ( attachment.thumbnail ) { #>
  1218 								<img src="{{ attachment.thumbnail.url }}" width="{{ attachment.thumbnail.width }}" height="{{ attachment.thumbnail.height }}" alt="" />
  1297 								<img src="{{ attachment.thumbnail.url }}" width="{{ attachment.thumbnail.width }}" height="{{ attachment.thumbnail.height }}" alt="{{ attachment.alt }}" />
  1219 							<# } else { #>
  1298 							<# } else { #>
  1220 								<img src="{{ attachment.url }}" alt="" />
  1299 								<img src="{{ attachment.url }}" alt="{{ attachment.alt }}" />
  1221 							<# } #>
  1300 							<# } #>
  1222 						</dt>
  1301 						</dt>
  1223 						<# if ( attachment.caption ) { #>
  1302 						<# if ( attachment.caption ) { #>
  1224 							<dd class="wp-caption-text gallery-caption">
  1303 							<dd class="wp-caption-text gallery-caption">
  1225 								{{{ data.verifyHTML( attachment.caption ) }}}
  1304 								{{{ data.verifyHTML( attachment.caption ) }}}