dialog は、見た目は普通のボタンですが、クリックするとモーダル（ポップアップ）で別の内容を表示するブロックです。HTML のネイティブ <dialog> を使っているので、背景の操作ロックやフォーカスの閉じ込め、Esc キーで閉じる動きはブラウザ標準のまま動きます。スマホの小さな画面で「詳細をその場ですぐ見せたい」ときに便利です。
実際の表示
このマニュアルは shitate pro blocks が動いているサイト上にあるので、以下は画像ではなく本物のブロックです。実際にクリックしたり開閉したりして動きを確かめてください。
基本的な使い方
- 「shitate tag blocks」から dialog を追加します。
- ボタン上の「ボタンのテキスト…」に文言を入力します。
- その下の点線枠「モーダルの内容」に、モーダルで表示したい内容を任意のブロックで入れます。
- サイドバーでボタンのスタイル・サイズ・矢印、モーダルの背景色を設定します。ツールバーでボタンの配置（左／中央／右）を選べます。
エディターでの設定画面
設定項目
- 配置（ツールバー） — 左（初期値）／中央／右。
- スタイル — 塗り（初期値）／枠線／テキスト。
- サイズ — 小／中（初期値）／大。
- 矢印を表示 — ボタンの右に矢印アイコンを付けます。
- 背景色（モーダル） — CSS 変数
--sb-dialog-bgに入ります。16 進・色名・var(--…)・rgb()/hsl() 形式のみ受け付けます。 - ボタンの文言にはテキストツールバーの太字・斜体と shitate の装飾が使えます。
フロントでの動き
- ボタンを押すと
showModal()でモーダルが開き、背景は暗くなって操作できなくなります。フォーカスはモーダルの中に移ります。 - 閉じ方は 3 つ: 右上の × ボタン、背景（暗い部分）のクリック、Esc キー。
- モーダルの幅は
min(92vw, 600px)、高さは最大 85vh で、超える内容はモーダル内でスクロールします。 - JS が無効な環境ではボタンを押しても何も起きません（中身は HTML に含まれていますが表示されません）。
矢印アイコンをフィルターで差し替える
add_filter( 'sb_modal_arrow_svg', function () {
return '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2"/></svg>';
} );返した SVG はサニタイズを通ります（<svg を含まない文字列は空になります）。エディター内のプレビューには反映されず、フロントだけ変わります。
出力される HTML と CSS
<div class="sb-dialog">
<div class="-opener has-align-left">
<button type="button" class="sb-button is-variant-fill is-size-medium has-arrow" data-sb-dialog-open>
<span class="-text">詳しく見る</span><span class="-arrow">…svg…</span>
</button>
</div>
<dialog class="-dialog" style="--sb-dialog-bg:…">
<div class="-panel">
<button class="-close" aria-label="閉じる" data-sb-dialog-close><span aria-hidden="true">×</span></button>
<div class="-body">…中身…</div>
</div>
</dialog>
</div>--sb-dialog-bg— モーダルの背景（初期値--st-color-base）--sb-radius— ボタンとモーダルの角丸、--sb-radius-s— 閉じるボタンの角丸（初期値 0）- ボタンの色は
--st-color-brand、ホバーは--st-color-brand-hover。ボタンの部品.sb-buttonは共有部品です
/* モーダルを広めに、背景の暗さを変える */
.sb-dialog > .-dialog { width: min(92vw, 800px); }
.sb-dialog > .-dialog::backdrop { background: rgb(0 0 0 / 70%); }注意点
- URL のハッシュで自動的に開く機能はありません。
- レイアウトの「リンク付きボックス」の中に置いても、モーダルの中身のリンクや閉じるボタンは正しく動きます（1.4.1 で修正済み）。
- 1.7.0 でクラス名が変わりました（例:
.sb-dialog__close→.-close）。古いクラス名の独自 CSS は効きません。