WordPress.org
Get WordPress

Make WordPress Core

Ticket #41612: 41612.2.diff

File 41612.2.diff, 14.9 KB (added by afercia, 6 years ago)

  • src/js/media/views/attachment/details.js

     
    4242                        rerenderOnModelChange: false
    4343                });
    4444
    45                 this.on( 'ready', this.initialFocus );
    4645                // Call 'initialize' directly on the parent class.
    4746                Attachment.prototype.initialize.apply( this, arguments );
    4847        },
    4948
    50         initialFocus: function() {
    51                 if ( ! wp.media.isTouchDevice ) {
    52                         /*
    53                         Previously focused the first ':input' (the readonly URL text field).
    54                         Since the first ':input' is now a button (delete/trash): when pressing
    55                         spacebar on an attachment, Firefox fires deleteAttachment/trashAttachment
    56                         as soon as focus is moved. Explicitly target the first text field for now.
    57                         @todo change initial focus logic, also for accessibility.
    58                         */
    59                         this.$( 'input[type="text"]' ).eq( 0 ).focus();
    60                 }
    61         },
    6249        /**
    6350         * @param {Object} event
    6451         */

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

     
    431431.attachment-details .setting input[type="tel"],
    432432.attachment-details .setting input[type="url"],
    433433.attachment-details .setting textarea,
    434 .attachment-details .setting .value {
     434.attachment-details .setting .value,
     435.attachment-details .setting + .description {
    435436        box-sizing: border-box;
    436437        margin: 1px;
    437438        width: 65%;
    … …  
    439440}
    440441
    441442.media-sidebar .setting .value,
    442 .attachment-details .setting .value {
     443.attachment-details .setting .value,
     444.attachment-details .setting + .description {
    443445        margin: 0 1px;
    444446        text-align: left;
    445447}
    446448
     449.attachment-details .setting + .description {
     450        font-size: 12px;
     451        font-style: normal;
     452        margin-bottom: 0.5em;
     453}
     454
    447455.media-sidebar .setting textarea,
    448456.attachment-details .setting textarea,
    449457.compat-item .field textarea {
    … …  
    20402048        clear: both;
    20412049}
    20422050
     2051.media-embed .setting.has-description {
     2052        margin-bottom: 0;
     2053}
     2054
    20432055.image-details .embed-media-settings .setting {
    20442056        float: none;
    20452057        width: auto;
    … …  
    20692081
    20702082.image-details .embed-media-settings .setting input.link-to-custom,
    20712083.image-details .embed-media-settings .link-target,
    2072 .image-details .embed-media-settings .custom-size {
     2084.image-details .embed-media-settings .custom-size,
     2085.image-details .description {
    20732086        margin-left: 27%;
    20742087        width: 70%;
    20752088}
    20762089
     2090.image-details .description {
     2091        font-style: normal;
     2092        margin-top: 0;
     2093}
     2094
    20772095.image-details .embed-media-settings .link-target {
    20782096        margin-top: 24px;
    20792097}

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

     
    404404                        </div>
    405405
    406406                        <div class="settings">
    407                                 <label class="setting" data-setting="url">
    408                                         <span class="name"><?php _e( 'URL' ); ?></span>
    409                                         <input type="text" value="{{ data.url }}" readonly />
    410                                 </label>
    411407                                <# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
     408                                <# if ( 'image' === data.type ) { #>
     409                                        <label class="setting" data-setting="alt">
     410                                                <span class="name"><?php _e( 'Alternative Text' ); ?></span>
     411                                                <input type="text" value="{{ data.alt }}" aria-describedby="alt-text-description" {{ maybeReadOnly }} />
     412                                        </label>
     413                                        <p class="description" id="alt-text-description"><?php _e( 'Functional replacement for the image. Leave empty if the image is not a key part of the content.' ); ?></p>
     414                                <# } #>
    412415                                <?php if ( post_type_supports( 'attachment', 'title' ) ) : ?>
    413416                                <label class="setting" data-setting="title">
    414417                                        <span class="name"><?php _e( 'Title' ); ?></span>
    … …  
    432435                                        <span class="name"><?php _e( 'Caption' ); ?></span>
    433436                                        <textarea {{ maybeReadOnly }}>{{ data.caption }}</textarea>
    434437                                </label>
    435                                 <# if ( 'image' === data.type ) { #>
    436                                         <label class="setting" data-setting="alt">
    437                                                 <span class="name"><?php _e( 'Alt Text' ); ?></span>
    438                                                 <input type="text" value="{{ data.alt }}" {{ maybeReadOnly }} />
    439                                         </label>
    440                                 <# } #>
    441438                                <label class="setting" data-setting="description">
    442439                                        <span class="name"><?php _e( 'Description' ); ?></span>
    443440                                        <textarea {{ maybeReadOnly }}>{{ data.description }}</textarea>
    … …  
    456453                                                <# } #>
    457454                                        </div>
    458455                                <# } #>
     456                                <label class="setting" data-setting="url">
     457                                        <span class="name"><?php _e( 'Copy Link' ); ?></span>
     458                                        <input type="text" value="{{ data.url }}" readonly />
     459                                </label>
    459460                                <div class="attachment-compat"></div>
    460461                        </div>
    461462
    … …  
    595596                        </div>
    596597                </div>
    597598
    598                 <label class="setting" data-setting="url">
    599                         <span class="name"><?php _e( 'URL' ); ?></span>
    600                         <input type="text" value="{{ data.url }}" readonly />
    601                 </label>
    602599                <# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
     600                <# if ( 'image' === data.type ) { #>
     601                        <label class="setting" data-setting="alt">
     602                                <span class="name"><?php _e( 'Alt Text' ); ?></span>
     603                                <input type="text" value="{{ data.alt }}" aria-describedby="alt-text-description" {{ maybeReadOnly }} />
     604                        </label>
     605                        <p class="description" id="alt-text-description"><?php _e( 'Functional replacement for the image. Leave empty if the image is not a key part of the content.' ); ?></p>
     606                <# } #>
    603607                <?php if ( post_type_supports( 'attachment', 'title' ) ) : ?>
    604608                <label class="setting" data-setting="title">
    605609                        <span class="name"><?php _e( 'Title' ); ?></span>
    … …  
    623627                        <span class="name"><?php _e( 'Caption' ); ?></span>
    624628                        <textarea {{ maybeReadOnly }}>{{ data.caption }}</textarea>
    625629                </label>
    626                 <# if ( 'image' === data.type ) { #>
    627                         <label class="setting" data-setting="alt">
    628                                 <span class="name"><?php _e( 'Alt Text' ); ?></span>
    629                                 <input type="text" value="{{ data.alt }}" {{ maybeReadOnly }} />
    630                         </label>
    631                 <# } #>
    632630                <label class="setting" data-setting="description">
    633631                        <span class="name"><?php _e( 'Description' ); ?></span>
    634632                        <textarea {{ maybeReadOnly }}>{{ data.description }}</textarea>
    635633                </label>
     634                <label class="setting" data-setting="url">
     635                        <span class="name"><?php _e( 'Copy Link' ); ?></span>
     636                        <input type="text" value="{{ data.url }}" readonly />
     637                </label>
    636638        </script>
    637639
    638640        <script type="text/html" id="tmpl-media-selection">
    … …  
    948950                                        </div>
    949951                                </div>
    950952                                <div class="column-settings">
     953                                        <label class="setting alt-text has-description">
     954                                                <span><?php _e( 'Alternative Text' ); ?></span>
     955                                                <input type="text" data-setting="alt" value="{{ data.model.alt }}" aria-describedby="alt-text-description" />
     956                                        </label>
     957                                        <p class="description" id="alt-text-description"><?php _e( 'Functional replacement for the image. Leave empty if the image is not a key part of the content.' ); ?></p>
     958
    951959                                        <?php
    952960                                        /** This filter is documented in wp-admin/includes/media.php */
    953961                                        if ( ! apply_filters( 'disable_captions', '' ) ) :
    … …  
    958966                                                </label>
    959967                                        <?php endif; ?>
    960968
    961                                         <label class="setting alt-text">
    962                                                 <span><?php _e( 'Alternative Text' ); ?></span>
    963                                                 <input type="text" data-setting="alt" value="{{ data.model.alt }}" />
    964                                         </label>
    965 
    966969                                        <h2><?php _e( 'Display Settings' ); ?></h2>
    967970                                        <div class="setting align">
    968971                                                <span><?php _e( 'Align' ); ?></span>

  • tests/qunit/index.html

     
    11181118                                <div class="file-size"><strong>File size:</strong> {{ data.filesizeHumanReadable }}</div>
    11191119                                <# if ( 'image' === data.type && ! data.uploading ) { #>
    11201120                                        <# if ( data.width && data.height ) { #>
    1121                                                 <div class="dimensions"><strong>Dimensions:</strong> {{ data.width }} &times; {{ data.height }}</div>
     1121                                                <div class="dimensions"><strong>Dimensions:</strong>
     1122                                                        {{ data.width }} by {{ data.height }} pixels                                            </div>
    11221123                                        <# } #>
    11231124                                <# } #>
    11241125
    1125                                 <# if ( data.fileLength ) { #>
    1126                                         <div class="file-length"><strong>Length:</strong> {{ data.fileLength }}</div>
     1126                                <# if ( data.fileLength && data.fileLengthHumanReadable ) { #>
     1127                                        <div class="file-length"><strong>Length:</strong>
     1128                                                <span aria-hidden="true">{{ data.fileLength }}</span>
     1129                                                <span class="screen-reader-text">{{ data.fileLengthHumanReadable }}</span>
     1130                                        </div>
    11271131                                <# } #>
    11281132
    11291133                                <# if ( 'audio' === data.type && data.meta.bitrate ) { #>
    … …  
    11431147                        </div>
    11441148
    11451149                        <div class="settings">
    1146                                 <label class="setting" data-setting="url">
    1147                                         <span class="name">URL</span>
    1148                                         <input type="text" value="{{ data.url }}" readonly />
    1149                                 </label>
    11501150                                <# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
     1151                                <# if ( 'image' === data.type ) { #>
     1152                                        <label class="setting" data-setting="alt">
     1153                                                <span class="name">Alternative Text</span>
     1154                                                <input type="text" value="{{ data.alt }}" aria-describedby="alt-text-description" {{ maybeReadOnly }} />
     1155                                        </label>
     1156                                        <p class="description" id="alt-text-description">Functional replacement for the image. Leave empty if the image is not a key part of the content.</p>
     1157                                <# } #>
    11511158                                                                <label class="setting" data-setting="title">
    11521159                                        <span class="name">Title</span>
    11531160                                        <input type="text" value="{{ data.title }}" {{ maybeReadOnly }} />
    … …  
    11661173                                        <span class="name">Caption</span>
    11671174                                        <textarea {{ maybeReadOnly }}>{{ data.caption }}</textarea>
    11681175                                </label>
    1169                                 <# if ( 'image' === data.type ) { #>
    1170                                         <label class="setting" data-setting="alt">
    1171                                                 <span class="name">Alt Text</span>
    1172                                                 <input type="text" value="{{ data.alt }}" {{ maybeReadOnly }} />
    1173                                         </label>
    1174                                 <# } #>
    11751176                                <label class="setting" data-setting="description">
    11761177                                        <span class="name">Description</span>
    11771178                                        <textarea {{ maybeReadOnly }}>{{ data.description }}</textarea>
    11781179                                </label>
    1179                                 <label class="setting">
     1180                                <div class="setting">
    11801181                                        <span class="name">Uploaded By</span>
    11811182                                        <span class="value">{{ data.authorName }}</span>
    1182                                 </label>
     1183                                </div>
    11831184                                <# if ( data.uploadedToTitle ) { #>
    1184                                         <label class="setting">
     1185                                        <div class="setting">
    11851186                                                <span class="name">Uploaded To</span>
    11861187                                                <# if ( data.uploadedToLink ) { #>
    11871188                                                        <span class="value"><a href="{{ data.uploadedToLink }}">{{ data.uploadedToTitle }}</a></span>
    … …  
    11881189                                                <# } else { #>
    11891190                                                        <span class="value">{{ data.uploadedToTitle }}</span>
    11901191                                                <# } #>
    1191                                         </label>
     1192                                        </div>
    11921193                                <# } #>
     1194                                <label class="setting" data-setting="url">
     1195                                        <span class="name">Copy Link</span>
     1196                                        <input type="text" value="{{ data.url }}" readonly />
     1197                                </label>
    11931198                                <div class="attachment-compat"></div>
    11941199                        </div>
    11951200
    … …  
    11961201                        <div class="actions">
    11971202                                <a class="view-attachment" href="{{ data.link }}">View attachment page</a>
    11981203                                <# if ( data.can.save ) { #> |
    1199                                         <a href="post.php?post={{ data.id }}&action=edit">Edit more details</a>
     1204                                        <a href="{{ data.editLink }}">Edit more details</a>
    12001205                                <# } #>
    12011206                                <# if ( ! data.uploading && data.can.remove ) { #> |
    12021207                                                                                        <button type="button" class="button-link delete-attachment">Delete Permanently</button>
    … …  
    12801285                                <div class="file-size">{{ data.filesizeHumanReadable }}</div>
    12811286                                <# if ( 'image' === data.type && ! data.uploading ) { #>
    12821287                                        <# if ( data.width && data.height ) { #>
    1283                                                 <div class="dimensions">{{ data.width }} &times; {{ data.height }}</div>
     1288                                                <div class="dimensions">
     1289                                                        {{ data.width }} by {{ data.height }} pixels                                            </div>
    12841290                                        <# } #>
    12851291
    12861292                                        <# if ( data.can.save && data.sizes ) { #>
    … …  
    12881294                                        <# } #>
    12891295                                <# } #>
    12901296
    1291                                 <# if ( data.fileLength ) { #>
    1292                                         <div class="file-length">Length: {{ data.fileLength }}</div>
     1297                                <# if ( data.fileLength && data.fileLengthHumanReadable ) { #>
     1298                                        <div class="file-length">Length:                                                <span aria-hidden="true">{{ data.fileLength }}</span>
     1299                                                <span class="screen-reader-text">{{ data.fileLengthHumanReadable }}</span>
     1300                                        </div>
    12931301                                <# } #>
    12941302
    12951303                                <# if ( ! data.uploading && data.can.remove ) { #>
    … …  
    13041312                        </div>
    13051313                </div>
    13061314
    1307                 <label class="setting" data-setting="url">
    1308                         <span class="name">URL</span>
    1309                         <input type="text" value="{{ data.url }}" readonly />
    1310                 </label>
    13111315                <# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
     1316                <# if ( 'image' === data.type ) { #>
     1317                        <label class="setting" data-setting="alt">
     1318                                <span class="name">Alt Text</span>
     1319                                <input type="text" value="{{ data.alt }}" aria-describedby="alt-text-description" {{ maybeReadOnly }} />
     1320                        </label>
     1321                        <p class="description" id="alt-text-description">Functional replacement for the image. Leave empty if the image is not a key part of the content.</p>
     1322                <# } #>
    13121323                                <label class="setting" data-setting="title">
    13131324                        <span class="name">Title</span>
    13141325                        <input type="text" value="{{ data.title }}" {{ maybeReadOnly }} />
    … …  
    13271338                        <span class="name">Caption</span>
    13281339                        <textarea {{ maybeReadOnly }}>{{ data.caption }}</textarea>
    13291340                </label>
    1330                 <# if ( 'image' === data.type ) { #>
    1331                         <label class="setting" data-setting="alt">
    1332                                 <span class="name">Alt Text</span>
    1333                                 <input type="text" value="{{ data.alt }}" {{ maybeReadOnly }} />
    1334                         </label>
    1335                 <# } #>
    13361341                <label class="setting" data-setting="description">
    13371342                        <span class="name">Description</span>
    13381343                        <textarea {{ maybeReadOnly }}>{{ data.description }}</textarea>
    13391344                </label>
     1345                <label class="setting" data-setting="url">
     1346                        <span class="name">Copy Link</span>
     1347                        <input type="text" value="{{ data.url }}" readonly />
     1348                </label>
    13401349        </script>
    13411350
    13421351        <script type="text/html" id="tmpl-media-selection">
    … …  
    16511660                                        </div>
    16521661                                </div>
    16531662                                <div class="column-settings">
     1663                                        <label class="setting alt-text has-description">
     1664                                                <span>Alternative Text</span>
     1665                                                <input type="text" data-setting="alt" value="{{ data.model.alt }}" aria-describedby="alt-text-description" />
     1666                                        </label>
     1667                                        <p class="description" id="alt-text-description">Functional replacement for the image. Leave empty if the image is not a key part of the content.</p>
     1668
    16541669                                                                                        <label class="setting caption">
    16551670                                                        <span>Caption</span>
    16561671                                                        <textarea data-setting="caption">{{ data.model.caption }}</textarea>
    16571672                                                </label>
    16581673
    1659                                         <label class="setting alt-text">
    1660                                                 <span>Alternative Text</span>
    1661                                                 <input type="text" data-setting="alt" value="{{ data.model.alt }}" />
    1662                                         </label>
    1663 
    16641674                                        <h2>Display Settings</h2>
    16651675                                        <div class="setting align">
    16661676                                                <span>Align</span>
    … …  
    17611771                                                                </div>
    17621772                                                                <label class="setting link-rel">
    17631773                                                                        <span>Link Rel</span>
    1764                                                                         <input type="text" data-setting="linkRel" value="{{ data.model.linkClassName }}" />
     1774                                                                        <input type="text" data-setting="linkRel" value="{{ data.model.linkRel }}" />
    17651775                                                                </label>
    17661776                                                                <label class="setting link-class-name">
    17671777                                                                        <span>Link CSS Class</span>