【wordpress】Gutenbergの埋め込みブロックのiframeが浮く現象

実際にGutenbergの埋め込みブロックを使うと以下のコードがつく

埋め込みブロックでwordpressサイトを埋め込んで表示が崩れた時のコード
HTML

<div class="wp-block-embed__wrapper">
<blockquote class="wp-embedded-content">
…
</blockquote>
<iframe class="wp-embedded-content" style="position: absolute; clip: rect(1px, 1px, 1px, 1px);">
…
</iframe>
</div>

「blockquote」は「iframe」の方が読み込めないと代わりに表示されるっぽいけど今回はどっちも表示されてた

CSS

clip: rect(1px, 1px, 1px, 1px);
position: absolute;

上記cssは「display: none;」とかと同じで表示を非表示にするcssらしい
違うのは上記コードは音声読み上げに対応した非表示らしい

「display: none;」は音声読み上げに対応していないらしいので音声読み上げに対応する時は上記コードを使ったほうがいいみたい

原因はoEmbed機能を切っていた事だった

wordpressにはoEmbed機能というURLを自動的にiframeなどの埋め込みコードに変換してくれる機能があるみたいで、それを切っていたことで不具合起こしてた…

なので以下のコードを消したら治った

//oEmbed機能を切るコード
remove_action('wp_head','rest_output_link_wp_head');
remove_action('wp_head','wp_oembed_add_discovery_links');
remove_action('wp_head','wp_oembed_add_host_js');

Gutenbergでは切っといた方がいいかも

wordpress4.9以前ではoEmbed機能を切っていたんだけど、Gutenbergでは切らない方がいいかも
ちなみにoEmbed機能を切る方法で2パターンくらいあるみたい

↓「Gutenberg」でwordpressの埋め込みだけ表示がおかしくなる（今回起きた）

//「Gutenberg」では使わない方がいいかも（実際に今回使ってたコード）
remove_action('wp_head','rest_output_link_wp_head');
remove_action('wp_head','wp_oembed_add_discovery_links');
remove_action('wp_head','wp_oembed_add_host_js');

↓完全にoEmbed機能をきるみたいで「Gutenberg」でyoutubeとか埋め込んでもリンクをテキストで吐き出す

//「Gutenberg」では使わない方がいいかも
remove_filter('the_content', array($wp_embed, 'autoembed'), 8);

おまけ：wordpressを使ったサイトで「/embed」をURLの後ろにつければブログカードを見れる

他のサイトで自分のブログ記事を埋め込んだ時にどう表示されるか確認する方法があった
単純に知らなかったのでメモ

wordpressを使ったサイトであれば「https://sample.com/company/embed」みたいにページの後ろに「/embed」をつければブログカードが確認できる