Trigger Customizer saving process with Javascript only

Question

I'm working on a custom theme that uses WordPress Customization API to let the user play with parts of the content of his website, basically the front-page which he can modify by adding/removing custom blocks such as latest posts, page children, etc. Blacks structure is collected and filled in an custom input.

Everything works fine except for saving, the Customizer seems to have some safety that blocks me from saving the input value: in order to save it, I need to manually trigger a Javascript 'keypress' event by selecting the input and pressing a key. If I don't, the submit button stays disabled.

By browsing through /wp-admin/js/customize-controls.js I manage to activate the submit button:

wp.customize.trigger('change')

But even though the saving thing is unlocked, it doesn't have any effect: the input value is not sent to admin_ajax.php and my data is not saved.

Any idea of how I could force the trigger on the Javascript API to save my data? I couldn't find detailed doc on the WP JS API, that could helped too if I missed it somewhere.

Answer 1

Instead of using jQuery to update the value of the custom input, use the wp.customize object’s set() function (found in customize-base.js):

wp.customize( key, function ( obj ) {
    obj.set( newValue );
} );

Where key is the setting, and newValue is the updated value.

Also, worth noting, in the class that extends WP_Customize_Control, make sure to use $this->get_link() to put the data attribute data-customize-setting-link on the custom input (found in class-wp-customize-control.php).

Answer 2

I think this also would help:

$(this).trigger('input');

// input    for @ui.input, @ui.textarea
// change   for @ui.checkbox, @ui.radio, @ui.select
// click    for @ui.responsiveSwitchers

This worked for me since I'm working on a text field. Now the save button goes green