リストブロックに階層表示デザイン選択を追加する

リストブロックの階層スタイルボタン追加方法

それほど難しい作業は必要ありません。有効化している子テーマのfunctions.phpとstyle.cssへこれから紹介するコードを追加するだけで、大抵のテーマでは動作すると思います。

functions.phpへ追加するコード

以下のコードを有効化しているテーマのfunctions.phpへ追加します。

function pwcn_register_list_block_hierarchy_design_styles() {
	register_block_style( 'core/list',array(
		'name' => 'list-hierarchy',
		'label' => __( '階層','textdomain' ),
	));
}
add_action( 'init', 'pwcn_register_list_block_hierarchy_design_styles');

style.cssへ追加するコード

以下のコードを有効化しているテーマのstyle.cssへ追加します。

ul.is-style-list-hierarchy{
list-style: none;
padding: 1em;
padding-left:0;
}
ul.is-style-list-hierarchy li {
list-style: none;
position: relative;
padding-left: 0.9em;
}
.is-style-list-hierarchy ul li:before {
position: absolute;
top: 0.7em;
left: -0.5em;
width: 1em;
margin: auto;
content: "";
}
.is-style-list-hierarchy ul li:after {
position: absolute;
top: 0;
bottom: 0;
left: -0.5em;
height: 100%;
content: "";
}
.is-style-list-hierarchy ul li:last-child:after {
height: 0.7em;
}
.is-style-list-hierarchy ul li:before {
background-color: #000;
height: 1px;
}
.is-style-list-hierarchy ul li:after{
background-color: #000;
width: 1px;
}

最後の数行で線の太さと色を指定していますので、適宜変更してください

style.cssへ追加したコードがブロックエディターに反映されるかどうかは、テーマの仕様によりますから、それぞれのテーマに合わせて工夫が必要な場合があります。
また、このスタイルコードはこのページで使用しているテーマ用のものですので、位置や文字の大きさ、色などを自身の環境に合わせて変更する必要があります。

ブロックエディターで表示させてみる

コードを追加したら、投稿の新規作成をします。既に何かの投稿編集画面が開いていて、そこで試したい場合にはキーボードの「Ctrl」＋「F5」を押して念のためキャッシュのクリアと再読み込みをしましょう。

適当にリストブロックを挿入します。問題なく実装できていれば、右側の「スタイル」という欄に「階層」というボタンが出現しているはずです。

リストを適当に階層化（ブロックの上に表示されるツールバーで子階層や親階層の作成ができます）して、「階層」というボタンをクリックしてみてください。

style.cssに記述したスタイルコードがエディター側にも反映される仕組みになっているテーマでは、即座にエディター上でも階層表示されます。

ちなみにもう一度、こんな感じで表示されるはずです。

• 親階層１
  • 子階層
    • 子リスト１
    • 子リスト２
  • 子階層２
    • 子リスト３
      • 孫リスト１
      • 孫リスト２
    • 子リスト４
  • 子階層３
• 親階層２
  • 子階層４

エディター側で何も変化がおこならない場合には、「プレビュー」→「新しいタブでプレビュー」を選択して、表示画面側で階層化されているかを確認ください（階層化されていない場合にはスタイルコードを追加する場所が異なっているのかも知れません．．これはテーマによるので自身で解決してください）

あとがき

このページでは、リストブロックを階層表示させるためのブロックスタイル追加方法を紹介してきましたが、これに限らず、いろいろなブロックに独自のスタイルを追加して、ボタンで簡単に設定できるようになります。実装方法については以下のページで詳しく書いているので、よかったらどうぞ。

実装してみた方は、感想をページ末尾のコメント欄からお寄せいただければ幸いです（コードだけ参考にしてすっと去られるのはとても寂しいですので．．．）。ただし、うまくいかなかった、ここをこうしたいといった質問などについてはお応えしかねる場合がありますのでご容赦ください。