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も自分のサイトに合わせて適宜調整してください。