为什么我的 Gutenberg Instagram 在编辑器中工作时不能在前端嵌入块工作?

Why won't my Gutenberg Instagram embed block work on front end when it works in the editor?

我正在使用 Instagram 块将 Instagram posts 嵌入到 Wordpress Gutenberg 编辑器中。在编辑器中运行良好,post 嵌入没有任何问题。

然而,在前端,Instagram link 只是作为文本坐在那里,没有任何嵌入尝试的迹象。

一些挖掘让我 this article 关于数据库中的 {{unknown}} oEmbed 缓存条目,这些条目存在于我的 oEmbed 数据库缓存中,用于 Instagram 嵌入,但无法正常工作。但是,我仍然想不出解决办法,也找不到发生这种情况的原因。

网站上的 YouTube 或 Vimeo 嵌入似乎没有任何问题,只有 Instagram 有问题。同样,嵌入在后端编辑器中工作得非常好...

有没有其他人偶然发现这种奇怪的前端行为?

我们的网站也遇到了这个问题。我注意到 <script async src="//www.instagram.com/embed.js"></script> 在某处被剥离,这导致嵌入无法在前端正确加载。允许 script 标签通过允许加载嵌入脚本解决了问题,但引入了安全漏洞,因此我们还没有找到一个很好的解决方案。

编辑:我们决定将 <script async src="//www.instagram.com/embed.js"></script> 添加到 head 标签。仍然不理想,因为它在所有页面上加载,但暂时的解决方法允许 instagram 嵌入正确加载。

感谢 @joshuaiz 找到解决方案,在单独的线程中跟进:

https://github.com/WordPress/gutenberg/issues/14351

从我的主题 functions.php 中删除 $content_width = '100%'; 解决了这个问题。