Customizer JS API: Defining control settings

Question

I am trying to create Customizer controls using JS API. What is a proper way to define control settings?

Here is my current code:

var mySetting = new api.Setting( 'section_title', 'Hello World!' );
api.add( mySetting );

api.control.add( new api.Control( 'section_title', {
  type: 'text',
  section: 'custom-section',
  setting: mySetting,
  label: 'Enter your custom title'
} ) );

When I try to save my changes, the Customizer shows an error: "Setting does not exist or is unrecognized."

Answer 1

Settings must be registered in PHP one way or another. If you don't register them statically via $wp_customize->add_setting() calls, you will have to register dynamic recognition of them via the customize_dynamic_setting_args filter. Why? In order for a setting to be safely stored it must be sanitized and validated by the server. Relying on client-side sanitization and validation is dangerous. Additionally, the Customizer setting is what gets persisted into the DB and actually applies a change to the site. This means that WordPress needs to know what a setting is for, how to preview it, and how to save it. So you may freely create settings in JS, but you must create a customize_dynamic_setting_args filter. You use this filter to match a given setting ID against a certain pattern you define. Examples of this can be found in core for widgets and nav menu items.