Make WordPress Core

Changeset 44796


Ignore:
Timestamp:
03/05/2019 05:49:00 PM (6 years ago)
Author:
afercia
Message:

Accessibility: Replace media placeholder clickable divs with buttons.

<button> elements are natively interactive, supported by any assistive technology, and must be used instead of non-semantic, non-accessible <div> elements.

Also, this change aligns the Media Widgets and the Customizer site icon and site logo controls with the design pattern used in the new Block Editor for similar controls.

Props ramonopoly, welcher, afercia.
Fixes #43151.

Location:
trunk
Files:
7 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/customize-controls.css

    r44791 r44796  
    13801380
    13811381.customize-control .attachment-media-view .placeholder,
     1382.customize-control .attachment-media-view .button-add-media,
    13821383.customize-control-header .placeholder {
    13831384    width: 100%;
     
    13891390    padding: 9px 0;
    13901391    line-height: 20px;
     1392}
     1393
     1394.customize-control .attachment-media-view .button-add-media {
     1395    cursor: pointer;
     1396    background-color: #edeff0;
     1397    color: #32373c;
     1398}
     1399
     1400.customize-control .attachment-media-view .button-add-media:hover {
     1401    background-color: #fbfbfc;
     1402}
     1403
     1404.customize-control .attachment-media-view .button-add-media:focus {
     1405    background-color: #fbfbfc;
     1406    border-style: solid;
     1407    border-color: #5b9dd9;
     1408    box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
     1409    /* Only visible in Windows High Contrast mode */
     1410    outline: 2px solid transparent;
     1411    outline-offset: -2px;
    13911412}
    13921413
  • trunk/src/wp-admin/css/widgets.css

    r44791 r44796  
    8585}
    8686
     87.media-widget-control .attachment-media-view .button-add-media,
    8788.media-widget-control .placeholder {
    8889    border: 1px dashed #b4b9be;
     
    9495    text-align: center;
    9596    width: 100%;
     97}
     98
     99.media-widget-control .attachment-media-view .button-add-media {
     100    cursor: pointer;
     101    background-color: #edeff0;
     102    color: #32373c;
     103}
     104
     105.media-widget-control .attachment-media-view .button-add-media:hover {
     106    background-color: #fbfbfc;
     107}
     108
     109.media-widget-control .attachment-media-view .button-add-media:focus {
     110    background-color: #fbfbfc;
     111    border-style: solid;
     112    border-color: #5b9dd9;
     113    box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
     114    /* Only visible in Windows High Contrast mode */
     115    outline: 2px solid transparent;
     116    outline-offset: -2px;
    96117}
    97118
  • trunk/src/wp-includes/customize/class-wp-customize-media-control.php

    r44785 r44796  
    133133        ?>
    134134        <#
    135         var selectButtonId = _.uniqueId( 'customize-media-control-button-' );
    136135        var descriptionId = _.uniqueId( 'customize-media-control-description-' );
    137136        var describedByAttr = data.description ? ' aria-describedby="' + descriptionId + '" ' : '';
    138137        #>
    139138        <# if ( data.label ) { #>
    140             <label class="customize-control-title" for="{{ selectButtonId }}">{{ data.label }}</label>
     139            <span class="customize-control-title">{{ data.label }}</span>
    141140        <# } #>
    142141        <div class="customize-control-notifications-container"></div>
     
    183182                    <# if ( data.canUpload ) { #>
    184183                    <button type="button" class="button remove-button">{{ data.button_labels.remove }}</button>
    185                     <button type="button" class="button upload-button control-focus" id="{{ selectButtonId }}" {{{ describedByAttr }}}>{{ data.button_labels.change }}</button>
     184                    <button type="button" class="button upload-button control-focus" {{{ describedByAttr }}}>{{ data.button_labels.change }}</button>
    186185                    <# } #>
    187186                </div>
     
    189188        <# } else { #>
    190189            <div class="attachment-media-view">
    191                 <div class="placeholder">
    192                         {{ data.button_labels.placeholder }}
    193                 </div>
     190                <# if ( data.canUpload ) { #>
     191                    <button type="button" class="upload-button button-add-media" {{{ describedByAttr }}}>{{ data.button_labels.select }}</button>
     192                <# } #>
    194193                <div class="actions">
    195194                    <# if ( data.defaultAttachment ) { #>
    196195                        <button type="button" class="button default-button">{{ data.button_labels['default'] }}</button>
    197                     <# } #>
    198                     <# if ( data.canUpload ) { #>
    199                     <button type="button" class="button upload-button" id="{{ selectButtonId }}" {{{ describedByAttr }}}>{{ data.button_labels.select }}</button>
    200196                    <# } #>
    201197                </div>
     
    242238                return array(
    243239                    'select'       => __( 'Select image' ),
     240                    'site_icon'    => __( 'Select site icon' ),
    244241                    'change'       => __( 'Change image' ),
    245242                    'default'      => __( 'Default' ),
  • trunk/src/wp-includes/customize/class-wp-customize-site-icon-control.php

    r41162 r44796  
    4848    public function content_template() {
    4949        ?>
    50         <label for="{{ data.settings['default'] }}-button">
    51             <# if ( data.label ) { #>
    52                 <span class="customize-control-title">{{ data.label }}</span>
    53             <# } #>
    54             <# if ( data.description ) { #>
    55                 <span class="description customize-control-description">{{{ data.description }}}</span>
    56             <# } #>
    57         </label>
     50        <# if ( data.label ) { #>
     51            <span class="customize-control-title">{{ data.label }}</span>
     52        <# } #>
     53        <# if ( data.description ) { #>
     54            <span class="description customize-control-description">{{{ data.description }}}</span>
     55        <# } #>
    5856
    5957        <# if ( data.attachment && data.attachment.id ) { #>
     
    7573                    <# if ( data.canUpload ) { #>
    7674                        <button type="button" class="button remove-button"><?php echo $this->button_labels['remove']; ?></button>
    77                         <button type="button" class="button upload-button" id="{{ data.settings['default'] }}-button"><?php echo $this->button_labels['change']; ?></button>
     75                        <button type="button" class="button upload-button"><?php echo $this->button_labels['change']; ?></button>
    7876                    <# } #>
    7977                </div>
     
    8179        <# } else { #>
    8280            <div class="attachment-media-view">
    83                 <div class="placeholder">
    84                     <?php echo $this->button_labels['placeholder']; ?>
    85                 </div>
     81                <# if ( data.canUpload ) { #>
     82                    <button type="button" class="upload-button button-add-media"><?php echo $this->button_labels['site_icon']; ?></button>
     83                <# } #>
    8684                <div class="actions">
    8785                    <# if ( data.defaultAttachment ) { #>
    8886                        <button type="button" class="button default-button"><?php echo $this->button_labels['default']; ?></button>
    89                     <# } #>
    90                     <# if ( data.canUpload ) { #>
    91                         <button type="button" class="button upload-button" id="{{ data.settings['default'] }}-button"><?php echo $this->button_labels['select']; ?></button>
    9287                    <# } #>
    9388                </div>
  • trunk/src/wp-includes/widgets/class-wp-widget-media-gallery.php

    r44767 r44796  
    229229            <# } else { #>
    230230                <div class="attachment-media-view">
    231                     <p class="placeholder"><?php echo esc_html( $this->l10n['no_media_selected'] ); ?></p>
     231                    <button type="button" class="placeholder button-add-media"><?php echo esc_html( $this->l10n['add_media'] ); ?></button>
    232232                </div>
    233233            <# } #>
  • trunk/src/wp-includes/widgets/class-wp-widget-media.php

    r43571 r44796  
    412412            <div class="media-widget-preview <?php echo esc_attr( $this->id_base ); ?>">
    413413                <div class="attachment-media-view">
    414                     <div class="placeholder"><?php echo esc_html( $this->l10n['no_media_selected'] ); ?></div>
     414                    <button type="button" class="select-media button-add-media not-selected">
     415                        <?php echo esc_html( $this->l10n['add_media'] ); ?>
     416                    </button>
    415417                </div>
    416418            </div>
     
    424426                </button>
    425427            <?php endif; ?>
    426                 <button type="button" class="button select-media not-selected">
    427                     <?php echo esc_html( $this->l10n['add_media'] ); ?>
    428                 </button>
    429428            </p>
    430429            <div class="media-widget-fields">
  • trunk/tests/qunit/index.html

    r44655 r44796  
    4646        <script src="../../build/wp-includes/js/mediaelement/wp-mediaelement.js"></script>
    4747        <script>
    48             window._wpMediaViewsL10n = {"url":"URL","addMedia":"Add Media","search":"Search","select":"Select","cancel":"Cancel","update":"Update","replace":"Replace","remove":"Remove","back":"Back","selected":"%d selected","dragInfo":"Drag and drop to reorder media files.","uploadFilesTitle":"Upload Files","uploadImagesTitle":"Upload Images","mediaLibraryTitle":"Media Library","insertMediaTitle":"Insert Media","createNewGallery":"Create a new gallery","createNewPlaylist":"Create a new playlist","createNewVideoPlaylist":"Create a new video playlist","returnToLibrary":"\u2190 Return to library","allMediaItems":"All media items","allDates":"All dates","noItemsFound":"No items found.","insertIntoPost":"Insert into post","unattached":"Unattached","trash":"Trash","uploadedToThisPost":"Uploaded to this post","warnDelete":"You are about to permanently delete this item.\nThis will remove it from your site.\n 'Cancel' to stop, 'OK' to delete.","warnBulkDelete":"You are about to permanently delete these items.\nThis will remove them from your site.\n 'Cancel' to stop, 'OK' to delete.","warnBulkTrash":"You are about to trash these items.\n  'Cancel' to stop, 'OK' to delete.","bulkSelect":"Bulk Select","cancelSelection":"Cancel Selection","trashSelected":"Trash Selected","untrashSelected":"Untrash Selected","deleteSelected":"Delete Selected","deletePermanently":"Delete Permanently","apply":"Apply","filterByDate":"Filter by date","filterByType":"Filter by type","searchMediaLabel":"Search Media","searchMediaPlaceholder":"Search media items...","noMedia":"No media files found.","attachmentDetails":"Attachment Details","insertFromUrlTitle":"Insert from URL","setFeaturedImageTitle":"Featured Image","setFeaturedImage":"Set featured image","createGalleryTitle":"Create Gallery","editGalleryTitle":"Edit Gallery","cancelGalleryTitle":"\u2190 Cancel Gallery","insertGallery":"Insert gallery","updateGallery":"Update gallery","addToGallery":"Add to gallery","addToGalleryTitle":"Add to Gallery","reverseOrder":"Reverse order","imageDetailsTitle":"Image Details","imageReplaceTitle":"Replace Image","imageDetailsCancel":"Cancel Edit","editImage":"Edit Image","chooseImage":"Choose Image","selectAndCrop":"Select and Crop","skipCropping":"Skip Cropping","cropImage":"Crop Image","cropYourImage":"Crop your image","cropping":"Cropping\u2026","suggestedDimensions":"Suggested image dimensions:","cropError":"There has been an error cropping your image.","audioDetailsTitle":"Audio Details","audioReplaceTitle":"Replace Audio","audioAddSourceTitle":"Add Audio Source","audioDetailsCancel":"Cancel Edit","videoDetailsTitle":"Video Details","videoReplaceTitle":"Replace Video","videoAddSourceTitle":"Add Video Source","videoDetailsCancel":"Cancel Edit","videoSelectPosterImageTitle":"Select Poster Image","videoAddTrackTitle":"Add Subtitles","playlistDragInfo":"Drag and drop to reorder tracks.","createPlaylistTitle":"Create Audio Playlist","editPlaylistTitle":"Edit Audio Playlist","cancelPlaylistTitle":"\u2190 Cancel Audio Playlist","insertPlaylist":"Insert audio playlist","updatePlaylist":"Update audio playlist","addToPlaylist":"Add to audio playlist","addToPlaylistTitle":"Add to Audio Playlist","videoPlaylistDragInfo":"Drag and drop to reorder videos.","createVideoPlaylistTitle":"Create Video Playlist","editVideoPlaylistTitle":"Edit Video Playlist","cancelVideoPlaylistTitle":"\u2190 Cancel Video Playlist","insertVideoPlaylist":"Insert video playlist","updateVideoPlaylist":"Update video playlist","addToVideoPlaylist":"Add to video playlist","addToVideoPlaylistTitle":"Add to Video Playlist","settings":{"tabs":[],"tabUrl":"http:\/\/src.wordpress-develop.dev\/wp-admin\/media-upload.php?chromeless=1","mimeTypes":{"image":"Images","audio":"Audio","video":"Video"},"captions":true,"nonce":{"sendToEditor":"9585d11de6"},"post":{"id":0},"defaultProps":{"link":"none","align":"","size":""},"attachmentCounts":{"audio":1,"video":1},"embedExts":["mp3","ogg","wma","m4a","wav","mp4","m4v","webm","ogv","wmv","flv"],"embedMimes":{"mp3":"audio\/mpeg","ogg":"audio\/ogg","wma":"audio\/x-ms-wma","m4a":"audio\/mpeg","wav":"audio\/wav","mp4":"video\/mp4","m4v":"video\/mp4","webm":"video\/webm","ogv":"video\/ogg","wmv":"video\/x-ms-wmv","flv":"video\/x-flv"},"contentWidth":525,"months":[{"year":"2017","month":"4","text":"April 2017"}],"mediaTrash":0}};
     48            window._wpMediaViewsL10n = {"url":"URL","addMedia":"Add Media","search":"Search","select":"Select","cancel":"Cancel","update":"Update","replace":"Replace","remove":"Remove","back":"Back","selected":"%d selected","dragInfo":"Drag and drop to reorder media files.","uploadFilesTitle":"Upload Files","uploadImagesTitle":"Upload Images","mediaLibraryTitle":"Media Library","insertMediaTitle":"Add Media","createNewGallery":"Create a new gallery","createNewPlaylist":"Create a new playlist","createNewVideoPlaylist":"Create a new video playlist","returnToLibrary":"\u2190 Return to library","allMediaItems":"All media items","allDates":"All dates","noItemsFound":"No items found.","insertIntoPost":"Insert into post","unattached":"Unattached","mine":"Mine","trash":"Trash","uploadedToThisPost":"Uploaded to this post","warnDelete":"You are about to permanently delete this item from your site.\nThis action cannot be undone.\n 'Cancel' to stop, 'OK' to delete.","warnBulkDelete":"You are about to permanently delete these items from your site.\nThis action cannot be undone.\n 'Cancel' to stop, 'OK' to delete.","warnBulkTrash":"You are about to trash these items.\n  'Cancel' to stop, 'OK' to delete.","bulkSelect":"Bulk Select","cancelSelection":"Cancel Selection","trashSelected":"Trash Selected","untrashSelected":"Untrash Selected","deleteSelected":"Delete Selected","deletePermanently":"Delete Permanently","apply":"Apply","filterByDate":"Filter by date","filterByType":"Filter by type","searchMediaLabel":"Search Media","searchMediaPlaceholder":"Search media items...","noMedia":"No media files found.","attachmentDetails":"Attachment Details","insertFromUrlTitle":"Insert from URL","setFeaturedImageTitle":"Featured Image","setFeaturedImage":"Set featured image","createGalleryTitle":"Create Gallery","editGalleryTitle":"Edit Gallery","cancelGalleryTitle":"\u2190 Cancel Gallery","insertGallery":"Insert gallery","updateGallery":"Update gallery","addToGallery":"Add to gallery","addToGalleryTitle":"Add to Gallery","reverseOrder":"Reverse order","imageDetailsTitle":"Image Details","imageReplaceTitle":"Replace Image","imageDetailsCancel":"Cancel Edit","editImage":"Edit Image","chooseImage":"Choose Image","selectAndCrop":"Select and Crop","skipCropping":"Skip Cropping","cropImage":"Crop Image","cropYourImage":"Crop your image","cropping":"Cropping\u2026","suggestedDimensions":"Suggested image dimensions: %1$s by %2$s pixels.","cropError":"There has been an error cropping your image.","audioDetailsTitle":"Audio Details","audioReplaceTitle":"Replace Audio","audioAddSourceTitle":"Add Audio Source","audioDetailsCancel":"Cancel Edit","videoDetailsTitle":"Video Details","videoReplaceTitle":"Replace Video","videoAddSourceTitle":"Add Video Source","videoDetailsCancel":"Cancel Edit","videoSelectPosterImageTitle":"Select Poster Image","videoAddTrackTitle":"Add Subtitles","playlistDragInfo":"Drag and drop to reorder tracks.","createPlaylistTitle":"Create Audio Playlist","editPlaylistTitle":"Edit Audio Playlist","cancelPlaylistTitle":"\u2190 Cancel Audio Playlist","insertPlaylist":"Insert audio playlist","updatePlaylist":"Update audio playlist","addToPlaylist":"Add to audio playlist","addToPlaylistTitle":"Add to Audio Playlist","videoPlaylistDragInfo":"Drag and drop to reorder videos.","createVideoPlaylistTitle":"Create Video Playlist","editVideoPlaylistTitle":"Edit Video Playlist","cancelVideoPlaylistTitle":"\u2190 Cancel Video Playlist","insertVideoPlaylist":"Insert video playlist","updateVideoPlaylist":"Update video playlist","addToVideoPlaylist":"Add to video playlist","addToVideoPlaylistTitle":"Add to Video Playlist","settings":{"tabs":[],"tabUrl":"http:\/\/src.wordpress-develop.test\/wp-admin\/media-upload.php?chromeless=1","mimeTypes":{"image":"Images","audio":"Audio","video":"Video"},"captions":true,"nonce":{"sendToEditor":"68dd6db760"},"post":{"id":0},"defaultProps":{"link":"none","align":"","size":""},"attachmentCounts":{"audio":1,"video":1},"oEmbedProxyUrl":"http:\/\/src.wordpress-develop.test\/wp-json\/oembed\/1.0\/proxy","embedExts":["mp3","ogg","flac","m4a","wav","mp4","m4v","webm","ogv","flv"],"embedMimes":{"mp3":"audio\/mpeg","ogg":"audio\/ogg","flac":"audio\/flac","m4a":"audio\/mpeg","wav":"audio\/wav","mp4":"video\/mp4","m4v":"video\/mp4","webm":"video\/webm","ogv":"video\/ogg","flv":"video\/x-flv"},"contentWidth":640,"months":[{"year":"2018","month":"11","text":"November 2018"},{"year":"2018","month":"10","text":"October 2018"},{"year":"2018","month":"7","text":"July 2018"},{"year":"2014","month":"1","text":"January 2014"},{"year":"2013","month":"12","text":"December 2013"},{"year":"2013","month":"9","text":"September 2013"},{"year":"2013","month":"4","text":"April 2013"},{"year":"2013","month":"3","text":"March 2013"},{"year":"2012","month":"7","text":"July 2012"},{"year":"2012","month":"6","text":"June 2012"},{"year":"2011","month":"7","text":"July 2011"},{"year":"2011","month":"1","text":"January 2011"}],"mediaTrash":0}};
    4949        </script>
    5050        <script src="../../build/wp-includes/js/media-views.js"></script>
     
    589589            </div><!-- #widgets-left -->
    590590
    591             <script type="text/html" id="tmpl-widget-media-media_image-control">
     591        <script type="text/html" id="tmpl-widget-media-media_image-control">
    592592            <# var elementIdPrefix = 'el' + String( Math.random() ) + '_' #>
    593593            <p>
     
    595595                <input id="{{ elementIdPrefix }}title" type="text" class="widefat title">
    596596            </p>
    597             <div class="media-widget-preview">
     597            <div class="media-widget-preview media_image">
    598598                <div class="attachment-media-view">
    599                     <div class="placeholder">No image selected</div>
     599                    <button type="button" class="select-media button-add-media not-selected">
     600                        Add Image                   </button>
    600601                </div>
    601602            </div>
     
    603604                <button type="button" class="button edit-media selected">
    604605                    Edit Image              </button>
    605                 <button type="button" class="button change-media select-media selected">
     606                            <button type="button" class="button change-media select-media selected">
    606607                    Replace Image               </button>
    607                 <button type="button" class="button select-media not-selected">
    608                     Add Image               </button>
    609             </p>
    610         </script>
    611                 <script type="text/html" id="tmpl-wp-media-widget-image-preview">
    612             <#
    613             var describedById = 'describedBy-' + String( Math.random() );
    614             #>
     608                        </p>
     609            <div class="media-widget-fields">
     610            </div>
     611        </script>
     612
     613        <script type="text/html" id="tmpl-wp-media-widget-image-preview">
    615614            <# if ( data.error && 'missing_attachment' === data.error ) { #>
    616615                <div class="notice notice-error notice-alt notice-missing-attachment">
    617                     <p>We can&#8217;t find that image. Check your <a href="http://src.wordpress-develop.dev/wp-admin/upload.php">media library</a> and make sure it wasn&#8217;t deleted.</p>
     616                    <p>We can&#8217;t find that image. Check your <a href="http://src.wordpress-develop.test/wp-admin/upload.php">media library</a> and make sure it wasn&#8217;t deleted.</p>
    618617                </div>
    619618            <# } else if ( data.error ) { #>
     
    622621                </div>
    623622            <# } else if ( data.url ) { #>
    624                 <img class="attachment-thumb" src="{{ data.url }}" draggable="false" alt="{{ data.alt }}" <# if ( ! data.alt && data.currentFilename ) { #> aria-describedby="{{ describedById }}" <# } #> />
    625                 <# if ( ! data.alt && data.currentFilename ) { #>
    626                     <p class="hidden" id="{{ describedById }}">Current image: {{ data.currentFilename }}</p>
    627                 <# } #>
     623                <img class="attachment-thumb" src="{{ data.url }}" draggable="false" alt="{{ data.alt }}"
     624                    <# if ( ! data.alt && data.currentFilename ) { #>
     625                        aria-label="
     626                        The current image has no alternative text. The file name is: {{ data.currentFilename }}                     "
     627                    <# } #>
     628                />
    628629            <# } #>
    629630        </script>
    630                 <script type="text/html" id="tmpl-widget-media-media_video-control">
     631
     632        <script type="text/html" id="tmpl-widget-media-media_video-control">
    631633            <# var elementIdPrefix = 'el' + String( Math.random() ) + '_' #>
    632634            <p>
     
    634636                <input id="{{ elementIdPrefix }}title" type="text" class="widefat title">
    635637            </p>
    636             <div class="media-widget-preview">
     638            <div class="media-widget-preview media_video">
    637639                <div class="attachment-media-view">
    638                     <div class="placeholder">No video selected</div>
     640                    <button type="button" class="select-media button-add-media not-selected">
     641                        Add Video                   </button>
    639642                </div>
    640643            </div>
     
    642645                <button type="button" class="button edit-media selected">
    643646                    Edit Video              </button>
    644                 <button type="button" class="button change-media select-media selected">
     647                            <button type="button" class="button change-media select-media selected">
    645648                    Replace Video               </button>
    646                 <button type="button" class="button select-media not-selected">
    647                     Add Video               </button>
    648             </p>
    649         </script>
    650                 <script type="text/html" id="tmpl-wp-media-widget-video-preview">
     649                        </p>
     650            <div class="media-widget-fields">
     651            </div>
     652        </script>
     653
     654        <script type="text/html" id="tmpl-wp-media-widget-video-preview">
    651655            <# if ( data.error && 'missing_attachment' === data.error ) { #>
    652656                <div class="notice notice-error notice-alt notice-missing-attachment">
    653                     <p>We can&#8217;t find that video. Check your <a href="http://src.wordpress-develop.dev/wp-admin/upload.php">media library</a> and make sure it wasn&#8217;t deleted.</p>
     657                    <p>We can&#8217;t find that video. Check your <a href="http://src.wordpress-develop.test/wp-admin/upload.php">media library</a> and make sure it wasn&#8217;t deleted.</p>
    654658                </div>
    655659            <# } else if ( data.error && 'unsupported_file_type' === data.error ) { #>
    656660                <div class="notice notice-error notice-alt notice-missing-attachment">
    657                     <p>Sorry, we can&#8217;t display the video file type selected. Please select a supported video file (<code>.mp4</code>, <code>.m4v</code>, <code>.webm</code>, <code>.ogv</code>, <code>.wmv</code>, <code>.flv</code>) or stream (YouTube or Vimeo) instead.</p>
     661                    <p>Sorry, we can&#8217;t load the video at the supplied URL. Please check that the URL is for a supported video file (<code>.mp4</code>, <code>.m4v</code>, <code>.webm</code>, <code>.ogv</code>, <code>.flv</code>) or stream (e.g. YouTube and Vimeo).</p>
    658662                </div>
    659663            <# } else if ( data.error ) { #>
     
    661665                    <p>Unable to preview media due to an unknown error.</p>
    662666                </div>
    663             <# } else if ( data.is_hosted_embed && data.model.poster ) { #>
     667            <# } else if ( data.is_oembed && data.model.poster ) { #>
    664668                <a href="{{ data.model.src }}" target="_blank" class="media-widget-video-link">
    665669                    <img src="{{ data.model.poster }}" />
    666670                </a>
    667             <# } else if ( data.is_hosted_embed ) { #>
     671            <# } else if ( data.is_oembed ) { #>
    668672                <a href="{{ data.model.src }}" target="_blank" class="media-widget-video-link no-poster">
    669673                    <span class="dashicons dashicons-format-video"></span>
     
    689693    } else {
    690694        h = data.model.height;
    691     }
     695    }
    692696
    693697    if ( w ) {
     
    709713    <# if ( w ) { #>width="{{ w }}"<# } #>
    710714    <# if ( h ) { #>height="{{ h }}"<# } #>
    711     <#
     715            <#
    712716        if ( ! _.isUndefined( data.model.poster ) && data.model.poster ) {
    713717            #> poster="{{ data.model.poster }}"<#
    714718        } #>
    715         preload="{{ _.isUndefined( data.model.preload ) ? 'metadata' : data.model.preload }}"<#
    716      if ( ! _.isUndefined( data.model.autoplay ) && data.model.autoplay ) {
     719            preload         ="{{ _.isUndefined( data.model.preload ) ? 'metadata' : data.model.preload }}"
     720                <#
     721        if ( ! _.isUndefined( data.model.autoplay ) && data.model.autoplay ) {
    717722        #> autoplay<#
    718723    }
    719      if ( ! _.isUndefined( data.model.loop ) && data.model.loop ) {
     724        if ( ! _.isUndefined( data.model.loop ) && data.model.loop ) {
    720725        #> loop<#
    721726    }
     
    732737    } #>
    733738
    734     <# if ( data.model.mp4 ) { #>
     739        <# if ( data.model.mp4 ) { #>
    735740    <source src="{{ data.model.mp4 }}" type="{{ settings.embedMimes[ 'mp4' ] }}" />
    736741    <# } #>
    737     <# if ( data.model.m4v ) { #>
     742        <# if ( data.model.m4v ) { #>
    738743    <source src="{{ data.model.m4v }}" type="{{ settings.embedMimes[ 'm4v' ] }}" />
    739744    <# } #>
    740     <# if ( data.model.webm ) { #>
     745        <# if ( data.model.webm ) { #>
    741746    <source src="{{ data.model.webm }}" type="{{ settings.embedMimes[ 'webm' ] }}" />
    742747    <# } #>
    743     <# if ( data.model.ogv ) { #>
     748        <# if ( data.model.ogv ) { #>
    744749    <source src="{{ data.model.ogv }}" type="{{ settings.embedMimes[ 'ogv' ] }}" />
    745750    <# } #>
    746     <# if ( data.model.wmv ) { #>
    747     <source src="{{ data.model.wmv }}" type="{{ settings.embedMimes[ 'wmv' ] }}" />
    748     <# } #>
    749     <# if ( data.model.flv ) { #>
     751        <# if ( data.model.flv ) { #>
    750752    <source src="{{ data.model.flv }}" type="{{ settings.embedMimes[ 'flv' ] }}" />
    751753    <# } #>
     
    753755</video>
    754756</div>
    755             <# } #>
    756         </script>
    757             <script type="text/html" id="tmpl-widget-media-media_audio-control">
    758                 <# var elementIdPrefix = 'el' + String( Math.random() ) + '_' #>
    759                 <p>
    760                     <label for="{{ elementIdPrefix }}title">Title:</label>
    761                     <input id="{{ elementIdPrefix }}title" type="text" class="widefat title">
    762                 </p>
    763                 <div class="media-widget-preview">
    764                     <div class="attachment-media-view">
    765                         <div class="placeholder">No audio selected</div>
    766                     </div>
    767                 </div>
    768                 <p class="media-widget-buttons">
    769                     <button type="button" class="button edit-media selected">
    770                         Edit Audio              </button>
    771                     <button type="button" class="button change-media select-media selected">
    772                         Replace Audio               </button>
    773                     <button type="button" class="button select-media not-selected">
    774                         Add Audio               </button>
    775                 </p>
    776             </script>
    777             <script type="text/html" id="tmpl-wp-media-widget-audio-preview">
    778                 <# if ( data.error && 'missing_attachment' === data.error ) { #>
    779                     <div class="notice notice-error notice-alt notice-missing-attachment">
    780                         <p>We can&#8217;t find that audio file. Check your <a href="http://src.wordpress-develop.dev/wp-admin/upload.php">media library</a> and make sure it wasn&#8217;t deleted.</p>
    781                     </div>
    782                 <# } else if ( data.error ) { #>
    783                     <div class="notice notice-error notice-alt">
    784                         <p>Unable to preview media due to an unknown error.</p>
    785                     </div>
    786                 <# } else if ( data.model && data.model.src ) { #>
    787                     <audio style="visibility: hidden"
    788                         controls
    789                         class="wp-audio-shortcode"
    790                         width="{{ _.isUndefined( data.model.width ) ? 400 : data.model.width }}"
    791                         preload="{{ _.isUndefined( data.model.preload ) ? 'none' : data.model.preload }}"
    792                         <#
    793                         if ( ! _.isUndefined( data.model.autoplay ) && data.model.autoplay ) {
    794                             #> autoplay<#
    795                         }
    796                         if ( ! _.isUndefined( data.model.loop ) && data.model.loop ) {
    797                             #> loop<#
    798                         }
    799                         #>
    800                     >
    801                     <# if ( ! _.isEmpty( data.model.src ) ) { #>
    802                         <source src="{{ data.model.src }}" type="{{ wp.media.view.settings.embedMimes[ data.model.src.split('.').pop() ] }}" />
    803                     <# } #>
    804 
    805                     <# if ( ! _.isEmpty( data.model.mp3 ) ) { #>
    806                         <source src="{{ data.model.mp3 }}" type="{{ wp.media.view.settings.embedMimes[ 'mp3' ] }}" />
    807                     <# } #>
    808                     <# if ( ! _.isEmpty( data.model.ogg ) ) { #>
    809                         <source src="{{ data.model.ogg }}" type="{{ wp.media.view.settings.embedMimes[ 'ogg' ] }}" />
    810                     <# } #>
    811                     <# if ( ! _.isEmpty( data.model.wma ) ) { #>
    812                         <source src="{{ data.model.wma }}" type="{{ wp.media.view.settings.embedMimes[ 'wma' ] }}" />
    813                     <# } #>
    814                     <# if ( ! _.isEmpty( data.model.m4a ) ) { #>
    815                         <source src="{{ data.model.m4a }}" type="{{ wp.media.view.settings.embedMimes[ 'm4a' ] }}" />
    816                     <# } #>
    817                     <# if ( ! _.isEmpty( data.model.wav ) ) { #>
    818                         <source src="{{ data.model.wav }}" type="{{ wp.media.view.settings.embedMimes[ 'wav' ] }}" />
    819                     <# } #>
    820                     </audio>
    821                 <# } #>
    822             </script>
    823             <script type="text/html" id="tmpl-media-frame">
     757                <# } #>
     758        </script>
     759
     760        <script type="text/html" id="tmpl-widget-media-media_audio-control">
     761            <# var elementIdPrefix = 'el' + String( Math.random() ) + '_' #>
     762            <p>
     763                <label for="{{ elementIdPrefix }}title">Title:</label>
     764                <input id="{{ elementIdPrefix }}title" type="text" class="widefat title">
     765            </p>
     766            <div class="media-widget-preview media_audio">
     767                <div class="attachment-media-view">
     768                    <button type="button" class="select-media button-add-media not-selected">
     769                        Add Audio                   </button>
     770                </div>
     771            </div>
     772            <p class="media-widget-buttons">
     773                <button type="button" class="button edit-media selected">
     774                    Edit Audio              </button>
     775                            <button type="button" class="button change-media select-media selected">
     776                    Replace Audio               </button>
     777                        </p>
     778            <div class="media-widget-fields">
     779            </div>
     780        </script>
     781
     782        <script type="text/html" id="tmpl-wp-media-widget-audio-preview">
     783            <# if ( data.error && 'missing_attachment' === data.error ) { #>
     784                <div class="notice notice-error notice-alt notice-missing-attachment">
     785                    <p>We can&#8217;t find that audio file. Check your <a href="http://src.wordpress-develop.test/wp-admin/upload.php">media library</a> and make sure it wasn&#8217;t deleted.</p>
     786                </div>
     787            <# } else if ( data.error ) { #>
     788                <div class="notice notice-error notice-alt">
     789                    <p>Unable to preview media due to an unknown error.</p>
     790                </div>
     791            <# } else if ( data.model && data.model.src ) { #>
     792                <audio style="visibility: hidden"
     793    controls
     794    class="wp-audio-shortcode"
     795    width="{{ _.isUndefined( data.model.width ) ? 400 : data.model.width }}"
     796    preload="{{ _.isUndefined( data.model.preload ) ? 'none' : data.model.preload }}"
     797    <#
     798        if ( ! _.isUndefined( data.model.autoplay ) && data.model.autoplay ) {
     799        #> autoplay<#
     800    }
     801        if ( ! _.isUndefined( data.model.loop ) && data.model.loop ) {
     802        #> loop<#
     803    }
     804    #>
     805>
     806    <# if ( ! _.isEmpty( data.model.src ) ) { #>
     807    <source src="{{ data.model.src }}" type="{{ wp.media.view.settings.embedMimes[ data.model.src.split('.').pop() ] }}" />
     808    <# } #>
     809
     810        <# if ( ! _.isEmpty( data.model.mp3 ) ) { #>
     811    <source src="{{ data.model.mp3 }}" type="{{ wp.media.view.settings.embedMimes[ 'mp3' ] }}" />
     812    <# } #>
     813            <# if ( ! _.isEmpty( data.model.ogg ) ) { #>
     814    <source src="{{ data.model.ogg }}" type="{{ wp.media.view.settings.embedMimes[ 'ogg' ] }}" />
     815    <# } #>
     816            <# if ( ! _.isEmpty( data.model.flac ) ) { #>
     817    <source src="{{ data.model.flac }}" type="{{ wp.media.view.settings.embedMimes[ 'flac' ] }}" />
     818    <# } #>
     819            <# if ( ! _.isEmpty( data.model.m4a ) ) { #>
     820    <source src="{{ data.model.m4a }}" type="{{ wp.media.view.settings.embedMimes[ 'm4a' ] }}" />
     821    <# } #>
     822            <# if ( ! _.isEmpty( data.model.wav ) ) { #>
     823    <source src="{{ data.model.wav }}" type="{{ wp.media.view.settings.embedMimes[ 'wav' ] }}" />
     824    <# } #>
     825        </audio>
     826                <# } #>
     827        </script>
     828
     829    <script type="text/html" id="tmpl-media-frame">
    824830        <div class="media-frame-menu"></div>
    825831        <div class="media-frame-title"></div>
     
    836842            <input id="{{ elementIdPrefix }}title" type="text" class="widefat title">
    837843        </p>
    838         <div class="media-widget-preview">
     844        <div class="media-widget-preview media_gallery">
    839845            <div class="attachment-media-view">
    840                 <div class="placeholder">No images selected</div>
    841             </div>
    842             </div>
    843             <p class="media-widget-buttons">
    844                 <button type="button" class="button edit-media selected">
    845                     Edit Gallery                </button>
    846                 <button type="button" class="button change-media select-media selected">
    847                     Replace Media               </button>
    848                 <button type="button" class="button select-media not-selected">
    849                     Add Media               </button>
    850             </p>
     846                <button type="button" class="select-media button-add-media not-selected">
     847                    Add Images                  </button>
     848            </div>
     849        </div>
     850        <p class="media-widget-buttons">
     851            <button type="button" class="button edit-media selected">
     852                Edit Gallery                </button>
     853                    </p>
    851854        <div class="media-widget-fields">
    852855        </div>
    853856    </script>
    854                 <script type="text/html" id="tmpl-wp-media-widget-gallery-preview">
    855             <# var describedById = 'describedBy-' + String( Math.random() ); #>
    856             <# data.attachments = data.attachments ? JSON.parse(data.attachments) : ''; #>
    857             <# if ( Array.isArray( data.attachments ) && data.attachments.length ) { #>
    858                 <div class="gallery gallery-columns-{{ data.columns }}">
    859                     <# _.each( data.attachments, function( attachment, index ) { #>
    860                         <dl class="gallery-item">
    861                             <dt class="gallery-icon">
    862                             <# if ( attachment.sizes.thumbnail ) { #>
    863                                 <img src="{{ attachment.sizes.thumbnail.url }}" width="{{ attachment.sizes.thumbnail.width }}" height="{{ attachment.sizes.thumbnail.height }}" alt="" />
    864                             <# } else { #>
    865                                 <img src="{{ attachment.url }}" alt="" />
    866                             <# } #>
    867                             </dt>
    868                             <# if ( attachment.caption ) { #>
    869                                 <dd class="wp-caption-text gallery-caption">
    870                                     {{{ data.verifyHTML( attachment.caption ) }}}
    871                                 </dd>
    872                             <# } #>
    873                         </dl>
    874                         <# if ( index % data.columns === data.columns - 1 ) { #>
    875                             <br style="clear: both;">
    876                         <# } #>
    877                     <# } ); #>
    878                 </div>
    879             <# } else { #>
    880                 <div class="attachment-media-view">
    881                     <p class="placeholder">No images selected</p>
    882                 </div>
    883             <# } #>
    884         </script>
     857
     858    <script type="text/html" id="tmpl-wp-media-widget-gallery-preview">
     859        <#
     860        var ids = _.filter( data.ids, function( id ) {
     861            return ( id in data.attachments );
     862        } );
     863        #>
     864        <# if ( ids.length ) { #>
     865            <ul class="gallery media-widget-gallery-preview" role="list">
     866                <# _.each( ids, function( id, index ) { #>
     867                    <# var attachment = data.attachments[ id ]; #>
     868                    <# if ( index < 6 ) { #>
     869                        <li class="gallery-item">
     870                            <div class="gallery-icon">
     871                                <img alt="{{ attachment.alt }}"
     872                                    <# if ( index === 5 && data.ids.length > 6 ) { #> aria-hidden="true" <# } #>
     873                                    <# if ( attachment.sizes.thumbnail ) { #>
     874                                        src="{{ attachment.sizes.thumbnail.url }}" width="{{ attachment.sizes.thumbnail.width }}" height="{{ attachment.sizes.thumbnail.height }}"
     875                                    <# } else { #>
     876                                        src="{{ attachment.url }}"
     877                                    <# } #>
     878                                    <# if ( ! attachment.alt && attachment.filename ) { #>
     879                                        aria-label="
     880                                        The current image has no alternative text. The file name is: {{ attachment.filename }}                                          "
     881                                    <# } #>
     882                                />
     883                                <# if ( index === 5 && data.ids.length > 6 ) { #>
     884                                <div class="gallery-icon-placeholder">
     885                                    <p class="gallery-icon-placeholder-text" aria-label="
     886                                    Additional images added to this gallery: {{ data.ids.length - 5 }}                                      ">+{{ data.ids.length - 5 }}</p>
     887                                </div>
     888                                <# } #>
     889                            </div>
     890                        </li>
     891                    <# } #>
     892                <# } ); #>
     893            </ul>
     894        <# } else { #>
     895            <div class="attachment-media-view">
     896                <button type="button" class="placeholder button-add-media">Add Images</button>
     897            </div>
     898        <# } #>
     899    </script>
     900
    885901        <script type="text/html" id="tmpl-customize-control-date_time-content">
    886902
     
    22032219        </div>
    22042220    </script>
     2221
    22052222        </div><!-- end widget templates -->
    22062223        <script src="../../build/wp-includes/js/tinymce/tinymce.min.js"></script>
Note: See TracChangeset for help on using the changeset viewer.