Add support for previewing in customizer in WordPress 4.7-beta1 #5
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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()
andhistory.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:
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.history.replaceState()
andhistory.pushState()
methods to ensure the customizer state params are included in the URLs.filter[name]
andfilter[category_name]
withslug
andcategories
, respectively.wp_rest
nonce in REST API requests so that anycustomized
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.