web関連

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

2019/01/02

2018/12/28

,

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

Gutenbergの埋め込みブロックを使って適当なサイトをブログカードで表示させたけどなんかiframeのブログカードに「position: absolute; clip: rect(1px, 1px, 1px, 1px);」がついて浮いて表示崩れが起きた時の備忘録

実際に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;」は音声読み上げに対応していないらしいので音声読み上げに対応する時は上記コードを使ったほうがいいみたい

今回の表示崩れは「iframe(ブログカード)」が隠れていなくて他の要素と被って表示崩れを起こしていた

 

原因は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');
4.9以前から使っていて、URLをテキストとして入れる為に使ってた

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」をつければブログカードが確認できる

 

なんか過去(wordpress4.9以前)のカスタマイズがちょこちょこ「Gutenberg」で引っかかっている気がする
やっかい