[wp-trac] [WordPress Trac] #35855: Let selective refresh component be required but be opt-in for sidebars/widgets (for now)

[WordPress Trac]

#35855: Let selective refresh component be required but be opt-in for
sidebars/widgets (for now)
----------------------------+--------------------------
 Reporter:  DrewAPicture    |       Owner:  westonruter
     Type:  task (blessed)  |      Status:  accepted
 Priority:  normal          |   Milestone:  4.5
Component:  Customize       |     Version:  trunk
 Severity:  normal          |  Resolution:
 Keywords:  has-patch       |     Focuses:
----------------------------+--------------------------

Comment (by westonruter):

 Here's a PR for implementing selective refresh for Jetpack's widgets for
 Twitter Timeline, Facebook Like Box, and Contact Info:
 https://github.com/Automattic/jetpack/pull/3543/files

 Note that this PR includes some refactoring as well, to let the the
 shortcodes and widgets re-use the same codebase. The key changes to ensure
 selective refresh compatibility are:

 1. Enqueue any JS and CSS dependencies for the widget if
 `is_customize_preview()`, not only if `is_active_widget()` in a sidebar.
 If this is not done, then any JS dependencies would need lazy-loaded when
 the first widget is added (which is, in fact, what the Customize Partial
 Refresh feature plugin's [https://github.com/xwp/wp-customize-partial-
 refresh/blob/master/js/plugin-support/jetpack.js#L17-L176 Jetpack compat
 script] did).
 2. Add a handler for `partial-content-rendered` selective refresh events
 to rebuild a widget's dynamic elements when it is re-rendered. See
 [https://github.com/xwp/wp-
 jetpack/blob/814f6a1089663adf4a0cdba362fb890ed858562e/_inc/twitter-
 timeline.js#L26-L31 example].
 3. Add a handler for `partial-content-moved` selective refresh events to
 refresh partials ''if'' any dynamic elements involve `iframe`s that are
 have dynamically-written documents (such as the Twitter Timeline widget).
 See [https://github.com/xwp/wp-
 jetpack/blob/814f6a1089663adf4a0cdba362fb890ed858562e/_inc/twitter-
 timeline.js#L33-L38 example]. (Adding this event handler should normally
 not be required.)

 As seen from adding selective refresh support for some of Jetpack's
 widgets, I believe this demonstrates the need for selective refresh of
 widgets to be opt-in. If the above steps are not taken, then when a widget
 is added or updated, it will appear broken (as if JS is turned off).

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