Ticket #42212: 42212.3.patch

wp-admin/css/common.css

@@ -1158 +1158 @@
         position: relative;
         float: left;
         margin: 0 1% 0 0;
-        padding: 20px 10px 10px;
+        padding: 34px 10px 10px;
         width: 24%;
         background: #fff;
         border: 1px solid #e5e5e5;
@@ -1167 +1167 @@
 
 .filter-group legend {
         position: absolute;
-        top: 10px;
+        top: 24px;
         display: block;
         margin: 0;
         padding: 0;

wp-admin/css/customize-controls.css

@@ -1761 +1761 @@
         z-index: 20;
 }
 
+@media screen and (min-width: 1670px) {
+        .control-panel-themes .customize-themes-full-container {
+                width: 82%;
+                right: 0;
+                left: initial;
+        }
+}
+
 .modal-open .control-panel-themes .customize-themes-full-container {
         overflow-y: visible;
 }
@@ -1835 +1843 @@
         display: none;
 }
 
-.themes-filter-bar .filter-drawer {
+.filter-drawer {
         box-sizing: border-box;
         width: 100%;
         position: absolute;
@@ -1848 +1856 @@
         border-bottom: 1px solid #ddd;
 }
 
-.themes-filter-bar .filter-group {
+.filter-drawer .filter-group {
         margin: 0 25px 0 0;
         width: calc( (100% - 75px) / 3);
         min-width: 200px;
@@ -2111 +2119 @@
         border-bottom: 1px solid #ddd;
 }
 
+@media screen and (min-width: 1670px) {
+        .customize-preview-header.themes-filter-bar {
+                width: 82%;
+                right: 0;
+                left: initial;
+        }
+}
+
 .themes-filter-bar .themes-filter-container {
         margin: 0;
         padding: 0;
@@ -2136 +2152 @@
                 width: 100%;
                 margin: 0 0 25px 0;
         }
+        .filter-drawer {
+                top: 46px;
+        }
         .wp-customizer .theme-browser .themes {
                 padding: 0 0 25px 25px;
                 overflow: hidden;
@@ -2150 +2169 @@
 }
 
 @media screen and (max-width:1018px) {
-        .themes-filter-bar .filter-group {
+        .filter-drawer .filter-group {
                 width: calc( (100% - 50px) / 2);
         }
 }
@@ -2167 +2186 @@
                 min-width: 200px;
         }
 
-        .themes-filter-bar .filter-drawer {
+        .filter-drawer {
                 top: 86px;
         }
 
@@ -2177 +2196 @@
 }
 
 @media screen and (max-width:792px) {
-        .themes-filter-bar .filter-group {
+        .filter-drawer .filter-group {
                 width: calc( 100% - 25px);
         }
 }
@@ -2189 +2208 @@
 /* Mobile - toggle between themes and filters */
 @media screen and (max-width:600px) {
 
+        .filter-drawer {
+                top: 132px;
+        }
+
         .wp-full-overlay.showing-themes .control-panel-themes .filter-themes-count .filter-themes {
                 display: block;
                 float: right;
@@ -2892 +2915 @@
                 vertical-align: middle;
                 height: auto;
                 margin-bottom: 4px;
-                margin-top: 12px;
         }
 
         #publish-settings {

wp-admin/js/customize-controls.js

@@ -1799 +1799 @@
 
                         // 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();
+                                section.scrollDistance = $( '.customize-themes-full-container' ).scrollTop();
+                                section.filterDrawerHeight = $( e.currentTarget ).parent().next( '.filter-drawer' ).height();
+
+                                togglefilterdrawer = function() {
+                                        $( e.currentTarget )
+                                                .toggleClass( 'open' )
+                                                .attr( 'aria-expanded', function( i, attr ) {
+                                                        return 'true' === attr ? 'false' : 'true';
+                                                })
+                                                .parent().next( '.filter-drawer' ).slideToggle( 180, 'linear' );
 
-                                                        // First time, so it's opened.
-                                                        section.contentContainer.find( '.themes' ).css( 'margin-top', section.filtersHeight + 76 );
+                                        if ( $( e.currentTarget ).hasClass( 'open' ) ) {
+                                                if ( 1018 < window.innerWidth ) {
+                                                        section.contentContainer.find( '.themes' ).css( 'margin-top', section.filterDrawerHeight + 50 );
+                                                } else {
+                                                        section.contentContainer.find( '.themes' ).css( 'margin-top', section.filterDrawerHeight + 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 );
+                                        }
+                                }
+
+                                if ( 0 < section.scrollDistance ) {
+                                        $('.customize-themes-full-container').animate( { scrollTop: 0 }, 400 );
+                                        if ( ! $( e.currentTarget ).hasClass( 'open' ) ) {
+                                                togglefilterdrawer();
+                                        }
                                 } else {
-                                        section.contentContainer.find( '.themes' ).css( 'margin-top', 0 );
+                                        togglefilterdrawer();
                                 }
                         });
 

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

@@ -80 +80 @@
                                         <div class="customize-preview-header themes-filter-bar">
                                                 <?php $this->filter_bar_content_template(); ?>
                                         </div>
+                                        <# if ( 'wporg' === data.action ) { #>
+                                                <?php $this->filter_drawer_content_template(); ?>
+                                        <# } #>
                                         <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>
                                         <ul class="themes">
                                         </ul>
@@ -124 +127 @@
                                 ?>
                                 </span>
                         </button>
-                        <div class="filter-drawer filter-details">
-                                <?php
-                                $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.
-                                foreach ( $feature_list as $feature_name => $features ) {
-                                        echo '<fieldset class="filter-group">';
-                                        echo '<legend>' . esc_html( $feature_name ) . '</legend>';
-                                        echo '<div class="filter-group-feature">';
-                                        foreach ( $features as $feature => $feature_name ) {
-                                                echo '<input type="checkbox" id="filter-id-' . esc_attr( $feature ) . '" value="' . esc_attr( $feature ) . '" /> ';
-                                                echo '<label for="filter-id-' . esc_attr( $feature ) . '">' . esc_html( $feature_name ) . '</label><br>';
-                                        }
-                                        echo '</div>';
-                                        echo '</fieldset>';
-                                }
-                                ?>
-                        </div>
                 <# } else { #>
                         <div class="themes-filter-container">
                                 <label for="{{ data.id }}-themes-filter" class="screen-reader-text"><?php _e( 'Search themes&hellip;' ); ?></label>
@@ -157 +144 @@
                 </div>
                 <?php
         }
+
+        /**
+         * Render the filter drawer portion of a themes section as a JS template.
+         *
+         * The template is only rendered by PHP once, so all actions are prepared at once on the server side.
+         * The filter bar container is rendered by @see `render_template()`.
+         *
+         * @since 4.9.0
+         */
+        protected function filter_drawer_content_template() {
+                ?>
+                <div class="filter-drawer filter-details">
+                        <?php
+                        $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.
+                        foreach ( $feature_list as $feature_name => $features ) {
+                                echo '<fieldset class="filter-group">';
+                                echo '<legend>' . esc_html( $feature_name ) . '</legend>';
+                                echo '<div class="filter-group-feature">';
+                                foreach ( $features as $feature => $feature_name ) {
+                                        echo '<input type="checkbox" id="filter-id-' . esc_attr( $feature ) . '" value="' . esc_attr( $feature ) . '" /> ';
+                                        echo '<label for="filter-id-' . esc_attr( $feature ) . '">' . esc_html( $feature_name ) . '</label><br>';
+                                }
+                                echo '</div>';
+                                echo '</fieldset>';
+                        }
+                        ?>
+                </div>
+                <?php
+        }
 }