Ticket #30583: 30583.diff

src/wp-admin/upload.php

@@ -25 +25 @@
         wp_enqueue_script( 'media-grid' );
         wp_enqueue_script( 'media' );
 
-        $vars = wp_edit_attachments_query_vars();
+        $q = $_GET;
+        // let JS handle this
+        unset( $q['s'] );
+        $vars = wp_edit_attachments_query_vars( $q );
         $ignore = array( 'mode', 'post_type', 'post_status', 'posts_per_page' );
         foreach ( $vars as $key => $value ) {
                 if ( ! $value || in_array( $key, $ignore ) ) {
@@ -67 +70 @@
 
         require_once( ABSPATH . 'wp-admin/admin-header.php' );
         ?>
-        <div class="wrap" id="wp-media-grid">
+        <div class="wrap" id="wp-media-grid" data-search="<?php _admin_search_query() ?>">
                 <h2>
                 <?php
                 echo esc_html( $title );

src/wp-includes/js/media/grid.js

@@ -682 +682 @@
                 this.createStates();
                 this.bindRegionModeHandlers();
                 this.render();
+                this.bindSearchHandler();
+        },
 
+        /**
+         * The views must interact with form controls that are not part of a frame
+         */
+        bindSearchHandler: function() {
+                var search = this.$( '#media-search-input' ),
+                        currentSearch = this.options.container.data( 'search' ),
+                        searchView = this.browserView.toolbar.get( 'search' ).$el,
+                        listMode = this.$( '.view-list' ),
+
+                        input  = _.debounce( function (e) {
+                                var val = $( e.currentTarget ).val(),
+                                        url = '';
+
+                                if ( val ) {
+                                        url += '?search=' + val;
+                                }
+                                this.gridRouter.navigate( this.gridRouter.baseUrl( url ) );
+                        }, 1000 );
+
                 // Update the URL when entering search string (at most once per second)
-                $( '#media-search-input' ).on( 'input', _.debounce( function(e) {
-                        var val = $( e.currentTarget ).val(), url = '';
-                        if ( val ) {
-                                url += '?search=' + val;
+                search.on( 'input', _.bind( input, this ) );
+                searchView.val( currentSearch ).trigger( 'input' );
+
+                this.gridRouter.on( 'route:search', function () {
+                        var href = window.location.href;
+                        if ( href.indexOf( 'mode=' ) > -1 ) {
+                                href = href.replace( /mode=[^&]+/g, 'mode=list' );
+                        } else {
+                                href += href.indexOf( '?' ) > -1 ? '&mode=list' : '?mode=list';
                         }
-                        self.gridRouter.navigate( self.gridRouter.baseUrl( url ) );
-                }, 1000 ) );
+                        href = href.replace( 'search=', 's=' );
+                        listMode.prop( 'href', href );
+                } );
         },
 
         /**

src/wp-includes/js/media/views/frame/manage.js

@@ -83 +83 @@
                 this.createStates();
                 this.bindRegionModeHandlers();
                 this.render();
+                this.bindSearchHandler();
+        },
 
+        /**
+         * The views must interact with form controls that are not part of a frame
+         */
+        bindSearchHandler: function() {
+                var search = this.$( '#media-search-input' ),
+                        currentSearch = this.options.container.data( 'search' ),
+                        searchView = this.browserView.toolbar.get( 'search' ).$el,
+                        listMode = this.$( '.view-list' ),
+
+                        input  = _.debounce( function (e) {
+                                var val = $( e.currentTarget ).val(),
+                                        url = '';
+
+                                if ( val ) {
+                                        url += '?search=' + val;
+                                }
+                                this.gridRouter.navigate( this.gridRouter.baseUrl( url ) );
+                        }, 1000 );
+
                 // Update the URL when entering search string (at most once per second)
-                $( '#media-search-input' ).on( 'input', _.debounce( function(e) {
-                        var val = $( e.currentTarget ).val(), url = '';
-                        if ( val ) {
-                                url += '?search=' + val;
+                search.on( 'input', _.bind( input, this ) );
+                searchView.val( currentSearch ).trigger( 'input' );
+
+                this.gridRouter.on( 'route:search', function () {
+                        var href = window.location.href;
+                        if ( href.indexOf( 'mode=' ) > -1 ) {
+                                href = href.replace( /mode=[^&]+/g, 'mode=list' );
+                        } else {
+                                href += href.indexOf( '?' ) > -1 ? '&mode=list' : '?mode=list';
                         }
-                        self.gridRouter.navigate( self.gridRouter.baseUrl( url ) );
-                }, 1000 ) );
+                        href = href.replace( 'search=', 's=' );
+                        listMode.prop( 'href', href );
+                } );
         },
 
         /**