shitate pro blocks を有効にすると、段落・見出しなどのテキストのツールバーに、shitate アイコンのボタンが 1 つ追加されます。WordPress 標準の太字・斜体などと区別しやすいように、このプラグインが追加する装飾はすべてこのボタンのドロップダウンにまとめてあります。
実際の表示
このマニュアルは shitate pro blocks が動いているサイト上にあるので、以下は画像ではなく本物のブロックです。実際にクリックしたり開閉したりして動きを確かめてください。
これはマーカー（span.sb-marker）と、自由スパン（span._op、見た目はテーマ側で定義）の例です。
使える場所
段落・見出し・リスト・コアのタブのラベルなど、通常のテキスト欄に加えて、このプラグインのブロック独自のテキスト欄でも使えます: 吹き出しの名前、details のタイトル、dl の用語（dt）、dialog のボタン文言、目次のタイトル。
ドロップダウンの中身
span.sb-marker（マーカー）
選択した文字に細い帯のマーカー（蛍光ペン風）を引きます。<span class="sb-marker"> で囲まれ、CSS background: linear-gradient(transparent 85%, #ff6 85%); font-weight: bold; がフロントとエディターの両方に適用されます。色を変えたいときはテーマ側で .sb-marker を上書きしてください。
/* マーカーの色を変える例 */
.sb-marker {
background: linear-gradient(transparent 70%, #ffd6e0 70%);
}span._op（自由スパン）
選択した文字を <span class="_op"> で囲むだけのスパンです。プラグインは見た目を一切定義していません。「サイト内で統一した強調をテーマ側で決めたい」ときに、編集者にはこのボタンだけ使ってもらい、CSS はテーマで管理する、という使い方を想定しています。
/* テーマ側で _op の見た目を決める例 */
._op {
color: var(--st-color-brand);
font-weight: 700;
}（改行してよい位置）
文章の「ここでなら改行してよい」位置を指定します。カーソル位置に <wbr> タグに変換され、さらに <wbr> を含む要素には word-break: keep-all; overflow-wrap: anywhere; が当たります。その結果、住所や固有名詞が意図しない位置で折り返されるのを防げます。
東京都渋谷区神宮前一丁目二番三号 変換は「ショートコード」と「ブロック描画時の置換」の 2 段構えなので、本文だけでなく、サイトエディターのテンプレートに置いたブロック（the_content を通らない場所）でも <wbr> になります。目次のタイトルに入れた場合は、スクリーンリーダー用のラベル（aria-label）からは取り除かれます。
フィルターでカスタマイズする
スパンを追加・変更・削除する
sb_span_formats フィルターで、ドロップダウンに出すスパンの一覧を変えられます。各項目は class（付けるクラス名）、title（ボタンの表示名）、icon（Dashicons のアイコン名）、css（フロントとエディターに出す CSS。空なら何も出さない）の 4 つです。
add_filter( 'sb_span_formats', function ( $formats ) {
// 追加: 注記用の赤太字スパン
$formats['note'] = array(
'class' => '_note',
'title' => 'span._note',
'icon' => 'editor-textcolor',
'css' => 'color:#c80000;font-weight:bold;',
);
// 削除: マーカーを使わせない
unset( $formats['marker'] );
return $formats;
} ); を無効化する・対象を絞る
// ボタンとショートコードごと無効化
add_filter( 'sb_wbr_enabled', '__return_false' );
// keep-all の CSS だけ無効化（<wbr> への変換は残す）
add_filter( 'sb_wbr_css_enabled', '__return_false' );
// CSS を当てる要素を絞る（初期値: h1〜h6, p, li, dt, dd, td, th, figcaption, blockquote, summary）
add_filter( 'sb_wbr_css_selector', fn() => 'h1, h2, h3, p' );CSS の読み込みについて
スパンと wbr の CSS は、エディターでは常に読み込まれますが、フロントではそのページにマーカーやスパン、<wbr> が実際に含まれているときだけ読み込まれます。使っていないページに余分な CSS は出ません。
注意点
- マーカーのクラス名は 1.7.0 で
_markerからsb-markerに変わりました。1.6 以前に独自 CSS で._markerを指定していた場合は.sb-markerに書き換えてください。 - 以前あった端末別の改行ショートコード
[br_sp][br_tab][br_pc]は 1.3.0 で廃止されています。本文に残っていると文字列のまま表示されるので、
エディターでの設定画面
