Make WordPress Core

Changeset 59555


Ignore:
Timestamp:
12/22/2024 08:44:06 PM (8 weeks ago)
Author:
joedolson
Message:

Customizer: Allow custom accordion items with obsolete structure.

In [59224], customizer accordion item HTML structure was changed to include a button element as the interactive control. However, some themes inject custom markup for panel headings.

Fix controls.js to handle both the new markup and the old markup, which is relatively common in themes.

Props paullb, desrosj, sabernhardt, joedolson, jorbin.
Fixes #62494.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/js/_enqueues/wp/customize/controls.js

    r59224 r59555  
    15311531
    15321532            // Expand/Collapse accordion sections on click.
    1533             section.container.find( '.accordion-section-title button, .customize-section-back' ).on( 'click keydown', function( event ) {
     1533            section.container.find( '.accordion-section-title button, .customize-section-back, .accordion-section-title[tabindex]' ).on( 'click keydown', function( event ) {
    15341534                if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
    15351535                    return;
     
    16061606                overlay = section.headContainer.closest( '.wp-full-overlay' ),
    16071607                backBtn = content.find( '.customize-section-back' ),
    1608                 sectionTitle = section.headContainer.find( '.accordion-section-title button' ).first(),
     1608                sectionTitle = section.headContainer.find( '.accordion-section-title button, .accordion-section-title[tabindex]' ).first(),
    16091609                expand, panel;
    16101610
     
    26952695                content = section.contentContainer,
    26962696                backBtn = content.find( '.customize-section-back' ),
    2697                 sectionTitle = section.headContainer.find( '.accordion-section-title button' ).first(),
     2697                sectionTitle = section.headContainer.find( '.accordion-section-title button, .accordion-section-title[tabindex]' ).first(),
    26982698                body = $( document.body ),
    26992699                expand, panel;
     
    28342834
    28352835            // Expand/Collapse accordion sections on click.
    2836             panel.headContainer.find( '.accordion-section-title button' ).on( 'click keydown', function( event ) {
     2836            panel.headContainer.find( '.accordion-section-title button, .accordion-section-title[tabindex]' ).on( 'click keydown', function( event ) {
    28372837                if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
    28382838                    return;
     
    29382938                overlay = accordionSection.closest( '.wp-full-overlay' ),
    29392939                container = accordionSection.closest( '.wp-full-overlay-sidebar-content' ),
    2940                 topPanel = panel.headContainer.find( '.accordion-section-title button' ),
     2940                topPanel = panel.headContainer.find( '.accordion-section-title button, .accordion-section-title[tabindex]' ),
    29412941                backBtn = accordionSection.find( '.customize-panel-back' ),
    29422942                childSections = panel.sections(),
Note: See TracChangeset for help on using the changeset viewer.