Add selective refresh support for Twitter, Facebook, Contact Info, Social Media Icon widgets (WP 4.5)#3543
Add selective refresh support for Twitter, Facebook, Contact Info, Social Media Icon widgets (WP 4.5)#3543zinigor merged 6 commits intoAutomattic:masterfrom xwp:feature/selective-refresh-widget-support
Conversation
…assets in Customizer preview
|
Some more background on these changes: https://core.trac.wordpress.org/ticket/35855#comment:20 |
|
Howdy @westonruter! Thanks for the PR. We've been chatting about the DRY commit specifically and the good work in this PR on that. With regards to the selective refresh in the Customizer, is this PR backwards-compat with 4.3 and 4.4? |
|
@kraftbj thanks!
Yes, it should be backwards-comaptible. This is what the |
|
I just amended the PR to include the |
|
Thank you! Tested adding, removing, moving around and modifying all related widgets, everything seems to work correctly! |
|
The code itself looks great and tests well. We are going to have to figure out something in regards to how this is going to sync back to wpcom cleanly. But this will be a task for the Jetpack team. |
| $this->alt_option_name = 'widget_contact_info'; | ||
|
|
||
| if ( is_customize_preview() ) { | ||
| add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_scripts' ) ); |
There was a problem hiding this comment.
Hi @westonruter! is this really necessary? The scripts are enqueued when the map is built. Maybe I'm missing something because I think this might actually be disadvantageous if we do this for all widgets. We will end up with a lot of JS and CSS loaded in Customizer whether they're in use by a widget or not which will add to the Customizer loading times.
If possible, I'd love to talk for a bit in WordPress Slack whenever it's possible to you.
Cheers!
There was a problem hiding this comment.
@eliorivero the scripts are enqueued when the map is built… and the page is re-loaded. If adding a Contact Info widget for the first time to the page via selective refresh, those enqueues will be called but the scripts aren't going to be printed out because the footer is not re-rendered. So this is why enqueueing the JS up-front regardless will ensure the JS is available from the moment that a widget is added to the page.
It is true that this adds additional script bloat to the page, and there are two alternative solutions that could be done, although they require more work:
-
Lazy-load the JS file when the widget is added for the first time if it is detected that the JS file is not already loaded. Actually you can see this in the original Jetpack support shim logic for the Customize Partial Refresh plugin: https://github.com/xwp/wp-customize-partial-refresh/blob/master/js/plugin-support/jetpack.js#L108-L137
-
Keep track of the scripts that are enqueued and pass them back to the client in a selective refresh response, injecting the scripts into the page if they are not already present. You can see that the foundations for this are already present in Core via the
customize_render_partials_responsefilter. Note the comment associated with that filter and how thescriptsarray item is noted as being reserved: https://github.com/xwp/wordpress-develop/blob/cfd07d69cfd87fdbc53b47b8aa156df140f64f0b/src/wp-includes/customize/class-wp-customize-selective-refresh.php#L405-L435 This would be taking the same approach as Jetpack's Infinite Scroll which also keeps track of the scripts enqueued and then outputs them to the page.
So, both of these two alternatives are ultimately better in the long run, although they require more work and thought to work out. In the short term, enqueueing the JS unconditionally if is_customize_preview() seemed like a good quick win to add the initial support, without having enough time to consider all of the edge cases before 4.5 is released.
Happy to chat about this in Slack as well. 🍻
There was a problem hiding this comment.
@westonruter thank you very much for the thorough explanation since it made me understand the functioning. The two examples are great and I'll definitely borrow some inspiration in the future to avoid loading everything at once. For now and given the short time before Apr 12, I agree that it makes sense to do it this way. I've started making the other widgets compatible following the approaches for the widgets in this branch.
Thanks again and have a nice weekend!
Fix incorrect function call in #3543
This PR is start implementing support for the new Selective Refresh feature coming in WordPress 4.5.
For Customizer support for infinite scroll, see #3542. This PR includes the Jetpack widgets support from the Customize Partial Refresh plugin which was merged into Core for 4.5.
The
customize_selective_refreshwidget option is being introduced in https://github.com/xwp/wordpress-develop/pull/144 for #35855.