Make WordPress Core

Changeset 44796


Ignore:
Timestamp:
03/05/2019 05:49:00 PM (8 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.