WordPress.org

Make WordPress Core

Ticket #42212: 42212.3.patch

File 42212.3.patch, 8.7 KB (added by rclations, 2 years ago)
  • wp-admin/css/common.css

    diff --git a/wp-admin/css/common.css b/wp-admin/css/common.css
    index f0c0b0ae6f..a98fae26db 100644
    a b th.action-links { 
    11581158        position: relative;
    11591159        float: left;
    11601160        margin: 0 1% 0 0;
    1161         padding: 20px 10px 10px;
     1161        padding: 34px 10px 10px;
    11621162        width: 24%;
    11631163        background: #fff;
    11641164        border: 1px solid #e5e5e5;
    th.action-links { 
    11671167
    11681168.filter-group legend {
    11691169        position: absolute;
    1170         top: 10px;
     1170        top: 24px;
    11711171        display: block;
    11721172        margin: 0;
    11731173        padding: 0;
  • wp-admin/css/customize-controls.css

    diff --git a/wp-admin/css/customize-controls.css b/wp-admin/css/customize-controls.css
    index 8c5cc10050..c9d6e5daf3 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}
    p.customize-section-description { 
    21892208/* Mobile - toggle between themes and filters */
    21902209@media screen and (max-width:600px) {
    21912210
     2211        .filter-drawer {
     2212                top: 132px;
     2213        }
     2214
    21922215        .wp-full-overlay.showing-themes .control-panel-themes .filter-themes-count .filter-themes {
    21932216                display: block;
    21942217                float: right;
    body.adding-widget .add-new-widget:before, 
    28922915                vertical-align: middle;
    28932916                height: auto;
    28942917                margin-bottom: 4px;
    2895                 margin-top: 12px;
    28962918        }
    28972919
    28982920        #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..ca0de60ead 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                                section.scrollDistance = $( '.customize-themes-full-container' ).scrollTop();
     1803                                section.filterDrawerHeight = $( e.currentTarget ).parent().next( '.filter-drawer' ).height();
     1804
     1805                                togglefilterdrawer = function() {
     1806                                        $( e.currentTarget )
     1807                                                .toggleClass( 'open' )
     1808                                                .attr( 'aria-expanded', function( i, attr ) {
     1809                                                        return 'true' === attr ? 'false' : 'true';
     1810                                                })
     1811                                                .parent().next( '.filter-drawer' ).slideToggle( 180, 'linear' );
    18101812
    1811                                                         // First time, so it's opened.
    1812                                                         section.contentContainer.find( '.themes' ).css( 'margin-top', section.filtersHeight + 76 );
     1813                                        if ( $( e.currentTarget ).hasClass( 'open' ) ) {
     1814                                                if ( 1018 < window.innerWidth ) {
     1815                                                        section.contentContainer.find( '.themes' ).css( 'margin-top', section.filterDrawerHeight + 50 );
     1816                                                } else {
     1817                                                        section.contentContainer.find( '.themes' ).css( 'margin-top', section.filterDrawerHeight + 76 );
    18131818                                                }
    1814                                         });
    1815                                 if ( $( e.currentTarget ).hasClass( 'open' ) ) {
    1816                                         section.contentContainer.find( '.themes' ).css( 'margin-top', section.filtersHeight + 76 );
     1819                                        } else {
     1820                                                section.contentContainer.find( '.themes' ).css( 'margin-top', 0 );
     1821                                        }
     1822                                }
     1823
     1824                                if ( 0 < section.scrollDistance ) {
     1825                                        $('.customize-themes-full-container').animate( { scrollTop: 0 }, 400 );
     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}