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 { |
1761 | 1761 | z-index: 20; |
1762 | 1762 | } |
1763 | 1763 | |
| 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 | |
1764 | 1772 | .modal-open .control-panel-themes .customize-themes-full-container { |
1765 | 1773 | overflow-y: visible; |
1766 | 1774 | } |
… |
… |
p.customize-section-description { |
1835 | 1843 | display: none; |
1836 | 1844 | } |
1837 | 1845 | |
1838 | | .themes-filter-bar .filter-drawer { |
| 1846 | .filter-drawer { |
1839 | 1847 | box-sizing: border-box; |
1840 | 1848 | width: 100%; |
1841 | 1849 | position: absolute; |
… |
… |
p.customize-section-description { |
1848 | 1856 | border-bottom: 1px solid #ddd; |
1849 | 1857 | } |
1850 | 1858 | |
1851 | | .themes-filter-bar .filter-group { |
| 1859 | .filter-drawer .filter-group { |
1852 | 1860 | margin: 0 25px 0 0; |
1853 | 1861 | width: calc( (100% - 75px) / 3); |
1854 | 1862 | min-width: 200px; |
… |
… |
p.customize-section-description { |
2111 | 2119 | border-bottom: 1px solid #ddd; |
2112 | 2120 | } |
2113 | 2121 | |
| 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 | |
2114 | 2130 | .themes-filter-bar .themes-filter-container { |
2115 | 2131 | margin: 0; |
2116 | 2132 | padding: 0; |
… |
… |
p.customize-section-description { |
2136 | 2152 | width: 100%; |
2137 | 2153 | margin: 0 0 25px 0; |
2138 | 2154 | } |
| 2155 | .filter-drawer { |
| 2156 | top: 46px; |
| 2157 | } |
2139 | 2158 | .wp-customizer .theme-browser .themes { |
2140 | 2159 | padding: 0 0 25px 25px; |
2141 | 2160 | overflow: hidden; |
… |
… |
p.customize-section-description { |
2150 | 2169 | } |
2151 | 2170 | |
2152 | 2171 | @media screen and (max-width:1018px) { |
2153 | | .themes-filter-bar .filter-group { |
| 2172 | .filter-drawer .filter-group { |
2154 | 2173 | width: calc( (100% - 50px) / 2); |
2155 | 2174 | } |
2156 | 2175 | } |
… |
… |
p.customize-section-description { |
2167 | 2186 | min-width: 200px; |
2168 | 2187 | } |
2169 | 2188 | |
2170 | | .themes-filter-bar .filter-drawer { |
| 2189 | .filter-drawer { |
2171 | 2190 | top: 86px; |
2172 | 2191 | } |
2173 | 2192 | |
… |
… |
p.customize-section-description { |
2177 | 2196 | } |
2178 | 2197 | |
2179 | 2198 | @media screen and (max-width:792px) { |
2180 | | .themes-filter-bar .filter-group { |
| 2199 | .filter-drawer .filter-group { |
2181 | 2200 | width: calc( 100% - 25px); |
2182 | 2201 | } |
2183 | 2202 | } |
… |
… |
body.adding-widget .add-new-widget:before, |
2892 | 2911 | vertical-align: middle; |
2893 | 2912 | height: auto; |
2894 | 2913 | margin-bottom: 4px; |
2895 | | margin-top: 12px; |
2896 | 2914 | } |
2897 | 2915 | |
2898 | 2916 | #publish-settings { |
diff --git a/wp-admin/js/customize-controls.js b/wp-admin/js/customize-controls.js
index c2a63b068f..0f059579cc 100644
a
|
b
|
|
1799 | 1799 | |
1800 | 1800 | // Toggle feature filters. |
1801 | 1801 | 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(); |
1810 | 1812 | |
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 | } |
1817 | 1829 | } else { |
1818 | | section.contentContainer.find( '.themes' ).css( 'margin-top', 0 ); |
| 1830 | togglefilterdrawer(); |
1819 | 1831 | } |
1820 | 1832 | }); |
1821 | 1833 | |
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 | } |