WordPress.org
Get WordPress

Make WordPress Core


Ignore:
Timestamp:
06/07/2019 08:43:26 PM (5 years ago)
Author:
afercia
Message:

Accessibility: Improve accessibility of all the media views form controls.

  • changes the media views form controls to have explicitly associated labels with for/id attributes
  • adds a few missing labels / aria-labels
  • improves a few existing labels / aria-labels
  • improves semantics in a few places, by adding visually hidden headings, fieldset + legend elements, aria-describedby attributes
  • improves the image custom size input fields and their labelling
  • adds role="status" to the "saved" indicator so that status messages are announced to assistive technologies
  • swaps the columns source order in the image details template, to make visual and DOM order match
  • swaps the "Replace" and "Back" buttons source order in the Replace Image view, to make visual and DOM order match
  • gallery settings: move checkbox label to the right: checkboxes are supposed to have labels on the right
  • merge similar strings, unified to "Drop files to upload" (removed "Drop files here", and "Drop files anywhere to upload")
  • makes the "upload-ui" consistent across the media views
  • hides the IE 11 "X" ::-ms-clear button in the Insert from URL field, as it conflicts with the uploading spinner
  • adds comments to all the media templates to clarify their usage
  • slightly increases vertical spacing between form fields in the media sidebar
  • removes some CSS selectors introduced as backwards compatibility for WordPress pre-4.4
  • removes some CSS still targeting Internet Explorer 7 and 8

Fixes #47141.
Fixes #47122.

File:
1 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-includes/media-template.php

    r45381 r45499  
    175175    );
    176176    ?>
    177     <!--[if lte IE 8]>
    178     <style>
    179         .attachment:focus {
    180             outline: #1e8cbe solid;
    181         }
    182         .selected.attachment {
    183             outline: #1e8cbe solid;
    184         }
    185     </style>
    186     <![endif]-->
     177
     178    <?php // Template for the media frame: used both in the media grid and in the media modal. ?>
    187179    <script type="text/html" id="tmpl-media-frame">
    188180        <div class="media-frame-menu"></div>
    … …  
    194186    </script>
    195187
     188    <?php // Template for the media modal. ?>
    196189    <script type="text/html" id="tmpl-media-modal">
    197190        <div tabindex="0" class="<?php echo $class; ?>">
    … …  
    202195    </script>
    203196
     197    <?php // Template for the window uploader, used for example in the media grid. ?>
    204198    <script type="text/html" id="tmpl-uploader-window">
    205199        <div class="uploader-window-content">
    206             <h1><?php _e( 'Drop files to upload' ); ?></h1>
    207         </div>
    208     </script>
    209 
     200            <div class="uploader-editor-title"><?php _e( 'Drop files to upload' ); ?></div>
     201        </div>
     202    </script>
     203
     204    <?php // Template for the editor uploader. ?>
    210205    <script type="text/html" id="tmpl-uploader-editor">
    211206        <div class="uploader-editor-content">
    … …  
    214209    </script>
    215210
     211    <?php // Template for the inline uploader, used for example in the Media Library admin page - Add New. ?>
    216212    <script type="text/html" id="tmpl-uploader-inline">
    217213        <# var messageClass = data.message ? 'has-upload-message' : 'no-upload-message'; #>
    … …  
    224220        <# } #>
    225221        <?php if ( ! _device_can_upload() ) : ?>
    226             <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>
     222            <div class="upload-ui">
     223                <h2 class="upload-instructions"><?php _e( 'Your browseer cannot upload files' ); ?></h2>
     224                <p><?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/' ); ?></p>
     225            </div>
    227226        <?php elseif ( is_multisite() && ! is_upload_space_available() ) : ?>
    228             <h2 class="upload-instructions"><?php _e( 'Upload Limit Exceeded' ); ?></h2>
    229             <?php
    230             /** This action is documented in wp-admin/includes/media.php */
    231             do_action( 'upload_ui_over_quota' );
    232             ?>
    233 
     227            <div class="upload-ui">
     228                <h2 class="upload-instructions"><?php _e( 'Upload Limit Exceeded' ); ?></h2>
     229                <?php
     230                /** This action is documented in wp-admin/includes/media.php */
     231                do_action( 'upload_ui_over_quota' );
     232                ?>
     233            </div>
    234234        <?php else : ?>
    235235            <div class="upload-ui">
    236                 <h2 class="upload-instructions drop-instructions"><?php _e( 'Drop files anywhere to upload' ); ?></h2>
     236                <h2 class="upload-instructions drop-instructions"><?php _e( 'Drop files to upload' ); ?></h2>
    237237                <p class="upload-instructions drop-instructions"><?php _ex( 'or', 'Uploader: Drop files here - or - Select Files' ); ?></p>
    238238                <button type="button" class="browser button button-hero"><?php _e( 'Select Files' ); ?></button>
    … …  
    287287    </script>
    288288
     289    <?php // Template for the view switchers, used for example in the Media Grid. ?>
    289290    <script type="text/html" id="tmpl-media-library-view-switcher">
    290291        <a href="<?php echo esc_url( add_query_arg( 'mode', 'list', $_SERVER['REQUEST_URI'] ) ); ?>" class="view-list">
    … …  
    296297    </script>
    297298
     299    <?php // Template for the uploading status UI. ?>
    298300    <script type="text/html" id="tmpl-uploader-status">
    299301        <h2><?php _e( 'Uploading' ); ?></h2>
    … …  
    311313    </script>
    312314
     315    <?php // Template for the uploading status errors. ?>
    313316    <script type="text/html" id="tmpl-uploader-status-error">
    314317        <span class="upload-error-filename">{{{ data.filename }}}</span>
    … …  
    316319    </script>
    317320
     321    <?php // Template for the Attachment Details layout in the media browser. ?>
    318322    <script type="text/html" id="tmpl-edit-attachment-frame">
    319323        <div class="edit-media-header">
    320             <button class="left dashicons <# if ( ! data.hasPrevious ) { #> disabled <# } #>"><span class="screen-reader-text"><?php _e( 'Edit previous media item' ); ?></span></button>
    321             <button class="right dashicons <# if ( ! data.hasNext ) { #> disabled <# } #>"><span class="screen-reader-text"><?php _e( 'Edit next media item' ); ?></span></button>
     324            <button class="left dashicons <# if ( ! data.hasPrevious ) { #> disabled <# } #>"><span class="screen-reader-text"><?php _e( 'Previous' ); ?></span></button>
     325            <button class="right dashicons <# if ( ! data.hasNext ) { #> disabled <# } #>"><span class="screen-reader-text"><?php _e( 'Next' ); ?></span></button>
    322326        </div>
    323327        <div class="media-frame-title"></div>
    … …  
    325329    </script>
    326330
     331    <?php // Template for the Attachment Details two columns layout. ?>
    327332    <script type="text/html" id="tmpl-attachment-details-two-column">
    328333        <div class="attachment-media-view {{ data.orientation }}">
     334            <h2 class="screen-reader-text"><?php _e( 'Attachment Preview' ); ?></h2>
    329335            <div class="thumbnail thumbnail-{{ data.type }}">
    330336                <# if ( data.uploading ) { #>
    … …  
    366372                    <button type="button" class="button edit-attachment"><?php _e( 'Edit Image' ); ?></button>
    367373                    <# } else if ( 'pdf' === data.subtype && data.sizes ) { #>
    368                     <?php _e( 'Document Preview' ); ?>
     374                    <p><?php _e( 'Document Preview' ); ?></p>
    369375                    <# } #>
    370376                </div>
    … …  
    372378        </div>
    373379        <div class="attachment-info">
    374             <span class="settings-save-status">
     380            <span class="settings-save-status" role="status">
    375381                <span class="spinner"></span>
    376382                <span class="saved"><?php esc_html_e( 'Saved.' ); ?></span>
    377383            </span>
    378384            <div class="details">
     385                <h2 class="screen-reader-text"><?php _e( 'Details' ); ?></h2>
    379386                <div class="filename"><strong><?php _e( 'File name:' ); ?></strong> {{ data.filename }}</div>
    380387                <div class="filename"><strong><?php _e( 'File type:' ); ?></strong> {{ data.mime }}</div>
    … …  
    419426                <# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
    420427                <# if ( 'image' === data.type ) { #>
    421                     <label class="setting" data-setting="alt">
    422                         <span class="name"><?php _e( 'Alternative Text' ); ?></span>
    423                         <input type="text" value="{{ data.alt }}" aria-describedby="alt-text-description" {{ maybeReadOnly }} />
    424                     </label>
     428                    <span class="setting has-description" data-setting="alt">
     429                        <label for="attachment-details-two-column-alt-text" class="name"><?php _e( 'Alternative Text' ); ?></label>
     430                        <input type="text" id="attachment-details-two-column-alt-text" value="{{ data.alt }}" aria-describedby="alt-text-description" {{ maybeReadOnly }} />
     431                    </span>
    425432                    <p class="description" id="alt-text-description"><?php echo $alt_text_description; ?></p>
    426433                <# } #>
    427434                <?php if ( post_type_supports( 'attachment', 'title' ) ) : ?>
    428                 <label class="setting" data-setting="title">
    429                     <span class="name"><?php _e( 'Title' ); ?></span>
    430                     <input type="text" value="{{ data.title }}" {{ maybeReadOnly }} />
    431                 </label>
     435                <span class="setting" data-setting="title">
     436                    <label for="attachment-details-two-column-title" class="name"><?php _e( 'Title' ); ?></label>
     437                    <input type="text" id="attachment-details-two-column-title" value="{{ data.title }}" {{ maybeReadOnly }} />
     438                </span>
    432439                <?php endif; ?>
    433440                <# if ( 'audio' === data.type ) { #>
    … …  
    438445                ) as $key => $label ) :
    439446                    ?>
    440                 <label class="setting" data-setting="<?php echo esc_attr( $key ); ?>">
    441                     <span class="name"><?php echo $label; ?></span>
    442                     <input type="text" value="{{ data.<?php echo $key; ?> || data.meta.<?php echo $key; ?> || '' }}" />
    443                 </label>
     447                <span class="setting" data-setting="<?php echo esc_attr( $key ); ?>">
     448                    <label for="attachment-details-two-column-<?php echo esc_attr( $key ); ?>" class="name"><?php echo $label; ?></label>
     449                    <input type="text" id="attachment-details-two-column-<?php echo esc_attr( $key ); ?>" value="{{ data.<?php echo $key; ?> || data.meta.<?php echo $key; ?> || '' }}" />
     450                </span>
    444451                <?php endforeach; ?>
    445452                <# } #>
    446                 <label class="setting" data-setting="caption">
    447                     <span class="name"><?php _e( 'Caption' ); ?></span>
    448                     <textarea {{ maybeReadOnly }}>{{ data.caption }}</textarea>
    449                 </label>
    450                 <label class="setting" data-setting="description">
    451                     <span class="name"><?php _e( 'Description' ); ?></span>
    452                     <textarea {{ maybeReadOnly }}>{{ data.description }}</textarea>
    453                 </label>
    454                 <div class="setting">
     453                <span class="setting" data-setting="caption">
     454                    <label for="attachment-details-two-column-caption" class="name"><?php _e( 'Caption' ); ?></label>
     455                    <textarea id="attachment-details-two-column-caption" {{ maybeReadOnly }}>{{ data.caption }}</textarea>
     456                </span>
     457                <span class="setting" data-setting="description">
     458                    <label for="attachment-details-two-column-description" class="name"><?php _e( 'Description' ); ?></label>
     459                    <textarea id="attachment-details-two-column-description" {{ maybeReadOnly }}>{{ data.description }}</textarea>
     460                </span>
     461                <span class="setting">
    455462                    <span class="name"><?php _e( 'Uploaded By' ); ?></span>
    456463                    <span class="value">{{ data.authorName }}</span>
    457                 </div>
     464                </span>
    458465                <# if ( data.uploadedToTitle ) { #>
    459                     <div class="setting">
     466                    <span class="setting">
    460467                        <span class="name"><?php _e( 'Uploaded To' ); ?></span>
    461468                        <# if ( data.uploadedToLink ) { #>
    … …  
    464471                            <span class="value">{{ data.uploadedToTitle }}</span>
    465472                        <# } #>
    466                     </div>
    467                 <# } #>
    468                 <label class="setting" data-setting="url">
    469                     <span class="name"><?php _e( 'Copy Link' ); ?></span>
    470                     <input type="text" value="{{ data.url }}" readonly />
    471                 </label>
     473                    </span>
     474                <# } #>
     475                <span class="setting" data-setting="url">
     476                    <label for="attachment-details-two-column-copy-link" class="name"><?php _e( 'Copy Link' ); ?></label>
     477                    <input type="text" id="attachment-details-two-column-copy-link" value="{{ data.url }}" readonly />
     478                </span>
    472479                <div class="attachment-compat"></div>
    473480            </div>
    … …  
    490497                <# } #>
    491498            </div>
    492 
    493         </div>
    494     </script>
    495 
     499        </div>
     500    </script>
     501
     502    <?php // Template for the Attachment "thumbnails" in the Media Grid. ?>
    496503    <script type="text/html" id="tmpl-attachment">
    497504        <div class="attachment-preview js--select-attachment type-{{ data.type }} subtype-{{ data.subtype }} {{ data.orientation }}">
    … …  
    530537            if ( 'image' === data.type ) { #>
    531538                <input type="text" value="{{ data.caption }}" class="describe" data-setting="caption"
    532                     placeholder="<?php esc_attr_e( 'Caption this image&hellip;' ); ?>" {{ maybeReadOnly }} />
     539                    aria-label="<?php esc_attr_e( 'Caption' ); ?>"
     540                    placeholder="<?php esc_attr_e( 'Caption&hellip;' ); ?>" {{ maybeReadOnly }} />
    533541            <# } else { #>
    534542                <input type="text" value="{{ data.title }}" class="describe" data-setting="title"
    535543                    <# if ( 'video' === data.type ) { #>
    536                         placeholder="<?php esc_attr_e( 'Describe this video&hellip;' ); ?>"
     544                        aria-label="<?php esc_attr_e( 'Video title' ); ?>"
     545                        placeholder="<?php esc_attr_e( 'Video title&hellip;' ); ?>"
    537546                    <# } else if ( 'audio' === data.type ) { #>
    538                         placeholder="<?php esc_attr_e( 'Describe this audio file&hellip;' ); ?>"
     547                        aria-label="<?php esc_attr_e( 'Audio title' ); ?>"
     548                        placeholder="<?php esc_attr_e( 'Audio title&hellip;' ); ?>"
    539549                    <# } else { #>
    540                         placeholder="<?php esc_attr_e( 'Describe this media file&hellip;' ); ?>"
     550                        aria-label="<?php esc_attr_e( 'Media title' ); ?>"
     551                        placeholder="<?php esc_attr_e( 'Media title&hellip;' ); ?>"
    541552                    <# } #> {{ maybeReadOnly }} />
    542553            <# }
    … …  
    544555    </script>
    545556
     557    <?php // Template for the Attachment details, used for example in the sidebar. ?>
    546558    <script type="text/html" id="tmpl-attachment-details">
    547559        <h2>
    548560            <?php _e( 'Attachment Details' ); ?>
    549             <span class="settings-save-status">
     561            <span class="settings-save-status" role="status">
    550562                <span class="spinner"></span>
    551563                <span class="saved"><?php esc_html_e( 'Saved.' ); ?></span>
    … …  
    608620            </div>
    609621        </div>
    610 
    611622        <# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
    612623        <# if ( 'image' === data.type ) { #>
    613             <label class="setting" data-setting="alt">
    614                 <span class="name"><?php _e( 'Alt Text' ); ?></span>
    615                 <input type="text" value="{{ data.alt }}" aria-describedby="alt-text-description" {{ maybeReadOnly }} />
    616             </label>
     624            <span class="setting has-description" data-setting="alt">
     625                <label for="attachment-details-alt-text" class="name"><?php _e( 'Alt Text' ); ?></label>
     626                <input type="text" id="attachment-details-alt-text" value="{{ data.alt }}" aria-describedby="alt-text-description" {{ maybeReadOnly }} />
     627            </span>
    617628            <p class="description" id="alt-text-description"><?php echo $alt_text_description; ?></p>
    618629        <# } #>
    619630        <?php if ( post_type_supports( 'attachment', 'title' ) ) : ?>
    620         <label class="setting" data-setting="title">
    621             <span class="name"><?php _e( 'Title' ); ?></span>
    622             <input type="text" value="{{ data.title }}" {{ maybeReadOnly }} />
    623         </label>
     631        <span class="setting" data-setting="title">
     632            <label for="attachment-details-title" class="name"><?php _e( 'Title' ); ?></label>
     633            <input type="text" id="attachment-details-title" value="{{ data.title }}" {{ maybeReadOnly }} />
     634        </span>
    624635        <?php endif; ?>
    625636        <# if ( 'audio' === data.type ) { #>
    … …  
    630641        ) as $key => $label ) :
    631642            ?>
    632         <label class="setting" data-setting="<?php echo esc_attr( $key ); ?>">
    633             <span class="name"><?php echo $label; ?></span>
    634             <input type="text" value="{{ data.<?php echo $key; ?> || data.meta.<?php echo $key; ?> || '' }}" />
    635         </label>
     643        <span class="setting" data-setting="<?php echo esc_attr( $key ); ?>">
     644            <label for="attachment-details-<?php echo esc_attr( $key ); ?>" class="name"><?php echo $label; ?></label>
     645            <input type="text" id="attachment-details-<?php echo esc_attr( $key ); ?>" value="{{ data.<?php echo $key; ?> || data.meta.<?php echo $key; ?> || '' }}" />
     646        </span>
    636647        <?php endforeach; ?>
    637648        <# } #>
    638         <label class="setting" data-setting="caption">
    639             <span class="name"><?php _e( 'Caption' ); ?></span>
    640             <textarea {{ maybeReadOnly }}>{{ data.caption }}</textarea>
    641         </label>
    642         <label class="setting" data-setting="description">
    643             <span class="name"><?php _e( 'Description' ); ?></span>
    644             <textarea {{ maybeReadOnly }}>{{ data.description }}</textarea>
    645         </label>
    646         <label class="setting" data-setting="url">
    647             <span class="name"><?php _e( 'Copy Link' ); ?></span>
    648             <input type="text" value="{{ data.url }}" readonly />
    649         </label>
    650     </script>
    651 
     649        <span class="setting" data-setting="caption">
     650            <label for="attachment-details-caption" class="name"><?php _e( 'Caption' ); ?></label>
     651            <textarea id="attachment-details-caption" {{ maybeReadOnly }}>{{ data.caption }}</textarea>
     652        </span>
     653        <span class="setting" data-setting="description">
     654            <label for="attachment-details-description" class="name"><?php _e( 'Description' ); ?></label>
     655            <textarea id="attachment-details-description" {{ maybeReadOnly }}>{{ data.description }}</textarea>
     656        </span>
     657        <span class="setting" data-setting="url">
     658            <label for="attachment-details-copy-link" class="name"><?php _e( 'Copy Link' ); ?></label>
     659            <input type="text" id="attachment-details-copy-link" value="{{ data.url }}" readonly />
     660        </span>
     661    </script>
     662
     663    <?php // Template for the Selection status bar. ?>
    652664    <script type="text/html" id="tmpl-media-selection">
    653665        <div class="selection-info">
    … …  
    663675    </script>
    664676
     677    <?php // Template for the Attachment display settings, used for example in the sidebar. ?>
    665678    <script type="text/html" id="tmpl-attachment-display-settings">
    666679        <h2><?php _e( 'Attachment Display Settings' ); ?></h2>
    667680
    668681        <# if ( 'image' === data.type ) { #>
    669             <label class="setting align">
    670                 <span><?php _e( 'Alignment' ); ?></span>
    671                 <select class="alignment"
     682            <span class="setting align">
     683                <label for="attachment-display-settings-alignment" class="name"><?php _e( 'Alignment' ); ?></label>
     684                <select id="attachment-display-settings-alignment" class="alignment"
    672685                    data-setting="align"
    673686                    <# if ( data.userSettings ) { #>
    … …  
    688701                    </option>
    689702                </select>
     703            </span>
     704        <# } #>
     705
     706        <span class="setting">
     707            <label for="attachment-display-settings-link-to" class="name">
     708                <# if ( data.model.canEmbed ) { #>
     709                    <?php _e( 'Embed or Link' ); ?>
     710                <# } else { #>
     711                    <?php _e( 'Link To' ); ?>
     712                <# } #>
    690713            </label>
    691         <# } #>
    692 
    693         <div class="setting">
    694             <label>
     714            <select id="attachment-display-settings-link-to" class="link-to"
     715                data-setting="link"
     716                <# if ( data.userSettings && ! data.model.canEmbed ) { #>
     717                    data-user-setting="urlbutton"
     718                <# } #>>
     719
     720            <# if ( data.model.canEmbed ) { #>
     721                <option value="embed" selected>
     722                    <?php esc_html_e( 'Embed Media Player' ); ?>
     723                </option>
     724                <option value="file">
     725            <# } else { #>
     726                <option value="none" selected>
     727                    <?php esc_html_e( 'None' ); ?>
     728                </option>
     729                <option value="file">
     730            <# } #>
    695731                <# if ( data.model.canEmbed ) { #>
    696                     <span><?php _e( 'Embed or Link' ); ?></span>
     732                    <?php esc_html_e( 'Link to Media File' ); ?>
    697733                <# } else { #>
    698                     <span><?php _e( 'Link To' ); ?></span>
    699                 <# } #>
    700 
    701                 <select class="link-to"
    702                     data-setting="link"
    703                     <# if ( data.userSettings && ! data.model.canEmbed ) { #>
    704                         data-user-setting="urlbutton"
    705                     <# } #>>
    706 
     734                    <?php esc_html_e( 'Media File' ); ?>
     735                <# } #>
     736                </option>
     737                <option value="post">
    707738                <# if ( data.model.canEmbed ) { #>
    708                     <option value="embed" selected>
    709                         <?php esc_html_e( 'Embed Media Player' ); ?>
    710                     </option>
    711                     <option value="file">
     739                    <?php esc_html_e( 'Link to Attachment Page' ); ?>
    712740                <# } else { #>
    713                     <option value="none" selected>
    714                         <?php esc_html_e( 'None' ); ?>
    715                     </option>
    716                     <option value="file">
    717                 <# } #>
    718                     <# if ( data.model.canEmbed ) { #>
    719                         <?php esc_html_e( 'Link to Media File' ); ?>
    720                     <# } else { #>
    721                         <?php esc_html_e( 'Media File' ); ?>
    722                     <# } #>
    723                     </option>
    724                     <option value="post">
    725                     <# if ( data.model.canEmbed ) { #>
    726                         <?php esc_html_e( 'Link to Attachment Page' ); ?>
    727                     <# } else { #>
    728                         <?php esc_html_e( 'Attachment Page' ); ?>
    729                     <# } #>
    730                     </option>
    731                 <# if ( 'image' === data.type ) { #>
    732                     <option value="custom">
    733                         <?php esc_html_e( 'Custom URL' ); ?>
    734                     </option>
    735                 <# } #>
    736                 </select>
    737             </label>
    738             <input type="text" class="link-to-custom" data-setting="linkUrl" />
    739         </div>
     741                    <?php esc_html_e( 'Attachment Page' ); ?>
     742                <# } #>
     743                </option>
     744            <# if ( 'image' === data.type ) { #>
     745                <option value="custom">
     746                    <?php esc_html_e( 'Custom URL' ); ?>
     747                </option>
     748            <# } #>
     749            </select>
     750        </span>
     751        <span class="setting">
     752            <label for="attachment-display-settings-link-to-custom" class="name"><?php _e( 'URL' ); ?></label>
     753            <input type="text" id="attachment-display-settings-link-to-custom" class="link-to-custom" data-setting="linkUrl" />
     754        </span>
    740755
    741756        <# if ( 'undefined' !== typeof data.sizes ) { #>
    742             <label class="setting">
    743                 <span><?php _e( 'Size' ); ?></span>
    744                 <select class="size" name="size"
     757            <span class="setting">
     758                <label for="attachment-display-settings-size" class="name"><?php _e( 'Size' ); ?></label>
     759                <select id="attachment-display-settings-size" class="size" name="size"
    745760                    data-setting="size"
    746761                    <# if ( data.userSettings ) { #>
    … …  
    770785                    <?php endforeach; ?>
    771786                </select>
    772             </label>
     787            </span>
    773788        <# } #>
    774789    </script>
    775790
     791    <?php // Template for the Gallery settings, used for example in the sidebar. ?>
    776792    <script type="text/html" id="tmpl-gallery-settings">
    777793        <h2><?php _e( 'Gallery Settings' ); ?></h2>
    778794
    779         <label class="setting">
    780             <span><?php _e( 'Link To' ); ?></span>
    781             <select class="link-to"
     795        <span class="setting">
     796            <label for="gallery-settings-link-to" class="name"><?php _e( 'Link To' ); ?></label>
     797            <select id="gallery-settings-link-to" class="link-to"
    782798                data-setting="link"
    783799                <# if ( data.userSettings ) { #>
    … …  
    797813                </option>
    798814            </select>
    799         </label>
    800 
    801         <label class="setting">
    802             <span><?php _e( 'Columns' ); ?></span>
    803             <select class="columns" name="columns"
     815        </span>
     816
     817        <span class="setting">
     818            <label for="gallery-settings-columns" class="name select-label-inline"><?php _e( 'Columns' ); ?></label>
     819            <select id="gallery-settings-columns" class="columns" name="columns"
    804820                data-setting="columns">
    805821                <?php for ( $i = 1; $i <= 9; $i++ ) : ?>
    … …  
    811827                <?php endfor; ?>
    812828            </select>
    813         </label>
    814 
    815         <label class="setting">
    816             <span><?php _e( 'Random Order' ); ?></span>
    817             <input type="checkbox" data-setting="_orderbyRandom" />
    818         </label>
    819 
    820         <label class="setting size">
    821             <span><?php _e( 'Size' ); ?></span>
    822             <select class="size" name="size"
     829        </span>
     830
     831        <span class="setting">
     832            <input type="checkbox" id="gallery-settings-random-order" data-setting="_orderbyRandom" />
     833            <label for="gallery-settings-random-order" class="checkbox-label-inline"><?php _e( 'Random Order' ); ?></label>
     834        </span>
     835
     836        <span class="setting size">
     837            <label for="gallery-settings-size" class="name"><?php _e( 'Size' ); ?></label>
     838            <select id="gallery-settings-size" class="size" name="size"
    823839                data-setting="size"
    824840                <# if ( data.userSettings ) { #>
    … …  
    845861                <?php endforeach; ?>
    846862            </select>
    847         </label>
    848     </script>
    849 
     863        </span>
     864    </script>
     865
     866    <?php // Template for the Playlists settings, used for example in the sidebar. ?>
    850867    <script type="text/html" id="tmpl-playlist-settings">
    851868        <h2><?php _e( 'Playlist Settings' ); ?></h2>
    … …  
    854871            isVideo = 'video' === data.controller.get('library').props.get('type'); #>
    855872
    856         <label class="setting">
    857             <input type="checkbox" data-setting="tracklist" <# if ( emptyModel ) { #>
     873        <span class="setting">
     874            <input type="checkbox" id="playlist-settings-show-list" data-setting="tracklist" <# if ( emptyModel ) { #>
    858875                checked="checked"
    859876            <# } #> />
    860             <# if ( isVideo ) { #>
    861             <span><?php _e( 'Show Video List' ); ?></span>
    862             <# } else { #>
    863             <span><?php _e( 'Show Tracklist' ); ?></span>
    864             <# } #>
    865         </label>
     877            <label for="playlist-settings-show-list" class="checkbox-label-inline">
     878                <# if ( isVideo ) { #>
     879                <?php _e( 'Show Video List' ); ?>
     880                <# } else { #>
     881                <?php _e( 'Show Tracklist' ); ?>
     882                <# } #>
     883            </label>
     884        </span>
    866885
    867886        <# if ( ! isVideo ) { #>
    868         <label class="setting">
    869             <input type="checkbox" data-setting="artists" <# if ( emptyModel ) { #>
     887        <span class="setting">
     888            <input type="checkbox" id="playlist-settings-show-artist" data-setting="artists" <# if ( emptyModel ) { #>
    870889                checked="checked"
    871890            <# } #> />
    872             <span><?php _e( 'Show Artist Name in Tracklist' ); ?></span>
    873         </label>
     891            <label for="playlist-settings-show-artist" class="checkbox-label-inline">
     892                <?php _e( 'Show Artist Name in Tracklist' ); ?>
     893            </label>
     894        </span>
    874895        <# } #>
    875896
    876         <label class="setting">
    877             <input type="checkbox" data-setting="images" <# if ( emptyModel ) { #>
     897        <span class="setting">
     898            <input type="checkbox" id="playlist-settings-show-images" data-setting="images" <# if ( emptyModel ) { #>
    878899                checked="checked"
    879900            <# } #> />
    880             <span><?php _e( 'Show Images' ); ?></span>
    881         </label>
    882     </script>
    883 
     901            <label for="playlist-settings-show-images" class="checkbox-label-inline">
     902                <?php _e( 'Show Images' ); ?>
     903            </label>
     904        </span>
     905    </script>
     906
     907    <?php // Template for the "Insert from URL" layout. ?>
    884908    <script type="text/html" id="tmpl-embed-link-settings">
    885         <label class="setting link-text">
    886             <span><?php _e( 'Link Text' ); ?></span>
    887             <input type="text" class="alignment" data-setting="linkText" />
    888         </label>
     909        <span class="setting link-text">
     910            <label for="embed-link-settings-link-text" class="name"><?php _e( 'Link Text' ); ?></label>
     911            <input type="text" id="embed-link-settings-link-text" class="alignment" data-setting="linkText" />
     912        </span>
    889913        <div class="embed-container" style="display: none;">
    890914            <div class="embed-preview"></div>
    … …  
    892916    </script>
    893917
     918    <?php // Template for the "Insert from URL" image preview and details. ?>
    894919    <script type="text/html" id="tmpl-embed-image-settings">
    895         <div class="thumbnail">
    896             <img src="{{ data.model.url }}" draggable="false" alt="" />
    897         </div>
    898 
    899         <label class="setting alt-text has-description">
    900             <span><?php _e( 'Alternative Text' ); ?></span>
    901             <input type="text" data-setting="alt" aria-describedby="alt-text-description" />
    902         </label>
     920        <div class="wp-clearfix">
     921            <div class="thumbnail">
     922                <img src="{{ data.model.url }}" draggable="false" alt="" />
     923            </div>
     924        </div>
     925
     926        <span class="setting alt-text has-description">
     927            <label for="embed-image-settings-alt-text" class="name"><?php _e( 'Alternative Text' ); ?></label>
     928            <input type="text" id="embed-image-settings-alt-text" data-setting="alt" aria-describedby="alt-text-description" />
     929        </span>
    903930        <p class="description" id="alt-text-description"><?php echo $alt_text_description; ?></p>
    904931
    … …  
    907934        if ( ! apply_filters( 'disable_captions', '' ) ) :
    908935            ?>
    909             <label class="setting caption">
    910                 <span><?php _e( 'Caption' ); ?></span>
    911                 <textarea data-setting="caption" />
    912             </label>
     936            <span class="setting caption">
     937                <label for="embed-image-settings-caption" class="name"><?php _e( 'Caption' ); ?></label>
     938                <textarea id="embed-image-settings-caption" data-setting="caption" />
     939            </span>
    913940        <?php endif; ?>
    914941
    915         <div class="setting align">
    916             <span><?php _e( 'Align' ); ?></span>
    917             <div class="button-group button-large" data-setting="align">
    918                 <button class="button" value="left">
    919                     <?php esc_html_e( 'Left' ); ?>
    920                 </button>
    921                 <button class="button" value="center">
    922                     <?php esc_html_e( 'Center' ); ?>
    923                 </button>
    924                 <button class="button" value="right">
    925                     <?php esc_html_e( 'Right' ); ?>
    926                 </button>
    927                 <button class="button active" value="none">
    928                     <?php esc_html_e( 'None' ); ?>
    929                 </button>
    930             </div>
    931         </div>
    932 
    933         <div class="setting link-to">
    934             <span><?php _e( 'Link To' ); ?></span>
    935             <div class="button-group button-large" data-setting="link">
    936                 <button class="button" value="file">
    937                     <?php esc_html_e( 'Image URL' ); ?>
    938                 </button>
    939                 <button class="button" value="custom">
    940                     <?php esc_html_e( 'Custom URL' ); ?>
    941                 </button>
    942                 <button class="button active" value="none">
    943                     <?php esc_html_e( 'None' ); ?>
    944                 </button>
    945             </div>
    946             <input type="text" class="link-to-custom" data-setting="linkUrl" />
    947         </div>
    948     </script>
    949 
     942        <fieldset class="setting-group">
     943            <legend class="name"><?php _e( 'Align' ); ?></legend>
     944            <span class="setting align">
     945                <span class="button-group button-large" data-setting="align">
     946                    <button class="button" value="left">
     947                        <?php esc_html_e( 'Left' ); ?>
     948                    </button>
     949                    <button class="button" value="center">
     950                        <?php esc_html_e( 'Center' ); ?>
     951                    </button>
     952                    <button class="button" value="right">
     953                        <?php esc_html_e( 'Right' ); ?>
     954                    </button>
     955                    <button class="button active" value="none">
     956                        <?php esc_html_e( 'None' ); ?>
     957                    </button>
     958                </span>
     959            </span>
     960        </fieldset>
     961
     962        <fieldset class="setting-group">
     963            <legend class="name"><?php _e( 'Link To' ); ?></legend>
     964            <span class="setting link-to">
     965                <span class="button-group button-large" data-setting="link">
     966                    <button class="button" value="file">
     967                        <?php esc_html_e( 'Image URL' ); ?>
     968                    </button>
     969                    <button class="button" value="custom">
     970                        <?php esc_html_e( 'Custom URL' ); ?>
     971                    </button>
     972                    <button class="button active" value="none">
     973                        <?php esc_html_e( 'None' ); ?>
     974                    </button>
     975                </span>
     976            </span>
     977            <span class="setting">
     978                <label for="embed-image-settings-link-to-custom" class="name"><?php _e( 'URL' ); ?></label>
     979                <input type="text" id="embed-image-settings-link-to-custom" class="link-to-custom" data-setting="linkUrl" />
     980            </span>
     981        </fieldset>
     982    </script>
     983
     984    <?php // Template for the Image details, used for example in the editor. ?>
    950985    <script type="text/html" id="tmpl-image-details">
    951986        <div class="media-embed">
    952987            <div class="embed-media-settings">
    953                 <div class="column-image">
    954                     <div class="image">
    955                         <img src="{{ data.model.url }}" draggable="false" alt="" />
    956 
    957                         <# if ( data.attachment && window.imageEdit ) { #>
    958                             <div class="actions">
    959                                 <input type="button" class="edit-attachment button" value="<?php esc_attr_e( 'Edit Original' ); ?>" />
    960                                 <input type="button" class="replace-attachment button" value="<?php esc_attr_e( 'Replace' ); ?>" />
    961                             </div>
    962                         <# } #>
    963                     </div>
    964                 </div>
    965988                <div class="column-settings">
    966                     <label class="setting alt-text has-description">
    967                         <span><?php _e( 'Alternative Text' ); ?></span>
    968                         <input type="text" data-setting="alt" value="{{ data.model.alt }}" aria-describedby="alt-text-description" />
    969                     </label>
     989                    <span class="setting alt-text has-description">
     990                        <label for="image-details-alt-text" class="name"><?php _e( 'Alternative Text' ); ?></label>
     991                        <input type="text" id="image-details-alt-text" data-setting="alt" value="{{ data.model.alt }}" aria-describedby="alt-text-description" />
     992                    </span>
    970993                    <p class="description" id="alt-text-description"><?php echo $alt_text_description; ?></p>
    971994
    … …  
    974997                    if ( ! apply_filters( 'disable_captions', '' ) ) :
    975998                        ?>
    976                         <label class="setting caption">
    977                             <span><?php _e( 'Caption' ); ?></span>
    978                             <textarea data-setting="caption">{{ data.model.caption }}</textarea>
    979                         </label>
     999                        <span class="setting caption">
     1000                            <label for="image-details-caption" class="name"><?php _e( 'Caption' ); ?></label>
     1001                            <textarea id="image-details-caption" data-setting="caption">{{ data.model.caption }}</textarea>
     1002                        </span>
    9801003                    <?php endif; ?>
    9811004
    9821005                    <h2><?php _e( 'Display Settings' ); ?></h2>
    983                     <div class="setting align">
    984                         <span><?php _e( 'Align' ); ?></span>
    985                         <div class="button-group button-large" data-setting="align">
    986                             <button class="button" value="left">
    987                                 <?php esc_html_e( 'Left' ); ?>
    988                             </button>
    989                             <button class="button" value="center">
    990                                 <?php esc_html_e( 'Center' ); ?>
    991                             </button>
    992                             <button class="button" value="right">
    993                                 <?php esc_html_e( 'Right' ); ?>
    994                             </button>
    995                             <button class="button active" value="none">
    996                                 <?php esc_html_e( 'None' ); ?>
    997                             </button>
    998                         </div>
    999                     </div>
     1006                    <fieldset class="setting-group">
     1007                        <legend class="legend-inline"><?php _e( 'Align' ); ?></legend>
     1008                        <span class="setting align">
     1009                            <span class="button-group button-large" data-setting="align">
     1010                                <button class="button" value="left">
     1011                                    <?php esc_html_e( 'Left' ); ?>
     1012                                </button>
     1013                                <button class="button" value="center">
     1014                                    <?php esc_html_e( 'Center' ); ?>
     1015                                </button>
     1016                                <button class="button" value="right">
     1017                                    <?php esc_html_e( 'Right' ); ?>
     1018                                </button>
     1019                                <button class="button active" value="none">
     1020                                    <?php esc_html_e( 'None' ); ?>
     1021                                </button>
     1022                            </span>
     1023                        </span>
     1024                    </fieldset>
    10001025
    10011026                    <# if ( data.attachment ) { #>
    10021027                        <# if ( 'undefined' !== typeof data.attachment.sizes ) { #>
    1003                             <label class="setting size">
    1004                                 <span><?php _e( 'Size' ); ?></span>
    1005                                 <select class="size" name="size"
     1028                            <span class="setting size">
     1029                                <label for="image-details-size" class="name"><?php _e( 'Size' ); ?></label>
     1030                                <select id="image-details-size" class="size" name="size"
    10061031                                    data-setting="size"
    10071032                                    <# if ( data.userSettings ) { #>
    … …  
    10341059                                    </option>
    10351060                                </select>
    1036                             </label>
     1061                            </span>
    10371062                        <# } #>
    1038                             <div class="custom-size<# if ( data.model.size !== 'custom' ) { #> hidden<# } #>">
    1039                                 <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>
     1063                            <div class="custom-size wp-clearfix<# if ( data.model.size !== 'custom' ) { #> hidden<# } #>">
     1064                                <span class="custom-size-setting">
     1065                                    <label for="image-details-size-width"><?php _e( 'Width' ); ?></label>
     1066                                    <input type="number" id="image-details-size-width" aria-describedby="image-size-desc" data-setting="customWidth" step="1" value="{{ data.model.customWidth }}" />
     1067                                </span>
     1068                                <span class="sep" aria-hidden="true">&times;</span>
     1069                                <span class="custom-size-setting">
     1070                                    <label for="image-details-size-height"><?php _e( 'Height' ); ?></label>
     1071                                    <input type="number" id="image-details-size-height" aria-describedby="image-size-desc" data-setting="customHeight" step="1" value="{{ data.model.customHeight }}" />
     1072                                </span>
     1073                                <p id="image-size-desc" class="description"><?php _e( 'Image size in pixels' ); ?></p>
    10401074                            </div>
    10411075                    <# } #>
    10421076
    1043                     <div class="setting link-to">
    1044                         <span><?php _e( 'Link To' ); ?></span>
    1045                         <select data-setting="link">
     1077                    <span class="setting link-to">
     1078                        <label for="image-details-link-to" class="name"><?php _e( 'Link To' ); ?></label>
     1079                        <select id="image-details-link-to" data-setting="link">
    10461080                        <# if ( data.attachment ) { #>
    10471081                            <option value="file">
    … …  
    10631097                            </option>
    10641098                        </select>
    1065                         <input type="text" class="link-to-custom" data-setting="linkUrl" />
    1066                     </div>
     1099                    </span>
     1100                    <span class="setting">
     1101                        <label for="image-details-link-to-custom" class="name"><?php _e( 'URL' ); ?></label>
     1102                        <input type="text" id="image-details-link-to-custom" class="link-to-custom" data-setting="linkUrl" />
     1103                    </span>
     1104
    10671105                    <div class="advanced-section">
    10681106                        <h2><button type="button" class="button-link advanced-toggle"><?php _e( 'Advanced Options' ); ?></button></h2>
    10691107                        <div class="advanced-settings hidden">
    10701108                            <div class="advanced-image">
    1071                                 <label class="setting title-text">
    1072                                     <span><?php _e( 'Image Title Attribute' ); ?></span>
    1073                                     <input type="text" data-setting="title" value="{{ data.model.title }}" />
    1074                                 </label>
    1075                                 <label class="setting extra-classes">
    1076                                     <span><?php _e( 'Image CSS Class' ); ?></span>
    1077                                     <input type="text" data-setting="extraClasses" value="{{ data.model.extraClasses }}" />
    1078                                 </label>
     1109                                <span class="setting title-text">
     1110                                    <label for="image-details-title-attribute" class="name"><?php _e( 'Image Title Attribute' ); ?></label>
     1111                                    <input type="text" id="image-details-title-attribute" data-setting="title" value="{{ data.model.title }}" />
     1112                                </span>
     1113                                <span class="setting extra-classes">
     1114                                    <label for="image-details-css-class" class="name"><?php _e( 'Image CSS Class' ); ?></label>
     1115                                    <input type="text" id="image-details-css-class" data-setting="extraClasses" value="{{ data.model.extraClasses }}" />
     1116                                </span>
    10791117                            </div>
    10801118                            <div class="advanced-link">
    1081                                 <div class="setting link-target">
    1082                                     <label><input type="checkbox" data-setting="linkTargetBlank" value="_blank" <# if ( data.model.linkTargetBlank ) { #>checked="checked"<# } #>><?php _e( 'Open link in a new tab' ); ?></label>
    1083                                 </div>
    1084                                 <label class="setting link-rel">
    1085                                     <span><?php _e( 'Link Rel' ); ?></span>
    1086                                     <input type="text" data-setting="linkRel" value="{{ data.model.linkRel }}" />
    1087                                 </label>
    1088                                 <label class="setting link-class-name">
    1089                                     <span><?php _e( 'Link CSS Class' ); ?></span>
    1090                                     <input type="text" data-setting="linkClassName" value="{{ data.model.linkClassName }}" />
    1091                                 </label>
     1119                                <span class="setting link-target">
     1120                                    <input type="checkbox" id="image-details-link-target" data-setting="linkTargetBlank" value="_blank" <# if ( data.model.linkTargetBlank ) { #>checked="checked"<# } #>>
     1121                                    <label for="image-details-link-target" class="checkbox-label"><?php _e( 'Open link in a new tab' ); ?></label>
     1122                                </span>
     1123                                <span class="setting link-rel">
     1124                                    <label for="image-details-link-rel" class="name"><?php _e( 'Link Rel' ); ?></label>
     1125                                    <input type="text" id="image-details-link-rel" data-setting="linkRel" value="{{ data.model.linkRel }}" />
     1126                                </span>
     1127                                <span class="setting link-class-name">
     1128                                    <label for="image-details-link-css-class" class="name"><?php _e( 'Link CSS Class' ); ?></label>
     1129                                    <input type="text" id="image-details-link-css-class" data-setting="linkClassName" value="{{ data.model.linkClassName }}" />
     1130                                </span>
    10921131                            </div>
    10931132                        </div>
    10941133                    </div>
    10951134                </div>
    1096             </div>
    1097         </div>
    1098     </script>
    1099 
     1135                <div class="column-image">
     1136                    <div class="image">
     1137                        <img src="{{ data.model.url }}" draggable="false" alt="" />
     1138                        <# if ( data.attachment && window.imageEdit ) { #>
     1139                            <div class="actions">
     1140                                <input type="button" class="edit-attachment button" value="<?php esc_attr_e( 'Edit Original' ); ?>" />
     1141                                <input type="button" class="replace-attachment button" value="<?php esc_attr_e( 'Replace' ); ?>" />
     1142                            </div>
     1143                        <# } #>
     1144                    </div>
     1145                </div>
     1146            </div>
     1147        </div>
     1148    </script>
     1149
     1150    <?php // Template for the Image Editor layout. ?>
    11001151    <script type="text/html" id="tmpl-image-editor">
    11011152        <div id="media-head-{{ data.id }}"></div>
    … …  
    11031154    </script>
    11041155
     1156    <?php // Template for an embedded Audio details. ?>
    11051157    <script type="text/html" id="tmpl-audio-details">
    11061158        <# var ext, html5types = {
    … …  
    11201172                    }
    11211173                #>
    1122                 <div class="setting">
    1123                     <label for="audio-source"><?php _e( 'URL' ); ?></label>
    1124                     <input type="text" id="audio-source" readonly data-setting="src" value="{{ data.model.src }}" />
     1174                <span class="setting">
     1175                    <label for="audio-details-source" class="name"><?php _e( 'caca URL' ); ?></label>
     1176                    <input type="text" id="audio-details-source" readonly data-setting="src" value="{{ data.model.src }}" />
    11251177                    <button type="button" class="button-link remove-setting"><?php _e( 'Remove audio source' ); ?></button>
    1126                 </div>
     1178                </span>
    11271179                <# } #>
    11281180                <?php
    … …  
    11351187                    }
    11361188                #>
    1137                 <div class="setting">
    1138                     <label for="<?php echo $type . '-source'; ?>"><?php echo strtoupper( $type ); ?></label>
    1139                     <input type="text" id="<?php echo $type . '-source'; ?>" readonly data-setting="<?php echo $type; ?>" value="{{ data.model.<?php echo $type; ?> }}" />
     1189                <span class="setting">
     1190                    <label for="audio-details-<?php echo $type . '-source'; ?>" class="name"><?php echo strtoupper( $type ); ?></label>
     1191                    <input type="text" id="audio-details-<?php echo $type . '-source'; ?>" readonly data-setting="<?php echo $type; ?>" value="{{ data.model.<?php echo $type; ?> }}" />
    11401192                    <button type="button" class="button-link remove-setting"><?php _e( 'Remove audio source' ); ?></button>
    1141                 </div>
     1193                </span>
    11421194                <# } #>
    11431195                <?php endforeach ?>
    11441196
    11451197                <# if ( ! _.isEmpty( html5types ) ) { #>
    1146                 <div class="setting">
    1147                     <span><?php _e( 'Add alternate sources for maximum HTML5 playback:' ); ?></span>
    1148                     <div class="button-large">
    1149                     <# _.each( html5types, function (mime, type) { #>
    1150                     <button class="button add-media-source" data-mime="{{ mime }}">{{ type }}</button>
    1151                     <# } ) #>
    1152                     </div>
    1153                 </div>
    1154                 <# } #>
    1155 
    1156                 <div class="setting preload">
    1157                     <span><?php _e( 'Preload' ); ?></span>
    1158                     <div class="button-group button-large" data-setting="preload">
    1159                         <button class="button" value="auto"><?php _ex( 'Auto', 'auto preload' ); ?></button>
    1160                         <button class="button" value="metadata"><?php _e( 'Metadata' ); ?></button>
    1161                         <button class="button active" value="none"><?php _e( 'None' ); ?></button>
    1162                     </div>
    1163                 </div>
    1164 
    1165                 <label class="setting checkbox-setting autoplay">
    1166                     <input type="checkbox" data-setting="autoplay" />
    1167                     <span><?php _e( 'Autoplay' ); ?></span>
    1168                 </label>
    1169 
    1170                 <label class="setting checkbox-setting">
    1171                     <input type="checkbox" data-setting="loop" />
    1172                     <span><?php _e( 'Loop' ); ?></span>
    1173                 </label>
    1174             </div>
    1175         </div>
    1176     </script>
    1177 
     1198                <fieldset class="setting-group">
     1199                    <legend class="name"><?php _e( 'Add alternate sources for maximum HTML5 playback' ); ?></legend>
     1200                    <span class="setting">
     1201                        <span class="button-large">
     1202                        <# _.each( html5types, function (mime, type) { #>
     1203                            <button class="button add-media-source" data-mime="{{ mime }}">{{ type }}</button>
     1204                        <# } ) #>
     1205                        </span>
     1206                    </span>
     1207                </fieldset>
     1208                <# } #>
     1209
     1210                <fieldset class="setting-group">
     1211                    <legend class="name"><?php _e( 'Preload' ); ?></legend>
     1212                    <span class="setting preload">
     1213                        <span class="button-group button-large" data-setting="preload">
     1214                            <button class="button" value="auto"><?php _ex( 'Auto', 'auto preload' ); ?></button>
     1215                            <button class="button" value="metadata"><?php _e( 'Metadata' ); ?></button>
     1216                            <button class="button active" value="none"><?php _e( 'None' ); ?></button>
     1217                        </span>
     1218                    </span>
     1219                </fieldset>
     1220
     1221                <span class="setting-group">
     1222                    <span class="setting checkbox-setting autoplay">
     1223                        <input type="checkbox" id="audio-details-autoplay" data-setting="autoplay" />
     1224                        <label for="audio-details-autoplay" class="checkbox-label"><?php _e( 'Autoplay' ); ?></label>
     1225                    </span>
     1226
     1227                    <span class="setting checkbox-setting">
     1228                        <input type="checkbox" id="audio-details-loop" data-setting="loop" />
     1229                        <label for="audio-details-loop" class="checkbox-label"><?php _e( 'Loop' ); ?></label>
     1230                    </span>
     1231                </span>
     1232            </div>
     1233        </div>
     1234    </script>
     1235
     1236    <?php // Template for an embedded Video details. ?>
    11781237    <script type="text/html" id="tmpl-video-details">
    11791238        <# var ext, html5types = {
    … …  
    12041263                    }
    12051264                #>
    1206                 <div class="setting">
    1207                     <label for="video-source"><?php _e( 'URL' ); ?></label>
    1208                     <input type="text" id="video-source" readonly data-setting="src" value="{{ data.model.src }}" />
     1265                <span class="setting">
     1266                    <label for="video-details-source" class="name"><?php _e( 'URL' ); ?></label>
     1267                    <input type="text" id="video-details-source" readonly data-setting="src" value="{{ data.model.src }}" />
    12091268                    <button type="button" class="button-link remove-setting"><?php _e( 'Remove video source' ); ?></button>
    1210                 </div>
     1269                </span>
    12111270                <# } #>
    12121271                <?php
    … …  
    12181277                    }
    12191278                #>
    1220                 <div class="setting">
    1221                     <label for="<?php echo $type . '-source'; ?>"><?php echo strtoupper( $type ); ?></label>
    1222                     <input type="text" id="<?php echo $type . '-source'; ?>" readonly data-setting="<?php echo $type; ?>" value="{{ data.model.<?php echo $type; ?> }}" />
     1279                <span class="setting">
     1280                    <label for="video-details-<?php echo $type . '-source'; ?>" class="name"><?php echo strtoupper( $type ); ?></label>
     1281                    <input type="text" id="video-details-<?php echo $type . '-source'; ?>" readonly data-setting="<?php echo $type; ?>" value="{{ data.model.<?php echo $type; ?> }}" />
    12231282                    <button type="button" class="button-link remove-setting"><?php _e( 'Remove video source' ); ?></button>
    1224                 </div>
     1283                </span>
    12251284                <# } #>
    12261285                <?php endforeach ?>
    … …  
    12281287
    12291288                <# if ( ! _.isEmpty( html5types ) ) { #>
    1230                 <div class="setting">
    1231                     <span><?php _e( 'Add alternate sources for maximum HTML5 playback:' ); ?></span>
    1232                     <div class="button-large">
    1233                     <# _.each( html5types, function (mime, type) { #>
    1234                     <button class="button add-media-source" data-mime="{{ mime }}">{{ type }}</button>
    1235                     <# } ) #>
    1236                     </div>
    1237                 </div>
     1289                <fieldset class="setting-group">
     1290                    <legend class="name"><?php _e( 'Add alternate sources for maximum HTML5 playback' ); ?></legend>
     1291                    <span class="setting">
     1292                        <span class="button-large">
     1293                        <# _.each( html5types, function (mime, type) { #>
     1294                            <button class="button add-media-source" data-mime="{{ mime }}">{{ type }}</button>
     1295                        <# } ) #>
     1296                        </span>
     1297                    </span>
     1298                </fieldset>
    12381299                <# } #>
    12391300
    12401301                <# if ( ! _.isEmpty( data.model.poster ) ) { #>
    1241                 <div class="setting">
    1242                     <label for="poster-image"><?php _e( 'Poster Image' ); ?></label>
    1243                     <input type="text" id="poster-image" readonly data-setting="poster" value="{{ data.model.poster }}" />
     1302                <span class="setting">
     1303                    <label for="video-details-poster-image" class="name"><?php _e( 'Poster Image' ); ?></label>
     1304                    <input type="text" id="video-details-poster-image" readonly data-setting="poster" value="{{ data.model.poster }}" />
    12441305                    <button type="button" class="button-link remove-setting"><?php _e( 'Remove poster image' ); ?></button>
    1245                 </div>
    1246                 <# } #>
    1247                 <div class="setting preload">
    1248                     <span><?php _e( 'Preload' ); ?></span>
    1249                     <div class="button-group button-large" data-setting="preload">
    1250                         <button class="button" value="auto"><?php _ex( 'Auto', 'auto preload' ); ?></button>
    1251                         <button class="button" value="metadata"><?php _e( 'Metadata' ); ?></button>
    1252                         <button class="button active" value="none"><?php _e( 'None' ); ?></button>
    1253                     </div>
    1254                 </div>
    1255 
    1256                 <label class="setting checkbox-setting autoplay">
    1257                     <input type="checkbox" data-setting="autoplay" />
    1258                     <span><?php _e( 'Autoplay' ); ?></span>
    1259                 </label>
    1260 
    1261                 <label class="setting checkbox-setting">
    1262                     <input type="checkbox" data-setting="loop" />
    1263                     <span><?php _e( 'Loop' ); ?></span>
    1264                 </label>
    1265 
    1266                 <div class="setting" data-setting="content">
     1306                </span>
     1307                <# } #>
     1308
     1309                <fieldset class="setting-group">
     1310                    <legend class="name"><?php _e( 'Preload' ); ?></legend>
     1311                    <span class="setting preload">
     1312                        <span class="button-group button-large" data-setting="preload">
     1313                            <button class="button" value="auto"><?php _ex( 'Auto', 'auto preload' ); ?></button>
     1314                            <button class="button" value="metadata"><?php _e( 'Metadata' ); ?></button>
     1315                            <button class="button active" value="none"><?php _e( 'None' ); ?></button>
     1316                        </span>
     1317                    </span>
     1318                </fieldset>
     1319
     1320                <span class="setting-group">
     1321                    <span class="setting checkbox-setting autoplay">
     1322                        <input type="checkbox" id="video-details-autoplay" data-setting="autoplay" />
     1323                        <label for="video-details-autoplay" class="checkbox-label"><?php _e( 'Autoplay' ); ?></label>
     1324                    </span>
     1325
     1326                    <span class="setting checkbox-setting">
     1327                        <input type="checkbox" id="video-details-loop" data-setting="loop" />
     1328                        <label for="video-details-loop" class="checkbox-label"><?php _e( 'Loop' ); ?></label>
     1329                    </span>
     1330                </span>
     1331
     1332                <span class="setting" data-setting="content">
    12671333                    <#
    12681334                    var content = '';
    … …  
    12711337                        _.each( tracks.toArray(), function (track) {
    12721338                            content += track.outerHTML; #>
    1273                         <label for="video-track"><?php _e( 'Tracks (subtitles, captions, descriptions, chapters, or metadata)' ); ?></label>
    1274                         <input class="content-track" type="text" id="video-track" readonly value="{{ track.outerHTML }}" />
     1339                        <label for="video-details-track" class="name"><?php _e( 'Tracks (subtitles, captions, descriptions, chapters, or metadata)' ); ?></label>
     1340                        <input class="content-track" type="text" id="video-details-track" readonly value="{{ track.outerHTML }}" />
    12751341                        <button type="button" class="button-link remove-setting remove-track"><?php _ex( 'Remove video track', 'media' ); ?></button>
    12761342                        <# } ); #>
    12771343                    <# } else { #>
    1278                     <span><?php _e( 'Tracks (subtitles, captions, descriptions, chapters, or metadata)' ); ?></span>
     1344                    <span class="name"><?php _e( 'Tracks (subtitles, captions, descriptions, chapters, or metadata)' ); ?></span><br />
    12791345                    <em><?php _e( 'There are no associated subtitles.' ); ?></em>
    12801346                    <# } #>
    12811347                    <textarea class="hidden content-setting">{{ content }}</textarea>
    1282                 </div>
    1283             </div>
    1284         </div>
    1285     </script>
    1286 
     1348                </span>
     1349            </div>
     1350        </div>
     1351    </script>
     1352
     1353    <?php // Template for a Gallery within the editor. ?>
    12871354    <script type="text/html" id="tmpl-editor-gallery">
    12881355        <# if ( data.attachments.length ) { #>
    … …  
    13151382    </script>
    13161383
     1384    <?php // Template for the Crop area layout, used for example in the Customizer. ?>
    13171385    <script type="text/html" id="tmpl-crop-content">
    13181386        <img class="crop-image" src="{{ data.url }}" alt="<?php esc_attr_e( 'Image crop area preview. Requires mouse interaction.' ); ?>">
    … …  
    13201388    </script>
    13211389
     1390    <?php // Template for the Site Icon preview, used for example in the Customizer. ?>
    13221391    <script type="text/html" id="tmpl-site-icon-preview">
    13231392        <h2><?php _e( 'Preview' ); ?></h2>
Note: See TracChangeset for help on using the changeset viewer.