Почему мой встраиваемый блок Gutenberg Instagram не работает на интерфейсе, когда он работает в редакторе?

Я встраиваю посты из Instagram в редактор Wordpress Gutenberg с помощью блока Instagram. Прекрасно работает в редакторе, и сообщение встраивается без проблем.

Серверная часть, все хорошо!

Однако на передней панели ссылка Instagram просто находится в виде текста без каких-либо признаков попытки встраивания.

Интерфейс, не очень хорошо

Немного покопавшись, я нашел эту статью около {{unknown}} oEmbed записей кэша в базе данных, которые присутствуют в моем кэше базы данных oEmbed для встраиваемых файлов Instagram, которые не работают. Однако я все еще не могу найти решение или причину, по которой это происходит.

Кажется, нет никаких проблем с YouTube или Vimeo, встроенными на сайт, проблемы возникают только у Instagram. Опять же, встраивание абсолютно нормально работает в бэкэнд-редакторе ...

Кто-нибудь еще сталкивался с таким странным поведением интерфейса?


wordpress instagram wordpress-gutenberg gutenberg-blocks oembed
person Gruff Vaughan    schedule 31.01.2019    source источник
comment
Все еще борюсь с этим. Я заметил, что активация темы TwentyNineteen по умолчанию устраняет проблему, поэтому я знаю, что проблема возникает из-за моей темы. Это модифицированная версия стартовой темы Plate (github.com/joshuaiz/plate), но я могу ' Я не нашел в functions.php ничего, что вызывает проблему. В тупике!   -  person Gruff Vaughan    schedule 17.02.2019
comment
Вы нашли решение? У меня точно такая же проблема.   -  person F. A    schedule 05.11.2019
comment
@ F.A Да, я только что добавил ответ на это. Надеюсь, это решит вашу проблему!   -  person Gruff Vaughan    schedule 17.11.2019

Ответы (3)


arrow_upward
0
arrow_downward

Мы также сталкиваемся с этой проблемой на нашем сайте. Я заметил, что <script async src="//www.instagram.com/embed.js"></script> где-то удаляется, из-за чего встраивание не загружается должным образом во внешнем интерфейсе. Разрешение тегов script устраняет проблему, разрешая загрузку сценария внедрения, но вносит уязвимость в системе безопасности, поэтому мы до сих пор не нашли отличного обходного решения.

Изменить: мы решили добавить <script async src="//www.instagram.com/embed.js"></script> в тег заголовка. По-прежнему не идеален, поскольку он загружается на всех страницах, но на данный момент это обходной путь, который позволяет правильно загружать встраиваемый Instagram.

person thadley    schedule 15.04.2019
comment
В моем случае добавление ‹скрипта async src = // www.instagram.com/embed.js› ‹/script› в заголовок не решило проблему. Но я видел, что он удален из кода. - person F. A; 05.11.2019

arrow_upward
0
arrow_downward

Нашел решение этой проблемы благодаря @joshuaiz, рассмотревшему это в отдельной теме:

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

Удаление $content_width = '100%'; из functions.php моей темы устранило проблему.

person Gruff Vaughan    schedule 17.11.2019

arrow_upward
0
arrow_downward

У меня была такая же проблема, для меня решением было добавить этот код в тему.

Вместо Removing $content_width = '100%'; добавить:

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

Надеюсь, это кому-то поможет.

person Sh Svyatoslav    schedule 18.06.2020