WordPress.org

Make WordPress Core

Ticket #47610: 47610.3.diff

File 47610.3.diff, 20.4 KB (added by afercia, 14 months ago)
  • src/js/media/views/attachments/browser.js

     
    132132        },
    133133
    134134        createToolbar: function() {
    135                 var LibraryViewSwitcher, Filters, toolbarOptions;
     135                var LibraryViewSwitcher, Filters, toolbarOptions,
     136                        showFilterByType = -1 !== $.inArray( this.options.filters, [ 'uploaded', 'all' ] );
    136137
    137138                toolbarOptions = {
    138139                        controller: this.controller
     
    153154                        priority: -60
    154155                }) );
    155156
    156                 if ( -1 !== $.inArray( this.options.filters, [ 'uploaded', 'all' ] ) ) {
    157                         // "Filters" will return a <select>, need to render
    158                         // screen reader text before
     157                if ( showFilterByType || this.options.date ) {
     158                        /*
     159                         * Create a h2 heading before the select elements that filter attachments.
     160                         * This heading is visible in the modal and visually hidden in the grid.
     161                         */
     162                        this.toolbar.set( 'filters-heading', new wp.media.view.Heading( {
     163                                priority:   -100,
     164                                text:       l10n.filterAttachments,
     165                                level:      'h2',
     166                                className:  'media-attachments-filter-heading'
     167                        }).render() );
     168                }
     169
     170                if ( showFilterByType ) {
     171                        // "Filters" is a <select>, a visually hidden label element needs to be rendered before.
    159172                        this.toolbar.set( 'filtersLabel', new wp.media.view.Label({
    160173                                value: l10n.filterByType,
    161174                                attributes: {
     
    195208                                priority: -90
    196209                        }).render() );
    197210
    198                         // DateFilter is a <select>, screen reader text needs to be rendered before
     211                        // DateFilter is a <select>, a visually hidden label element needs to be rendered before.
    199212                        this.toolbar.set( 'dateFilterLabel', new wp.media.view.Label({
    200213                                value: l10n.filterByDate,
    201214                                attributes: {
     
    317330                        }
    318331
    319332                } else if ( this.options.date ) {
    320                         // DateFilter is a <select>, screen reader text needs to be rendered before
     333                        // DateFilter is a <select>, a visually hidden label element needs to be rendered before.
    321334                        this.toolbar.set( 'dateFilterLabel', new wp.media.view.Label({
    322335                                value: l10n.filterByDate,
    323336                                attributes: {
     
    333346                }
    334347
    335348                if ( this.options.search ) {
    336                         // Search is an input, screen reader text needs to be rendered before
     349                        // Search is an input, a visually hidden label element needs to be rendered before.
    337350                        this.toolbar.set( 'searchLabel', new wp.media.view.Label({
    338351                                value: l10n.searchMediaLabel,
    339352                                attributes: {
  • src/js/media/views/selection.js

     
    1 var l10n = wp.media.view.l10n,
     1var _n = wp.i18n._n,
     2        sprintf = wp.i18n.sprintf,
    23        Selection;
    34
    45/**
     
    6061                this.$el.toggleClass( 'one', 1 === collection.length );
    6162                this.$el.toggleClass( 'editing', editing );
    6263
    63                 this.$('.count').text( l10n.selected.replace('%d', collection.length) );
     64                this.$( '.count' ).text(
     65                        /* translators: %s: Number of selected media attachments. */
     66                        sprintf( _n( '%s item selected', '%s items selected', collection.length ), collection.length )
     67                );
    6468        },
    6569
    6670        edit: function( event ) {
  • src/wp-includes/css/media-views.css

     
    268268}
    269269
    270270.media-modal-content .media-frame select.attachment-filters {
    271         margin-top: 11px;
     271        margin-top: 32px;
    272272        margin-right: 2%;
    273273        width: 42%;
    274274        width: calc(48% - 12px);
     
    307307        border-top: 1px solid #ddd;
    308308}
    309309
    310 @media screen and (max-width: 782px) {
    311         .media-frame-toolbar .media-toolbar {
    312                 bottom: -48px;
    313         }
    314 }
    315 
    316310.media-toolbar-primary {
    317311        float: right;
    318312        height: 100%;
     
    768762}
    769763
    770764.media-frame.hide-menu .media-frame-menu,
     765.media-frame.hide-menu .media-frame-menu-heading,
    771766.media-frame.hide-router .media-frame-router,
    772767.media-frame.hide-toolbar .media-frame-toolbar {
    773768        display: none;
     
    780775        margin: 0;
    781776}
    782777
     778.media-frame-menu-heading,
     779.media-attachments-filter-heading {
     780        position: absolute;
     781        left: 20px;
     782        top: 22px;
     783        margin: 0;
     784        font-size: 13px;
     785        line-height: 1;
     786        /* Above the media-frame-menu. */
     787        z-index: 151;
     788}
     789
     790.media-attachments-filter-heading {
     791        top: 10px;
     792        left: 16px;
     793}
     794
     795.mode-grid .media-attachments-filter-heading {
     796        top: 0;
     797        left: -9999px;
     798}
     799
     800.mode-grid .media-frame-actions-heading {
     801        display: none;
     802}
     803
    783804.wp-core-ui .button.media-frame-menu-toggle {
    784805        display: none;
    785806}
     
    849870 * Search
    850871 */
    851872.media-frame .search {
    852         margin-top: 10px;
     873        margin-top: 32px;
    853874        padding: 4px;
    854875        font-size: 13px;
    855876        color: #444;
     
    11061127
    11071128.attachments-browser .media-toolbar {
    11081129        right: 300px;
    1109         height: 50px;
     1130        height: 72px;
     1131        background: #fff;
    11101132}
    11111133
    11121134.attachments-browser.hide-sidebar .media-toolbar {
     
    11271149.attachments-browser .attachments,
    11281150.attachments-browser .uploader-inline {
    11291151        position: absolute;
    1130         top: 50px;
     1152        top: 72px;
    11311153        left: 0;
    11321154        right: 300px;
    11331155        bottom: 0;
     
    23502372                margin: 5px 10px;
    23512373        }
    23522374
     2375        /* Visually hide the mehu heading keeping it available to assistive technologies. */
     2376        .media-frame-menu-heading {
     2377                clip: rect(1px, 1px, 1px, 1px);
     2378                -webkit-clip-path: inset(50%);
     2379                clip-path: inset(50%);
     2380                height: 1px;
     2381                overflow: hidden;
     2382                padding: 0;
     2383                width: 1px;
     2384                word-wrap: normal !important;
     2385        }
     2386
     2387        /* Reveal the menu toggle button. */
    23532388        .wp-core-ui .media-frame:not(.hide-menu) .button.media-frame-menu-toggle {
    23542389                display: inline-flex;
    23552390                align-items: center;
     
    25642599        .media-frame select {
    25652600                font-size: 16px;
    25662601        }
     2602
     2603        .media-frame .media-toolbar input[type="search"] {
     2604                line-height: 1.625; /* 26px */
     2605        }
    25672606}
    25682607
     2608@media screen and (max-width: 782px) {
     2609        .attachments-browser .media-toolbar {
     2610                height: 82px;
     2611        }
     2612
     2613        .attachments-browser .attachments,
     2614        .attachments-browser .uploader-inline {
     2615                top: 82px;
     2616        }
     2617
     2618        .media-frame .media-toolbar input[type="search"] {
     2619                line-height: 2.25; /* 36px */
     2620        }
     2621
     2622        .media-frame-toolbar .media-toolbar {
     2623                bottom: -48px;
     2624        }
     2625}
     2626
    25692627/* Responsive on portrait and landscape */
    25702628@media only screen and (max-width: 640px), screen and (max-height: 400px) {
    25712629        /* Full-bleed modal */
  • src/wp-includes/media-template.php

     
    178178        <?php // Template for the media frame: used both in the media grid and in the media modal. ?>
    179179        <script type="text/html" id="tmpl-media-frame">
    180180                <div class="media-frame-title" id="media-frame-title"></div>
     181                <h2 class="media-frame-menu-heading"><?php _e( 'Media Types' ); ?></h2>
    181182                <button type="button" class="button button-link media-frame-menu-toggle" aria-expanded="false">
    182183                        <?php _e( 'Media Types' ); ?>
    183184                        <span class="dashicons dashicons-arrow-down" aria-hidden="true"></span>
     
    187188                        <div class="media-frame-router"></div>
    188189                        <div class="media-frame-content"></div>
    189190                </div>
     191                <h2 class="media-frame-actions-heading screen-reader-text"><?php _e( 'Available actions' ); ?></h2>
    190192                <div class="media-frame-toolbar"></div>
    191193                <div class="media-frame-uploader"></div>
    192194        </script>
  • src/wp-includes/media.php

     
    39313931                'addToVideoPlaylistTitle'     => __( 'Add to Video Playlist' ),
    39323932
    39333933                // Headings
    3934                 'attachmentsList'             => __( 'Attachments list' ),
     3934                'filterAttachments'           => __( 'Filter Media' ),
     3935                'attachmentsList'             => __( 'Media list' ),
    39353936        );
    39363937
    39373938        /**
  • src/wp-includes/script-loader.php

     
    16171617
    16181618        // To enqueue media-views or media-editor, call wp_enqueue_media().
    16191619        // Both rely on numerous settings, styles, and templates to operate correctly.
    1620         $scripts->add( 'media-views', "/wp-includes/js/media-views$suffix.js", array( 'utils', 'media-models', 'wp-plupload', 'jquery-ui-sortable', 'wp-mediaelement', 'wp-api-request', 'wp-a11y' ), false, 1 );
     1620        $scripts->add( 'media-views', "/wp-includes/js/media-views$suffix.js", array( 'utils', 'media-models', 'wp-plupload', 'jquery-ui-sortable', 'wp-mediaelement', 'wp-api-request', 'wp-a11y', 'wp-i18n' ), false, 1 );
    16211621        $scripts->add( 'media-editor', "/wp-includes/js/media-editor$suffix.js", array( 'shortcode', 'media-views' ), false, 1 );
    16221622        $scripts->add( 'media-audiovideo', "/wp-includes/js/media-audiovideo$suffix.js", array( 'media-editor' ), false, 1 );
    16231623        $scripts->add( 'mce-view', "/wp-includes/js/mce-view$suffix.js", array( 'shortcode', 'jquery', 'media-views', 'media-audiovideo' ), false, 1 );
  • tests/qunit/index.html

     
    4444                </script>
    4545                <script src="../../build/wp-includes/js/mediaelement/mediaelement-and-player.min.js"></script>
    4646                <script src="../../build/wp-includes/js/mediaelement/wp-mediaelement.js"></script>
     47                <script src="../../build/wp-includes/js/dist/i18n.js"></script>
    4748                <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":"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","trashSelected":"Move to Trash","restoreSelected":"Restore from Trash","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}};
     49                        window._wpMediaViewsL10n = {"mediaFrameDefaultTitle":"Media","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","trashSelected":"Move to Trash","restoreSelected":"Restore from Trash","deletePermanently":"Delete Permanently","apply":"Apply","filterByDate":"Filter by date","filterByType":"Filter by type","searchMediaLabel":"Search Media","searchMediaPlaceholder":"Search media items...","mediaFound":"Number of media items found: %d","mediaFoundHasMoreResults":"Number of media items displayed: %d. Scroll the page for more results.","noMedia":"No media items found.","noMediaTryNewSearch":"No media items found. Try a different search.","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","filterAttachments":"Filter Media","attachmentsList":"Media list","settings":{"tabs":[],"tabUrl":"http:\/\/build.wordpress-develop.test\/wp-admin\/media-upload.php?chromeless=1","mimeTypes":{"image":"Images","audio":"Audio","video":"Video","application\/msword,application\/vnd.openxmlformats-officedocument.wordprocessingml.document,application\/vnd.ms-word.document.macroEnabled.12,application\/vnd.ms-word.template.macroEnabled.12,application\/vnd.oasis.opendocument.text,application\/vnd.apple.pages,application\/pdf,application\/vnd.ms-xpsdocument,application\/oxps,application\/rtf,application\/wordperfect,application\/octet-stream":"Documents","application\/vnd.apple.numbers,application\/vnd.oasis.opendocument.spreadsheet,application\/vnd.ms-excel,application\/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application\/vnd.ms-excel.sheet.macroEnabled.12,application\/vnd.ms-excel.sheet.binary.macroEnabled.12":"Spreadsheets","application\/x-gzip,application\/rar,application\/x-tar,application\/zip,application\/x-7z-compressed":"Archives"},"captions":true,"nonce":{"sendToEditor":"078fccea44"},"post":{"id":7734,"nonce":"b81d45d05c","featuredImageId":-1},"defaultProps":{"link":"","align":"","size":""},"attachmentCounts":{"audio":1,"video":1},"oEmbedProxyUrl":"http:\/\/build.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":580,"months":[{"year":"2019","month":"10","text":"October 2019"},{"year":"2019","month":"9","text":"September 2019"},{"year":"2019","month":"7","text":"July 2019"},{"year":"2019","month":"6","text":"June 2019"},{"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}};
    4950                </script>
    5051                <script src="../../build/wp-includes/js/media-views.js"></script>
    5152                <script src="../../build/wp-includes/js/media-editor.js"></script>