WordPress のリストブロックに ※ 付数字の表現を追加する

WordPress のリストブロックにカッコ書きや ※ 印の数字表現を追加してみる

ol を利用した連番のリストを使うことはよくあると思いますが、日本では文書に丸数字（ ① 、 ② 等）、カッコ付数字（ (1) 、 (2) 等）、米印付数字（ ※1 、 ※2 等）が使われることが良くあります。
しかし、 HTML 、 CSS の標準では list-style-type を利用したいくつかの表現しかできません。できないと言って諦めてくれればいいのですが、強引に表現しようとして、文章の頭に直書きしてしまったりすると、後で途中に項目が増えたりすると以降の数字をすべて書き換えたりしなくてはならなくなります。

そこで、以前から CSS を駆使して表現する方法がありましたが、これを WordPress のブロックエディタの標準のリストブロックにスタイルとして追加してみようという試みです。
当初はテーマファイルの functions.php に追記しておりましたが、プラグイン化して使いやすくできないか試しているところです。なので、 GitHub にもコードは上がっておりますが、追加で開発しようと思っているので完成形ではありません。使うことは可能なので、その技術資料として記載していこうと思います。

ブロックエディタ用のスクリプトを登録

まずはデフォルトのリストブロックにスタイルを追加していくために、スクリプトを登録するところから開始します。

function block_editor_enqueue() {
        $plugin_url = plugin_dir_url( __FILE__ );
        wp_enqueue_script( 'block-style-script', $plugin_url . 'js/style-blocks.js', array( 'wp-blocks' ) );
        wp_enqueue_style( 'block-editor-css', $plugin_url . 'css/block-editor.css', array() );
}
add_action( 'enqueue_block_editor_assets', 'block_editor_enqueue' );

enqueue_block_editor_assetsアクションを使って、ブロックエディタに読み込むスクリプトを指定します。上記ではついでにスタイルシートも読み込むように設定しています。

次に読み込むスクリプトの作成です。

js/style-blocks.js

(function () {
    wp.blocks.registerBlockStyle( 'core/list', {
        name: 'asterisk-list-style',
        label: '米印付数字',
    } );
})();

GitHub 上のコードではスタイルなしや他のスタイルも記述していますが、シンプルにするため米印用のコードのみ提示しています。
wp.blocks.registerBlockStyleの関数内でスタイルを追加したいブロックを選択してあげますが、今回は WordPress コアに実装されているリストブロックに追加するため、core/listと指定しました。
スタイルの名前と表示するラベルを指定して完了です。

ブロックエディタ表示用の CSS を用意

スタイルを登録したら、ブロックエディタ上でも該当のスタイルで見た目を変えてあげると、どのスタイルが適用されているか分かりやすくなるので、適切に CSS を用意してあげます。

css/block-editor.css

/* リスト | スタイル | 米印付き数字 */
.is-style-asterisk-list-style li {
    list-style-type: none;
    position: relative;
}

.is-style-asterisk-list-style li::before {
    content: "※" counter(list-item);
    display: inline-block;
    margin-left: -2.5em;
    width: 2em;
    position: absolute;
    top: 0;
    left: 0;
}

基本的にはブロックエディタ上でコードを解析すれば適用するために必要な class 等はすぐに分かると思います。
手法としては::beforeの疑似要素にcontentで ※ を表示し、counterで連番を表示するごくごくありきたりな方法を用いています。

以下のカウンターリセット方法は ol 要素がデフォルトで持っている list-item カウンタを counter に指定することで不要となりました。 reverse 要素を指定した場合でも正常に動作します。

しかし、この方法だけでは WordPress が持っているブロックにある開始数字（ start 属性 ）を利用しても反映されません。counter-increment: cnt;としていることで毎回数値がリセットされてしまいます。

そこで、上記の CSS より上部に以下の CSS を追記することで、 start 属性の数値を反映させることにしました。

- /* リストスタイルの初期数字をリセット */
- ol[start="0"] {
-     counter-reset: cnt 0;
- }
- 
- ol[start="2"] {
-     counter-reset: cnt 1;
- }
- 
- ol[start="3"] {
-     counter-reset: cnt 2;
- }
- 　・
- 　・
- 　・
- ol[start="10"] {
-     counter-reset: cnt 9;
- }

これで WordPress 上で指定した開始数値を反映して ※ 付数字を任意の数値から開始することができます。必要に応じて数字の CSS を追加してください。

ユーザー表示用の CSS を登録

同様に、フロントの CSS も追加しなくてはなりませんので、wp_enqueue_scriptsを用いてフロントにも追加の CSS を適用します。

function block_list_style_css() {
        $plugin_url = plugin_dir_url( __FILE__ );
        wp_enqueue_style( 'block-style-css', $plugin_url . 'css/block-style.css', array() );
}
add_action( 'wp_enqueue_scripts', 'block_list_style_css' );

フロント表示用の CSS を用意

フロント表示用の CSS も、 class が違うだけでブロックエディタ用の CSS と内容は変わりません。
※ 以下コードは一部修正しました（ diff で表示）。

css/block-style.css

/* リスト | スタイル | 米印付き数字 */
ol.is-style-asterisk-list-style li {
    list-style-type: none;
    position: relative;
}

ol.is-style-asterisk-list-style li::before {
    content: "※" counter(list-item);
    display: inline-block;
    margin-left: -2.5em;
    width: 2em;
    position: absolute;
    top: 0;
    left: 0;
}

これでブロックエディタ上でスタイルを選択すれば ※ 付の数字が表現できるはずです。
せっかくプラグイン化したので、他のブロックでも使えそうなスタイルを追加しようと思っています。