Add support for previewing in customizer in WordPress 4.7-beta1

[westonruter]

The customizer in WordPress 4.7 includes the customized state in REST API requests so that the previewed changes will apply in the responses. Additionally, the customizer preview is now compatible with JS-routed apps which use history.pushState() and history.replaceState(). See Customize Changesets Technical Design Decisions. These changes mean that Anadama can now be live previewed in the customizer, as long as a few things are done to facilitate the integration.

Some highlights from the PR:

• Disables localStorage cache in the customizer preview so that the previewed state will apply to the requests and so that the cache does not get polluted with staged changes.
• Adds live previewing of site title and tagline using the familiar mechanisms.
• Adds live previewing of changes to the nav menu by overriding the normal selective refresh behavior by instead listening for changes to the nav menu location, the assigned nav menu, or nav menu items inside the nav menu and then refreshing the data for the menu from the server.
• Overrides the normal customizer preview interception of link clicks to allow the JS routing to work as normal. The customizer preview JS wraps the history.replaceState() and history.pushState() methods to ensure the customizer state params are included in the URLs.
• Updates the theme to be compatible with the REST API endpoints that were merged into 4.7-beta1. Namely, it replaces filter[name] and filter[category_name] with slug and categories, respectively.
• Includes the wp_rest nonce in REST API requests so that any customized data will be read (since the customizer will ignore it for unauthorized requests).

This is my first time implementing customizer support for an SPA theme. There are probably better patterns than what I've implemented here, but my hope is that this will provide some sample code to start getting more JavaScript-driven themes updated to support live previewing in the customizer, and to get some real experience on how the new customizer changes in 4.7 will work in the real world, while also identifying the problem spots and pain points.

[ryelle]

This is excellent, thanks so much for working on it! Sorry you encountered some of the out-of-date code 😞 Overall I think this is a good approach, especially for this theme. I'm going to try implementing this into Foxhound (though with a more hard-coded menu that'll be tricky).

Thanks again!

[westonruter]

Great! Let me know how you go, and what specific challenges you come up against. Ideally I'd want to come up with a handbook or some examples for how JS- and API-driven themes can add support for customizer.