お問い合わせ

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

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の定義が無いかも知れません。

まとめ

ブロックエディタの追加ブロックをプラグインで入れるのはあまり好きじゃないのですが、Flexible Table Blockは入れておいた方が捗るプラグインだと思います。

役に立ったら他の人にもシェア!
  • URLをコピーしました!
  • URLをコピーしました!
コメントを閉じる

コメント

コメントする

コメントは日本語で入力してください。(スパム対策)

クリックできる目次