WordPress.org
Get WordPress

Make WordPress Core

Changeset 41807


Ignore:
Timestamp:
10/10/2017 07:08:51 AM (7 years ago)
Author:
westonruter
Message:

Customize: Improve behavior and extensibility of theme loading and searching.

  • Introduce WP_Customize_Themes_Section::$filter_type, which has built-in functionality for local and remote filtering. When this set to local, all themes are assumed to be loaded from Ajax when the section is first loaded, and subsequent searching/filtering is applied to the loaded collection of themes within the section. This is how the core "Installed" section behaves - third-party sources with limited numbers of themes may consider leveraging this implementation. When this is set to remote, searching and filtering always triggers a new remote query via Ajax. The core "WordPress.org" section uses this approach, as it has over 5000 themes to search.
  • Refactor filterSearch() to accept a raw term string as input. This enables a feature filter to be used on a section where filter_type is local.
  • Refactor filter() on a theme control to check for an array of terms. Also sort the results by the number of matches. Rather than searching for an exact match, this will now search for each word in a search distinctly, allowing things like tags to rank in search results more accurately.
  • Split loadControls() into two functions for themes section JS: loadThemes() to initiate and manage an Ajax request and loadControls() to create theme controls based on the results of the Ajax call. If third-party sections need to change the way controls are loaded, such as by using a custom control subclass of WP_Customize_Theme_Control, this allows them to use the core logic for managing the Ajax call and only override the actual control-creation process.
  • Introduce customize_load_themes filter to facilitate loading themes from third-party sources (or modifying the results of the core sections).
  • Bring significant improvements to the installed themes search filter.

Props celloexpressions.
Amends [41648].
See #37661.
Fixes #42049.

Location:
trunk/src
Files:
3 edited

Legend:

Unmodified
Added
Removed

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

    r41803 r41807  
    17181718            });
    17191719
    1720             // Filter-search all theme objects loaded in the section.
    1721             section.container.on( 'input', '.wp-filter-search-themes', function( event ) {
    1722                     section.filterSearch( event.currentTarget );
    1723             });
    1724 
    1725             // Event listeners for remote wporg queries with user-entered terms.
    1726             if ( 'wporg' === section.params.action ) {
    1727 
     1720            if ( 'local' === section.params.filter_type ) {
     1721
     1722                // Filter-search all theme objects loaded in the section.
     1723                section.container.on( 'input', '.wp-filter-search-themes', function( event ) {
     1724                    section.filterSearch( event.currentTarget.value );
     1725                });
     1726
     1727            } else if ( 'remote' === section.params.filter_type ) {
     1728
     1729                // Event listeners for remote queries with user-entered terms.
    17281730                // Search terms.
    17291731                debounced = _.debounce( section.checkTerm, 500 ); // Wait until there is no input for 500 milliseconds to initiate a search.
    … …  
    17411743                    section.checkTerm( section );
    17421744                });
    1743 
    1744                 // Toggle feature filter sections.
    1745                 section.contentContainer.on( 'click', '.feature-filter-toggle', function( e ) {
    1746                     $( e.currentTarget )
    1747                         .toggleClass( 'open' )
    1748                         .attr( 'aria-expanded', function( i, attr ) {
    1749                             return 'true' === attr ? 'false' : 'true';
    1750                         })
    1751                         .next( '.filter-drawer' ).slideToggle( 180, 'linear', function() {
    1752                             if ( 0 === section.filtersHeight ) {
    1753                                 section.filtersHeight = $( this ).height();
    1754 
    1755                                 // First time, so it's opened.
    1756                                 section.contentContainer.find( '.themes' ).css( 'margin-top', section.filtersHeight + 76 );
    1757                             }
    1758                         });
    1759                     if ( $( e.currentTarget ).hasClass( 'open' ) ) {
    1760                         section.contentContainer.find( '.themes' ).css( 'margin-top', section.filtersHeight + 76 );
    1761                     } else {
    1762                         section.contentContainer.find( '.themes' ).css( 'margin-top', 0 );
    1763                     }
    1764                 });
    1765             }
     1745            }
     1746
     1747            // Toggle feature filters.
     1748            section.contentContainer.on( 'click', '.feature-filter-toggle', function( e ) {
     1749                $( e.currentTarget )
     1750                    .toggleClass( 'open' )
     1751                    .attr( 'aria-expanded', function( i, attr ) {
     1752                        return 'true' === attr ? 'false' : 'true';
     1753                    })
     1754                    .next( '.filter-drawer' ).slideToggle( 180, 'linear', function() {
     1755                        if ( 0 === section.filtersHeight ) {
     1756                            section.filtersHeight = $( this ).height();
     1757
     1758                            // First time, so it's opened.
     1759                            section.contentContainer.find( '.themes' ).css( 'margin-top', section.filtersHeight + 76 );
     1760                        }
     1761                    });
     1762                if ( $( e.currentTarget ).hasClass( 'open' ) ) {
     1763                    section.contentContainer.find( '.themes' ).css( 'margin-top', section.filtersHeight + 76 );
     1764                } else {
     1765                    section.contentContainer.find( '.themes' ).css( 'margin-top', 0 );
     1766                }
     1767            });
    17661768
    17671769            // Setup section cross-linking.
    … …  
    18071809                // Try to load controls if none are loaded yet.
    18081810                if ( 0 === section.loaded ) {
    1809                     section.loadControls();
     1811                    section.loadThemes();
    18101812                }
    18111813
    … …  
    18221824
    18231825                            // Directly initialize an empty remote search to avoid a race condition.
    1824                             if ( '' === searchTerm && '' !== section.term && 'installed' !== section.params.action ) {
     1826                            if ( '' === searchTerm && '' !== section.term && 'local' !== section.params.filter_type ) {
    18251827                                section.term = '';
    18261828                                section.initializeNewQuery( section.term, section.tags );
    18271829                            } else {
    1828                                 section.checkTerm( section );
     1830                                if ( 'remote' === section.params.filter_type ) {
     1831                                    section.checkTerm( section );
     1832                                } else if ( 'local' === section.params.filter_type ) {
     1833                                    section.filterSearch( searchTerm );
     1834                                }
    18291835                            }
    1830                             section.filterSearch( section.contentContainer.find( '.wp-filter-search' ).get( 0 ) );
    18311836                        }
    18321837                        otherSection.collapse( { duration: args.duration } );
    … …  
    18781883         * @returns {void}
    18791884         */
    1880         loadControls: function() {
     1885        loadThemes: function() {
    18811886            var section = this, params, page, request;
    18821887
    … …  
    18951900            };
    18961901
    1897             // Add fields for wporg actions.
    1898             if ( 'wporg' === section.params.action ) {
     1902            // Add fields for remote filtering.
     1903            if ( 'remote' === section.params.filter_type ) {
    18991904                params.search = section.term;
    19001905                params.tags = section.tags;
    … …  
    19071912            request = wp.ajax.post( 'customize_load_themes', params );
    19081913            request.done(function( data ) {
    1909                 var themes = data.themes, newThemeControls;
     1914                var themes = data.themes;
    19101915
    19111916                // Stop and try again if the term changed while loading.
    … …  
    19201925                    section.nextTags = '';
    19211926                    section.loading = false;
    1922                     section.loadControls();
     1927                    section.loadThemes();
    19231928                    return;
    19241929                }
    19251930
    19261931                if ( 0 !== themes.length ) {
    1927                     newThemeControls = [];
    1928 
    1929                     // Add controls for each theme.
    1930                     _.each( themes, function( theme ) {
    1931                         var themeControl = new api.controlConstructor.theme( section.params.action + '_theme_' + theme.id, {
    1932                             type: 'theme',
    1933                             section: section.params.id,
    1934                             theme: theme,
    1935                             priority: section.loaded + 1
    1936                         } );
    1937 
    1938                         api.control.add( themeControl );
    1939                         newThemeControls.push( themeControl );
    1940                         section.loaded = section.loaded + 1;
    1941                     });
     1932
     1933                    section.loadControls( themes, page );
    19421934
    19431935                    if ( 1 === page ) {
    … …  
    19511943                            }
    19521944                        });
    1953                         if ( 'installed' !== section.params.action ) {
     1945                        if ( 'local' !== section.params.filter_type ) {
    19541946                            wp.a11y.speak( api.settings.l10n.themeSearchResults.replace( '%d', data.info.results ) );
    19551947                        }
    1956                     } else {
    1957                         Array.prototype.push.apply( section.screenshotQueue, newThemeControls ); // Add new themes to the screenshot queue.
    19581948                    }
     1949
    19591950                    _.delay( section.renderScreenshots, 100 ); // Wait for the controls to become visible.
    19601951
    1961                     if ( 'installed' === section.params.action || 100 > themes.length ) { // If we have less than the requested 100 themes, it's the end of the list.
     1952                    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.
    19621953                        section.fullyLoaded = true;
    19631954                    }
    … …  
    19701961                    }
    19711962                }
    1972                 if ( 'installed' === section.params.action ) {
     1963                if ( 'local' === section.params.filter_type ) {
    19731964                    section.updateCount(); // Count of visible theme controls.
    19741965                } else {
    … …  
    19961987
    19971988        /**
     1989         * Loads controls into the section from data received from loadThemes().
     1990         *
     1991         * @since 4.9.0
     1992         * @param {Array} themes - Array of theme data to create controls with.
     1993         * @param {integer} page - Page of results being loaded.
     1994         * @returns {void}
     1995         */
     1996        loadControls: function( themes, page ) {
     1997            var newThemeControls = [],
     1998                section = this;
     1999
     2000            // Add controls for each theme.
     2001            _.each( themes, function( theme ) {
     2002                var themeControl = new api.controlConstructor.theme( section.params.action + '_theme_' + theme.id, {
     2003                    type: 'theme',
     2004                    section: section.params.id,
     2005                    theme: theme,
     2006                    priority: section.loaded + 1
     2007                } );
     2008
     2009                api.control.add( themeControl );
     2010                newThemeControls.push( themeControl );
     2011                section.loaded = section.loaded + 1;
     2012            });
     2013
     2014            if ( 1 !== page ) {
     2015                Array.prototype.push.apply( section.screenshotQueue, newThemeControls ); // Add new themes to the screenshot queue.
     2016            }
     2017        },
     2018
     2019        /**
    19982020         * Determines whether more themes should be loaded, and loads them.
    19992021         *
    … …  
    20102032
    20112033                if ( bottom > threshold ) {
    2012                     section.loadControls();
     2034                    section.loadThemes();
    20132035                }
    20142036            }
    … …  
    20202042         * @since 4.9.0
    20212043         *
    2022          * @param {Element} el - The search input element as a raw JS object.
     2044         * @param {string} term - The raw search input value.
    20232045         * @returns {void}
    20242046         */
    2025         filterSearch: function( el ) {
     2047        filterSearch: function( term ) {
    20262048            var count = 0,
    20272049                visible = false,
    20282050                section = this,
    2029                 noFilter = ( undefined !== api.section( 'wporg_themes' ) && 'wporg' !== section.params.action ) ? '.no-themes-local' : '.no-themes',
    2030                 term = el.value.toLowerCase().trim().replace( '-', ' ' ),
    2031                 controls = section.controls();
     2051                noFilter = ( api.section.has( 'wporg_themes' ) && 'remote' !== section.params.filter_type ) ? '.no-themes-local' : '.no-themes',
     2052                controls = section.controls(),
     2053                terms;
    20322054
    20332055            if ( section.loading ) {
    … …  
    20352057            }
    20362058
     2059            // Standardize search term format and split into an array of individual words.
     2060            terms = term.toLowerCase().trim().replace( /-/g, ' ' ).split( ' ' );
     2061
    20372062            _.each( controls, function( control ) {
    2038                 visible = control.filter( term );
     2063                visible = control.filter( terms ); // Shows/hides and sorts control based on the applicability of the search term.
    20392064                if ( visible ) {
    20402065                    count = count + 1;
    … …  
    20502075
    20512076            section.renderScreenshots();
     2077            api.reflowPaneContents();
    20522078
    20532079            // Update theme count.
    … …  
    20652091        checkTerm: function( section ) {
    20662092            var newTerm;
    2067             if ( 'wporg' === section.params.action ) {
     2093            if ( 'remote' === section.params.filter_type ) {
    20682094                newTerm = section.contentContainer.find( '.wp-filter-search' ).val();
    20692095                if ( section.term !== newTerm ) {
    … …  
    21052131                    section.nextTags = tags;
    21062132                } else {
    2107                     section.initializeNewQuery( section.term, tags );
     2133                    if ( 'remote' === section.params.filter_type ) {
     2134                        section.initializeNewQuery( section.term, tags );
     2135                    } else if ( 'local' === section.params.filter_type ) {
     2136                        section.filterSearch( tags.join( ' ' ) );
     2137                    }
    21082138                }
    21092139            }
    … …  
    21312161            section.screenshotQueue = null;
    21322162
    2133             // Run a new query, with loadControls handling paging, etc.
     2163            // Run a new query, with loadThemes handling paging, etc.
    21342164            if ( ! section.loading ) {
    21352165                section.term = newTerm;
    21362166                section.tags = newTags;
    2137                 section.loadControls();
     2167                section.loadThemes();
    21382168            } else {
    2139                 section.nextTerm = newTerm; // This will reload from loadControls() with the newest term once the current batch is loaded.
    2140                 section.nextTags = newTags; // This will reload from loadControls() with the newest tags once the current batch is loaded.
     2169                section.nextTerm = newTerm; // This will reload from loadThemes() with the newest term once the current batch is loaded.
     2170                section.nextTags = newTags; // This will reload from loadThemes() with the newest tags once the current batch is loaded.
    21412171            }
    21422172            if ( ! section.expanded() ) {
    … …  
    48764906         *
    48774907         * @since 4.2.0
     4908         * @param {Array} terms - An array of terms to search for.
    48784909         * @returns {boolean} Whether a theme control was activated or not.
    48794910         */
    4880         filter: function( term ) {
     4911        filter: function( terms ) {
    48814912            var control = this,
     4913                matchCount = 0,
    48824914                haystack = control.params.theme.name + ' ' +
    48834915                    control.params.theme.description + ' ' +
    48844916                    control.params.theme.tags + ' ' +
    4885                     control.params.theme.author;
     4917                    control.params.theme.author + ' ';
    48864918            haystack = haystack.toLowerCase().replace( '-', ' ' );
    4887             if ( -1 !== haystack.search( term ) ) {
     4919
     4920            // Back-compat for behavior in WordPress 4.2.0 to 4.8.X.
     4921            if ( ! _.isArray( terms ) ) {
     4922                terms = [ terms ];
     4923            }
     4924
     4925            // Always give exact name matches highest ranking.
     4926            if ( control.params.theme.name.toLowerCase() === terms.join( ' ' ) ) {
     4927                matchCount = 100;
     4928            } else {
     4929
     4930                // Search for and weight (by 10) complete term matches.
     4931                matchCount = matchCount + 10 * ( haystack.split( terms.join( ' ' ) ).length - 1 );
     4932
     4933                // Search for each term individually (as whole-word and partial match) and sum weighted match counts.
     4934                _.each( terms, function( term ) {
     4935                    matchCount = matchCount + 2 * ( haystack.split( term + ' ' ).length - 1 ); // Whole-word, double-weighted.
     4936                    matchCount = matchCount + haystack.split( term ).length - 1; // Partial word, to minimize empty intermediate searches while typing.
     4937                });
     4938
     4939                // Upper limit on match ranking.
     4940                if ( matchCount > 99 ) {
     4941                    matchCount = 99;
     4942                }
     4943            }
     4944
     4945            if ( 0 !== matchCount ) {
    48884946                control.activate();
     4947                control.params.priority = 101 - matchCount; // Sort results by match count.
    48894948                return true;
    48904949            } else {
    4891                 control.deactivate();
     4950                control.deactivate(); // Hide control
     4951                control.params.priority = 101;
    48924952                return false;
    48934953            }

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

    r41802 r41807  
    44164416                'title'       => __( 'WordPress.org themes' ),
    44174417                'action'      => 'wporg',
     4418                'filter_type' => 'remote',
    44184419                'capability'  => 'install_themes',
    44194420                'panel'       => 'themes',
    … …  
    49484949        $theme_action = sanitize_key( $_POST['theme_action'] );
    49494950        $themes = array();
     4951        $args = array();
     4952
     4953        // Define query filters based on user input.
     4954        if ( ! array_key_exists( 'search', $_POST ) ) {
     4955            $args['search'] = '';
     4956        } else {
     4957            $args['search'] = sanitize_text_field( wp_unslash( $_POST['search'] ) );
     4958        }
     4959
     4960        if ( ! array_key_exists( 'tags', $_POST ) ) {
     4961            $args['tag'] = '';
     4962        } else {
     4963            $args['tag'] = array_map( 'sanitize_text_field', wp_unslash( (array) $_POST['tags'] ) );
     4964        }
     4965
     4966        if ( ! array_key_exists( 'page', $_POST ) ) {
     4967            $args['page'] = 1;
     4968        } else {
     4969            $args['page'] = absint( $_POST['page'] );
     4970        }
    49504971
    49514972        require_once ABSPATH . 'wp-admin/includes/theme.php';
     4973
    49524974        if ( 'installed' === $theme_action ) {
     4975
     4976            // Load all installed themes from wp_prepare_themes_for_js().
    49534977            $themes = array( 'themes' => wp_prepare_themes_for_js() );
    49544978            foreach ( $themes['themes'] as &$theme ) {
    … …  
    49564980                $theme['active'] = ( isset( $_POST['customized_theme'] ) && $_POST['customized_theme'] === $theme['id'] );
    49574981            }
     4982
    49584983        } elseif ( 'wporg' === $theme_action ) {
     4984
     4985            // Load WordPress.org themes from the .org API and normalize data to match installed theme objects.
    49594986            if ( ! current_user_can( 'install_themes' ) ) {
    49604987                wp_die( -1 );
    … …  
    49624989
    49634990            // Arguments for all queries.
    4964             $args = array(
     4991            $wporg_args = array(
    49654992                'per_page' => 100,
    4966                 'page' => isset( $_POST['page'] ) ? absint( $_POST['page'] ) : 1,
    49674993                'fields' => array(
    49684994                    'screenshot_url' => true,
    … …  
    49805006            );
    49815007
    4982             // Define query filters based on user input.
    4983             if ( ! array_key_exists( 'search', $_POST ) ) {
    4984                 $args['search'] = '';
    4985             } else {
    4986                 $args['search'] = sanitize_text_field( wp_unslash( $_POST['search'] ) );
    4987             }
    4988 
    4989             if ( ! array_key_exists( 'tags', $_POST ) ) {
    4990                 $args['tag'] = '';
    4991             } else {
    4992                 $args['tag'] = array_map( 'sanitize_text_field', wp_unslash( (array) $_POST['tags'] ) );
    4993             }
     5008            $args = array_merge( $wporg_args, $args );
    49945009
    49955010            if ( '' === $args['search'] && '' === $args['tag'] ) {
    … …  
    50625077            } // End foreach().
    50635078        } // End if().
     5079
     5080        /**
     5081         * Filters the theme data loaded in the customizer.
     5082         *
     5083         * This allows theme data to be loading from an external source,
     5084         * or modification of data loaded from `wp_prepare_themes_for_js()`
     5085         * or WordPress.org via `themes_api()`.
     5086         *
     5087         * @since 4.9.0
     5088         *
     5089         * @see wp_prepare_themes_for_js()
     5090         * @see themes_api()
     5091         * @see WP_Customize_Manager::__construct()
     5092         *
     5093         * @param array                $themes  Nested array of theme data.
     5094         * @param array                $args    List of arguments, such as page, search term, and tags to query for.
     5095         * @param WP_Customize_Manager $manager Instance of Customize manager.
     5096         */
     5097        $themes = apply_filters( 'customize_load_themes', $themes, $args, $this );
     5098
    50645099        wp_send_json_success( $themes );
    50655100    }

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

    r41709 r41807  
    3838
    3939    /**
     40     * Theme section filter type.
     41     *
     42     * Determines whether filters are applied to loaded (local) themes or by initiating a new remote query (remote).
     43     * When filtering is local, the initial themes query is not paginated by default.
     44     *
     45     * @since 4.9.0
     46     * @var string
     47     */
     48    public $filter_type = 'local';
     49
     50    /**
    4051     * Get section parameters for JS.
    4152     *
    … …  
    4657        $exported = parent::json();
    4758        $exported['action'] = $this->action;
     59        $exported['filter_type'] = $this->filter_type;
    4860
    4961        return $exported;
Note: See TracChangeset for help on using the changeset viewer.