WordPress.org

Make WordPress Core

Ticket #42212: 42212.patch

File 42212.patch, 7.3 KB (added by rclations, 2 years ago)
  • wp-admin/css/customize-controls.css

    diff --git a/wp-admin/css/customize-controls.css b/wp-admin/css/customize-controls.css
    index fee30586a7..ef65cad748 100644
    a b p.customize-section-description { 
    18271827        display: none;
    18281828}
    18291829
    1830 .themes-filter-bar .filter-drawer {
     1830.filter-drawer {
    18311831        box-sizing: border-box;
    18321832        width: 100%;
    18331833        position: absolute;
    1834         top: 46px;
     1834        top: 0px;
    18351835        left: 0;
    18361836        padding: 25px 0 25px 25px;
    18371837        border-top: 0;
    p.customize-section-description { 
    18401840        border-bottom: 1px solid #ddd;
    18411841}
    18421842
    1843 .themes-filter-bar .filter-group {
     1843.filter-drawer .filter-group {
    18441844        margin: 0 25px 0 0;
    18451845        width: calc( (100% - 75px) / 3);
    18461846        min-width: 200px;
    p.customize-section-description { 
    21282128                width: 100%;
    21292129                margin: 0 0 25px 0;
    21302130        }
     2131        .filter-drawer {
     2132                top: 46px;
     2133        }
    21312134        .wp-customizer .theme-browser .themes {
    21322135                padding: 0 0 25px 25px;
    21332136                overflow: hidden;
    p.customize-section-description { 
    21422145}
    21432146
    21442147@media screen and (max-width:1018px) {
    2145         .themes-filter-bar .filter-group {
     2148        .filter-drawer .filter-group {
    21462149                width: calc( (100% - 50px) / 2);
    21472150        }
    21482151}
    p.customize-section-description { 
    21592162                min-width: 200px;
    21602163        }
    21612164
    2162         .themes-filter-bar .filter-drawer {
     2165        .filter-drawer {
    21632166                top: 86px;
    21642167        }
    21652168
    p.customize-section-description { 
    21692172}
    21702173
    21712174@media screen and (max-width:792px) {
    2172         .themes-filter-bar .filter-group {
     2175        .filter-drawer .filter-group {
    21732176                width: calc( 100% - 25px);
    21742177        }
    21752178}
    body.adding-widget .add-new-widget:before, 
    28722875                vertical-align: middle;
    28732876                height: auto;
    28742877                margin-bottom: 4px;
    2875                 margin-top: 12px;
    28762878        }
    28772879
    28782880        #publish-settings {
  • wp-admin/js/customize-controls.js

    diff --git a/wp-admin/js/customize-controls.js b/wp-admin/js/customize-controls.js
    index 7f0214b397..eae2a111fc 100644
    a b  
    17961796
    17971797                        // Toggle feature filters.
    17981798                        section.contentContainer.on( 'click', '.feature-filter-toggle', function( e ) {
    1799                                 $( e.currentTarget )
    1800                                         .toggleClass( 'open' )
    1801                                         .attr( 'aria-expanded', function( i, attr ) {
    1802                                                 return 'true' === attr ? 'false' : 'true';
    1803                                         })
    1804                                         .next( '.filter-drawer' ).slideToggle( 180, 'linear', function() {
    1805                                                 if ( 0 === section.filtersHeight ) {
    1806                                                         section.filtersHeight = $( this ).height();
     1799                                scrollDistance = $( '.customize-themes-full-container' ).scrollTop();
     1800                                togglefilterdrawer = function() {
     1801                                        $( e.currentTarget )
     1802                                                .toggleClass( 'open' )
     1803                                                .attr( 'aria-expanded', function( i, attr ) {
     1804                                                        return 'true' === attr ? 'false' : 'true';
     1805                                                })
     1806                                                .parent().next( '.filter-drawer' ).slideToggle( 180, 'linear', function() {
     1807                                                        if ( 0 === section.filtersHeight ) {
     1808                                                                section.filtersHeight = $( this ).height();
    18071809
    1808                                                         // First time, so it's opened.
    1809                                                         section.contentContainer.find( '.themes' ).css( 'margin-top', section.filtersHeight + 76 );
    1810                                                 }
    1811                                         });
    1812                                 if ( $( e.currentTarget ).hasClass( 'open' ) ) {
    1813                                         section.contentContainer.find( '.themes' ).css( 'margin-top', section.filtersHeight + 76 );
     1810                                                                // First time, so it's opened.
     1811                                                                section.contentContainer.find( '.themes' ).css( 'margin-top', section.filtersHeight + 50 );
     1812                                                        }
     1813                                                });
     1814                                        if ( $( e.currentTarget ).hasClass( 'open' ) ) {
     1815                                                section.contentContainer.find( '.themes' ).css( 'margin-top', section.filtersHeight + 50 );
     1816                                        } else {
     1817                                                section.contentContainer.find( '.themes' ).css( 'margin-top', 0 );
     1818                                        }
     1819                                }
     1820
     1821                                if ( 0 < scrollDistance ) {
     1822                                        $('.customize-themes-full-container').animate( { scrollTop: 0 }, 800 );
     1823                                        if ( ! $( e.currentTarget ).hasClass( 'open' ) ) {
     1824                                                togglefilterdrawer();
     1825                                        }
    18141826                                } else {
    1815                                         section.contentContainer.find( '.themes' ).css( 'margin-top', 0 );
     1827                                        togglefilterdrawer();
    18161828                                }
    18171829                        });
    18181830
  • wp-includes/customize/class-wp-customize-themes-section.php

    diff --git a/wp-includes/customize/class-wp-customize-themes-section.php b/wp-includes/customize/class-wp-customize-themes-section.php
    index a89439a60d..806de25295 100644
    a b class WP_Customize_Themes_Section extends WP_Customize_Section { 
    8080                                        <div class="customize-preview-header themes-filter-bar">
    8181                                                <?php $this->filter_bar_content_template(); ?>
    8282                                        </div>
     83                                        <# if ( 'wporg' === data.action ) { #>
     84                                                <?php $this->filter_drawer_content_template(); ?>
     85                                        <# } #>
    8386                                        <div class="error unexpected-error" style="display: none; "><p><?php _e( 'An unexpected error occurred. Something may be wrong with WordPress.org or this server&#8217;s configuration. If you continue to have problems, please try the <a href="https://wordpress.org/support/">support forums</a>.' ); ?></p></div>
    8487                                        <ul class="themes">
    8588                                        </ul>
    class WP_Customize_Themes_Section extends WP_Customize_Section { 
    124127                                ?>
    125128                                </span>
    126129                        </button>
    127                         <div class="filter-drawer filter-details">
    128                                 <?php
    129                                 $feature_list = get_theme_feature_list( false ); // @todo: Use the .org API instead of the local core feature list. The .org API is currently outdated and will be reconciled when the .org themes directory is next redesigned.
    130                                 foreach ( $feature_list as $feature_name => $features ) {
    131                                         echo '<fieldset class="filter-group">';
    132                                         echo '<legend>' . esc_html( $feature_name ) . '</legend>';
    133                                         echo '<div class="filter-group-feature">';
    134                                         foreach ( $features as $feature => $feature_name ) {
    135                                                 echo '<input type="checkbox" id="filter-id-' . esc_attr( $feature ) . '" value="' . esc_attr( $feature ) . '" /> ';
    136                                                 echo '<label for="filter-id-' . esc_attr( $feature ) . '">' . esc_html( $feature_name ) . '</label><br>';
    137                                         }
    138                                         echo '</div>';
    139                                         echo '</fieldset>';
    140                                 }
    141                                 ?>
    142                         </div>
    143130                <# } else { #>
    144131                        <div class="themes-filter-container">
    145132                                <label for="{{ data.id }}-themes-filter" class="screen-reader-text"><?php _e( 'Search themes&hellip;' ); ?></label>
    class WP_Customize_Themes_Section extends WP_Customize_Section { 
    157144                </div>
    158145                <?php
    159146        }
     147
     148        /**
     149         * Render the filter drawer portion of a themes section as a JS template.
     150         *
     151         * The template is only rendered by PHP once, so all actions are prepared at once on the server side.
     152         * The filter bar container is rendered by @see `render_template()`.
     153         *
     154         * @since 4.9.0
     155         */
     156        protected function filter_drawer_content_template() {
     157                ?>
     158                <div class="filter-drawer filter-details">
     159                        <?php
     160                        $feature_list = get_theme_feature_list( false ); // @todo: Use the .org API instead of the local core feature list. The .org API is currently outdated and will be reconciled when the .org themes directory is next redesigned.
     161                        foreach ( $feature_list as $feature_name => $features ) {
     162                                echo '<fieldset class="filter-group">';
     163                                echo '<legend>' . esc_html( $feature_name ) . '</legend>';
     164                                echo '<div class="filter-group-feature">';
     165                                foreach ( $features as $feature => $feature_name ) {
     166                                        echo '<input type="checkbox" id="filter-id-' . esc_attr( $feature ) . '" value="' . esc_attr( $feature ) . '" /> ';
     167                                        echo '<label for="filter-id-' . esc_attr( $feature ) . '">' . esc_html( $feature_name ) . '</label><br>';
     168                                }
     169                                echo '</div>';
     170                                echo '</fieldset>';
     171                        }
     172                        ?>
     173                </div>
     174                <?php
     175        }
    160176}