WordPress.org
Get WordPress

Make WordPress Core

Ticket #40331: 40331.combined.2.diff

File 40331.combined.2.diff, 27.5 KB (added by joedolson, 15 months ago)

Completes fixes for link input modal

  • src/js/_enqueues/vendor/tinymce/plugins/wplink/plugin.js

     
    5656                renderHtml: function() {
    5757                        return (
    5858                                '<div id="' + this._id + '" class="wp-link-input">' +
    59                                         '<input type="text" value="" placeholder="' + tinymce.translate( 'Paste URL or type to search' ) + '" />' +
     59                                        '<label for="' + this._id + '_label">' + tinymce.translate( 'Paste URL or type to search' ) + '</label><input id="' + this._id + '_label" type="text" value="" />' +
    6060                                        '<input type="text" style="display:none" value="" />' +
    6161                                '</div>'
    6262                        );
    6363                },
    6464                setURL: function( url ) {
    65                         this.getEl().firstChild.value = url;
     65                        this.getEl().firstChild.nextSibling.value = url;
    6666                },
    6767                getURL: function() {
    68                         return tinymce.trim( this.getEl().firstChild.value );
     68                        return tinymce.trim( this.getEl().firstChild.nextSibling.value );
    6969                },
    7070                getLinkText: function() {
    71                         var text = this.getEl().firstChild.nextSibling.value;
     71                        var text = this.getEl().firstChild.nextSibling.nextSibling.value;
    7272
    7373                        if ( ! tinymce.trim( text ) ) {
    7474                                return '';
    … …  
    7777                        return text.replace( /[\r\n\t ]+/g, ' ' );
    7878                },
    7979                reset: function() {
    80                         var urlInput = this.getEl().firstChild;
     80                        var urlInput = this.getEl().firstChild.nextSibling;
    8181
    8282                        urlInput.value = '';
    8383                        urlInput.nextSibling.value = '';
    … …  
    391391                        type: 'WPLinkInput',
    392392                        onPostRender: function() {
    393393                                var element = this.getEl(),
    394                                         input = element.firstChild,
     394                                        input = element.firstChild.nextSibling,
    395395                                        $input, cache, last;
    396396
    397397                                inputInstance = this;
    … …  
    435435                                                },
    436436                                                select: function( event, ui ) {
    437437                                                        $input.val( ui.item.permalink );
    438                                                         $( element.firstChild.nextSibling ).val( ui.item.title );
     438                                                        $( element.firstChild.nextSibling.nextSibling ).val( ui.item.title );
    439439
    440440                                                        if ( 9 === event.keyCode && typeof window.wpLinkL10n !== 'undefined' ) {
    441441                                                                // Audible confirmation message when a link has been selected.

  • src/js/_enqueues/wp/customize/controls.js

     
    19171917                        section.contentContainer.on( 'click', '.feature-filter-toggle', function( e ) {
    19181918                                var $themeContainer = $( '.customize-themes-full-container' ),
    19191919                                        $filterToggle = $( e.currentTarget );
    1920                                 section.filtersHeight = $filterToggle.parent().next( '.filter-drawer' ).height();
     1920                                section.filtersHeight = $filterToggle.parents( '.themes-filter-bar' ).next( '.filter-drawer' ).height();
    19211921
    19221922                                if ( 0 < $themeContainer.scrollTop() ) {
    19231923                                        $themeContainer.animate( { scrollTop: 0 }, 400 );
    … …  
    19321932                                        .attr( 'aria-expanded', function( i, attr ) {
    19331933                                                return 'true' === attr ? 'false' : 'true';
    19341934                                        })
    1935                                         .parent().next( '.filter-drawer' ).slideToggle( 180, 'linear' );
     1935                                        .parents( '.themes-filter-bar' ).next( '.filter-drawer' ).slideToggle( 180, 'linear' );
    19361936
    19371937                                if ( $filterToggle.hasClass( 'open' ) ) {
    19381938                                        var marginOffset = 1018 < window.innerWidth ? 50 : 76;
    … …  
    37393739                ready: function() {
    37403740                        var control = this, newItem;
    37413741                        if ( 'dropdown-pages' === control.params.type && control.params.allow_addition ) {
    3742                                 newItem = control.container.find( '.new-content-item' );
     3742                                newItem = control.container.find( '.new-content-item-wrapper' );
    37433743                                newItem.hide(); // Hide in JS to preserve flex display when showing.
    37443744                                control.container.on( 'click', '.add-new-toggle', function( e ) {
    37453745                                        $( e.currentTarget ).slideUp( 180 );
    … …  
    40854085                        }
    40864086
    40874087                        toggle = control.container.find( '.add-new-toggle' );
    4088                         container = control.container.find( '.new-content-item' );
     4088                        container = control.container.find( '.new-content-item-wrapper' );
    40894089                        input = control.container.find( '.create-item-input' );
    40904090                        title = input.val();
    40914091                        select = control.container.find( 'select' );

  • src/js/media/views/attachments/browser.js

     
    378378                }
    379379
    380380                if ( this.options.search ) {
    381                         // Search is an input, a visually hidden label element needs to be rendered before.
     381                        // Search is an input, a label element needs to be rendered before.
    382382                        this.toolbar.set( 'searchLabel', new wp.media.view.Label({
    383383                                value: l10n.searchLabel,
    384384                                className: 'media-search-input-label',

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

     
    10901090
    10911091.wp-filter .search-form {
    10921092        float: right;
    1093         margin: 10px 0;
     1093        display: flex;
     1094        align-items: center;
     1095        column-gap: .5rem;
    10941096}
    10951097
    10961098.wp-filter .search-form input[type="search"] {
    … …  
    11191121.wp-filter .search-form.search-plugins .wp-filter-search,
    11201122.no-js .wp-filter .search-form.search-plugins .button {
    11211123        display: inline-block;
    1122         margin-top: 10px;
    11231124        vertical-align: top;
    11241125}
    11251126
    … …  
    13601361                position: relative;
    13611362                max-width: 100%;
    13621363        }
     1364        .wp-filter .search-form {
     1365                margin: 11px 0;
     1366                flex-wrap: wrap;
     1367                row-gap: 10px;
     1368        }
    13631369}
    13641370
    13651371@media only screen and (max-width: 782px) {
    … …  
    41234129        }
    41244130
    41254131        .wp-filter .search-form input[type="search"] {
    4126                 width: 100%;
    41274132                font-size: 1rem;
    41284133        }
    41294134

  • src/wp-admin/css/customize-controls.css

     
    10821082        float: left;
    10831083}
    10841084
    1085 #available-menu-items .accordion-section-content .new-content-item,
    1086 .customize-control-dropdown-pages .new-content-item {
     1085#available-menu-items .accordion-section-content .new-content-item-wrapper,
     1086.customize-control-dropdown-pages .new-content-item-wrapper {
    10871087        width: calc(100% - 30px);
    10881088        padding: 8px 15px;
    10891089        position: absolute;
    … …  
    10901090        bottom: 0;
    10911091        z-index: 10;
    10921092        background: #f0f0f1;
     1093}
     1094
     1095.customize-control-dropdown-pages .new-content-item-wrapper {
     1096        width: 100%;
     1097        padding: 0;
     1098        position: static;
     1099}
     1100
     1101#available-menu-items .accordion-section-content .new-content-item,
     1102.customize-control-dropdown-pages .new-content-item {
    10931103        display: flex;
    10941104}
    10951105
    … …  
    10991109        position: relative;
    11001110}
    11011111
     1112.customize-control-dropdown-pages .new-content-item-wrapper .new-content-item {
     1113        padding: 0;
     1114}
     1115
    11021116#available-menu-items .new-content-item .create-item-input,
    11031117.customize-control-dropdown-pages .new-content-item .create-item-input {
    11041118        flex-grow: 10;
    … …  
    18151829        bottom: 0;
    18161830}
    18171831
    1818 .themes-filter-bar .feature-filter-toggle {
    1819         float: right;
    1820         margin: 3px 0 3px 25px;
    1821 }
    1822 
    18231832.themes-filter-bar .feature-filter-toggle:before {
    18241833        content: "\f111";
    18251834        margin: 0 5px 0 0;
    … …  
    18801889        animation: .6s themes-fade-in 1;
    18811890}
    18821891
    1883 .control-panel-themes .filter-themes-count {
    1884         position: relative;
    1885         float: right;
    1886         line-height: 2.6;
    1887 }
    1888 
    18891892.control-panel-themes .filter-themes-count .themes-displayed {
    18901893        font-weight: 600;
    18911894        color: #50575e;
    … …  
    20972100        box-sizing: border-box;
    20982101        border-bottom: 1px solid #dcdcde;
    20992102}
     2103.customize-preview-header.themes-filter-bar,
     2104.customize-preview-header.themes-filter-bar .search-form {
     2105        display: flex;
     2106        align-items: center;
     2107        gap: 10px;
     2108        flex-wrap: wrap;
     2109}
    21002110
     2111.customize-preview-header.themes-filter-bar .search-form-input {
     2112        position: relative;
     2113}
     2114
     2115.customize-preview-header .filter-themes-wrapper {
     2116        display: grid;
     2117        align-items: center;
     2118        gap: 10px;
     2119        grid-template-columns: auto 1fr;
     2120}
     2121
     2122.customize-preview-header .filter-themes-wrapper .filter-themes-count {
     2123        justify-self: end;
     2124}
     2125
    21012126@media screen and (min-width: 1670px) {
    21022127        .customize-preview-header.themes-filter-bar {
    21032128                width: 82%;
    … …  
    21092134.themes-filter-bar .themes-filter-container {
    21102135        margin: 0;
    21112136        padding: 0;
     2137        display: flex;
     2138        align-items: center;
     2139        gap: 10px;
    21122140}
    21132141
    21142142.themes-filter-bar .wp-filter-search {
    … …  
    21172145        max-width: 100%;
    21182146        width: 40%;
    21192147        min-width: 300px;
    2120         position: absolute;
    2121         top: 6px;
    2122         left: 25px;
    21232148        height: 32px;
    21242149        margin: 1px 0;
     2150        top: 0;
     2151        left: 0;
    21252152}
    21262153
     2154.themes-filter-bar .wp-filter-search label {
     2155        vertical-align:
     2156}
     2157
    21272158/* Unstick the filter bar on short windows/screens. This breakpoint is based on the
    21282159   current length of .org feature filters assuming translations do not wrap lines. */
    21292160@media screen and (max-height: 540px), screen and (max-width: 1018px) {
    … …  
    21572188
    21582189@media screen and (max-width: 900px) {
    21592190        .customize-preview-header.themes-filter-bar {
    2160                 height: 86px;
    2161                 padding-top: 46px;
     2191                height: 96px;
    21622192        }
    21632193
    21642194        .themes-filter-bar .wp-filter-search {
    2165                 width: calc(100% - 50px);
     2195                width: 100%;
    21662196                margin: 0;
    21672197                min-width: 200px;
    21682198        }
    21692199
     2200        .customize-preview-header.themes-filter-bar,
     2201        .customize-preview-header.themes-filter-bar .search-form
     2202        .themes-filter-bar .themes-filter-container {
     2203                display: grid;
     2204                gap: 4px;
     2205        }
     2206
     2207        .customize-preview-header.themes-filter-bar .search-form-input {
     2208                display: flex;
     2209                flex-grow: 1;
     2210        }
     2211
     2212        .customize-preview-header.themes-filter-bar .search-icon {
     2213                top: 6px;
     2214        }
     2215
    21702216        .filter-drawer {
    21712217                top: 86px;
    21722218        }
    … …  
    25802626}
    25812627
    25822628#available-widgets-list {
    2583         top: 60px;
     2629        top: 76px;
    25842630        position: absolute;
    25852631        overflow: auto;
    25862632        bottom: 0;
    … …  
    26242670#available-widgets-filter .search-icon {
    26252671        display: block;
    26262672        position: absolute;
    2627         top: 15px; /* 13 container padding +1 input margin +1 input border */
     2673        bottom: 15px; /* 13 container padding +1 input margin +1 input border */
    26282674        left: 16px;
    26292675        width: 30px;
    26302676        height: 30px;
    … …  
    26362682#available-widgets-filter .clear-results,
    26372683#available-menu-items-search .clear-results {
    26382684        position: absolute;
    2639         top: 15px; /* 13 container padding +1 input margin +1 input border */
     2685        top: 35px; /* 13 container padding +1 input margin +1 input border */
    26402686        right: 16px;
    26412687        width: 30px;
    26422688        height: 30px;
    … …  
    26952741
    26962742.themes-filter-bar .search-icon {
    26972743        position: absolute;
    2698         top: 7px;
    2699         left: 26px;
     2744        top: 2px;
     2745        left: 2px;
    27002746        z-index: 1;
    27012747        color: #646970;
    27022748        height: 30px;
    … …  
    28142860                margin-top: 12px;
    28152861        }
    28162862
    2817         .wp-core-ui .themes-filter-bar .feature-filter-toggle {
    2818                 margin: 3px 0 3px 25px;
    2819         }
    28202863}
    28212864
    28222865@media screen and (max-width: 1200px) {
    … …  
    29643007        .reordering .reorder-done {
    29653008                padding: 8px;
    29663009        }
    2967 
    2968         .wp-core-ui .themes-filter-bar .feature-filter-toggle {
    2969                 margin: 0;
    2970         }
    29713010}
    29723011
    29733012@media screen and (max-width: 600px) {

  • src/wp-admin/css/customize-nav-menus.css

     
    581581}
    582582
    583583#available-menu-items .accordion-section-content .available-menu-items-list {
    584         margin: 0 0 45px;
     584        margin: 0 0 64px;
    585585        padding: 1px 15px 15px;
    586586}
    587587
    … …  
    680680
    681681#available-menu-items-search .spinner {
    682682        position: absolute;
    683         top: 20px; /* 13 container padding +1 input margin +6 ( ( 32 input height - 20 spinner height ) / 2 ) */
     683        bottom: 20px; /* 13 container padding +1 input margin +6 ( ( 32 input height - 20 spinner height ) / 2 ) */
    684684        right: 21px;
    685685        margin: 0 !important;
    686686}
    … …  
    689689#available-menu-items #available-menu-items-search .accordion-section-content {
    690690        position: absolute;
    691691        left: 0;
    692         top: 60px; /* below title div / search input */
     692        top: 75px; /* below title div / search input */
    693693        bottom: 0; /* 100% height that still triggers lazy load */
    694694        max-height: none;
    695695        width: 100%;

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

     
    720720}
    721721
    722722p.search-box {
     723        display: flex;
     724        flex-wrap: wrap;
     725        align-items: center;
     726        column-gap: .5rem;
     727        position: relative;
    723728        float: right;
    724         margin: 0;
     729        margin: 11px 0;
    725730}
    726731
    727732.network-admin.themes-php p.search-box {

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

     
    581581}
    582582
    583583.media-frame-content .media-search-input-label {
    584         margin: 0 .2em 0 0;
    585584        vertical-align: baseline;
    586585}
    587586
    588 .media-frame.mode-grid .media-search-input-label {
    589         position: static;
    590         margin: 0 .5em 0 0;
    591 }
    592 
    593587.attachments-browser .media-toolbar-secondary > .media-button {
    594588        margin-right: 10px;
    595589}
    … …  
    13691363                width: 100%;
    13701364                margin-bottom: 20px;
    13711365                display: flex;
     1366                flex-wrap: nowrap;
     1367                column-gap: 0px;
    13721368        }
    13731369
     1370        .wp-filter p.search-box #media-search-input {
     1371                width: 100%;
     1372        }
     1373
    13741374}
    13751375
    13761376@media only screen and (max-width: 782px) {

  • src/wp-admin/includes/class-wp-plugins-list-table.php

     
    452452                }
    453453                ?>
    454454                <p class="search-box">
    455                         <label class="screen-reader-text" for="<?php echo esc_attr( $input_id ); ?>"><?php echo $text; ?>:</label>
    456                         <input type="search" id="<?php echo esc_attr( $input_id ); ?>" class="wp-filter-search" name="s" value="<?php _admin_search_query(); ?>" placeholder="<?php esc_attr_e( 'Search installed plugins...' ); ?>" />
     455                        <label for="<?php echo esc_attr( $input_id ); ?>"><?php echo $text; ?></label>
     456                        <input type="search" id="<?php echo esc_attr( $input_id ); ?>" class="wp-filter-search" name="s" value="<?php _admin_search_query(); ?>" />
    457457                        <?php submit_button( $text, 'hide-if-js', '', false, array( 'id' => 'search-submit' ) ); ?>
    458458                </p>
    459459                <?php

  • src/wp-admin/includes/plugin-install.php

     
    320320        ?>
    321321        <form class="search-form search-plugins" method="get">
    322322                <input type="hidden" name="tab" value="search" />
     323                <label for="search-plugins"><?php _e( 'Search Plugins' ); ?></label>
     324                <input type="search" name="s" id="search-plugins" value="<?php echo esc_attr( $term ); ?>" class="wp-filter-search" />
    323325                <label class="screen-reader-text" for="typeselector">
    324326                        <?php
    325327                        /* translators: Hidden accessibility text. */
    … …  
    331333                        <option value="author"<?php selected( 'author', $type ); ?>><?php _e( 'Author' ); ?></option>
    332334                        <option value="tag"<?php selected( 'tag', $type ); ?>><?php _ex( 'Tag', 'Plugin Installer' ); ?></option>
    333335                </select>
    334                 <label class="screen-reader-text" for="search-plugins">
    335                         <?php
    336                         /* translators: Hidden accessibility text. */
    337                         _e( 'Search Plugins' );
    338                         ?>
    339                 </label>
    340                 <input type="search" name="s" id="search-plugins" value="<?php echo esc_attr( $term ); ?>" class="wp-filter-search" placeholder="<?php esc_attr_e( 'Search plugins...' ); ?>" />
    341336                <?php submit_button( __( 'Search Plugins' ), 'hide-if-js', false, false, array( 'id' => 'search-submit' ) ); ?>
    342337        </form>
    343338        <?php

  • src/wp-admin/plugins.php

     
    788788<?php $wp_list_table->views(); ?>
    789789
    790790<form class="search-form search-plugins" method="get">
    791 <?php $wp_list_table->search_box( __( 'Search Installed Plugins' ), 'plugin' ); ?>
     791<?php $wp_list_table->search_box( __( 'Search installed plugins' ), 'plugin' ); ?>
    792792</form>
    793793
    794794<form method="post" id="bulk-action-form">

  • src/wp-includes/class-wp-customize-control.php

     
    635635                                                printf( __( '+ %s' ), get_post_type_object( 'page' )->labels->add_new_item );
    636636                                                ?>
    637637                                        </button>
    638                                         <div class="new-content-item">
    639                                                 <label for="create-input-<?php echo esc_attr( $this->id ); ?>"><span class="screen-reader-text">
    640                                                         <?php
    641                                                         /* translators: Hidden accessibility text. */
    642                                                         _e( 'New page title' );
    643                                                         ?>
    644                                                 </span></label>
    645                                                 <input type="text" id="create-input-<?php echo esc_attr( $this->id ); ?>" class="create-item-input" placeholder="<?php esc_attr_e( 'New page title&hellip;' ); ?>">
    646                                                 <button type="button" class="button add-content"><?php _e( 'Add' ); ?></button>
     638                                        <div class="new-content-item-wrapper">
     639                                                <label for="create-input-<?php echo esc_attr( $this->id ); ?>"><?php _e( 'New page title' ); ?></label>
     640                                                <div class="new-content-item">
     641                                                        <input type="text" id="create-input-<?php echo esc_attr( $this->id ); ?>" class="create-item-input" >
     642                                                        <button type="button" class="button add-content"><?php _e( 'Add' ); ?></button>
     643                                                </div>
    647644                                        </div>
    648645                                <?php endif; ?>
    649646                                <?php

  • src/wp-includes/class-wp-customize-nav-menus.php

     
    11631163                        </div>
    11641164                        <div id="available-menu-items-search" class="accordion-section cannot-expand">
    11651165                                <div class="accordion-section-title">
    1166                                         <label class="screen-reader-text" for="menu-items-search">
    1167                                                 <?php
    1168                                                 /* translators: Hidden accessibility text. */
    1169                                                 _e( 'Search Menu Items' );
    1170                                                 ?>
    1171                                         </label>
    1172                                         <input type="text" id="menu-items-search" placeholder="<?php esc_attr_e( 'Search menu items&hellip;' ); ?>" aria-describedby="menu-items-search-desc" />
     1166                                        <label for="menu-items-search"><?php _e( 'Search Menu Items' ); ?></label>
     1167                                        <input type="text" id="menu-items-search" aria-describedby="menu-items-search-desc" />
    11731168                                        <p class="screen-reader-text" id="menu-items-search-desc">
    11741169                                                <?php
    11751170                                                /* translators: Hidden accessibility text. */
    … …  
    11771172                                                ?>
    11781173                                        </p>
    11791174                                        <span class="spinner"></span>
     1175                                        <div class="search-icon" aria-hidden="true"></div>
    11801176                                </div>
    1181                                 <div class="search-icon" aria-hidden="true"></div>
    11821177                                <button type="button" class="clear-results"><span class="screen-reader-text">
    11831178                                        <?php
    11841179                                        /* translators: Hidden accessibility text. */
    … …  
    12431238                                <?php if ( 'post_type' === $available_item_type['type'] ) : ?>
    12441239                                        <?php $post_type_obj = get_post_type_object( $available_item_type['object'] ); ?>
    12451240                                        <?php if ( current_user_can( $post_type_obj->cap->create_posts ) && current_user_can( $post_type_obj->cap->publish_posts ) ) : ?>
    1246                                                 <div class="new-content-item">
    1247                                                         <label for="<?php echo esc_attr( 'create-item-input-' . $available_item_type['object'] ); ?>" class="screen-reader-text"><?php echo esc_html( $post_type_obj->labels->add_new_item ); ?></label>
    1248                                                         <input type="text" id="<?php echo esc_attr( 'create-item-input-' . $available_item_type['object'] ); ?>" class="create-item-input" placeholder="<?php echo esc_attr( $post_type_obj->labels->add_new_item ); ?>">
    1249                                                         <button type="button" class="button add-content"><?php _e( 'Add' ); ?></button>
     1241                                                <div class="new-content-item-wrapper">
     1242                                                        <label for="<?php echo esc_attr( 'create-item-input-' . $available_item_type['object'] ); ?>"><?php echo esc_html( $post_type_obj->labels->add_new_item ); ?></label>
     1243                                                        <div class="new-content-item">
     1244                                                                <input type="text" id="<?php echo esc_attr( 'create-item-input-' . $available_item_type['object'] ); ?>" class="create-item-input">
     1245                                                                <button type="button" class="button add-content"><?php _e( 'Add' ); ?></button>
     1246                                                        </div>
    12501247                                                </div>
    12511248                                        <?php endif; ?>
    12521249                                <?php endif; ?>

  • src/wp-includes/class-wp-customize-widgets.php

     
    909909                                </h3>
    910910                        </div>
    911911                        <div id="available-widgets-filter">
    912                                 <label class="screen-reader-text" for="widgets-search">
     912                                <label for="widgets-search">
    913913                                        <?php
    914914                                        /* translators: Hidden accessibility text. */
    915915                                        _e( 'Search Widgets' );
    916916                                        ?>
    917917                                </label>
    918                                 <input type="text" id="widgets-search" placeholder="<?php esc_attr_e( 'Search widgets&hellip;' ); ?>" aria-describedby="widgets-search-desc" />
     918                                <input type="text" id="widgets-search" aria-describedby="widgets-search-desc" />
    919919                                <div class="search-icon" aria-hidden="true"></div>
    920920                                <button type="button" class="clear-results"><span class="screen-reader-text">
    921921                                        <?php

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

     
    17371737        color: #d63638;
    17381738}
    17391739
     1740.mce-inline-toolbar-grp div.mce-flow-layout-item > div {
     1741        display: flex;
     1742        align-items: flex-end;
     1743}
     1744
    17401745div.wp-link-input {
    17411746        float: left;
    17421747        margin: 2px;
    … …  
    17431748        max-width: 694px;
    17441749}
    17451750
     1751div.wp-link-input label {
     1752        margin-bottom: 4px;
     1753        display: block;
     1754}
     1755
    17461756div.wp-link-input input {
    17471757        width: 300px;
    17481758        padding: 3px;

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

     
    12081208        display: flex;
    12091209        align-items: center;
    12101210        column-gap: .5rem;
     1211        margin: 11px 0;
    12111212}
    12121213
    12131214.mode-grid .attachments-browser .media-toolbar-mode-select .media-toolbar-primary {
    … …  
    27972798        }
    27982799
    27992800        .mode-grid .attachments-browser .media-toolbar-primary {
    2800                 display: flex;
     2801                display: grid;
     2802                grid-template-columns: auto 1fr;
    28012803        }
    28022804
    28032805        .mode-grid .attachments-browser .media-toolbar-primary input[type="search"] {

  • src/wp-includes/customize/class-wp-customize-themes-section.php

     
    124124                <button type="button" class="button button-primary customize-section-back customize-themes-mobile-back"><?php _e( 'Go to theme sources' ); ?></button>
    125125                <# if ( 'wporg' === data.action ) { #>
    126126                        <div class="search-form">
    127                                 <label for="wp-filter-search-input-{{ data.id }}" class="screen-reader-text">
    128                                         <?php
    129                                         /* translators: Hidden accessibility text. */
    130                                         _e( 'Search themes&hellip;' );
    131                                         ?>
    132                                 </label>
    133                                 <input type="search" id="wp-filter-search-input-{{ data.id }}" placeholder="<?php esc_attr_e( 'Search themes&hellip;' ); ?>" aria-describedby="{{ data.id }}-live-search-desc" class="wp-filter-search">
    134                                 <div class="search-icon" aria-hidden="true"></div>
    135                                 <span id="{{ data.id }}-live-search-desc" class="screen-reader-text">
    136                                         <?php
    137                                         /* translators: Hidden accessibility text. */
    138                                         _e( 'The search results will be updated as you type.' );
    139                                         ?>
    140                                 </span>
     127                                <label for="wp-filter-search-input-{{ data.id }}"><?php _e( 'Search themes' ); ?></label>
     128                                <div class="search-form-input">
     129                                        <input type="search" id="wp-filter-search-input-{{ data.id }}" aria-describedby="{{ data.id }}-live-search-desc" class="wp-filter-search">
     130                                        <div class="search-icon" aria-hidden="true"></div>
     131                                        <span id="{{ data.id }}-live-search-desc" class="screen-reader-text">
     132                                                <?php
     133                                                /* translators: Hidden accessibility text. */
     134                                                _e( 'The search results will be updated as you type.' );
     135                                                ?>
     136                                        </span>
     137                                </div>
    141138                        </div>
     139                <# } else { #>
     140                        <div class="themes-filter-container">
     141                                <label for="{{ data.id }}-themes-filter"><?php _e( 'Search themes' ); ?></label>
     142                                <div class="search-form-input">
     143                                        <input type="search" id="{{ data.id }}-themes-filter" aria-describedby="{{ data.id }}-live-search-desc" class="wp-filter-search wp-filter-search-themes" />
     144                                        <div class="search-icon" aria-hidden="true"></div>
     145                                        <span id="{{ data.id }}-live-search-desc" class="screen-reader-text">
     146                                                <?php
     147                                                /* translators: Hidden accessibility text. */
     148                                                _e( 'The search results will be updated as you type.' );
     149                                                ?>
     150                                        </span>
     151                                </div>
     152                        </div>
     153                <# } #>
     154                <div class="filter-themes-wrapper">
     155                        <# if ( 'wporg' === data.action ) { #>
    142156                        <button type="button" class="button feature-filter-toggle">
    143157                                <span class="filter-count-0"><?php _e( 'Filter themes' ); ?></span><span class="filter-count-filters">
    144158                                        <?php
    … …  
    147161                                        ?>
    148162                                </span>
    149163                        </button>
    150                 <# } else { #>
    151                         <div class="themes-filter-container">
    152                                 <label for="{{ data.id }}-themes-filter" class="screen-reader-text">
     164                        <# } #>
     165                        <div class="filter-themes-count">
     166                                <span class="themes-displayed">
    153167                                        <?php
    154                                         /* translators: Hidden accessibility text. */
    155                                         _e( 'Search themes&hellip;' );
     168                                        /* translators: %s: Number of themes displayed. */
     169                                        printf( __( '%s themes' ), '<span class="theme-count">0</span>' );
    156170                                        ?>
    157                                 </label>
    158                                 <input type="search" id="{{ data.id }}-themes-filter" placeholder="<?php esc_attr_e( 'Search themes&hellip;' ); ?>" aria-describedby="{{ data.id }}-live-search-desc" class="wp-filter-search wp-filter-search-themes" />
    159                                 <div class="search-icon" aria-hidden="true"></div>
    160                                 <span id="{{ data.id }}-live-search-desc" class="screen-reader-text">
    161                                         <?php
    162                                         /* translators: Hidden accessibility text. */
    163                                         _e( 'The search results will be updated as you type.' );
    164                                         ?>
    165171                                </span>
    166172                        </div>
    167                 <# } #>
    168                 <div class="filter-themes-count">
    169                         <span class="themes-displayed">
    170                                 <?php
    171                                 /* translators: %s: Number of themes displayed. */
    172                                 printf( __( '%s themes' ), '<span class="theme-count">0</span>' );
    173                                 ?>
    174                         </span>
    175173                </div>
    176174                <?php
    177175        }

  • src/wp-includes/media.php

     
    48154815                'apply'                       => __( 'Apply' ),
    48164816                'filterByDate'                => __( 'Filter by date' ),
    48174817                'filterByType'                => __( 'Filter by type' ),
    4818                 'searchLabel'                 => __( 'Search' ),
     4818                'searchLabel'                 => __( 'Search media' ),
    48194819                'searchMediaLabel'            => __( 'Search media' ),          // Backward compatibility pre-5.3.
    48204820                'searchMediaPlaceholder'      => __( 'Search media items...' ), // Placeholder (no ellipsis), backward compatibility pre-5.3.
    48214821                /* translators: %d: Number of attachments found in a search. */