[wp-trac] [WordPress Trac] #29988: Twenty Fifteen: Use JS/postMessage to update the color scheme instead of triggering a page refresh

[WordPress Trac]

#29988: Twenty Fifteen: Use JS/postMessage to update the color scheme instead of
triggering a page refresh
------------------------------------+-------------------------
 Reporter:  avryl                   |       Owner:
     Type:  enhancement             |      Status:  new
 Priority:  normal                  |   Milestone:  4.1
Component:  Bundled Theme           |     Version:  trunk
 Severity:  normal                  |  Resolution:
 Keywords:  has-patch dev-feedback  |     Focuses:  javascript
------------------------------------+-------------------------
Changes (by westonruter):

 * keywords:  needs-patch => has-patch dev-feedback


Comment:

 In [attachment:29988.patch] I've implemented partial preview refreshes for
 updating the inline styles when one of their constituent settings is
 changed. Changing a setting in the Customizer pane causes the setting to
 get copied to the preview via `postMessage` and then the preview does an
 Ajax request to regenerate the CSS and then swaps it out. This is much
 much faster than refreshing the entire page.

 Other changes/fixes made in the course of this patchL

 * Core: `style` elements generated by `wp_add_inline_style` now include an
 ID attribute. This allows them to be selected with JS.
 * Core: The Customizer Color Picker control was failing to update its
 state when its underlying setting was changed (sync fail). This has been
 fixed.
 * TwentyFifteen custom backgrounds have been moved to a separate includes
 file, similar to the custom header includes file.
 * TwentyFifteen `functions.php`: This is a bit unsightly, but the custom
 header and custom background callbacks get removed from being added to the
 `wp_head` and instead get added to `wp_enqueue_scripts`. This eliminates a
 priority problem, and it works better since `wp_add_inline_style()` is now
 being used uniformly for all inline style output.
 * TwentyFifteen `colorScheme` control: The color picker element was being
 found by traversing the DOM, but there are no guarantees that the control
 is going to remain where the theme expects. So now it is using the proper
 `wp.customize.control(…).container` API to grab the control's element.

 Also on GitHub: https://github.com/xwpco/wordpress-develop/pull/31/files

 Regarding a general framework partial-preview refreshes (#27355), I think
 more use cases need to be fleshed out and patterns need to emerge.
 Implementing a refresh for CSS in a bundled theme is a nice way to get
 this idea out there.

--
Ticket URL: <https://core.trac.wordpress.org/ticket/29988#comment:6>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform