目次
目次

WordPress 7.1で追加された「タブ」ブロックについて

Cocoonカスタマイズ集
この記事は約5分で読めます。
記事内に広告が含まれています。

はじめに

WordPress 7.1では、「タブ」ブロックがコア機能として標準追加されました。

これまでタブ表示を実現するにはテーマの独自機能や専用プラグインが必要でしたが、標準化されたことで手軽にタブコンテンツを作成できるようになりました。

しかし、実際に使ってみると細かなデザイン調整において、いくつか仕様上の制約があります。

この記事では、WordPress 7.1「タブ」ブロックの仕様と課題を整理した上で、「Cocoon」のタブブロックとの違いやCSSを使ったデザインカスタマイズ方法を説明します。

Tracking: Stabilize Tabs Blocks · Issue #73230 · WordPress/gutenberg
A new Tabs block was added in #69789. Currently, the following blocks are available only when experimental settings are ...
github.com

WordPress 7.1標準の「タブ」ブロックの課題

WordPress 7.1標準の「タブ」ブロックは非常に便利ですが、標準のエディター操作においては主に2つの課題（デザイン上の制約）があります。

Gutenbergエディター
  1. 色の設定が「すべてのタブ」に一律適用されてしまう
    エディター上の設定パネルから色を変更しても、全タブ一律で反映されてしまいます（図1参照）。
    「アクティブタブは青、非アクティブタブはグレー」といった状態に応じた色分けを、画面上の操作だけで個別に設定する機能は用意されていません。
  1. アクティブタブの下線が「テキストカラー」に依存する
    アクティブなタブの下に表示される下線は、独立したカラー設定がなく文字色をそのまま引き継ぐ仕様になっています。
    そのため、下線の色だけを別の色に変更する専用のカラーピッカーが存在しません。

このような標準機能の制限を補い、状態に応じた適切な配色や下線のデザインを実現するために、CSSによる追加カスタマイズが必要になります。

Cocoonの「タブ」ブロックとの違い

表1に、WordPress標準の「タブ」ブロックと、テーマ Cocoon独自の「タブ」ブロックの違いまとめました。

「タブ」ブロックの違い
項目WordPress標準Cocoon
初期表示タブの指定可能
「デフォルトのタブ」設定		不可
常に最初のタブが開く
タブごとの色変更可能
全体一括で設定可能		不可
テーマスタイル依存
タブラベルの配置可能
左寄せ・中央・右寄せ等		左寄せ固定

WordPress「タブ」ブロックのデザインを吹き出し風に変更する方法

WordPress標準の「タブ」ブロックのデザインを「吹き出し」に変更します。

完成イメージ

実装手順

  • ラベル
    Gutenbergエディターでの設定
    Gutenbergエディター

    以下に手順を示します。

    1. 「タブ」ブロックを配置します。
    2. 「タブリスト」設定パネルから、アクティブ状態にしたい背景色と文字色を設定します。
      枠線の色は背景色に合わせておきます。
  • ラベル
    CSSを追加

    以下のCSSを追加します。

    .wp-block-tab-list button {
  box-shadow: 0 0 3px rgb(0 0 0 / 20%);
  margin-bottom: 11px;

  /* 非アクティブタブの背景色、文字色 */
  &:not([aria-selected="true"]) {
    background-color: #fff !important;
    color: #333 !important;
  }

  &[aria-selected="true"]::before {
    background-color: inherit;
    border: 0;
    bottom: -11px;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: '';
    height: 11px;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    width: 22px;
  }
}

    非アクティブ状態の背景色や文字色は、追加したCSS側で制御します。

さいごに

今回紹介した方法を使えば、標準の機能では手が届きにくい「タブ」ブロックの色やデザインを自由自在にカスタマイズできます。

WordPress 7.1で追加された「タブ」ブロックは手軽で便利ですが、標準機能だけでは細かな配色調整に少し制約があります。
テーマ固有のブロックとの違いを理解しつつ、必要に応じてCSSを少し書き足すだけで、サイトの雰囲気にぴったりな見栄えへ仕上げることが可能です。

タイトルとURLをコピーしました