I came across this not so flexible Customizer JS API code in almost all new Automattic themes that allows panel based content, is there a known bug?


(Naresh Devineni) #1

Hi everyone,

I came across this code in Pique Theme by Automattic ( also on several other popular themes ).

( function( $ ) {

  wp.customize.bind( 'ready', function() {

    // Detect when the section for each panel is expanded (or closed) so we can adjust preview accordingly
    wp.customize.section( 'pique_panel1' ).expanded.bind( function( isExpanding ) {
      // isExpanding will = true if you're entering the section, false if you're leaving it
      wp.customize.previewer.send( 'section-highlight', { section: 'pique-panel1', expanded: isExpanding } );
    } );

    // Detect when the section for each panel is expanded (or closed) so we can adjust preview accordingly
    wp.customize.section( 'pique_panel2' ).expanded.bind( function( isExpanding ) {
      // isExpanding will = true if you're entering the section, false if you're leaving it
      wp.customize.previewer.send( 'section-highlight', { section: 'pique-panel2', expanded: isExpanding } );
    } );

    // Detect when the section for each panel is expanded (or closed) so we can adjust preview accordingly
    wp.customize.section( 'pique_panel3' ).expanded.bind( function( isExpanding ) {
      // isExpanding will = true if you're entering the section, false if you're leaving it
      wp.customize.previewer.send( 'section-highlight', { section: 'pique-panel3', expanded: isExpanding } );
    } );

    // Detect when the section for each panel is expanded (or closed) so we can adjust preview accordingly
    wp.customize.section( 'pique_panel4' ).expanded.bind( function( isExpanding ) {
      // isExpanding will = true if you're entering the section, false if you're leaving it
      wp.customize.previewer.send( 'section-highlight', { section: 'pique-panel4', expanded: isExpanding } );
    } );

    // Detect when the section for each panel is expanded (or closed) so we can adjust preview accordingly
    wp.customize.section( 'pique_panel5' ).expanded.bind( function( isExpanding ) {
      // isExpanding will = true if you're entering the section, false if you're leaving it
      wp.customize.previewer.send( 'section-highlight', { section: 'pique-panel5', expanded: isExpanding } );
    } );

    // Detect when the section for each panel is expanded (or closed) so we can adjust preview accordingly
    wp.customize.section( 'pique_panel6' ).expanded.bind( function( isExpanding ) {
      // isExpanding will = true if you're entering the section, false if you're leaving it
      wp.customize.previewer.send( 'section-highlight', { section: 'pique-panel6', expanded: isExpanding } );
    } );

    // Detect when the section for each panel is expanded (or closed) so we can adjust preview accordingly
    wp.customize.section( 'pique_panel7' ).expanded.bind( function( isExpanding ) {
      // isExpanding will = true if you're entering the section, false if you're leaving it
      wp.customize.previewer.send( 'section-highlight', { section: 'pique-panel7', expanded: isExpanding } );
    } );

    // Detect when the section for each panel is expanded (or closed) so we can adjust preview accordingly
    wp.customize.section( 'pique_panel8' ).expanded.bind( function( isExpanding ) {
      // isExpanding will = true if you're entering the section, false if you're leaving it
      wp.customize.previewer.send( 'section-highlight', { section: 'pique-panel8', expanded: isExpanding } );
    } );

    /*
    var panels = [ '1', '2', '3', '4', '5', '6', '7', '8' ];
    // Add a listener for each panel
    for ( i=0; panels[i] =< 8; i++ ) {
      console.log ( panels[i] );
      wp.customize.section( 'pique_panel' + panels[i] ).expanded.bind( function( isExpanding ) {
        // this will return true you're entering the section, false if you're leaving it
        wp.customize.previewer.send( 'section-highlight', { section: 'pique_panel' + panels[], expanded: isExpanding } );
      } );
    }
    */

  } );

} )( jQuery );

What it does is, It detects whether a particular panel is open on Controls side of Customizer and sends out event message to Preview side of Customizer.

But It can also be simply written as

(function() {
  wp.customize.bind( 'ready', function() {
  	// Detect when the front page sections section is expanded (or closed) so we can adjust the preview accordingly.
		wp.customize.panel( 'tbe_front_page_sections', function( panel ) {

      //Do something when panel is expanded
      panel.expanded.bind( function( isExpanding ) {
      	// Value of isExpanding will = true if you're entering the section, false if you're leaving it.
				wp.customize.previewer.send( 'customizer-panel-opened', { expanded: isExpanding });
			} );

      // Get all sections
      _.each( panel.sections(), function ( section ) {

        section.expanded.bind( function( isExpanding ) {
          // isExpanding will = true if you're entering the section, false if you're leaving it
          wp.customize.previewer.send( 'section-highlight', { section: section.id, expanded: isExpanding } );

        } );
      });

    } );
	});
})( jQuery );

This code is tested and working on all browsers just fine.

My question is, is there a known bug in the second snippet? Which is forcing them go in the first snippet way?


(Leland Fiegel) #2

It sounds like you just answered your own question. :slight_smile:

As for why the Automattic theme developer coded it that way, the only way to know is ask. I’m not sure I would assume there’s any reason “forcing” them to go that route.


(Naresh Devineni) #3

They can not use the above technique because they have other sections apart from the panel sections. They could have used a simple IF/Else condition but they might add few more sections to the same panel.