details は、HTML の <details> / <summary> をそのまま扱えるアコーディオンのブロックです。タイトルをクリックすると本文がアニメーション付きで開閉します。FAQ、補足説明、長い仕様表など「最初は畳んでおきたい」内容に使います。開閉の状態はネイティブの details の機能なので、キーボード操作とスクリーンリーダーでの読み上げは標準のまま動きます。
実際の表示
このマニュアルは shitate pro blocks が動いているサイト上にあるので、以下は画像ではなく本物のブロックです。実際にクリックしたり開閉したりして動きを確かめてください。
PCでは初期状態で開きます
開発者開いた内容の部分には自由にブロックを挿入することができます
SPでは初期状態で開きます
ここを開くと上のブロックは閉じるようになっています。
この機能は解除もできます
どちらでも閉じています。
親ブロックでは「ひとつ開くと他の項目を閉じる」設定を用意しています。
これを使うことで複数のdetailsが表示されなくできるため、画面のスペースを節約することができます。
基本的な使い方
- 「shitate tag blocks」から details を追加します。最初は項目が 2 つ入っています。
- 各項目の「タイトル…」をクリックして見出しを入力し、その下の本文に任意のブロックを入れます。
- 項目を増やすときは末尾の「＋」を押します。エディターでは常に開いた状態で編集できます。
- 親ブロックを選んで、スタイル（標準／ボックス）と「ひとつ開くと他の項目を閉じる」を設定します。
エディターでの設定画面
設定項目
details（親）
- スタイル — 標準（タイトル行に薄い背景）／ボックス（項目ごとに枠線）。
- ひとつ開くと他の項目を閉じる — オンにすると、同じグループ内で開いている項目がアニメーション付きで閉じ、常に 1 つだけ開いた状態になります。
各項目
- タイトル — テキストツールバーの太字・斜体と shitate の装飾が使えます。
- 初期状態で開く（PC）／初期状態で開く（SP） — 境界は 768px です。片方だけ開く設定でも、JavaScript が動く前から正しい状態で描画されるのでちらつきません。
コアの「詳細」ブロックとの相互変換
ブロックの変換メニューで、WordPress 標準の「詳細」ブロックと相互に変換できます。複数の詳細ブロックをまとめて選んで変換すると、1 つの details の項目としてまとまります。逆方向は項目ごとに詳細ブロックになります。
開閉アイコンを差し替える
アイコンはプラス⇄マイナスの SVG をマスクで表示しています。閉じているときは --sb-icon-close、開いているときは --sb-icon-open を使い、360° 回転しながらクロスフェードします。一回転で元の向きに戻るので、どんなアイコンに差し替えても動きは安定します。内蔵アイコンは plus / minus / chevron-up・down・left・right / arrow-up・down・left・right / triangle-up・down の 12 種です。
/* シェブロンに変える */
.sb-details {
--sb-icon-close: var(--sb-icon-chevron-down);
--sb-icon-open: var(--sb-icon-chevron-up);
}
/* 自前の SVG を使う */
.sb-details {
--sb-icon-close: url("data:image/svg+xml,…");
}出力される HTML と CSS
<div class="sb-details is-style-box" data-sb-exclusive="true">
<details class="sb-details-item sb-toggle is-open" data-sb-toggle="item" open>
<summary class="-title"><span class="-label">タイトル</span><span class="-icon" aria-hidden="true"></span></summary>
<div class="-body">…中身…</div>
</details>
</div>--sb-toggle-pad-top/--sb-toggle-pad-bottom— 開いたときの本文の上下余白（初期値--st-space-m）--sb-radius— ボックススタイルの角丸（初期値 0）- タイトルの背景は
--st-color-base-2、アイコンの色は--st-color-brand、ボックスの枠線は--st-border-card
/* 開いている項目のタイトルをブランド色に */
.sb-details-item.is-open > .-title {
color: var(--st-color-brand);
}注意点
- 開閉アニメーションは JavaScript で制御しています。JS が無効な環境では、閉じた状態で保存した項目は本文が表示されません。
- PC／SP の判定はページ読み込み時の 1 回だけです。読み込み後にウィンドウ幅を変えても初期状態は変わりません。
- 構造化データは出力しません。FAQ として検索結果に出したい場合は dl ブロック（FAQPage 出力あり）を使ってください。
- 目次ブロックの開閉式は、この details と同じスクリプトと CSS を共用しています。
- 1.6.1 以前の保存形式はエディターで開くと自動移行されます。開いていない古いページはスタイルと動きが外れるので、一度保存し直してください。