scope は、中身を囲む HTML タグをラジオボタンで選べるグループ風のブロックです。div / section / article / main のような標準的なものから、nav / aside / hgroup / header / footer まで選べます。さらに、このブロックの中にだけ効く CSS と、ブロックの直後で 1 回だけ実行される JS をタブ切り替えで書けます。他の要素に影響を与えない装飾や小さな動きを、テーマの CSS を触らずに追加できるのが最大の特徴です。
実際の表示
このマニュアルは shitate pro blocks が動いているサイト上にあるので、以下は画像ではなく本物のブロックです。実際にクリックしたり開閉したりして動きを確かめてください。
コンテンツを囲むHTMLタグをラジオボタンで設定することができます。div、section、article、mainのような標準的なものもあれば、hgroupのようなマニアックなタグも選択することができます。
メガメニューを作ることも視野に入れているので、このブロックで囲ってあげることで、より幅広い制作が実現するはずです。
また、ここで囲ったブロックにだけ効くスコープ CSS と、ブロックの直後で1回だけ実行される JS を、タブ切り替えで書けます。他の要素に影響を与えない装飾や小さな動きを、テーマを触らずに追加できます。
デモではこの機能を活用して、この要素だけ赤色になるようにしています
基本的な使い方
- 「shitate tag blocks」から scope を追加し、中に任意のブロックを入れます。
- サイドバーの「タグ」で囲むタグを選びます（初期値 div。main はページに 1 つまで）。エディターではブロックの左上に選んだタグ名がバッジで表示されます。
- ブロック（またはその中の子ブロック）を選択すると、ブロックの上に「編集／フロント・エディタ／フロントのみ／エディタのみ／JS」のタブが出ます。CSS や JS を書くときはここを切り替えます。値が入っているタブには「●」が付きます。
エディターでの設定画面
タブの使い分け
- フロント・エディタ — このブロックにだけ効く CSS。エディターとフロントの両方に効きます。ネストが使え、セレクタなしの宣言はブロック自身に当たります。
- フロントのみ — 同じスコープの CSS ですが、フロントだけに効きエディターには適用されません。ホバー効果、アニメーション、要素の非表示など、編集の邪魔になる指定はこちらに書きます。
- エディタのみ — エディターのプレビューだけに効く CSS で、フロントには一切出力されません。枠線やプレースホルダー、編集中だけの余白など、編集しやすくするための指定に使います。
- JS — フロントでブロックの直後に 1 回だけ実行されます。ブロックの要素が変数
elとして渡されます。エディター内では実行されません。
/* 「フロント・エディタ」タブに書く例: ブロック自身の背景と、中の段落の色 */
background: #fffaeb;
padding: 24px;
p {
color: #c80000;
}
/* 「フロントのみ」タブに書く例: ホバーで少し浮かせる */
transition: translate .2s;
&:hover { translate: 0 -4px; }// 「JS」タブに書く例: ブロック内のボタンにクリック処理を付ける
el.querySelector('button')?.addEventListener('click', () => {
el.classList.toggle('is-open');
});スコープの仕組み
- CSS か JS を書いたブロックには、固有のクラス
sb-css-xxxxxxが自動で付きます。CSS はブラウザのネイティブ CSS ネストで.sb-css-xxxxxx { … }の中に入るので、ブロックの外には効きません。 - ブロックを複製すると ID は自動で振り直されます。
- CSS は
<head>の<style id="sb-scope-css">にまとめて出力され、JS はフッターにまとめて出力されます。ブロックの隣に要素が増えないので、:first-childやグリッドの列に影響しません。 - CSS はサニタイズされます。
@importと<、バックスラッシュは除去され、対応する{の無い}以降は切り捨てられます（ブロックの外へ CSS を注入できないようにするため）。CSS のエスケープ（content: "201C"など）は使えません。
JS の権限について
JS タブは任意のコードを実行できるため、WordPress のカスタム HTML ブロックと同じく unfiltered_html 権限（通常は管理者・編集者。マルチサイトでは特権管理者のみ）が必要です。権限のあるユーザーが保存すると JS に署名が付き、署名が検証できる JS だけがフロントで実行されます。権限のないユーザーが保存した場合、JS は取り除かれます（エディターにも警告が出ます）。他サイトからインポートした内容の JS は、管理者が一度保存し直すまで動きません。
コードエディター
CSS / JS の入力欄は VS Code 風のコードエディター（CodeMirror）です。シンタックスハイライトのほか、Tab / Shift+Tab でインデント、Enter で自動インデント、括弧の自動閉じ、Ctrl+/（⌘+/）でコメント切替、Ctrl+F（⌘+F）で検索、Alt+↑↓ で行の移動、Ctrl+D（⌘+D）で同じ語の複数選択ができます。Ctrl+S（⌘+S）で投稿を保存できます。エディター本体はタブを最初に開いたときだけ読み込まれ、フロントには載りません。
グループブロックとの相互変換
ブロックの変換メニューで、コアの「グループ」と相互に変換できます（タグは引き継ぎ。グループに無い nav / hgroup は div になります）。CSS と JS は変換すると消えるので注意してください。
よくある使い方
- ページの一部だけ背景色や余白を変える（テーマの CSS に手を入れずに済む）
- メガメニューやサイドバーなど、意味のあるタグ（nav / aside）で囲みたい
- PC だけ追従する目次を作り、スクロール位置で色を変える JS を足す（このサイトの目次がその例です）
注意点
- ネイティブ CSS ネストに対応したブラウザが必要です（Safari 17.4+ / Chrome・Edge 118+ / Firefox 128+）。
- 同じ scope ブロック（同じ ID）が 1 ページに複数回出る場合（同期パターンの使い回しなど）、JS はその要素の数だけ実行されます。
- CSS を作り直す高速化機能（WP Rocket の「使用されていない CSS を削除」など）はネストや
@scopeを壊すことがあります。scope の<style>にはdata-sb-css属性が付いているので、最適化の除外対象に指定してください（詳しくは「高速化プラグインとの併用」）。