WordPressの大進化となったGutenberg、そのなかでも増えたなぁ…と思ったのは「埋め込み」の種類じゃないでしょうか。
Youtube、Twitter、Facebook、Instagramなど、日本でもおなじみのものから、WordPressのサイト、はたまた日本ではほぼなじみのないサービスまで、その数なんと34種類！（2019/03/19 Ver.5.1現在）
そんでもって、その埋め込みにも左寄せ、中央寄せ、右寄せのアイコンがあるのですが、それがテーマをGutenbergに対応させるアクションフックの
add_theme_support('wp-block-styles');を入れても寄せだけが機能せず、ハマりかけたので、備忘録として残しておきます。
Gutenbergの埋め込みは3層構造。それに合わせたCSSを適用。
ということで、ようはどんなソースが吐き出されるか確認を怠ったのが最大の原因なのですが…Gutenbergの埋め込みは次の図のような三層構造になっています。
- 一番外側がfigure.wp-block-embed（全部の埋め込み共通）で、たとえばYoutubeなら.wp-block-embed-youtube、Twitterなら.wp-block-embed-twitterなどどいう感じの個別のclassが割り当てられています。そして要の.alignleft,.aligncenter,.alignrightという寄せに関するclassも同じく一番外側に充てられています。
- その内側が、div.wp-block-embed__wrapperというiframeを包み込むdivとfigcaptionというキャプションが入っています。
- 一番内側が埋め込み本体のiframeです。
その結果導き出した埋め込みのCSSがこちら。
.wp-block-embed > .wp-block-embed__wrapper{width:100%;}
.wp-block-embed > figcaption{text-align: center;}
.wp-block-embed.alignleft{float:left;margin-right:1em;}
.wp-block-embed.aligncenter{margin-right:auto;margin-left:auto;}
.wp-block-embed.aligncenter::after{clear:both;}
.wp-block-embed.alignright{float:right;margin-left:1em;}
ただし、figcaptionのtext-alignに関しては、埋め込みのキャプションの位置が左右にずれたらかっこつかないかな？とおもって自分なりにつけたものです。また、.alignleftと.alignrightのmarginも自分のサイトに合わせて適宜調整してください。
よし！解決！と思いきや…もう一つの落とし穴が…
さあ、これで寄せの問題が解決…と思いきや最後の最後に大きな落とし穴がまっていました。
Youtubeの埋め込みの左右が切れてる…
中央寄せや寄せ無しにしたときは問題ないのですが、左右に寄せた時にがっつり左右をぶち切られでしまっていたのです。これではかっこがつかない…
そこで思い出したのが、なにかが56.25％という数字。たしか非WordPressのサイトでYoutubeをレスポンシブにしたとき…ということで思い出したのが、ここ。
WordPressや通常サイトでYoutubeやVimeoの動画の埋め込みをCSSで簡単にレスポンシブWeb対応にさせる方法 | HTML5でサイトをつくろう
ただし、この記事は4年以上も前に公開されたものなので、当然Gutenbergの仕様には対応していません。ならばそれに合わせて作ればいいじゃないか！と思い立って、先ほどの、3層構造の埋め込みのCSSからYoutubeのものだけをチョイスして作成！
.wp-block-embed-youtube > .wp-block-embed__wrapper{position:relative;padding-top:56.25%;}
.wp-block-embed-youtube > .wp-block-embed__wrapper iframe{position:absolute;width:100%;height:100%;top:0;right:0;}
狙い通りに寄せることができました！
動画はJリーグ公式Youtubeから地元チームの快進撃をチョイスしてみました。
進化した埋め込みを最大限に生かそう。
このようにきちんとCSSを設定すれば埋め込みはページの中で生きてくるので、ちゃんと設定してあげましょう。
ただし、私自身もアカウントを持ってたり、アカウント無しで試せるメジャーなところしか試していませんので、もし他にもずれるのがあるよ！という指摘がありましたら、がんばって追記していきます。