I’m using an ACF embed field to embed various things and noticed that tweets preview/render correctly in the editor, but the stored HTML is textonly?
For example shows up like .
The HTML returned for the field is:
<blockquote class="twitter-tweet" data-width="550" data-dnt="true"><p lang="en" dir="ltr">We’ve just hit a rather large milestone. ACF is being used on over 2 million sites 🎉 Thank you to all our users! <a href="https://t.co/J0Kne1vkMP">pic.twitter.com/J0Kne1vkMP</a></p>— Advanced Custom Fields (@wp_acf) <a href="https://twitter.com/wp_acf/status/1438157860475654150?ref_src=twsrc%5Etfw">September 15, 2021</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
So the issue was that this was being displayed in a vue app which, for some reason, caused the twitter widgets.js
rendering to fail probably due to timing of sorts.
I solved this by loading the script in my template according to https://developer.twitter.com/en/docs/twitter-for-websites/javascript-api/guides/set-up-twitter-for-websites and triggering the widget load on $nextTick in the callback.
window.twttr = (function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0],
t = window.twttr || {};
if (d.getElementById(id)) return t;
js = d.createElement(s);
js.id = id;
js.src = "https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
t._e = [];
t.ready = function(f) {
t._e.push(f);
this.nextTick(() => twttr.widgets.load())
};
return t;
}(document, "script", "twitter-wjs"));