SWELL不具合｜Tableブロックのキャプション追加で縦スクロールバーが出現

SWELLで、テーブルブロックを挿入し、キャプションを追加しました。

すると、テーブルの右横に縦スクロールバーが出現するようになりました。

テーブルの高さは決してはみ出ている訳ではありません。

なぜかスクロールバーが出現します。

見た目も悪いですし、何より困るのがスマホ画面で下にスクロールする時に引っかかることです。

この現象が、SWELLのバージョン（2.7.1）の問題なのか、Wordpress6.1.1の問題なのか確認はしてません。

将来的に解消するかもしれませんが、一時的な対策としては、CSSを少しいじることで対応します。

テーブルブロックの縦スクロールバーを消すカスタマイズ

テーブルブロックのHTML構造とCSS

<figure class="wp-block-table">
  <table></table>
  <figcaption class="wp-element-caption"></figcaption>
</figure>

直接的な要因として、スクロールバーが出現するのは以下のCSSが当たっているためです。

.wp-block-table {
    overflow-x: auto;
}

overflow-x: auto;を解除すれば、スクロールバーは消えます。

auto

ユーザーエージェントに依存します。内容がパディングボックス内に収まる場合は visible と同じように表示されますが、新しいブロック整形文脈を生成します。内容があふれる場合、デスクトップブラウザーはスクロールバーを表示します。

https://developer.mozilla.org/ja/docs/Web/CSS/overflow-x

ただし、現象と対策があっていないので、この方法は避けるべきです。

対応①：tableブロックのラッパーのCSSを変更

overflow-x: auto;が設定されています。

.wp-block-table {
    overflow-x: auto;
}

今回のケースでは、縦方向にはみ出しているので、overflow-yに「scroll」が設定されている可能性が高くなります。

overflow-yは明示的に設定されていませんが、上位ブロックから継承しているoverflow-y:autoになっていますので、「ブラウザに依存します。一般的にスクロールして表示する。」なので、「scroll」なのでしょう。

下方向にはみ出した要素があって、overflow-y:autoでスクロールバーが出現しているので、そこを変更してあげれば解決するでしょう。

.wp-block-table {
    overflow-y: hidden;
}

overflow-y:visibleだと相変わらず、縦方向のscrollバーが出現します。

この理由は、他のサイトに書かれていましたので引用します。

overflow-yに「visible」を設定しているのに、はみ出して表示されません。overflow-yに「visible」を設定していて、overflow-xに「hidden」または「scroll」している状態で下方向にはみ出した要素があると、縦方向にスクロールされて表示されるようになっています。縦方向の表示が、横方向の設定であるoverflow-xの値によって表示が変わってきます。

https://www.prj-alpha.biz/entry/2018/03/13/224708

overflow-x:autoになっているので、overflow-xは「scroll」と同じです。

かつ、overflow-yが「auto」または「scroll」または「visible」の場合はスクロールバーが出現する仕様です。

つまり、overflow-x:autoの場合はoverflow-yは「hidden」じゃないといけません。

今回の問題は、何らかの理由で縦方向がはみ出ているということだと思います。

対応②：figcaptionの高さをCSSで調整

テーブルブロックにキャプションを追加すると縦スクロールバーが出現するため、<figcaption>のサイズが悪さしている可能性があります。

margin-bottomの数値が0になっているので、少し数値を追加します。

<figcaption>のサイズが大きくなると、なぜか縦スクロールバーが消えます。

.p-articleThumb__caption, .wp-block-embed>figcaption, .wp-block-image figcaption, .wp-block-table figcaption, .wp-block-video figcaption {
    margin-bottom: 0.1em;
}

こちらの方法は、見た目が少し変わるだけで、本質的には変わってないので将来的にも安全な修正方法のように思います。

まとめ

ブロックエディタになってから、この手のデザイン崩れが発生するリスクが常にありますね。

WordPressもテーマもアップデートしなければいいのですが、変更をため込んでからアップデートしてしまうと差分が大きくなりすぎてキャッチアップするのが難しくなるジレンマがあります。