WordPress.org
Get WordPress

Make WordPress Core

Ticket #47141: 47141.diff

File 47141.diff, 78.0 KB (added by afercia, 6 years ago)

  • src/js/_enqueues/vendor/mediaelement/wp-mediaelement.css

     
    6767        overflow: visible;
    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
    7575.media-embed-details .embed-media-settings .checkbox-setting span {
    … …  
    9494}
    9595
    9696.media-embed-details .setting .remove-setting {
    97         padding: 0;
     97        padding: 5px 0;
    9898}
    9999
    100100.media-embed-details .setting a:hover {

  • src/js/media/views/embed/url.js

     
    11var View = wp.media.View,
    22        $ = jQuery,
     3        l10n = wp.media.view.l10n,
    34        EmbedUrl;
    45
    56/**
    … …  
    1314 * @augments Backbone.View
    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
    2930                this.spinner = $('<span class="spinner" />')[0];

  • src/js/media/views/frame/image-details.js

     
    134134                        items: {
    135135                                back: {
    136136                                        text:     l10n.back,
    137                                         priority: 20,
     137                                        priority: 80,
    138138                                        click:    function() {
    139139                                                if ( previous ) {
    140140                                                        frame.setState( previous );
    … …  
    147147                                replace: {
    148148                                        style:    'primary',
    149149                                        text:     l10n.replace,
    150                                         priority: 80,
     150                                        priority: 20,
    151151                                        requires: { selection: true },
    152152
    153153                                        click: function() {

  • src/js/media/views/settings/attachment-display.js

     
    6666                        attachment = this.options.attachment;
    6767
    6868                if ( 'none' === linkTo || 'embed' === linkTo || ( ! attachment && 'custom' !== linkTo ) ) {
    69                         $input.addClass( 'hidden' );
     69                        $input.closest( '.setting' ).addClass( 'hidden' );
    7070                        return;
    7171                }
    7272
    … …  
    8282                        $input.prop( 'readonly', 'custom' !== linkTo );
    8383                }
    8484
    85                 $input.removeClass( 'hidden' );
     85                $input.closest( '.setting' ).removeClass( 'hidden' );
    8686
    8787                // If the input is visible, focus and select its contents.
    8888                if ( ! wp.media.isTouchDevice && $input.is(':visible') ) {

  • src/wp-admin/css/media.css

     
    374374}
    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;
    385384        display: none;
    … …  
    480479        color: #c00;
    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;
    486484}
    … …  
    10311029        display: block;
    10321030}
    10331031
    1034 #poststuff .imgedit-group-top h3, /* Back-compat for pre-4.4 */
    10351032#poststuff .imgedit-group-top h2 {
    10361033        display: inline-block;
    10371034        margin: 0;
    … …  
    11091106        margin: 8px 0;
    11101107}
    11111108
     1109.imgedit-save-target legend {
     1110        font-weight: 600;
     1111}
     1112
    11121113.imgedit-group {
    11131114        margin-bottom: 8px;
    11141115        padding: 10px;
    … …  
    11261127        display: inline-block;
    11271128        width: 7px;
    11281129        text-align: center;
    1129         vertical-align: middle;
    11301130        font-size: 13px;
    11311131        color: #444;
    11321132}
    … …  
    11861186                font-size: 16px;
    11871187                padding: 6px 10px;
    11881188        }
    1189 
    1190         .imgedit-applyto .imgedit-label {
    1191                 vertical-align: middle;
    1192         }
    11931189}
    11941190
    11951191/**
    … …  
    12281224                height: 40px;
    12291225        }
    12301226
    1231         .upload-php .media-modal-close .media-modal-icon {
    1232                 margin: 9px 10px;
    1233         }
    1234 
    12351227        .edit-attachment-frame .edit-media-header .right:before,
    12361228        .edit-attachment-frame .edit-media-header .left:before {
    12371229                line-height: 40px !important;

  • src/wp-admin/includes/image-edit.php

     
    6464                <fieldset class="imgedit-scale">
    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
    7977                </div>
    … …  
    124122        <fieldset class="imgedit-crop-ratio">
    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>
    136132
    … …  
    137133        <fieldset id="imgedit-crop-sel-<?php echo $post_id; ?>" class="imgedit-crop-sel">
    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>
    149143
    … …  
    168162
    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>
     165                <legend><?php _e( 'Apply changes to:' ); ?></legend>
    172166
    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>
     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>
    176171
    177                 <label class="imgedit-label">
    178                 <input type="radio" name="imgedit-target-<?php echo $post_id; ?>" value="thumbnail" />
    179                 <?php _e( 'Thumbnail' ); ?></label>
     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>
    180176
    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>
     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>
    186183        </div>

  • src/wp-admin/includes/media.php

     
    20722072        ?>
    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>
    20782078        </div>

  • src/wp-includes/css/buttons.css

     
    309309        display: inline-block;
    310310        border-radius: 0;
    311311        margin-right: -1px;
    312         z-index: 10;
    313312}
    314313
    315314.wp-core-ui .button-group > .button-primary {

  • src/wp-includes/css/media-views.css

     
    1818        -webkit-overflow-scrolling: touch;
    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;
    2428}
    2529
     30.media-modal .legend-inline {
     31        position: absolute;
     32        transform: translate(-100%, 50%);
     33        margin-left: -1%;
     34        line-height: 1.2;
     35}
     36
    2637.media-frame input,
    2738.media-frame textarea {
    2839        padding: 6px 8px;
    … …  
    3041
    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
    3750.media-frame a {
    … …  
    92105        border-color: #5b9dd9;
    93106}
    94107
    95 .media-frame select {
    96         height: 24px;
    97         padding: 2px;
    98 }
    99 
    100108.media-frame input:disabled,
    101109.media-frame textarea:disabled,
    102110.media-frame input[readonly],
    … …  
    121129        color: #72777c;
    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}
    127140
    … …  
    234247        width: calc(48% - 12px);
    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%;
    243252}
    … …  
    321330        bottom: 0;
    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 {
    345335        position: relative;
    … …  
    355345        display: block;
    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;
     355.media-sidebar .setting.has-description,
     356.attachment-details .setting.has-description {
     357        margin-bottom: 5px;
    364358}
    365359
    366 .media-sidebar .setting .link-to-custom,
    367 .attachment-details .setting .link-to-custom {
     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%;
    375371        font-size: 12px;
    … …  
    381377        max-width: 80px;
    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}
    388387
    … …  
    399398        padding: 0;
    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;
    406410        min-height: 22px;
    … …  
    410414        color: #666;
    411415}
    412416
     417.media-sidebar .checkbox-label-inline {
     418        font-size: 12px;
     419}
     420
    413421.compat-item label span {
    414422        text-align: right;
    415423}
    … …  
    450458        clear: both;
    451459        font-size: 12px;
    452460        font-style: normal;
    453         margin-bottom: 0.5em;
     461        margin-bottom: 10px;
    454462}
    455463
    456464.media-sidebar .setting textarea,
    … …  
    460468        resize: vertical;
    461469}
    462470
    463 .media-sidebar select,
    464 .attachment-details select {
    465         margin-top: 3px;
    466 }
    467 
    468471.compat-item {
    469472        float: left;
    470473        width: 100%;
    … …  
    759762        max-height: 100%;
    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;
    766768        top: 50%;
    … …  
    940942        transform: translate( -50%, -70% );
    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;
    950947        left: 0;
    … …  
    12011198        max-width: 400px;
    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;
    12071203}
    … …  
    12891285        word-wrap: break-word;
    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;
    1298         background: rgba(0, 86, 132, 0.9);
     1297        text-align: center;
     1298        display: none;
     1299}
     1300
     1301.uploader-window {
     1302        position: fixed;
    12991303        z-index: 250000;
    1300         display: none;
    1301         text-align: center;
    1302         opacity: 0;
     1304        opacity: 0; /* Only the inline uploader is animated with JS, the editor one isn't */
    13031305        transition: opacity 250ms;
    13041306}
    13051307
    1306 .uploader-window-content {
     1308.wp-editor-wrap .uploader-editor {
    13071309        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 {
     1316        background: rgba(0, 86, 132, 0.9);
     1317}
     1318
     1319.uploader-window-content,
     1320.wp-editor-wrap .uploader-editor-content {
     1321        position: absolute;
    13081322        top: 10px;
    13091323        left: 10px;
    13101324        right: 10px;
    … …  
    13121326        border: 1px dashed #fff;
    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;
    13261344}
    13271345
     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;
     1352}
     1353
    13281354.uploader-window .media-progress-bar {
    13291355        margin-top: 20px;
    13301356        max-width: 300px;
    … …  
    13661392        margin: 0 0 4em;
    13671393}
    13681394
    1369 .uploader-inline h3, /* Back-compat for pre-4.4 */
    13701395.uploader-inline h2 {
    13711396        font-size: 20px;
    13721397        line-height: 1.4;
    … …  
    13891414}
    13901415
    13911416.uploader-inline p {
    1392         font-size: 12px;
    13931417        margin: 0.5em 0;
    13941418}
    13951419
    … …  
    15801604.attachment-details .settings-save-status {
    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}
    15941618
    … …  
    15971621}
    15981622
    15991623.attachment-details.save-complete .settings-save-status .saved {
    1600         display: block;
     1624        display: inline-block;
    16011625}
    16021626
    16031627.attachment-info {
    … …  
    17041728        overflow: hidden;
    17051729}
    17061730
    1707 .attachment-display-settings h4 {
    1708         margin: 1.4em 0 0.4em;
    1709 }
    1710 
    17111731.collection-settings {
    17121732        overflow: hidden;
    17131733}
    … …  
    17171737        margin-right: 8px;
    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}
    17231744
    … …  
    17721793        margin: 0;
    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 {
    17781798        display: inline-block;
    … …  
    17831803        margin-top: 3px;
    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 {
    17891808        text-decoration: none;
    … …  
    18391858        margin-bottom: 16px;
    18401859}
    18411860
    1842 
    18431861/**
    18441862 * Embed from URL and Image Details
    18451863 */
    … …  
    18551873
    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);
    18621880}
    18631881
     1882.media-frame .embed-url input::-ms-clear {
     1883        display: none; /* the "x" in IE 11 conflicts with the spinner */
     1884}
     1885
    18641886.media-frame .embed-url .spinner {
    18651887        position: absolute;
    18661888        top: 32px;
    … …  
    18781900        left: 0;
    18791901        right: 0;
    18801902        bottom: 0;
    1881         padding: 16px 16px 32px;
     1903        padding: 0 16px 32px;
    18821904        overflow: auto;
    18831905}
    18841906
    … …  
    19411963        left: 0;
    19421964}
    19431965
    1944 .image-details .column-settings h3, /* Back-compat for pre-4.4 */
    19451966.image-details .column-settings h2 {
    19461967        margin: 20px;
    19471968        padding-top: 20px;
    … …  
    19922013        content: "\f142";
    19932014}
    19942015
    1995 .image-details .embed-media-settings .size {
    1996         margin-bottom: 4px;
    1997 }
    1998 
    1999 .image-details .custom-size span {
     2016.image-details .custom-size label, /* Back-compat for pre-5.3 */
     2017.image-details .custom-size .custom-size-setting {
    20002018        display: block;
    2001 }
    2002 
    2003 .image-details .custom-size label {
    2004         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
    20132026.image-details .custom-size input {
    … …  
    20192032        margin: 26px 6px 0 6px;
    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
    20282039.media-embed .thumbnail {
    … …  
    20492060        overflow: hidden;
    20502061}
    20512062
    2052 .media-embed .setting {
     2063.media-embed .setting,
     2064.media-embed .setting-group {
    20532065        width: 100%;
    20542066        margin: 10px 0;
    20552067        float: left;
    … …  
    20572069        clear: both;
    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;
    20622078}
    … …  
    20662082        font-style: normal;
    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;
    20722089}
    … …  
    20802097}
    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
    20902107.image-details .embed-media-settings .setting input[type="text"],
    … …  
    20962113.image-details .embed-media-settings .setting input.link-to-custom,
    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%;
    21012119        width: 70%;
    … …  
    21072125}
    21082126
    21092127.image-details .embed-media-settings .link-target {
    2110         margin-top: 24px;
     2128        margin-top: 16px;
    21112129}
    21122130
     2131.image-details .checkbox-label,
     2132.audio-details .checkbox-label,
     2133.video-details .checkbox-label {
     2134        vertical-align: baseline;
     2135}
     2136
    21132137.media-embed .setting input.hidden,
    21142138.media-embed .setting textarea.hidden {
    21152139        display: none;
    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;
    21232148        color: #666;
    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%;
    21292160        text-align: right;
    … …  
    21312162        line-height: 1.1;
    21322163}
    21332164
    2134 .media-embed .setting .button-group {
    2135         margin: 2px 0;
    2136 }
    2137 
    21382165.media-embed-sidebar {
    21392166        position: absolute;
    21402167        top: 0;
    … …  
    21462173        margin-top: 10px;
    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 }
     2179 .media-frame .setting .button-group {
     2180         display: flex;
     2181         margin: 0 !important;
     2182         max-width: none !important;
     2183 }
    22002184
    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 }
    2242 
    22432185/**
    22442186 * Localization
    22452187 */
    … …  
    23552297
    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;
     2306                display: inline-block;
    23642307        }
    23652308
    2366         .media-sidebar .setting span,
    2367         .attachment-details .setting span,
     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
    23752329        .media-sidebar .setting .value,
    … …  
    24282382                right: 30px;
    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;
    24402397        }
    24412398
     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;
     2408        }
     2409
    24422410        .image-details .embed-media-settings .setting input.link-to-custom,
    24432411        .image-details .embed-media-settings .setting input[type="text"],
    24442412        .image-details .embed-media-settings .setting textarea {
    … …  
    24602428        }
    24612429
    24622430        .collection-settings .setting input[type="checkbox"] {
     2431                float: none;
    24632432                margin-top: 0;
    24642433        }
    24652434

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

     
    174174                )
    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>
    189181                <div class="media-frame-title"></div>
    … …  
    193185                <div class="media-frame-uploader"></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; ?>">
    198191                        <button type="button" class="media-modal-close"><span class="media-modal-icon"><span class="screen-reader-text"><?php _e( 'Close media panel' ); ?></span></span></button>
    … …  
    201194                <div class="media-modal-backdrop"></div>
    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>
     200                        <div class="uploader-editor-title"><?php _e( 'Drop files to upload' ); ?></div>
    207201                </div>
    208202        </script>
    209203
     204        <?php // Template for the editor uploader. ?>
    210205        <script type="text/html" id="tmpl-uploader-editor">
    211206                <div class="uploader-editor-content">
    212207                        <div class="uploader-editor-title"><?php _e( 'Drop files to upload' ); ?></div>
    … …  
    213208                </div>
    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'; #>
    218214                <# if ( data.canClose ) { #>
    … …  
    223219                        <h2 class="upload-message">{{ data.message }}</h2>
    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>
    239239                        </div>
    … …  
    286286                </div>
    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">
    291292                        <span class="screen-reader-text"><?php _e( 'List View' ); ?></span>
    … …  
    295296                </a>
    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>
    300302                <button type="button" class="button-link upload-dismiss-errors"><span class="screen-reader-text"><?php _e( 'Dismiss Errors' ); ?></span></button>
    … …  
    310312                <div class="upload-errors"></div>
    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>
    315318                <span class="upload-error-message">{{ data.message }}</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>
    324328                <div class="media-frame-content"></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 ) { #>
    331337                                        <div class="media-progress-bar"><div></div></div>
    … …  
    365371                                        <# if ( 'image' === data.type && ! data.uploading && data.sizes && data.can.save ) { #>
    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>
    371377                        </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>
    381388                                <div class="uploaded"><strong><?php _e( 'Uploaded on:' ); ?></strong> {{ data.dateFormatted }}</div>
    … …  
    418425                        <div class="settings">
    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 ) { #>
    434441                                <?php
    … …  
    437444                                        'album'  => __( 'Album' ),
    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 ) { #>
    462469                                                        <span class="value"><a href="{{ data.uploadedToLink }}">{{ data.uploadedToTitle }}</a></span>
    … …  
    463470                                                <# } else { #>
    464471                                                        <span class="value">{{ data.uploadedToTitle }}</span>
    465472                                                <# } #>
    466                                         </div>
     473                                        </span>
    467474                                <# } #>
    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>
     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>
    474481
    … …  
    489496                                        <?php endif; ?>
    490497                                <# } #>
    491498                        </div>
    492 
    493499                </div>
    494500        </script>
    495501
     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 }}">
    498505                        <div class="thumbnail">
    … …  
    529536                if ( data.describe ) {
    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                        <# }
    543554                } #>
    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>
    552564                        </span>
    … …  
    607619                                </div>
    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 ) { #>
    626637                <?php
    … …  
    629640                        'album'  => __( 'Album' ),
    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>
     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>
    650661        </script>
    651662
     663        <?php // Template for the Selection status bar. ?>
    652664        <script type="text/html" id="tmpl-media-selection">
    653665                <div class="selection-info">
    654666                        <span class="count"></span>
    … …  
    662674                <div class="selection-view"></div>
    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 ) { #>
    674687                                                data-user-setting="align"
    … …  
    687700                                                <?php esc_html_e( 'None' ); ?>
    688701                                        </option>
    689702                                </select>
    690                         </label>
     703                        </span>
    691704                <# } #>
    692705
    693                 <div class="setting">
    694                         <label>
     706                <span class="setting">
     707                        <label for="attachment-display-settings-link-to" class="name">
    695708                                <# if ( data.model.canEmbed ) { #>
    696                                         <span><?php _e( 'Embed or Link' ); ?></span>
     709                                        <?php _e( 'Embed or Link' ); ?>
    697710                                <# } else { #>
    698                                         <span><?php _e( 'Link To' ); ?></span>
     711                                        <?php _e( 'Link To' ); ?>
    699712                                <# } #>
     713                        </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                                <# } #>>
    700719
    701                                 <select class="link-to"
    702                                         data-setting="link"
    703                                         <# if ( data.userSettings && ! data.model.canEmbed ) { #>
    704                                                 data-user-setting="urlbutton"
    705                                         <# } #>>
    706 
     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                        <# } #>
    707731                                <# if ( data.model.canEmbed ) { #>
    708                                         <option value="embed" selected>
    709                                                 <?php esc_html_e( 'Embed Media Player' ); ?>
    710                                         </option>
    711                                         <option value="file">
     732                                        <?php esc_html_e( 'Link to Media File' ); ?>
    712733                                <# } else { #>
    713                                         <option value="none" selected>
    714                                                 <?php esc_html_e( 'None' ); ?>
    715                                         </option>
    716                                         <option value="file">
     734                                        <?php esc_html_e( 'Media File' ); ?>
    717735                                <# } #>
    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>
     736                                </option>
     737                                <option value="post">
     738                                <# if ( data.model.canEmbed ) { #>
     739                                        <?php esc_html_e( 'Link to Attachment Page' ); ?>
     740                                <# } else { #>
     741                                        <?php esc_html_e( 'Attachment Page' ); ?>
    735742                                <# } #>
    736                                 </select>
    737                         </label>
    738                         <input type="text" class="link-to-custom" data-setting="linkUrl" />
    739                 </div>
     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 ) { #>
    747762                                                data-user-setting="imgsize"
    … …  
    769784                                                <# } #>
    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 ) { #>
    784800                                        data-user-setting="urlbutton"
    … …  
    796812                                        <?php esc_html_e( 'None' ); ?>
    797813                                </option>
    798814                        </select>
    799                 </label>
     815                </span>
    800816
    801                 <label class="setting">
    802                         <span><?php _e( 'Columns' ); ?></span>
    803                         <select class="columns" name="columns"
     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++ ) : ?>
    806822                                        <option value="<?php echo esc_attr( $i ); ?>" <#
    … …  
    810826                                        </option>
    811827                                <?php endfor; ?>
    812828                        </select>
    813                 </label>
     829                </span>
    814830
    815                 <label class="setting">
    816                         <span><?php _e( 'Random Order' ); ?></span>
    817                         <input type="checkbox" data-setting="_orderbyRandom" />
    818                 </label>
     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>
    819835
    820                 <label class="setting size">
    821                         <span><?php _e( 'Size' ); ?></span>
    822                         <select class="size" name="size"
     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 ) { #>
    825841                                        data-user-setting="imgsize"
    … …  
    844860                                        </option>
    845861                                <?php endforeach; ?>
    846862                        </select>
    847                 </label>
     863                </span>
    848864        </script>
    849865
     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>
    852869
    … …  
    853870                <# var emptyModel = _.isEmpty( data.model ),
    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>
     901                        <label for="playlist-settings-show-images" class="checkbox-label-inline">
     902                                <?php _e( 'Show Images' ); ?>
     903                        </label>
     904                </span>
    882905        </script>
    883906
     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>
    891915                </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="" />
     920                <div class="wp-clearfix">
     921                        <div class="thumbnail">
     922                                <img src="{{ data.model.url }}" draggable="false" alt="" />
     923                        </div>
    897924                </div>
    898925
    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>
     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
    905932                <?php
    … …  
    906933                /** This filter is documented in wp-admin/includes/media.php */
    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>
     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>
    932961
    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>
     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>
    948982        </script>
    949983
     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
    972995                                        <?php
    … …  
    973996                                        /** This filter is documented in wp-admin/includes/media.php */
    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 ) { #>
    10081033                                                                                data-user-setting="imgsize"
    … …  
    10331058                                                                                <?php _e( 'Custom Size' ); ?>
    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">
    10481082                                                                <?php esc_html_e( 'Media File' ); ?>
    … …  
    10621096                                                                <?php esc_html_e( 'None' ); ?>
    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>
     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>
    10961146                        </div>
    10971147                </div>
    10981148        </script>
    10991149
     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>
    11021153                <div id="image-editor-{{ 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 = {
    11071159                        mp3: wp.media.view.settings.embedMimes.mp3,
    … …  
    11191171                                                delete html5types[ ext ];
    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
    11291181
    … …  
    11341186                                                delete html5types.<?php echo $type; ?>;
    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>
     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>
    11541208                                <# } #>
    11551209
    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>
     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>
    11641220
    1165                                 <label class="setting checkbox-setting autoplay">
    1166                                         <input type="checkbox" data-setting="autoplay" />
    1167                                         <span><?php _e( 'Autoplay' ); ?></span>
    1168                                 </label>
     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>
    11691226
    1170                                 <label class="setting checkbox-setting">
    1171                                         <input type="checkbox" data-setting="loop" />
    1172                                         <span><?php _e( 'Loop' ); ?></span>
    1173                                 </label>
     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>
    11741232                        </div>
    11751233                </div>
    11761234        </script>
    11771235
     1236        <?php // Template for an embedded Video details. ?>
    11781237        <script type="text/html" id="tmpl-video-details">
    11791238                <# var ext, html5types = {
    11801239                        mp4: wp.media.view.settings.embedMimes.mp4,
    … …  
    12031262                                                delete html5types[ ext ];
    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
    12131272                                foreach ( $video_types as $type ) :
    … …  
    12171276                                                delete html5types.<?php echo $type; ?>;
    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 ?>
    12271286                                </div>
    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>
     1306                                </span>
    12461307                                <# } #>
    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>
    12551308
    1256                                 <label class="setting checkbox-setting autoplay">
    1257                                         <input type="checkbox" data-setting="autoplay" />
    1258                                         <span><?php _e( 'Autoplay' ); ?></span>
    1259                                 </label>
     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>
    12601319
    1261                                 <label class="setting checkbox-setting">
    1262                                         <input type="checkbox" data-setting="loop" />
    1263                                         <span><?php _e( 'Loop' ); ?></span>
    1264                                 </label>
     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>
    12651325
    1266                                 <div class="setting" data-setting="content">
     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 = '';
    12691335                                        if ( ! _.isEmpty( data.model.content ) ) {
    … …  
    12701336                                                var tracks = jQuery( data.model.content ).filter( 'track' );
    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>
     1348                                </span>
    12831349                        </div>
    12841350                </div>
    12851351        </script>
    12861352
     1353        <?php // Template for a Gallery within the editor. ?>
    12871354        <script type="text/html" id="tmpl-editor-gallery">
    12881355                <# if ( data.attachments.length ) { #>
    12891356                        <div class="gallery gallery-columns-{{ data.columns }}">
    … …  
    13141381                <# } #>
    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.' ); ?>">
    13191387                <div class="upload-errors"></div>
    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>
    13241393                <strong aria-hidden="true"><?php _e( 'As a browser icon' ); ?></strong>