- このトピックには12件の返信、3人の参加者があり、最後に
により5年、 7ヶ月前に更新されました。
-
投稿
-
いつもありがとうございます。
YouTubeブロックを追加したときに下記CSSにが自動で追加されるため、Youtubeブロックの上部にすごいスペースが出来てしまいます。
wp-has-aspect-ratio wp-embed-aspect-16-9これを消すとスペースが無くなりましたが、下記の対応のためでしょうか。
該当のページは下記です。
ご確認よろしくお願いします。
いいねをした人: 居ませんこれは記載のとおり、アスペクト比の設定であり、Gutenberg側で追加しているCSSにになりますでしょうか。
wp-has-aspect-ratio wp-embed-aspect-16-9いいねをした人: 居ませんCSSのheadに出力するを外してみたら治りました。
ありゃ、なんでしょうね。ページキャッシュが効いてたんですかねー。
wp-has-aspect-ratio wp-embed-aspect-16-9
そですね、これは僕は追加していないので Gutenberg が追加しているものだと思います。Snow Monkey は動画などを embed したときに、自動的にアスペクト比を決定するようにしているので、v4.2.20 では、この Gutenberg が指定してくるアスペクト比を無視するような処理をいれました。
いいねをした人: 居ませんこちらの件、最新版4.2.22でも発生するみたいで
強引に以下のスタイルを上書きして対応してみました。.wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper:before { padding-top: 0 !important; } .wp-block-embed.wp-embed-aspect-1-1 .wp-block-embed__wrapper:before, .wp-block-embed.wp-embed-aspect-1-2 .wp-block-embed__wrapper:before, .wp-block-embed.wp-embed-aspect-4-3 .wp-block-embed__wrapper:before, .wp-block-embed.wp-embed-aspect-9-16 .wp-block-embed__wrapper:before, .wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper:before, .wp-block-embed.wp-embed-aspect-18-9 .wp-block-embed__wrapper:before, .wp-block-embed.wp-embed-aspect-21-9 .wp-block-embed__wrapper:before{ padding-top: 0 !important; }いいねをした人: 居ませんお世話になります。
再発し、別のテーマだと症状が発生しなかったので、投稿しようと思ったのですが、
他の方でも再現されたんですね。該当のページはちなみに下記です。
ご確認お願いします。
いいねをした人: 居ません小川さんご報告ありがとうございます！
黒石さん、ページの共有すごく助かります。いま、
.wp-block-embed { &.is-provider-wp-oembed-blog-card-handler { .wp-block-embed__wrapper::before { display: none; } } }というコードで上部余白を消してたのですが、共有いただいたページを見ると、
is-provider-wp-oembed-blog-card-handlerではなくてis-provider-youtubeとなっているので余白が消えていないようです。ここの class がどういう理屈で決定されるのかがさっぱりわからないので、.wp-block-embed { .wp-block-embed__wrapper::before { display: none !important; } }のように強めに打ち消したほうが良いのかもしれません。ちょっと検討します。
本当なら Gutenberg のレスポンシブ処理に乗っかった方が素直で手間も少ないのですが、クラシックエディターのことを考えるとなかなか難しく…。ほとんどのユーザーが Gutenberg を使うようになれば、このようなクラシックエディターとの互換性を考慮した処理も削っていってスリム化したほうが良いかもしれませんね。
いいねをした人: 居ません
- トピック「GutenbergでYouTubeブロックを追加した際に丈夫に大きな空白が出来てしまう」には新しい返信をつけることはできません。