WordPress.org

Make WordPress Core

Ticket #42212: 42212.2.patch

File 42212.2.patch, 7.8 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 8c5cc10050..e558471842 100644
    a b p.customize-section-description { 
    17611761        z-index: 20;
    17621762}
    17631763
     1764@media screen and (min-width: 1670px) {
     1765        .control-panel-themes .customize-themes-full-container {
     1766                width: 82%;
     1767                right: 0;
     1768                left: initial;
     1769        }
     1770}
     1771
    17641772.modal-open .control-panel-themes .customize-themes-full-container {
    17651773        overflow-y: visible;
    17661774}
    p.customize-section-description { 
    18351843        display: none;
    18361844}
    18371845
    1838 .themes-filter-bar .filter-drawer {
     1846.filter-drawer {
    18391847        box-sizing: border-box;
    18401848        width: 100%;
    18411849        position: absolute;
    p.customize-section-description { 
    18481856        border-bottom: 1px solid #ddd;
    18491857}
    18501858
    1851 .themes-filter-bar .filter-group {
     1859.filter-drawer .filter-group {
    18521860        margin: 0 25px 0 0;
    18531861        width: calc( (100% - 75px) / 3);
    18541862        min-width: 200px;
    p.customize-section-description { 
    21112119        border-bottom: 1px solid #ddd;
    21122120}
    21132121
     2122@media screen and (min-width: 1670px) {
     2123        .customize-preview-header.themes-filter-bar {
     2124                width: 82%;
     2125                right: 0;
     2126                left: initial;
     2127        }
     2128}
     2129
    21142130.themes-filter-bar .themes-filter-container {
    21152131        margin: 0;
    21162132        padding: 0;
    p.customize-section-description { 
    21362152                width: 100%;
    21372153                margin: 0 0 25px 0;
    21382154        }
     2155        .filter-drawer {
     2156                top: 46px;
     2157        }
    21392158        .wp-customizer .theme-browser .themes {
    21402159                padding: 0 0 25px 25px;
    21412160                overflow: hidden;
    p.customize-section-description { 
    21502169}
    21512170
    21522171@media screen and (max-width:1018px) {
    2153         .themes-filter-bar .filter-group {
     2172        .filter-drawer .filter-group {
    21542173                width: calc( (100% - 50px) / 2);
    21552174        }
    21562175}
    p.customize-section-description { 
    21672186                min-width: 200px;
    21682187        }
    21692188
    2170         .themes-filter-bar .filter-drawer {
     2189        .filter-drawer {
    21712190                top: 86px;
    21722191        }
    21732192
    p.customize-section-description { 
    21772196}
    21782197
    21792198@media screen and (max-width:792px) {
    2180         .themes-filter-bar .filter-group {
     2199        .filter-drawer .filter-group {
    21812200                width: calc( 100% - 25px);
    21822201        }
    21832202}
    body.adding-widget .add-new-widget:before, 
    28922911                vertical-align: middle;
    28932912                height: auto;
    28942913                margin-bottom: 4px;
    2895                 margin-top: 12px;
    28962914        }
    28972915
    28982916        #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 c2a63b068f..0f059579cc 100644
    a b  
    17991799
    18001800                        // Toggle feature filters.
    18011801                        section.contentContainer.on( 'click', '.feature-filter-toggle', function( e ) {
    1802                                 $( e.currentTarget )
    1803                                         .toggleClass( 'open' )
    1804                                         .attr( 'aria-expanded', function( i, attr ) {
    1805                                                 return 'true' === attr ? 'false' : 'true';
    1806                                         })
    1807                                         .next( '.filter-drawer' ).slideToggle( 180, 'linear', function() {
    1808                                                 if ( 0 === section.filtersHeight ) {
    1809                                                         section.filtersHeight = $( this ).height();
     1802                                scrollDistance = $( '.customize-themes-full-container' ).scrollTop();
     1803                                togglefilterdrawer = function() {
     1804                                        $( e.currentTarget )
     1805                                                .toggleClass( 'open' )
     1806                                                .attr( 'aria-expanded', function( i, attr ) {
     1807                                                        return 'true' === attr ? 'false' : 'true';
     1808                                                })
     1809                                                .parent().next( '.filter-drawer' ).slideToggle( 180, 'linear', function() {
     1810                                                        if ( 0 === section.filtersHeight ) {
     1811                                                                section.filtersHeight = $( this ).height();
    18101812
    1811                                                         // First time, so it's opened.
    1812                                                         section.contentContainer.find( '.themes' ).css( 'margin-top', section.filtersHeight + 76 );
    1813                                                 }
    1814                                         });
    1815                                 if ( $( e.currentTarget ).hasClass( 'open' ) ) {
    1816                                         section.contentContainer.find( '.themes' ).css( 'margin-top', section.filtersHeight + 76 );
     1813                                                                // First time, so it's opened.
     1814                                                                section.contentContainer.find( '.themes' ).css( 'margin-top', section.filtersHeight + 50 );
     1815                                                        }
     1816                                                });
     1817                                        if ( $( e.currentTarget ).hasClass( 'open' ) ) {
     1818                                                section.contentContainer.find( '.themes' ).css( 'margin-top', section.filtersHeight + 50 );
     1819                                        } else {
     1820                                                section.contentContainer.find( '.themes' ).css( 'margin-top', 0 );
     1821                                        }
     1822                                }
     1823
     1824                                if ( 0 < scrollDistance ) {
     1825                                        $('.customize-themes-full-container').animate( { scrollTop: 0 }, 800 );
     1826                                        if ( ! $( e.currentTarget ).hasClass( 'open' ) ) {
     1827                                                togglefilterdrawer();
     1828                                        }
    18171829                                } else {
    1818                                         section.contentContainer.find( '.themes' ).css( 'margin-top', 0 );
     1830                                        togglefilterdrawer();
    18191831                                }
    18201832                        });
    18211833
  • 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}