Theme Customizer controls API and me 05

March 16, 2015

Tapping into the asynchronous power of the WordPress Customizer.

Can I save my setting?

In my struggle to save the setting set by the multi image Customizer control I've got to a point where the control is a bad mix of old and new WordPress Customizer API.
Digging a little deeper into what the Backbone based JavaScript API provides I was able to implement a first full circle version of the control that saves, updates and removes the selected images.

The gotcha

Once I've extended the base Control class the Customizer JavaScript API provides I've been able to access the this.setting object; to give a snippet of code

...
api.MultiImage = api.Control.extend( {
    ready: function () {
        this.$store = this.container.find( 'input[type="hidden"][name="store"]' );
        this.$upload_button = this.container.find( '.upload' );
        this.$remove_button = this.container.find( '.remove' );
        this.$thumbnails = this.container.find( 'ul.thumbnails' );
        this.thumbnail_selector = '.thumbnail';

        var urls = this.setting.get();
        if ( urls !== '' ) {
            this.update_thumbnails( urls.split( ',' ) );
        }
        ...

The object stores the setting value and allows the control a complete transition to JavaScript.
Once I've removed the dependency on the PHP part of the control to access the saved setting value I could reduce the template output PHP to this

<label>
    <span class="customize-control-title">{{data.label}}</span>
</label>
<div>
    <input type="hidden" name="store" value="{{data.value}}" {{data.link}} />
    <a href="#" class="button-secondary upload">
        {{data.l10n.upload_button_label}}
    </a>
    <a href="#" class="button-secondary remove">
        {{data.l10n.remove_all_button_label}}
    </a>
</div>
<div class="customize-control-content">
    <ul class="thumbnails">
        // no rendering of the thumbnails here
    </ul>
</div>

and handle the addition of the thumbnails in the JavaScript file alone. Tapping into the same possibility saving the setting value has became a one liner.

Now that the base is in I'd like to iterate on the control to slim down its JavaScript code to the bare bones of what it's possible to do using Backbone and the WordPress API.

Can I save my setting?

The gotcha

Next