42049.diff on Ticket #42049 – Attachment – WordPress Trac

src/wp-admin/js/customize-controls.js

                                 section.closeDetails();
                         });
+                        // Filter-search all theme objects loaded in the section.
+                        section.container.on( 'input', '.wp-filter-search-themes', function( event ) {
+                                        section.filterSearch( event.currentTarget );
+                        });
+                        if ( 'local' === section.params.filter_type ) {
+                                // Filter-search all theme objects loaded in the section.
+                                section.container.on( 'input', '.wp-filter-search-themes', function( event ) {
+                                                section.filterSearch( event.currentTarget.value );
+                                });
+                        // Event listeners for remote wporg queries with user-entered terms.
+                        if ( 'wporg' === section.params.action ) {
+                        } else if ( 'remote' === section.params.filter_type ) {
+                                // Event listeners for remote queries with user-entered terms.
                                 // Search terms.
                                 debounced = _.debounce( section.checkTerm, 500 ); // Wait until there is no input for 500 milliseconds to initiate a search.
                                 section.contentContainer.on( 'input', '#wp-filter-search-input', function() {
 …
                                         section.filtersChecked();
                                         section.checkTerm( section );
                                 });
+                        }
                                 // Toggle feature filter sections.
                                 section.contentContainer.on( 'click', '.feature-filter-toggle', function( e ) {
                                         $( e.currentTarget )
                                                 .toggleClass( 'open' )
                                                 .attr( 'aria-expanded', function( i, attr ) {
                                                         return 'true' === attr ? 'false' : 'true';
                                                 })
                                                 .next( '.filter-drawer' ).slideToggle( 180, 'linear', function() {
                                                         if ( 0 === section.filtersHeight ) {
                                                                 section.filtersHeight = $( this ).height();
+                        // Toggle feature filters.
+                        section.contentContainer.on( 'click', '.feature-filter-toggle', function( e ) {
+                                $( e.currentTarget )
+                                        .toggleClass( 'open' )
+                                        .attr( 'aria-expanded', function( i, attr ) {
+                                                return 'true' === attr ? 'false' : 'true';
+                                        })
+                                        .next( '.filter-drawer' ).slideToggle( 180, 'linear', function() {
+                                                if ( 0 === section.filtersHeight ) {
+                                                        section.filtersHeight = $( this ).height();
+                                                                // First time, so it's opened.
+                                                                section.contentContainer.find( '.themes' ).css( 'margin-top', section.filtersHeight + 76 );
+                                                        }
+                                                });
+                                        if ( $( e.currentTarget ).hasClass( 'open' ) ) {
+                                                section.contentContainer.find( '.themes' ).css( 'margin-top', section.filtersHeight + 76 );
+                                        } else {
+                                                section.contentContainer.find( '.themes' ).css( 'margin-top', 0 );
+                                        }
+                                });
+                        }
+                                                        // First time, so it's opened.
+                                                        section.contentContainer.find( '.themes' ).css( 'margin-top', section.filtersHeight + 76 );
+                                                }
+                                        });
+                                if ( $( e.currentTarget ).hasClass( 'open' ) ) {
+                                        section.contentContainer.find( '.themes' ).css( 'margin-top', section.filtersHeight + 76 );
+                                } else {
+                                        section.contentContainer.find( '.themes' ).css( 'margin-top', 0 );
+                                }
+                        });
                         // Setup section cross-linking.
                         section.contentContainer.on( 'click', '.no-themes-local .search-dotorg-themes', function() {
 …
                                 // Try to load controls if none are loaded yet.
                                 if ( 0 === section.loaded ) {
                                         section.loadControls();
+                                        section.loadThemes();
+                                }
                                 // Collapse any sibling sections/panels
 …
                                                         section.contentContainer.find( '.wp-filter-search' ).val( searchTerm );
                                                         // Directly initialize an empty remote search to avoid a race condition.
                                                         if ( '' === searchTerm && '' !== section.term && 'installed' !== section.params.action ) {
+                                                        if ( '' === searchTerm && '' !== section.term && 'local' !== section.params.filter_type ) {
                                                                 section.term = '';
                                                                 section.initializeNewQuery( section.term, section.tags );
                                                         } else {
+                                                                section.checkTerm( section );
+                                                                if ( 'remote' === section.params.filter_type ) {
+                                                                        section.checkTerm( section );
+                                                                } else if ( 'local' === section.params.filter_type ) {
+                                                                        section.filterSearch( searchTerm );
+                                                                }
+                                                        }
-                                                        section.filterSearch( section.contentContainer.find( '.wp-filter-search' ).get( 0 ) );
+                                                }
                                                 otherSection.collapse( { duration: args.duration } );
+                                        }
 …
+                 *
                  * @returns {void}
                  */
                 loadControls: function() {
+                loadThemes: function() {
                         var section = this, params, page, request;
                         if ( section.loading ) {
 …
                                 'page': page
                         };
                         // Add fields for wporg actions.
                         if ( 'wporg' === section.params.action ) {
+                        // Add fields for remote filtering.
+                        if ( 'remote' === section.params.filter_type ) {
                                 params.search = section.term;
                                 params.tags = section.tags;
+                        }
 …
                         section.container.find( '.no-themes' ).hide();
                         request = wp.ajax.post( 'customize-load-themes', params );
                         request.done(function( data ) {
                                 var themes = data.themes, themeControl, newThemeControls;
+                                var themes = data.themes, themeControl;
                                 // Stop and try again if the term changed while loading.
                                 if ( '' !== section.nextTerm || '' !== section.nextTags ) {
 …
                                         section.nextTerm = '';
                                         section.nextTags = '';
                                         section.loading = false;
                                         section.loadControls();
+                                        section.loadThemes();
                                         return;
+                                }
                                 if ( 0 !== themes.length ) {
-                                        newThemeControls = [];
+                                        // Add controls for each theme.
+                                        _.each( themes, function( theme ) {
+                                                var customizeId = section.params.action + '_theme_' + theme.id;
+                                                themeControl = new api.controlConstructor.theme( customizeId, {
+                                                        params: {
+                                                                type: 'theme',
+                                                                content: '<li id="customize-control-theme-' + section.params.action + '_' + theme.id + '" class="customize-control customize-control-theme"></li>',
+                                                                section: section.params.id,
+                                                                active: true,
+                                                                theme: theme,
+                                                                priority: section.loaded + 1
+                                                        },
+                                                        previewer: api.previewer
+                                                } );
+                                        section.loadControls( themes, page );
-                                                api.control.add( customizeId, themeControl );
-                                                newThemeControls.push( themeControl );
-                                                section.loaded = section.loaded + 1;
-                                        });
                                         if ( 1 === page ) {
                                                 // Pre-load the first 3 theme screenshots.
 …
                                                                 img.src = src;
+                                                        }
                                                 });
                                                 if ( 'installed' !== section.params.action ) {
+                                                if ( 'local' !== section.params.filter_type ) {
                                                         wp.a11y.speak( api.settings.l10n.themeSearchResults.replace( '%d', data.info.results ) );
+                                                }
-                                        } else {
-                                                Array.prototype.push.apply( section.screenshotQueue, newThemeControls ); // Add new themes to the screenshot queue.
+                                        }
                                         _.delay( section.renderScreenshots, 100 ); // Wait for the controls to become visible.
                                         if ( 'installed' === section.params.action || 100 > themes.length ) { // If we have less than the requested 100 themes, it's the end of the list.
+                                        if ( 'local' === section.params.filter_type || 100 > themes.length ) { // If we have less than the requested 100 themes, it's the end of the list.
                                                 section.fullyLoaded = true;
+                                        }
                                 } else {
 …
                                                 section.fullyLoaded = true;
+                                        }
+                                }
                                 if ( 'installed' === section.params.action ) {
+                                if ( 'local' === section.params.filter_type ) {
                                         section.updateCount(); // Count of visible theme controls.
                                 } else {
                                         section.updateCount( data.info.results ); // Total number of results including pages not yet loaded.
 …
                 },
                 /**
+                 * Loads controls into the section from data received from loadThemes().
+                 *
+                 * @since 4.9.0
+                 * @param {Array} themes - Array of theme data to create controls with.
+                 * @param {integer} page - Page of results being loaded.
+                 * @returns {void}
+                 */
+                loadControls: function( themes, page ) {
+                        var newThemeControls = [],
+                                section = this;
+                        // Add controls for each theme.
+                        _.each( themes, function( theme ) {
+                                var customizeId = section.params.action + '_theme_' + theme.id;
+                                themeControl = new api.controlConstructor.theme( customizeId, {
+                                        params: {
+                                                type: 'theme',
+                                                content: '<li id="customize-control-theme-' + section.params.action + '_' + theme.id + '" class="customize-control customize-control-theme"></li>',
+                                                section: section.params.id,
+                                                active: true,
+                                                theme: theme,
+                                                priority: section.loaded + 1
+                                        },
+                                        previewer: api.previewer
+                                } );
+                                api.control.add( customizeId, themeControl );
+                                newThemeControls.push( themeControl );
+                                section.loaded = section.loaded + 1;
+                        });
+                        if ( 1 !== page ) {
+                                Array.prototype.push.apply( section.screenshotQueue, newThemeControls ); // Add new themes to the screenshot queue.
+                        }
+                },
+                /**
                  * Determines whether more themes should be loaded, and loads them.
+                 *
                  * @since 4.9.0
 …
                                 threshold = container.prop( 'scrollHeight' ) - 3000; // Use a fixed distance to the bottom of loaded results to avoid unnecessarily loading results sooner when using a percentage of scroll distance.
                                 if ( bottom > threshold ) {
                                         section.loadControls();
+                                        section.loadThemes();
+                                }
+                        }
                 },
 …
+                 *
                  * @since 4.9.0
+                 *
                  * @param {Element} el - The search input element as a raw JS object.
+                 * @param {string} term - The raw search input value.
                  * @returns {void}
                  */
                 filterSearch: function( el ) {
+                filterSearch: function( term ) {
                         var count = 0,
                                 visible = false,
                                 section = this,
+                                noFilter = ( undefined !== api.section( 'wporg_themes' ) && 'wporg' !== section.params.action ) ? '.no-themes-local' : '.no-themes',
+                                term = el.value.toLowerCase().trim().replace( '-', ' ' ),
+                                noFilter = ( undefined !== api.section( 'wporg_themes' ) && 'remote' !== section.params.filter_type ) ? '.no-themes-local' : '.no-themes',
                                 controls = section.controls();
                         if ( section.loading ) {
 …
                                 return;
+                        }
+                        // Standardize search term format and split into an array of individual words.
+                        term = term.toLowerCase().trim().replace( '-', ' ' ).split( ' ' );
                         _.each( controls, function( control ) {
                                 visible = control.filter( term );
+                                visible = control.filter( term ); // Shows/hides and sorts control based on the applicability of the search term.
                                 if ( visible ) {
                                         count = count + 1;
+                                }
 …
+                        }
                         section.renderScreenshots();
+                        api.reflowPaneContents();
                         // Update theme count.
                         section.updateCount( count );
 …
                  */
                 checkTerm: function( section ) {
                         var newTerm;
                         if ( 'wporg' === section.params.action ) {
+                        if ( 'remote' === section.params.filter_type ) {
                                 newTerm = $( '#wp-filter-search-input' ).val();
                                 if ( section.term !== newTerm ) {
                                         section.initializeNewQuery( newTerm, section.tags );
 …
                                 if ( section.loading ) {
                                         section.nextTags = tags;
                                 } else {
+                                        section.initializeNewQuery( section.term, tags );
+                                        if ( 'remote' === section.params.filter_type ) {
+                                                section.initializeNewQuery( section.term, tags );
+                                        } else if ( 'local' === section.params.filter_type ) {
+                                                section.filterSearch( tags.join( ' ' ) );
+                                        }
+                                }
+                        }
                 },
 …
                         section.fullyLoaded = false;
                         section.screenshotQueue = null;
                         // Run a new query, with loadControls handling paging, etc.
+                        // Run a new query, with loadThemes handling paging, etc.
                         if ( ! section.loading ) {
                                 section.term = newTerm;
                                 section.tags = newTags;
                                 section.loadControls();
+                                section.loadThemes();
                         } else {
                                 section.nextTerm = newTerm; // This will reload from loadControls() with the newest term once the current batch is loaded.
                                 section.nextTags = newTags; // This will reload from loadControls() with the newest tags once the current batch is loaded.
+                                section.nextTerm = newTerm; // This will reload from loadThemes() with the newest term once the current batch is loaded.
+                                section.nextTags = newTags; // This will reload from loadThemes() with the newest tags once the current batch is loaded.
+                        }
                         if ( ! section.expanded() ) {
                                 section.expand(); // Expand the section if it isn't expanded.
 …
                  * Show or hide the theme based on the presence of the term in the title, description, tags, and author.
+                 *
                  * @since 4.2.0
+                 * @param {Array} terms - An array of terms to search for.
                  * @returns {boolean} Whether a theme control was activated or not.
                  */
                 filter: function( term ) {
+                filter: function( terms ) {
                         var control = this,
+                                matchCount = 0,
                                 haystack = control.params.theme.name + ' ' +
                                         control.params.theme.description + ' ' +
                                         control.params.theme.tags + ' ' +
                                         control.params.theme.author;
+                                        control.params.theme.author + ' ';
                         haystack = haystack.toLowerCase().replace( '-', ' ' );
+                        if ( -1 !== haystack.search( term ) ) {
+                        // Back-compat for behavior in WordPress 4.2.0 to 4.8.X.
+                        if ( ! terms instanceof Array ) {
+                                terms = [terms];
+                        }
+                        // Always give exact name matches highest ranking.
+                        if ( control.params.theme.name.toLowerCase() === terms.join( ' ' ) ) {
+                                matchCount = 100;
+                        } else {
+                                // Search for and weight (by 10) complete term matches.
+                                matchCount = matchCount + 10 * ( haystack.split( terms.join( ' ' ) ).length - 1 );
+                                // Search for each term individually (as whole-word and partial match) and sum weighted match counts.
+                                _.each( terms, function( term ) {
+                                        matchCount = matchCount + 2 * ( haystack.split( term + ' ' ).length - 1 ); // Whole-word, double-weighted.
+                                        matchCount = matchCount + haystack.split( term ).length - 1; // Partial word, to minimize empty intermediate searches while typing.
+                                });
+                                // Upper limit on match ranking.
+                                if ( matchCount > 99 ) {
+                                        matchCount = 99;
+                                }
+                        }
+                        if ( 0 !== matchCount ) {
                                 control.activate();
+                                control.params.priority = 101 - matchCount; // Sort results by match count.
                                 return true;
                         } else {
+                                control.deactivate();
+                                control.deactivate(); // Hide control
+                                control.params.priority = 101;
                                 return false;
+                        }
                 },

src/wp-includes/class-wp-customize-manager.php

                         $this->add_section( new WP_Customize_Themes_Section( $this, 'wporg_themes', array(
                                 'title'       => __( 'WordPress.org themes' ),
                                 'action'      => 'wporg',
+                                'filter_type' => 'remote',
                                 'capability'  => 'install_themes',
                                 'panel'       => 'themes',
                                 'priority'    => 5,
 …
+                }
                 $theme_action = sanitize_key( $_POST['theme_action'] );
                 $themes = array();
+                $args = array();
+                // Define query filters based on user input.
+                if ( ! array_key_exists( 'search', $_POST ) ) {
+                        $args['search'] = '';
+                } else {
+                        $args['search'] = sanitize_text_field( wp_unslash( $_POST['search'] ) );
+                }
+                if ( ! array_key_exists( 'tags', $_POST ) ) {
+                        $args['tag'] = '';
+                } else {
+                        $args['tag'] = array_map( 'sanitize_text_field', wp_unslash( (array) $_POST['tags'] ) );
+                }
+                if ( ! array_key_exists( 'page', $_POST ) ) {
+                        $args['page'] = 1;
+                } else {
+                        $args['page'] = absint( $_POST['page'] );
+                }
                 require_once ABSPATH . 'wp-admin/includes/theme.php';
+                // Load all installed themes from wp_prepare_themes_for_js().
                 if ( 'installed' === $theme_action ) {
                         $themes = array( 'themes' => wp_prepare_themes_for_js() );
                         foreach ( $themes['themes'] as &$theme ) {
 …
                                 $theme['type'] = 'installed';
                                 $theme['active'] = ( isset( $_POST['customized_theme'] ) && $_POST['customized_theme'] === $theme['id'] );
+                        }
+                // Load WordPress.org themes from the .org API and normalize data to match installed theme objects.
                 } elseif ( 'wporg' === $theme_action ) {
                         if ( ! current_user_can( 'install_themes' ) ) {
                                 wp_die( -1 );
 …
+                        }
                         // Arguments for all queries.
                         $args = array(
+                        $wporg_args = array(
                                 'per_page' => 100,
-                                'page' => isset( $_POST['page'] ) ? absint( $_POST['page'] ) : 1,
                                 'fields' => array(
                                         'screenshot_url' => true,
                                         'description' => true,
 …
                                 ),
                         );
+                        // Define query filters based on user input.
+                        if ( ! array_key_exists( 'search', $_POST ) ) {
+                                $args['search'] = '';
+                        } else {
+                                $args['search'] = sanitize_text_field( wp_unslash( $_POST['search'] ) );
+                        }
+                        $args = array_merge( $wporg_args, $args );
-                        if ( ! array_key_exists( 'tags', $_POST ) ) {
-                                $args['tag'] = '';
-                        } else {
-                                $args['tag'] = array_map( 'sanitize_text_field', wp_unslash( (array) $_POST['tags'] ) );
+                        }
                         if ( '' === $args['search'] && '' === $args['tag'] ) {
                                 $args['browse'] = 'new'; // Sort by latest themes by default.
+                        }
 …
                                 unset( $theme->author );
                         } // End foreach().
                 } // End if().
+                /**
+                 * Filters the theme data loaded in the customizer.
+                 *
+                 * This allows theme data to be loading from an external source,
+                 * or modification of data loaded from wp_prepare_themes_for_JS
+                 * or WordPress.org.
+                 *
+                 * @since 4.9.0
+                 *
+                 * @see WP_Customize_Manager::__construct()
+                 *
+                 * @param array $themes Nested array of theme data.
+                 * @param array $args   List of arguments, such as page, search term, and tags to query for.
+                 */
+                $themes = apply_filters( 'customize_load_themes_ajax', $themes, $args );
                 wp_send_json_success( $themes );
+        }

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

         public $action = '';
         /**
+         * Theme section filter type.
+         *
+         * Determines whether filters are applied to loaded (local) themes or by initiating a new remote query (remote).
+         * When filtering is local, the initial themes query is not paginated by default.
+         *
+         * @since 4.9.0
+         * @var string
+         */
+        public $filter_type = 'local';
+        /**
          * Get section parameters for JS.
+         *
          * @since 4.9.0
 …
         public function json() {
                 $exported = parent::json();
                 $exported['action'] = $this->action;
+                $exported['filter_type'] = $this->filter_type;
                 return $exported;
+        }

Make WordPress Core

Context Navigation

Ticket #42049: 42049.diff

src/wp-admin/js/customize-controls.js

src/wp-includes/class-wp-customize-manager.php

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

Download in other formats: