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 { |
1827 | 1827 | display: none; |
1828 | 1828 | } |
1829 | 1829 | |
1830 | | .themes-filter-bar .filter-drawer { |
| 1830 | .filter-drawer { |
1831 | 1831 | box-sizing: border-box; |
1832 | 1832 | width: 100%; |
1833 | 1833 | position: absolute; |
1834 | | top: 46px; |
| 1834 | top: 0px; |
1835 | 1835 | left: 0; |
1836 | 1836 | padding: 25px 0 25px 25px; |
1837 | 1837 | border-top: 0; |
… |
… |
p.customize-section-description { |
1840 | 1840 | border-bottom: 1px solid #ddd; |
1841 | 1841 | } |
1842 | 1842 | |
1843 | | .themes-filter-bar .filter-group { |
| 1843 | .filter-drawer .filter-group { |
1844 | 1844 | margin: 0 25px 0 0; |
1845 | 1845 | width: calc( (100% - 75px) / 3); |
1846 | 1846 | min-width: 200px; |
… |
… |
p.customize-section-description { |
2128 | 2128 | width: 100%; |
2129 | 2129 | margin: 0 0 25px 0; |
2130 | 2130 | } |
| 2131 | .filter-drawer { |
| 2132 | top: 46px; |
| 2133 | } |
2131 | 2134 | .wp-customizer .theme-browser .themes { |
2132 | 2135 | padding: 0 0 25px 25px; |
2133 | 2136 | overflow: hidden; |
… |
… |
p.customize-section-description { |
2142 | 2145 | } |
2143 | 2146 | |
2144 | 2147 | @media screen and (max-width:1018px) { |
2145 | | .themes-filter-bar .filter-group { |
| 2148 | .filter-drawer .filter-group { |
2146 | 2149 | width: calc( (100% - 50px) / 2); |
2147 | 2150 | } |
2148 | 2151 | } |
… |
… |
p.customize-section-description { |
2159 | 2162 | min-width: 200px; |
2160 | 2163 | } |
2161 | 2164 | |
2162 | | .themes-filter-bar .filter-drawer { |
| 2165 | .filter-drawer { |
2163 | 2166 | top: 86px; |
2164 | 2167 | } |
2165 | 2168 | |
… |
… |
p.customize-section-description { |
2169 | 2172 | } |
2170 | 2173 | |
2171 | 2174 | @media screen and (max-width:792px) { |
2172 | | .themes-filter-bar .filter-group { |
| 2175 | .filter-drawer .filter-group { |
2173 | 2176 | width: calc( 100% - 25px); |
2174 | 2177 | } |
2175 | 2178 | } |
… |
… |
body.adding-widget .add-new-widget:before, |
2872 | 2875 | vertical-align: middle; |
2873 | 2876 | height: auto; |
2874 | 2877 | margin-bottom: 4px; |
2875 | | margin-top: 12px; |
2876 | 2878 | } |
2877 | 2879 | |
2878 | 2880 | #publish-settings { |
diff --git a/wp-admin/js/customize-controls.js b/wp-admin/js/customize-controls.js
index 7f0214b397..eae2a111fc 100644
a
|
b
|
|
1796 | 1796 | |
1797 | 1797 | // Toggle feature filters. |
1798 | 1798 | 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(); |
1807 | 1809 | |
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 | } |
1814 | 1826 | } else { |
1815 | | section.contentContainer.find( '.themes' ).css( 'margin-top', 0 ); |
| 1827 | togglefilterdrawer(); |
1816 | 1828 | } |
1817 | 1829 | }); |
1818 | 1830 | |
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 { |
80 | 80 | <div class="customize-preview-header themes-filter-bar"> |
81 | 81 | <?php $this->filter_bar_content_template(); ?> |
82 | 82 | </div> |
| 83 | <# if ( 'wporg' === data.action ) { #> |
| 84 | <?php $this->filter_drawer_content_template(); ?> |
| 85 | <# } #> |
83 | 86 | <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’s configuration. If you continue to have problems, please try the <a href="https://wordpress.org/support/">support forums</a>.' ); ?></p></div> |
84 | 87 | <ul class="themes"> |
85 | 88 | </ul> |
… |
… |
class WP_Customize_Themes_Section extends WP_Customize_Section { |
124 | 127 | ?> |
125 | 128 | </span> |
126 | 129 | </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> |
143 | 130 | <# } else { #> |
144 | 131 | <div class="themes-filter-container"> |
145 | 132 | <label for="{{ data.id }}-themes-filter" class="screen-reader-text"><?php _e( 'Search themes…' ); ?></label> |
… |
… |
class WP_Customize_Themes_Section extends WP_Customize_Section { |
157 | 144 | </div> |
158 | 145 | <?php |
159 | 146 | } |
| 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 | } |
160 | 176 | } |