Settings updated within the Customizer Preview are not synced up to main app Panel

[westonruter]

The Customizer has two copies of models for the registered settings: one set in in the Customizer panel parent frame, and changes to these result in the settings getting copied over to the preview either via postMessage or via a refreshing the preview entirely. Updating a setting model from within preview directly, however, does not propagate up to the model. There is currently a one-way-sync from the panel to the preview.

As a workaround, the preview can send messages to the panel for which handlers can apply the updates to the settings, but it would be good if this was automatic.

By implementing a bi-directional syncing of settings between the panel and preview, there would be lots of opportunities for inline front-end editor controls to more easily be added into the preview directly.

See also ​https://twitter.com/bradyvercher/status/502163462990995456

[westonruter]

For the workaround, see what Customize Inline Editing does.

Preview sending message to pane: ​https://github.com/xwp/wp-customize-inline-editing/blob/6e0feab7e57b6b842743228cefaf015a4a497ee3/customize-preview.js#L49-L60

Pane receiving messages from preview: ​https://github.com/xwp/wp-customize-inline-editing/blob/6e0feab7e57b6b842743228cefaf015a4a497ee3/customize-pane.js#L12-L23

[valendesigns]

We should put this on the list for 4.4

[celloexpressions]

@westonruter how difficult do you think it would be to do this?

It'll definitely be useful once we can implement it, especially if we ever revisit the idea of front-end-editing integrated with the Customizer (this would obviously be a prerequisite).

[westonruter]

Replying to celloexpressions:

@westonruter how difficult do you think it would be to do this?

Not difficult at all. As noted in my comment above, the Customize Inline Editing plugin shows how to do it. It's just that the functionality would need to be added to Core. That being said, it's easy for a plugin to add the functionality itself, so it's not really something that has to be added to Core.

[westonruter]

Updated examples for how a plugin can implement this without waiting for core:

Sending a setting from the preview to the pane: ​https://github.com/xwp/wp-customize-inline-editing/blob/5853efdebb894b3940bf618680090824651e30cb/js/customize-inline-editable-partial.js#L129-L139
Receiving a setting by the pane from the preview: ​https://github.com/xwp/wp-customize-inline-editing/blob/5853efdebb894b3940bf618680090824651e30cb/js/customize-pane.js#L25-L45

[celloexpressions]

While this is something that plugins can implement as a workaround, as shown above, it should really be implemented in core. I would expect settings to snyc both ways as the default behavior.