在编辑器中工作时，为什么我的Gutenberg Instagram嵌入块无法在前端工作？

Question

我正在使用Instagram块将Instagram帖子嵌入到Wordpress Gutenberg编辑器中。在编辑器中可以正常工作，并且帖子可以毫无问题地嵌入。

但是，在前端，Instagram链接只是作为文本放置，没有任何尝试嵌入的迹象。

一些挖掘使我对数据库中的{{unknown}}个oEmbed缓存条目进行了this article的介绍，这些条目存在于我的oEmbed数据库缓存中，用于无法工作的Instagram嵌入。但是，我仍然不知道解决方案或发生这种情况的原因。

该网站上嵌入YouTube或Vimeo似乎没有任何问题，只有Instagram出现了问题。同样，在后端编辑器中嵌入效果也很好...

还有其他人偶然发现这种奇怪的前端行为吗？

Answer 1

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

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

Answer 2

为此找到了解决方案，这要感谢 @joshuaiz 在一个单独的线程中进行了跟踪：

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

从主题的$content_width = '100%';中删除functions.php可以解决此问题。

Answer 3

我遇到了同样的问题，对我来说，解决方案是将此代码添加到主题中。

代替Removing $content_width = '100%';添加：

if ( !isset( $content_width ) ) $content_width = 550;
More info https://www.wpexplorer.com/wordpress-oembed/

希望它对某人有帮助。