Skip to content

Lazy-load social SDKs only when an embed is present#928

Merged
GaryJones merged 1 commit into
developfrom
GaryJones/florence
Jun 26, 2026
Merged

Lazy-load social SDKs only when an embed is present#928
GaryJones merged 1 commit into
developfrom
GaryJones/florence

Conversation

@GaryJones

Copy link
Copy Markdown
Contributor

Summary

Liveblog enqueued the Facebook, Twitter/X, Instagram and Reddit JavaScript SDKs on every Liveblog-enabled post, regardless of whether the post or its entries actually contained an embed from any of those services. As reported in #926, this meant visitors' browsers contacted four third-party domains on every Liveblog page, leaking request data to platforms whose content was never displayed, adding avoidable page-load overhead, and complicating Content Security Policy and consent compliance. A site using a single provider, or no social embeds at all, still paid the cost of all four.

The previous behaviour gated on is_viewing_liveblog_post() but then enqueued every SDK in self::$sdks unconditionally. The only escape hatch was emptying the list via the liveblog_embed_sdks filter, which disables enhanced rendering globally rather than loading only what is needed.

This change moves SDK loading client-side and on demand. The plugin no longer enqueues any SDK directly; instead it exposes the (still filterable) provider URL map to the front-end app via liveblog_settings. The React entry renderer already runs triggerOembedLoad() on every entry's mount and update, so that became the natural hook: for each provider it detects provider-specific embed markup, and if found either re-processes the entry (when the SDK is already present) or injects the SDK once. Because it runs per entry, it correctly handles embeds arriving in entries polled after the initial page load, not just those present on first render.

The liveblog_embed_sdks filter is preserved, so the documented __return_empty_array opt-out and per-provider removal continue to work and now also gate lazy loading.

A known limitation worth a reviewer's eye

Reddit's widgets.js exposes no reliable client-side re-process API; it only scans the document when it first loads. A Reddit embed arriving in an entry polled after the SDK has already loaded therefore won't auto-render. This is not a regression (Reddit was never re-processed client-side before either), but it is a gap if true live-update parity for Reddit is wanted later.

Note on the Facebook URL

The default Facebook SDK URL previously carried an HTML-encoded & in its hash. That was harmless when passed through esc_url() on a server-side enqueue, but would break a client-injected src, so it is now stored un-encoded.

Test plan

  • PHP unit tests: composer test:unit (new EntryEmbedSdksTest covers the provider list, the un-encoded Facebook URL, settings injection, and that load() registers the settings hook rather than enqueuing).
  • JS unit tests: npm test (updated triggerOembedLoad tests cover on-demand injection, single-injection across entries, and the no-markup / no-config cases).
  • Manual: enable Liveblog on a post with no social embeds and confirm no connect.facebook.net, platform.twitter.com, instagram.com or embed.reddit.com requests are made. Add a single tweet and confirm only the Twitter SDK loads, including in a newly published entry.

Fixes #926

Liveblog enqueued the Facebook, Twitter/X, Instagram and Reddit
JavaScript SDKs on every Liveblog-enabled post, even when no embed
from any of those services was present. This made visitors' browsers
contact four third-party domains unnecessarily, leaking request data,
adding page-load overhead and complicating CSP and consent handling.

Stop enqueuing the SDKs server-side. Instead, expose the (still
filterable) provider URL map to the front-end and lazy-load each SDK
client-side the first time an entry containing that provider's embed
markup is rendered. Because this runs per entry on mount and update,
it also covers embeds arriving in entries polled after page load.

Fixes #926
@GaryJones GaryJones requested a review from a team as a code owner June 26, 2026 13:28
@GaryJones GaryJones added this to the Next 1.x milestone Jun 26, 2026
@GaryJones GaryJones merged commit 8ee44a3 into develop Jun 26, 2026
12 checks passed
@GaryJones GaryJones deleted the GaryJones/florence branch June 26, 2026 13:34
GaryJones added a commit that referenced this pull request Jun 26, 2026
develop's lazy-load social SDK work (#928) rewrote
src/react/utils/utils.js and its test, which overlapped with this
branch's reformat to tabs and the relocation of getImageSize. The two
conflicted files are resolved in favour of develop's logic, onto which
the branch's mechanical layer is reapplied: getImageSize is re-added
(Editor/utils.js no longer exists here and EditorContainer imports it
from utils/utils), the files are reformatted to tabs, and the manual
lint fixes for getNewestEntry and getScrollToId JSDoc, the optional
catch binding and the duplicated test title are restored.

lint:js is back to only the eleven known jsx-a11y errors and all 72
unit tests pass, including the five new embed SDK tests from develop.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Liveblog should not load third-party social SDKs on every Liveblog-enabled post by default

1 participant