Refactor Theme Customizer

[kaidesu]

The current theme customizer system works well for an MVP, but we can do better 💪

Currently, the system loads the homepage in an iFrame and simply passes the as-yet-to-be-saved theme option values in through the URL as JSON: ?preview={...}. Every time there's a change, the hash gets updated and the new URL is passed to the iFrame resulting in a hard refresh. This causes the page to flash every time there's a change.

A better way would be to take a similar approach that GitHub and Livewire take - simply replace the DOM of the iframe with the new content. This would result in no page flashes, should retain the scroll state, and allows a more seamless and quicker feedback loop of changes being made.

• Similar to GitHub and Livewire, when a change is made, a POST request will be sent to a .../preview route with the as-yet-to-be-saved theme option values passed along as the body of the request.
• The preview request is handled "behind the scenes" in a separate request this way, where we would then just take the contents of the rendered request, and "paste" it into the iFrame, effectively updating the entire DOM.

Unlike the approach taken by WordPress, this allows theme developers to easily create themes with zero javascript or hierarchy requirements. Develop your themes however you like, and freely add in options to customize through the CMS ✌️ couldn't be simpler.

Challenges

• Because this is a system to customize the theme, ideally the user should be able to navigate around the site within the preview window. We'll need to experiment with wildcard preview routes and somehow gather the route that precedes it:
  • (/about-us)/preview