Flexible Table Blockの横スクロール時にscroll hintを追加する

2023年9月2日

URLをコピーしました！

Flexible Table Blockはかなり便利なテーブルブロックです。

セルの連結ができたり、行や列を選択して一括で設定できたり、ブロックエディタで実現できる内容はほぼ対応されているような感じです。

SWELLにも最近セルの連結が追加されましたが、かといって、Flexible Table Blockが不要になるとは言えないでしょう。

Flexible Table Blockは横スクロール時に、scroll hintが表示されないのが地味に不便です。

自分で追加すればいいので、追加してみた、というのがこの記事の内容です。

クリックできる目次

Flexible Table Blockの横スクロール時にscroll hintを追加するスニペット

add_action('wp_footer',function(){
?>
<script>
  // 指定したクラス名を持つ要素をすべて取得
  const elements = document.querySelectorAll('.wp-block-flexible-table-block-table.is-scroll-on-mobile');

  // 指定のコードを追加する要素ごとに処理
  elements.forEach((element) => {
    // 新しい要素を作成
    const hintElement = document.createElement('div');
    hintElement.className = 'c-scrollHint sp_';
    hintElement.innerHTML = '<span>スクロールできます ⇒</span>';

    // 要素の前に新しい要素を挿入
    element.parentNode.insertBefore(hintElement, element);
  });
 
</script>
<?php
});

.c-scrollHint {
    -webkit-animation: FloatHorizontal 2s ease-in-out infinite alternate;
    animation: FloatHorizontal 2s ease-in-out infinite alternate;
    margin-bottom: 2px!important;
    margin-top: 3em;
    text-align: right;
}
.c-scrollHint span {
    align-items: center;
    display: inline-flex;
    font-size: 12px;
    line-height: 1;
    opacity: .75;
    vertical-align: middle;
}
@media (min-width: 768px){
.sp_, .sp_only {
    display: none!important;
}}
.c-scrollHint span i {
    font-size: 16px;
    margin-left: 4px;
}

SWELL/Arkhe以外だとanimationの定義が無いかも知れません。