0

I have a huge Theme Customizer with more than 3000 controls and I'm using jQuery UI to group and style them. The thing is that Wordpress destroys my Customizer UI when it sorts controls within sections and I need to disable (unbind) this.

I need to unbind this part:

$( [ api.panel, api.section, api.control ] ).each( function ( i, values ) { var debouncedReflowPaneContents = _.debounce( api.reflowPaneContents, api.settings.timeouts.reflowPaneContents ); values.bind( 'add', debouncedReflowPaneContents ); values.bind( 'change', debouncedReflowPaneContents ); values.bind( 'remove', debouncedReflowPaneContents ); } );

I need to override this code from my custom javaSript file which is responsible for Customizer UI. I know that if I increase "api.settings.timeouts.reflowPaneContents" time or if I unbind "values.bind( 'add', debouncedReflowPaneContents );" this will help but I don't know how to do this.

This is URGENT. Please help!

Regards, Duke

  • Is there anyone able to help me? – Duke Dec 21 '16 at 7:34
  • Would be great if you can share the customizer code so we can preview? – prosti Dec 22 '16 at 21:58
  • You don't actually need theme customizer code. I just need to unbind given code, which is bound from: wp-admin/js/customize-controls.js – Duke Dec 23 '16 at 10:34
  • ok, more than 3000 controls looks amazing, maybe you cannot share the controls, but what is the solution what you are using? – prosti Dec 23 '16 at 10:45
  • I will provide some general feedback answer. – prosti Dec 23 '16 at 10:46
0

What you have in the code is Backbone.js that goes together with Underscore.js.

The api.panel, api.section, api.control are collections

$( [ api.panel, api.section, api.control ] ).each( function ( i, values ) {
    var debouncedReflowPaneContents = _.debounce( api.reflowPaneContents, api.settings.timeouts.reflowPaneContents );
    values.bind( 'add', debouncedReflowPaneContents );
    values.bind( 'change', debouncedReflowPaneContents );
    values.bind( 'remove', debouncedReflowPaneContents );
} );

And bind is actually Backbone event bind, not jQuery. jQuery bind is for DOM, and Backbone bind is for the Backbone object model.

All you can do is to check the Catalog of Events and remove looks what you need to do, but it would need more time and code shared to understand the removal.

api means you are under certain function closure and typically this means wp.customize

You haven't yet shared the details where you have [ api.panel, api.section, api.control ], I would not guess.

Take this and accept this as a most helpful answer. You can easily reset the accept later if someone provides a better one.

  • Thanks, I will check this and let you know if this does a trick. – Duke Dec 27 '16 at 18:37
  • Note that the Backbone bind here is not actually Backbone. The customizer implements its own Backbone-like JS framework. There is a wp.customize.Events mixin that defines bind and unbind and trigger. – Weston Ruter Jan 10 '17 at 6:42
  • Thanks @WestonRuter. I was not aware of this fact. – prosti Jan 10 '17 at 13:05
  • @prosti Please search for "// Sort the controls within each section" in the wp-admin/js/customize-controls.js, the code under that comment removes customizer controls withing section and then appends them back to the same section with another order. At that moment my controls, which are wrapped in, lets say, one "<div>" are out from there and UI is destroyed. Does this makes sense? – Duke Jan 27 '17 at 12:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.