WordPress.org

Make WordPress Core

Changeset 45499


Ignore:
Timestamp:
06/07/2019 08:43:26 PM (3 months 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.

Location:
trunk/src
Files:
10 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/js/_enqueues/vendor/mediaelement/wp-mediaelement.css

    r43309 r45499  
    6868}
    6969
    70 .media-embed-details .embed-media-settings .setting span {
    71     max-width: 400px;
    72     width: auto;
     70.media-embed-details .embed-media-settings .setting span:not(.button-group) {
     71    max-width: 400px; /* Back-compat for pre-5.3 */
     72    width: auto; /* Back-compat for pre-5.3 */
    7373}
    7474
     
    9595
    9696.media-embed-details .setting .remove-setting {
    97     padding: 0;
     97    padding: 5px 0;
    9898}
    9999
  • trunk/src/js/media/views/embed/url.js

    r43309 r45499  
    11var View = wp.media.View,
    22    $ = jQuery,
     3    l10n = wp.media.view.l10n,
    34    EmbedUrl;
    45
     
    1415 */
    1516EmbedUrl = View.extend(/** @lends wp.media.view.EmbedUrl.prototype */{
    16     tagName:   'label',
     17    tagName:   'span',
    1718    className: 'embed-url',
    1819
    1920    events: {
    20         'input':  'url',
    21         'keyup':  'url',
    22         'change': 'url'
     21        'input': 'url'
    2322    },
    2423
    2524    initialize: function() {
    26         this.$input = $('<input id="embed-url-field" type="url" />').val( this.model.get('url') );
     25        this.$input = $( '<input id="embed-url-field" type="url" />' )
     26            .attr( 'aria-label', l10n.insertFromUrlTitle )
     27            .val( this.model.get('url') );
    2728        this.input = this.$input[0];
    2829
  • trunk/src/js/media/views/frame/image-details.js

    r43309 r45499  
    135135                back: {
    136136                    text:     l10n.back,
    137                     priority: 20,
     137                    priority: 80,
    138138                    click:    function() {
    139139                        if ( previous ) {
     
    148148                    style:    'primary',
    149149                    text:     l10n.replace,
    150                     priority: 80,
     150                    priority: 20,
    151151                    requires: { selection: true },
    152152
  • trunk/src/js/media/views/settings/attachment-display.js

    r43309 r45499  
    6767
    6868        if ( 'none' === linkTo || 'embed' === linkTo || ( ! attachment && 'custom' !== linkTo ) ) {
    69             $input.addClass( 'hidden' );
     69            $input.closest( '.setting' ).addClass( 'hidden' );
    7070            return;
    7171        }
     
    8383        }
    8484
    85         $input.removeClass( 'hidden' );
     85        $input.closest( '.setting' ).removeClass( 'hidden' );
    8686
    8787        // If the input is visible, focus and select its contents.
  • trunk/src/wp-admin/css/media.css

    r45497 r45499  
    375375
    376376.drag-drop .drag-drop-inside {
    377     margin: 70px auto 0;
     377    margin: 60px auto 0;
    378378    width: 250px;
    379379}
    380380
    381381.drag-drop-inside p {
    382     color: #a0a5aa;
    383382    font-size: 14px;
    384383    margin: 5px 0;
     
    481480}
    482481
    483 .upload-php .mode-grid .media-sidebar .media-uploader-status.errors h3, /* Back-compat for pre-4.4 */
    484482.upload-php .mode-grid .media-sidebar .media-uploader-status.errors h2 {
    485483    display: none;
     
    10321030}
    10331031
    1034 #poststuff .imgedit-group-top h3, /* Back-compat for pre-4.4 */
    10351032#poststuff .imgedit-group-top h2 {
    10361033    display: inline-block;
     
    11101107}
    11111108
     1109.imgedit-save-target legend {
     1110    font-weight: 600;
     1111}
     1112
    11121113.imgedit-group {
    11131114    margin-bottom: 8px;
     
    11271128    width: 7px;
    11281129    text-align: center;
    1129     vertical-align: middle;
    11301130    font-size: 13px;
    11311131    color: #444;
     
    11911191        padding: 6px 10px;
    11921192    }
    1193 
    1194     .imgedit-applyto .imgedit-label {
    1195         vertical-align: middle;
    1196     }
    11971193}
    11981194
     
    12331229    }
    12341230
    1235     .upload-php .media-modal-close .media-modal-icon {
    1236         margin: 9px 10px;
    1237     }
    1238 
    12391231    .edit-attachment-frame .edit-media-header .right:before,
    12401232    .edit-attachment-frame .edit-media-header .left:before {
  • trunk/src/wp-admin/includes/image-edit.php

    r44785 r45499  
    6565        <legend><?php _e( 'New dimensions:' ); ?></legend>
    6666        <div class="nowrap">
    67         <label><span class="screen-reader-text"><?php _e( 'scale width' ); ?></span>
     67        <label for="imgedit-scale-width-<?php echo $post_id; ?>" class="screen-reader-text"><?php _e( 'scale width' ); ?></label>
    6868        <input type="text" id="imgedit-scale-width-<?php echo $post_id; ?>" onkeyup="imageEdit.scaleChanged(<?php echo $post_id; ?>, 1, this)" onblur="imageEdit.scaleChanged(<?php echo $post_id; ?>, 1, this)" value="<?php echo isset( $meta['width'] ) ? $meta['width'] : 0; ?>" />
    69         </label>
    70         <span class="imgedit-separator">&times;</span>
    71         <label><span class="screen-reader-text"><?php _e( 'scale height' ); ?></span>
     69        <span class="imgedit-separator" aria-hidden="true">&times;</span>
     70        <label for="imgedit-scale-height-<?php echo $post_id; ?>" class="screen-reader-text"><?php _e( 'scale height' ); ?></label>
    7271        <input type="text" id="imgedit-scale-height-<?php echo $post_id; ?>" onkeyup="imageEdit.scaleChanged(<?php echo $post_id; ?>, 0, this)" onblur="imageEdit.scaleChanged(<?php echo $post_id; ?>, 0, this)" value="<?php echo isset( $meta['height'] ) ? $meta['height'] : 0; ?>" />
    73         </label>
    7472        <span class="imgedit-scale-warn" id="imgedit-scale-warn-<?php echo $post_id; ?>">!</span>
    7573        <input id="imgedit-scale-button" type="button" onclick="imageEdit.action(<?php echo "$post_id, '$nonce'"; ?>, 'scale')" class="button button-primary" value="<?php esc_attr_e( 'Scale' ); ?>" />
    76          </div>
     74        </div>
    7775        </fieldset>
    7876
     
    125123        <legend><?php _e( 'Aspect ratio:' ); ?></legend>
    126124        <div class="nowrap">
    127         <label><span class="screen-reader-text"><?php _e( 'crop ratio width' ); ?></span>
     125        <label for="imgedit-crop-width-<?php echo $post_id; ?>" class="screen-reader-text"><?php _e( 'crop ratio width' ); ?></label>
    128126        <input type="text" id="imgedit-crop-width-<?php echo $post_id; ?>" onkeyup="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 0, this)" onblur="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 0, this)" />
    129         </label>
    130         <span class="imgedit-separator">:</span>
    131         <label><span class="screen-reader-text"><?php _e( 'crop ratio height' ); ?></span>
     127        <span class="imgedit-separator" aria-hidden="true">:</span>
     128        <label for="imgedit-crop-height-<?php echo $post_id; ?>" class="screen-reader-text"><?php _e( 'crop ratio height' ); ?></label>
    132129        <input type="text" id="imgedit-crop-height-<?php echo $post_id; ?>" onkeyup="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 1, this)" onblur="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 1, this)" />
    133         </label>
    134130        </div>
    135131    </fieldset>
     
    138134        <legend><?php _e( 'Selection:' ); ?></legend>
    139135        <div class="nowrap">
    140         <label><span class="screen-reader-text"><?php _e( 'selection width' ); ?></span>
     136        <label for="imgedit-sel-width-<?php echo $post_id; ?>" class="screen-reader-text"><?php _e( 'selection width' ); ?></label>
    141137        <input type="text" id="imgedit-sel-width-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>, this)" onblur="imageEdit.setNumSelection(<?php echo $post_id; ?>, this)" />
    142         </label>
    143         <span class="imgedit-separator">&times;</span>
    144         <label><span class="screen-reader-text"><?php _e( 'selection height' ); ?></span>
     138        <span class="imgedit-separator" aria-hidden="true">&times;</span>
     139        <label for="imgedit-sel-height-<?php echo $post_id; ?>" class="screen-reader-text"><?php _e( 'selection height' ); ?></label>
    145140        <input type="text" id="imgedit-sel-height-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>, this)" onblur="imageEdit.setNumSelection(<?php echo $post_id; ?>, this)" />
    146         </label>
    147141        </div>
    148142    </fieldset>
     
    169163    <div id="imgedit-save-target-<?php echo $post_id; ?>" class="imgedit-save-target">
    170164    <fieldset>
    171         <legend><strong><?php _e( 'Apply changes to:' ); ?></strong></legend>
    172 
    173         <label class="imgedit-label">
    174         <input type="radio" name="imgedit-target-<?php echo $post_id; ?>" value="all" checked="checked" />
    175         <?php _e( 'All image sizes' ); ?></label>
    176 
    177         <label class="imgedit-label">
    178         <input type="radio" name="imgedit-target-<?php echo $post_id; ?>" value="thumbnail" />
    179         <?php _e( 'Thumbnail' ); ?></label>
    180 
    181         <label class="imgedit-label">
    182         <input type="radio" name="imgedit-target-<?php echo $post_id; ?>" value="nothumb" />
    183         <?php _e( 'All sizes except thumbnail' ); ?></label>
     165        <legend><?php _e( 'Apply changes to:' ); ?></legend>
     166
     167        <span class="imgedit-label">
     168            <input type="radio" id="imgedit-target-all" name="imgedit-target-<?php echo $post_id; ?>" value="all" checked="checked" />
     169            <label for="imgedit-target-all"><?php _e( 'All image sizes' ); ?></label>
     170        </span>
     171
     172        <span class="imgedit-label">
     173            <input type="radio" id="imgedit-target-thumbnail" name="imgedit-target-<?php echo $post_id; ?>" value="thumbnail" />
     174            <label for="imgedit-target-thumbnail"><?php _e( 'Thumbnail' ); ?></label>
     175        </span>
     176
     177        <span class="imgedit-label">
     178            <input type="radio" id="imgedit-target-nothumb" name="imgedit-target-<?php echo $post_id; ?>" value="nothumb" />
     179            <label for="imgedit-target-nothumb"><?php _e( 'All sizes except thumbnail' ); ?></label>
     180        </span>
    184181    </fieldset>
    185182    </div>
  • trunk/src/wp-admin/includes/media.php

    r45450 r45499  
    20732073<div id="drag-drop-area">
    20742074    <div class="drag-drop-inside">
    2075     <p class="drag-drop-info"><?php _e( 'Drop files here' ); ?></p>
     2075    <p class="drag-drop-info"><?php _e( 'Drop files to upload' ); ?></p>
    20762076    <p><?php _ex( 'or', 'Uploader: Drop files here - or - Select Files' ); ?></p>
    20772077    <p class="drag-drop-buttons"><input id="plupload-browse-button" type="button" value="<?php esc_attr_e( 'Select Files' ); ?>" class="button" /></p>
  • trunk/src/wp-includes/css/buttons.css

    r45476 r45499  
    310310    border-radius: 0;
    311311    margin-right: -1px;
    312     z-index: 10;
    313312}
    314313
  • trunk/src/wp-includes/css/media-views.css

    r45478 r45499  
    1919}
    2020
    21 .media-modal legend,
     21.media-modal legend {
     22    padding: 0;
     23    font-size: 13px;
     24}
     25
    2226.media-modal label {
    2327    font-size: 13px;
     28}
     29
     30.media-modal .legend-inline {
     31    position: absolute;
     32    transform: translate(-100%, 50%);
     33    margin-left: -1%;
     34    line-height: 1.2;
    2435}
    2536
     
    3142.media-frame select,
    3243.wp-admin .media-frame select {
     44    padding: 2px;
    3345    line-height: 2;
    34     margin-top: 3px;
     46    height: 28px;
     47    vertical-align: middle;
    3548}
    3649
     
    93106}
    94107
    95 .media-frame select {
    96     height: 24px;
    97     padding: 2px;
    98 }
    99 
    100108.media-frame input:disabled,
    101109.media-frame textarea:disabled,
     
    122130}
    123131
    124 .media-frame .hidden {
     132/*
     133 * In some cases there's the need of higher specificity,
     134 * for example higher than `.media-embed .setting`.
     135 */
     136.media-frame .hidden,
     137.media-frame .setting.hidden {
    125138    display: none;
    126139}
     
    235248}
    236249
    237 .media-modal-content .media-toolbar-primary .media-button {
    238     float: right;
    239 }
    240 
    241250.media-modal-content .attachments-browser .search {
    242251    width: 100%;
     
    322331}
    323332
    324 .media-sidebar .sidebar-title {
    325     font-size: 20px;
    326     margin: 0;
    327     padding: 12px 10px 10px;
    328     line-height: 28px;
    329 }
    330 
    331 .media-sidebar .sidebar-content {
    332     padding: 0 10px;
    333     margin-bottom: 130px;
    334 }
    335 
    336 .media-sidebar .search {
    337     display: block;
    338     width: 100%;
    339 }
    340 
    341 .media-sidebar h3, /* Back-compat for pre-4.4 */
    342 .image-details h3, /* Back-compat for pre-4.4 */
    343333.media-sidebar h2,
    344334.image-details h2 {
     
    356346    float: left;
    357347    width: 100%;
     348    margin: 0 0 10px;
     349}
     350
     351.media-sidebar .collection-settings .setting {
    358352    margin: 1px 0;
    359353}
    360354
    361 .media-sidebar .setting label,
    362 .attachment-details .setting label {
    363     display: block;
    364 }
    365 
    366 .media-sidebar .setting .link-to-custom,
    367 .attachment-details .setting .link-to-custom {
     355.media-sidebar .setting.has-description,
     356.attachment-details .setting.has-description {
     357    margin-bottom: 5px;
     358}
     359
     360.media-sidebar .setting .link-to-custom {
    368361    margin: 3px 2px 0;
    369362}
    370363
    371 .media-sidebar .setting span,
    372 .attachment-details .setting span {
     364.media-sidebar .setting span, /* Back-compat for pre-5.3 */
     365.attachment-details .setting span, /* Back-compat for pre-5.3 */
     366.media-sidebar .setting .name,
     367.media-sidebar .setting .value,
     368.attachment-details .setting .name {
    373369    min-width: 30%;
    374370    margin-right: 4%;
     
    382378}
    383379
    384 .media-sidebar .setting select,
    385 .attachment-details .setting select {
     380.media-sidebar .setting .value {
     381    text-align: left;
     382}
     383
     384.media-sidebar .setting select {
    386385    max-width: 65%;
    387386}
     
    400399}
    401400
    402 .media-sidebar .setting span,
    403 .attachment-details .setting span,
     401.media-sidebar .setting span, /* Back-compat for pre-5.3 */
     402.attachment-details .setting span, /* Back-compat for pre-5.3 */
     403.media-sidebar .setting .name,
     404.media-sidebar .setting .value,
     405.media-sidebar .checkbox-label-inline,
     406.attachment-details .setting .name,
     407.attachment-details .setting .value,
    404408.compat-item label span {
    405409    float: left;
     
    409413    font-weight: 400;
    410414    color: #666;
     415}
     416
     417.media-sidebar .checkbox-label-inline {
     418    font-size: 12px;
    411419}
    412420
     
    451459    font-size: 12px;
    452460    font-style: normal;
    453     margin-bottom: 0.5em;
     461    margin-bottom: 10px;
    454462}
    455463
     
    459467    height: 62px;
    460468    resize: vertical;
    461 }
    462 
    463 .media-sidebar select,
    464 .attachment-details select {
    465     margin-top: 3px;
    466469}
    467470
     
    760763}
    761764
    762 .media-frame-content .crop-content .upload-errors
    763 {
     765.media-frame-content .crop-content .upload-errors {
    764766    position: absolute;
    765767    width: 300px;
     
    941943}
    942944
    943 .ie8 .wp-core-ui .attachment img.icon {
    944     top: 20%;
    945     position: relative;
    946 }
    947 
    948945.wp-core-ui .attachment .filename {
    949946    position: absolute;
     
    12021199}
    12031200
    1204 .uploader-inline .media-uploader-status h3, /* Back-compat for pre-4.4 */
    12051201.uploader-inline .media-uploader-status h2 {
    12061202    display: none;
     
    12901286}
    12911287
    1292 .uploader-window {
    1293     position: fixed;
     1288/**
     1289 * Window and Editor uploaders used to display "drop zones"
     1290 */
     1291.uploader-window,
     1292.wp-editor-wrap .uploader-editor {
    12941293    top: 0;
    12951294    left: 0;
    12961295    right: 0;
    12971296    bottom: 0;
     1297    text-align: center;
     1298    display: none;
     1299}
     1300
     1301.uploader-window {
     1302    position: fixed;
     1303    z-index: 250000;
     1304    opacity: 0; /* Only the inline uploader is animated with JS, the editor one isn't */
     1305    transition: opacity 250ms;
     1306}
     1307
     1308.wp-editor-wrap .uploader-editor {
     1309    position: absolute;
     1310    z-index: 99998; /* under the toolbar */
     1311    background: rgba(150, 150, 150, 0.9);
     1312}
     1313
     1314.uploader-window,
     1315.wp-editor-wrap .uploader-editor.droppable {
    12981316    background: rgba(0, 86, 132, 0.9);
    1299     z-index: 250000;
    1300     display: none;
    1301     text-align: center;
    1302     opacity: 0;
    1303     transition: opacity 250ms;
    1304 }
    1305 
    1306 .uploader-window-content {
     1317}
     1318
     1319.uploader-window-content,
     1320.wp-editor-wrap .uploader-editor-content {
    13071321    position: absolute;
    13081322    top: 10px;
     
    13131327}
    13141328
    1315 .uploader-window h3, /* Back-compat for pre-4.4 */
    1316 .uploader-window h1 {
    1317     margin: -0.5em 0 0;
     1329/* uploader drop-zone title */
     1330.uploader-window h1, /* Back-compat for pre-5.3 */
     1331.uploader-window .uploader-editor-title,
     1332.wp-editor-wrap .uploader-editor .uploader-editor-title {
    13181333    position: absolute;
    13191334    top: 50%;
    13201335    left: 0;
    13211336    right: 0;
    1322     transform: translateY( -50% );
    1323     font-size: 40px;
     1337    transform: translateY(-50%);
     1338    font-size: 3em;
     1339    line-height: 1.3;
     1340    font-weight: 600;
    13241341    color: #fff;
    1325     padding: 0;
     1342    margin: 0;
     1343    padding: 0 10px;
     1344}
     1345
     1346.wp-editor-wrap .uploader-editor .uploader-editor-title {
     1347    display: none;
     1348}
     1349
     1350.wp-editor-wrap .uploader-editor.droppable .uploader-editor-title {
     1351    display: block;
    13261352}
    13271353
     
    13671393}
    13681394
    1369 .uploader-inline h3, /* Back-compat for pre-4.4 */
    13701395.uploader-inline h2 {
    13711396    font-size: 20px;
     
    13901415
    13911416.uploader-inline p {
    1392     font-size: 12px;
    13931417    margin: 0.5em 0;
    13941418}
     
    15811605    float: right;
    15821606    text-transform: none;
    1583     z-index: 10;
     1607    font-weight: 400;
    15841608}
    15851609
    15861610.attachment-details .settings-save-status .spinner {
     1611    float: none;
    15871612    margin-left: 5px;
    15881613}
    15891614
    15901615.attachment-details .settings-save-status .saved {
    1591     float: right;
    15921616    display: none;
    15931617}
     
    15981622
    15991623.attachment-details.save-complete .settings-save-status .saved {
    1600     display: block;
     1624    display: inline-block;
    16011625}
    16021626
     
    17051729}
    17061730
    1707 .attachment-display-settings h4 {
    1708     margin: 1.4em 0 0.4em;
    1709 }
    1710 
    17111731.collection-settings {
    17121732    overflow: hidden;
     
    17181738}
    17191739
    1720 .collection-settings .setting span {
     1740.collection-settings .setting span, /* Back-compat for pre-5.3 */
     1741.collection-settings .setting .name {
    17211742    min-width: inherit;
    17221743}
     
    17731794}
    17741795
    1775 .media-modal .imgedit-group-top h3, /* Back-compat for pre-4.4 */
    17761796.media-modal .imgedit-group-top h2,
    17771797.media-modal .imgedit-group-top h2 .button-link {
     
    17841804}
    17851805
    1786 .media-modal .imgedit-group-top h3 a, /* Back-compat for pre-4.4 */
    17871806.media-modal .imgedit-group-top h2 a,
    17881807.media-modal .imgedit-group-top h2 .button-link {
     
    18401859}
    18411860
    1842 
    18431861/**
    18441862 * Embed from URL and Image Details
     
    18561874.media-frame .embed-url input {
    18571875    font-size: 18px;
    1858     padding: 12px 14px;
     1876    padding: 12px 40px 12px 14px; /* right padding to leave room for the spinner */
    18591877    width: 100%;
    18601878    min-width: 200px;
    18611879    box-shadow: inset 2px 2px 4px -2px rgba(0, 0, 0, 0.1);
     1880}
     1881
     1882.media-frame .embed-url input::-ms-clear {
     1883    display: none; /* the "x" in IE 11 conflicts with the spinner */
    18621884}
    18631885
     
    18791901    right: 0;
    18801902    bottom: 0;
    1881     padding: 16px 16px 32px;
     1903    padding: 0 16px 32px;
    18821904    overflow: auto;
    18831905}
     
    19421964}
    19431965
    1944 .image-details .column-settings h3, /* Back-compat for pre-4.4 */
    19451966.image-details .column-settings h2 {
    19461967    margin: 20px;
     
    19932014}
    19942015
    1995 .image-details .embed-media-settings .size {
    1996     margin-bottom: 4px;
    1997 }
    1998 
    1999 .image-details .custom-size span {
    2000     display: block;
    2001 }
    2002 
    2003 .image-details .custom-size label {
     2016.image-details .custom-size label, /* Back-compat for pre-5.3 */
     2017.image-details .custom-size .custom-size-setting {
    20042018    display: block;
    20052019    float: left;
    20062020}
    20072021
    2008 .image-details .custom-size span small {
    2009     color: #555d66; /* #f3f3f3 background */
    2010     font-size: inherit;
     2022.image-details .custom-size .custom-size-setting label {
     2023    float: none;
    20112024}
    20122025
     
    20202033}
    20212034
    2022 .image-details .custom-size:after {
    2023     content: "";
    2024     display: table;
    2025     clear: both;
     2035.image-details .custom-size .description {
     2036    margin-left: 0;
    20262037}
    20272038
     
    20502061}
    20512062
    2052 .media-embed .setting {
     2063.media-embed .setting,
     2064.media-embed .setting-group {
    20532065    width: 100%;
    20542066    margin: 10px 0;
     
    20582070}
    20592071
     2072.media-embed .setting-group .setting:not(.checkbox-setting) {
     2073    margin: 0;
     2074}
     2075
    20602076.media-embed .setting.has-description {
    20612077    margin-bottom: 5px;
     
    20672083}
    20682084
    2069 .image-details .embed-media-settings .setting {
     2085.image-details .embed-media-settings .setting,
     2086.image-details .embed-media-settings .setting-group {
    20702087    float: none;
    20712088    width: auto;
     
    20812098
    20822099.media-embed .setting input[type="text"],
    2083 .media-embed .setting textarea {
     2100.media-embed .setting textarea,
     2101.media-embed fieldset {
    20842102    display: block;
    20852103    width: 100%;
    20862104    max-width: 400px;
    2087     margin: 1px 0;
    20882105}
    20892106
     
    20972114.image-details .embed-media-settings .link-target,
    20982115.image-details .embed-media-settings .custom-size,
     2116.image-details .embed-media-settings .setting-group,
    20992117.image-details .description {
    21002118    margin-left: 27%;
     
    21082126
    21092127.image-details .embed-media-settings .link-target {
    2110     margin-top: 24px;
     2128    margin-top: 16px;
     2129}
     2130
     2131.image-details .checkbox-label,
     2132.audio-details .checkbox-label,
     2133.video-details .checkbox-label {
     2134    vertical-align: baseline;
    21112135}
    21122136
     
    21162140}
    21172141
    2118 .media-embed .setting span {
    2119     display: block;
    2120     width: 200px;
     2142.media-embed .setting span, /* Back-compat for pre-5.3 */
     2143.media-embed .setting .name,
     2144.media-embed .setting-group .name {
     2145    display: inline-block;
    21212146    font-size: 13px;
    21222147    line-height: 1.84615384;
     
    21242149}
    21252150
    2126 .image-details .embed-media-settings .setting span {
     2151.media-embed .setting span {
     2152    display: block; /* Back-compat for pre-5.3 */
     2153    width: 200px; /* Back-compat for pre-5.3 */
     2154}
     2155
     2156.image-details .embed-media-settings .setting span, /* Back-compat for pre-5.3 */
     2157.image-details .embed-media-settings .setting .name {
    21272158    float: left;
    21282159    width: 25%;
     
    21322163}
    21332164
    2134 .media-embed .setting .button-group {
    2135     margin: 2px 0;
    2136 }
    2137 
    21382165.media-embed-sidebar {
    21392166    position: absolute;
     
    21472174}
    21482175
    2149 /* Drag & drop on the editor upload */
    2150 .wp-editor-wrap .uploader-editor {
    2151     background: rgba(150, 150, 150, 0.9);
    2152     position: absolute;
    2153     top: 0;
    2154     left: 0;
    2155     width: 100%;
    2156     height: 100%;
    2157     z-index: 99998; /* under the toolbar */
    2158     display: none;
    2159     text-align: center;
    2160 }
    2161 
    2162 .wp-editor-wrap .uploader-editor-content {
    2163     border: 1px dashed #fff;
    2164     position: absolute;
    2165     top: 10px;
    2166     left: 10px;
    2167     right: 10px;
    2168     bottom: 10px;
    2169 }
    2170 
    2171 .wp-editor-wrap .uploader-editor .uploader-editor-title {
    2172     position: absolute;
    2173     top: 50%;
    2174     left: 0;
    2175     right: 0;
    2176     transform: translateY( -50% );
    2177     font-size: 3em;
    2178     line-height: 1.3;
    2179     font-weight: 600;
    2180     color: #fff;
    2181     padding: 0;
    2182     margin: 0;
    2183     display: none;
    2184 }
    2185 
    2186 .wp-editor-wrap .uploader-editor.droppable {
    2187     background: rgba(0, 86, 132, 0.9);
    2188 }
    2189 
    2190 .wp-editor-wrap .uploader-editor.droppable .uploader-editor-title {
    2191     display: block;
    2192 }
    2193 
    21942176/**
    2195  * IE7 Fixes
     2177 * Button groups fix: can be removed together with the Back-compat for pre-5.3
    21962178 */
    2197 .ie7 .media-frame .attachments-browser {
    2198     position: static;
    2199 }
    2200 
    2201 .ie7 .media-frame .embed-url input {
    2202     margin-top: 4px;
    2203     width: 90%;
    2204 }
    2205 
    2206 .ie7 .compat-item {
    2207     width: 99%;
    2208 }
    2209 
    2210 .ie7 .attachment-display-settings {
    2211     width: auto;
    2212 }
    2213 
    2214 .ie7 .attachment-preview,
    2215 .ie7 .attachment-preview .thumbnail {
    2216     width: 120px;
    2217     height: 120px;
    2218 }
    2219 
    2220 .ie7 .media-frame .attachment .describe {
    2221     width: 102px;
    2222 }
    2223 
    2224 .ie7 .media-sidebar .setting select {
    2225     max-width: 55%;
    2226 }
    2227 
    2228 .ie7 .media-sidebar .setting input[type="text"],
    2229 .ie7 .media-sidebar .setting input[type="password"],
    2230 .ie7 .media-sidebar .setting input[type="email"],
    2231 .ie7 .media-sidebar .setting input[type="number"],
    2232 .ie7 .media-sidebar .setting input[type="search"],
    2233 .ie7 .media-sidebar .setting input[type="tel"],
    2234 .ie7 .media-sidebar .setting input[type="url"],
    2235 .ie7 .media-sidebar .setting textarea {
    2236     width: 55%;
    2237 }
    2238 
    2239 .ie7 .media-sidebar .setting .link-to-custom {
    2240     float: left;
    2241 }
     2179 .media-frame .setting .button-group {
     2180     display: flex;
     2181     margin: 0 !important;
     2182     max-width: none !important;
     2183 }
    22422184
    22432185/**
     
    23562298    .media-sidebar .setting input,
    23572299    .media-sidebar .setting textarea,
    2358     .media-sidebar .setting span,
     2300    .media-sidebar .setting .name,
    23592301    .attachment-details .setting input,
    23602302    .attachment-details .setting textarea,
    2361     .attachment-details .setting span,
     2303    .attachment-details .setting .name,
    23622304    .compat-item label span {
    23632305        float: none;
    2364     }
    2365 
    2366     .media-sidebar .setting span,
    2367     .attachment-details .setting span,
     2306        display: inline-block;
     2307    }
     2308
     2309    .media-sidebar .setting span, /* Back-compat for pre-5.3 */
     2310    .attachment-details .setting span, /* Back-compat for pre-5.3 */
     2311    .media-sidebar .checkbox-label-inline {
     2312        float: none;
     2313    }
     2314
     2315    .media-sidebar .setting .select-label-inline {
     2316        display: inline;
     2317    }
     2318
     2319    .media-sidebar .setting .name,
     2320    .media-sidebar .checkbox-label-inline,
     2321    .attachment-details .setting .name,
    23682322    .compat-item label span {
    23692323        text-align: inherit;
    23702324        min-height: 16px;
    23712325        margin: 0;
    2372         padding: 8px 2px 0;
     2326        padding: 8px 2px 2px;
    23732327    }
    23742328
     
    24292383    }
    24302384
    2431     .image-details .embed-media-settings .setting {
     2385    .image-details .embed-media-settings .setting,
     2386    .image-details .embed-media-settings .setting-group {
    24322387        margin: 20px;
    24332388    }
    24342389
    2435     .image-details .embed-media-settings .setting span {
     2390    .image-details .embed-media-settings .setting span, /* Back-compat for pre-5.3 */
     2391    .image-details .embed-media-settings .setting .name {
    24362392        float: none;
    24372393        text-align: left;
    24382394        width: 100%;
    24392395        margin-bottom: 4px;
     2396        margin-left: 0;
     2397    }
     2398
     2399    .media-modal .legend-inline {
     2400        position: static;
     2401        transform: none;
     2402        margin-left: 0;
     2403        margin-bottom: 6px;
     2404    }
     2405
     2406    .image-details .embed-media-settings .setting-group .setting {
     2407        margin-bottom: 0;
    24402408    }
    24412409
     
    24612429
    24622430    .collection-settings .setting input[type="checkbox"] {
     2431        float: none;
    24632432        margin-top: 0;
    24642433    }
  • 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.