Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add support for previewing in customizer in WordPress 4.7-beta1 #5

merged 10 commits into from Nov 1, 2016


Copy link

@westonruter westonruter commented Oct 31, 2016

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.

Copy link

@ryelle ryelle commented Nov 1, 2016

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!

@ryelle ryelle merged commit 4cc5230 into ryelle:master Nov 1, 2016
Copy link
Contributor Author

@westonruter westonruter commented Nov 4, 2016

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
None yet

Successfully merging this pull request may close these issues.

None yet

2 participants