WordPress.org
Get WordPress

Make WordPress Core

Ticket #37471: 37471.0.diff

File 37471.0.diff, 13.7 KB (added by westonruter, 7 years ago)

​https://github.com/xwp/wordpress-develop/pull/194/commits/e9d4349624a832e1b73d9bdbaa17b44f5255f4ee

  • src/wp-admin/css/customize-controls.css 

    diff --git src/wp-admin/css/customize-controls.css src/wp-admin/css/customize-controls.css
index 039477a37c..fbcfe64101 100644
    body { 
    303303        transition: 0.18s transform cubic-bezier(0.645, 0.045, 0.355, 1), 0.18s -webkit-transform cubic-bezier(0.645, 0.045, 0.355, 1); /* easeInOutCubic */
    304304}
    305305
     306#customize-theme-controls .customize-pane-child.skip-transition {
     307        -webkit-transition: none;
     308        transition: none;
     309}
     310
    306311#customize-info,
    307312#customize-theme-controls .customize-pane-parent {
    308313        position: relative;

  • src/wp-admin/js/customize-controls.js 

    diff --git src/wp-admin/js/customize-controls.js src/wp-admin/js/customize-controls.js
index e8f19dd7c7..e5c9b8dbbf 100644
     
    711711                        var construct = this,
    712712                                content = construct.contentContainer,
    713713                                overlay = content.closest( '.wp-full-overlay' ),
    714                                 elements, transitionEndCallback;
     714                                elements, transitionEndCallback, transitionParentPane;
    715715
    716716                        // Determine set of elements that are affected by the animation.
    717717                        elements = overlay.add( content );
    718                         if ( _.isUndefined( construct.panel ) || '' === construct.panel() ) {
     718
     719                        if ( ! construct.panel || '' === construct.panel() ) {
     720                                transitionParentPane = true;
     721                        } else if ( api.panel( construct.panel() ).contentContainer.hasClass( 'skip-transition' ) ) {
     722                                transitionParentPane = true;
     723                        } else {
     724                                transitionParentPane = false;
     725                        }
     726                        if ( transitionParentPane ) {
    719727                                elements = elements.add( '#customize-info, .customize-pane-parent' );
    720728                        }
    721729
    … …  
    9961004                                overlay = section.headContainer.closest( '.wp-full-overlay' ),
    9971005                                backBtn = content.find( '.customize-section-back' ),
    9981006                                sectionTitle = section.headContainer.find( '.accordion-section-title' ).first(),
    999                                 expand;
     1007                                expand, panel;
    10001008
    10011009                        if ( expanded && ! content.hasClass( 'open' ) ) {
    10021010
    … …  
    10441052                                }
    10451053
    10461054                        } else if ( ! expanded && content.hasClass( 'open' ) ) {
     1055                                if ( section.panel() ) {
     1056                                        panel = api.panel( section.panel() );
     1057                                        if ( panel.contentContainer.hasClass( 'skip-transition' ) ) {
     1058                                                panel.collapse();
     1059                                        }
     1060                                }
    10471061                                section._animateChangeExpanded( function() {
    10481062                                        backBtn.attr( 'tabindex', '-1' );
    10491063                                        sectionTitle.attr( 'tabindex', '0' );
    … …  
    16711685                 *
    16721686                 * @since 4.1.0
    16731687                 *
     1688                 * @param {Object}   args
     1689                 * @param {Boolean}  args.activeOnly
    16741690                 * @returns {Array}
    16751691                 */
    1676                 sections: function () {
    1677                         return this._children( 'panel', 'section' );
     1692                sections: function ( args ) {
     1693                        var sections = this._children( 'panel', 'section' );
     1694
     1695                        if ( args && args.activeOnly ) {
     1696                                sections = _.filter( sections, function( section ) {
     1697                                        return section.active();
     1698                                } );
     1699                        }
     1700
     1701                        return sections;
    16781702                },
    16791703
    16801704                /**
    … …  
    17221746                                overlay = accordionSection.closest( '.wp-full-overlay' ),
    17231747                                container = accordionSection.closest( '.wp-full-overlay-sidebar-content' ),
    17241748                                topPanel = panel.headContainer.find( '.accordion-section-title' ),
    1725                                 backBtn = accordionSection.find( '.customize-panel-back' );
     1749                                backBtn = accordionSection.find( '.customize-panel-back' ),
     1750                                childSections = panel.sections( { activeOnly: true } ),
     1751                                changeExpandedCallback, skipTransition;
    17261752
    17271753                        if ( expanded && ! accordionSection.hasClass( 'current-panel' ) ) {
    17281754                                // Collapse any sibling sections/panels
    … …  
    17371763                                        }
    17381764                                });
    17391765
    1740                                 panel._animateChangeExpanded( function() {
    1741                                         topPanel.attr( 'tabindex', '-1' );
    1742                                         backBtn.attr( 'tabindex', '0' );
    1743 
    1744                                         backBtn.focus();
    1745                                         accordionSection.css( 'top', '' );
    1746                                         container.scrollTop( 0 );
    1747 
     1766                                changeExpandedCallback = function() {
     1767                                        overlay.addClass( 'in-sub-panel' );
     1768                                        accordionSection.addClass( 'current-panel' );
    17481769                                        if ( args.completeCallback ) {
    17491770                                                args.completeCallback();
    17501771                                        }
    1751                                 } );
     1772                                };
     1773
     1774                                if ( panel.params.autoExpandSoleSection && 1 === childSections.length ) {
     1775                                        accordionSection.addClass( 'skip-transition' );
     1776                                        childSections[0].expand( {
     1777                                                completeCallback: changeExpandedCallback
     1778                                        } );
     1779                                } else {
     1780                                        panel._animateChangeExpanded( function() {
     1781                                                topPanel.attr( 'tabindex', '-1' );
     1782                                                backBtn.attr( 'tabindex', '0' );
     1783
     1784                                                backBtn.focus();
     1785                                                accordionSection.css( 'top', '' );
     1786                                                container.scrollTop( 0 );
     1787
     1788                                                if ( args.completeCallback ) {
     1789                                                        args.completeCallback();
     1790                                                }
     1791                                        } );
     1792                                        changeExpandedCallback();
     1793                                }
    17521794
    1753                                 overlay.addClass( 'in-sub-panel' );
    1754                                 accordionSection.addClass( 'current-panel' );
    17551795                                api.state( 'expandedPanel' ).set( panel );
    17561796
    17571797                        } else if ( ! expanded && accordionSection.hasClass( 'current-panel' ) ) {
    1758                                 panel._animateChangeExpanded( function() {
    1759                                         topPanel.attr( 'tabindex', '0' );
    1760                                         backBtn.attr( 'tabindex', '-1' );
     1798                                skipTransition = accordionSection.hasClass( 'skip-transition' );
     1799                                if ( ! skipTransition ) {
     1800                                        panel._animateChangeExpanded( function() {
     1801                                                topPanel.attr( 'tabindex', '0' );
     1802                                                backBtn.attr( 'tabindex', '-1' );
    17611803
    1762                                         topPanel.focus();
    1763                                         accordionSection.css( 'top', '' );
     1804                                                topPanel.focus();
     1805                                                accordionSection.css( 'top', '' );
    17641806
    1765                                         if ( args.completeCallback ) {
    1766                                                 args.completeCallback();
    1767                                         }
    1768                                 } );
     1807                                                if ( args.completeCallback ) {
     1808                                                        args.completeCallback();
     1809                                                }
     1810                                        } );
     1811                                } else {
     1812                                        accordionSection.removeClass( 'skip-transition' );
     1813                                }
    17691814
    17701815                                overlay.removeClass( 'in-sub-panel' );
    17711816                                accordionSection.removeClass( 'current-panel' );

  • src/wp-admin/js/customize-widgets.js 

    diff --git src/wp-admin/js/customize-widgets.js src/wp-admin/js/customize-widgets.js
index d3a4edcc64..b482e8d607 100644
     
    16161616                                 * @returns {void}
    16171617                                 */
    16181618                                updateNotice = function() {
    1619                                         var activeSectionCount = getActiveSectionCount(), message, nonRenderedAreaCount, registeredAreaCount;
     1619                                        var activeSectionCount = getActiveSectionCount(), someRenderedMessage, nonRenderedAreaCount, registeredAreaCount;
    16201620                                        noticeContainer.empty();
    16211621
    16221622                                        registeredAreaCount = api.Widgets.data.registeredSidebars.length;
    … …  
    16241624
    16251625                                                if ( 0 !== activeSectionCount ) {
    16261626                                                        nonRenderedAreaCount = registeredAreaCount - activeSectionCount;
    1627                                                         message = ( 1 === nonRenderedAreaCount ? l10n.someAreasShown.singular : l10n.someAreasShown.plural ).replace( '%d', nonRenderedAreaCount );
     1627                                                        someRenderedMessage = l10n.someAreasShown[ nonRenderedAreaCount ];
    16281628                                                } else {
    1629                                                         message = ( 1 === registeredAreaCount ? l10n.noAreasShown.singular : l10n.noAreasShown.plural ).replace( '%d', registeredAreaCount );
     1629                                                        someRenderedMessage = l10n.noAreasShown;
     1630                                                }
     1631                                                if ( someRenderedMessage ) {
     1632                                                        noticeContainer.append( $( '<p></p>', {
     1633                                                                text: someRenderedMessage
     1634                                                        } ) );
    16301635                                                }
    16311636
    16321637                                                noticeContainer.append( $( '<p></p>', {
    1633                                                         text: message
    1634                                                 } ) );
    1635                                                 noticeContainer.append( $( '<p></p>', {
    16361638                                                        text: l10n.navigatePreview
    16371639                                                } ) );
    16381640                                        }

  • src/wp-includes/class-wp-customize-panel.php 

    diff --git src/wp-includes/class-wp-customize-panel.php src/wp-includes/class-wp-customize-panel.php
index 46e604a9a6..87ae392e97 100644
    class WP_Customize_Panel { 
    104104        public $description = '';
    105105
    106106        /**
     107         * Auto-expand a section in a panel when the panel is expanded when the panel only has the one section.
     108         *
     109         * @since 4.7.4
     110         * @access public
     111         * @var bool
     112         */
     113        public $auto_expand_sole_section = false;
     114
     115        /**
    107116         * Customizer sections for this panel.
    108117         *
    109118         * @since 4.0.0
    … … class WP_Customize_Panel { 
    219228                $array['content'] = $this->get_content();
    220229                $array['active'] = $this->active();
    221230                $array['instanceNumber'] = $this->instance_number;
     231                $array['autoExpandSoleSection'] = $this->auto_expand_sole_section;
    222232                return $array;
    223233        }
    224234

  • src/wp-includes/class-wp-customize-widgets.php 

    diff --git src/wp-includes/class-wp-customize-widgets.php src/wp-includes/class-wp-customize-widgets.php
index 887c11fa0c..40590f0818 100644
    final class WP_Customize_Widgets { 
    422422                        'description'     => __( 'Widgets are independent sections of content that can be placed into widgetized areas provided by your theme (commonly called sidebars).' ),
    423423                        'priority'        => 110,
    424424                        'active_callback' => array( $this, 'is_panel_active' ),
     425                        'auto_expand_sole_section' => true,
    425426                ) );
    426427
    427428                foreach ( $sidebars_widgets as $sidebar_id => $sidebar_widget_ids ) {
    … … final class WP_Customize_Widgets { 
    720721                        </div>'
    721722                );
    722723
     724                /*
     725                 * Gather all strings in PHP that may be needed by JS on the client.
     726                 * Once JS i18n is implemented (in #20491), this can be removed.
     727                 */
     728                $some_non_rendered_areas_messages = array();
     729                $some_non_rendered_areas_messages[1] = html_entity_decode(
     730                        /* translators: placeholder is the number of other widget areas registered but not rendered */
     731                        __( 'Your theme has 1 other widget area, but this particular page doesn&#8217;t display it.' ),
     732                        ENT_QUOTES,
     733                        get_bloginfo( 'charset' )
     734                );
     735                $registered_sidebar_count = count( $wp_registered_sidebars );
     736                for ( $non_rendered_count = 2; $non_rendered_count < $registered_sidebar_count; $non_rendered_count++ ) {
     737                        $some_non_rendered_areas_messages[ $non_rendered_count ] = html_entity_decode( sprintf(
     738                                /* translators: placeholder is the number of other widget areas registered but not rendered */
     739                                _n(
     740                                        'Your theme has %s other widget area, but this particular page doesn&#8217;t display it.',
     741                                        'Your theme has %s other widget areas, but this particular page doesn&#8217;t display them.',
     742                                        $non_rendered_count
     743                                ),
     744                                number_format_i18n( $non_rendered_count )
     745                        ), ENT_QUOTES, get_bloginfo( 'charset' ) );
     746                }
     747
     748                if ( 1 === $registered_sidebar_count ) {
     749                        $no_areas_shown_message = html_entity_decode( sprintf(
     750                                /* translators: placeholder is the total number of widget areas registered */
     751                                __( 'Your theme has 1 widget area, but this particular page doesn&#8217;t display it.' )
     752                        ), ENT_QUOTES, get_bloginfo( 'charset' ) );
     753                } else {
     754                        $no_areas_shown_message = html_entity_decode( sprintf(
     755                                /* translators: placeholder is the total number of widget areas registered */
     756                                _n(
     757                                        'Your theme has %s widget area, but this particular page doesn&#8217;t display it.',
     758                                        'Your theme has %s widget areas, but this particular page doesn&#8217;t display them.',
     759                                        $registered_sidebar_count
     760                                ),
     761                                number_format_i18n( $registered_sidebar_count )
     762                        ), ENT_QUOTES, get_bloginfo( 'charset' ) );
     763                }
     764
    723765                $settings = array(
    724766                        'registeredSidebars'   => array_values( $wp_registered_sidebars ),
    725767                        'registeredWidgets'    => $wp_registered_widgets,
    … … final class WP_Customize_Widgets { 
    733775                                'widgetMovedUp'    => __( 'Widget moved up' ),
    734776                                'widgetMovedDown'  => __( 'Widget moved down' ),
    735777                                'navigatePreview'  => __( 'You can navigate to other pages on your site while using the Customizer to view and edit the widgets displayed on those pages.' ),
    736                                 'someAreasShown'   => wp_array_slice_assoc(
    737                                         /* translators: placeholder is the number of other widget areas registered */
    738                                         _n_noop(
    739                                                 'Your theme has %d other widget area, but this particular page doesn\'t display it.',
    740                                                 'Your theme has %d other widget areas, but this particular page doesn\'t display them.'
    741                                         ),
    742                                         array( 'singular', 'plural' )
    743                                 ),
    744                                 'noAreasShown'    => wp_array_slice_assoc(
    745                                         /* translators: placeholder is the total number of widget areas registered */
    746                                         _n_noop(
    747                                                 'Your theme has %d widget area, but this particular page doesn\'t display it.',
    748                                                 'Your theme has %d widget areas, but this particular page doesn\'t display them.'
    749                                         ),
    750                                         array( 'singular', 'plural' )
    751                                 ),
     778                                'someAreasShown'   => $some_non_rendered_areas_messages,
     779                                'noAreasShown'     => $no_areas_shown_message,
    752780                                'reorderModeOn'    => __( 'Reorder mode enabled' ),
    753781                                'reorderModeOff'   => __( 'Reorder mode closed' ),
    754782                                'reorderLabelOn'   => esc_attr__( 'Reorder widgets' ),

  • tests/qunit/fixtures/customize-widgets.js 

    diff --git tests/qunit/fixtures/customize-widgets.js tests/qunit/fixtures/customize-widgets.js
index 14d43fb872..cee4c6db13 100644
    window._wpCustomizeWidgetsSettings = { 
    4848        'l10n': {
    4949                'error': 'An error has occurred. Please reload the page and try again.',
    5050                'navigatePreview': 'You can navigate to other pages on your site while using the Customizer to view and edit the widgets displayed on those pages.',
    51                 'noAreasShown': {
    52                         'plural': 'Your theme has %d widget areas, but this particular page doesn\'t display them.',
    53                         'singular': 'Your theme has %d widget area, but this particular page doesn\'t display it.'
    54                 },
     51                'noAreasShown': 'Your theme has 3 widget areas, but this particular page doesn\u2019t display them.',
    5552                'noWidgetsFound': 'No widgets found.',
    5653                'removeBtnLabel': 'Remove',
    5754                'removeBtnTooltip': 'Trash widget by moving it to the inactive widgets sidebar.',
    … … window._wpCustomizeWidgetsSettings = { 
    6158                'saveBtnLabel': 'Apply',
    6259                'saveBtnTooltip': 'Save and preview changes before publishing them.',
    6360                'someAreasShown': {
    64                         'plural': 'Your theme has %d other widget areas, but this particular page doesn\'t display them.',
    65                         'singular': 'Your theme has %d other widget area, but this particular page doesn\'t display it.'
     61                        '1': 'Your theme has 1 other widget area, but this particular page doesn\u2019t display it.',
     62                        '2': 'Your theme has 2 other widget areas, but this particular page doesn\u2019t display them.'
    6663                },
    6764                'widgetMovedDown': 'Widget moved down',
    6865                'widgetMovedUp': 'Widget moved up',