この記事を投稿した時点ではバージョンはまだRC1ですが、ちょっとずつ色々検証がてら触り始めているので、触ってみた所感を残しておこうと思います。
今回はコレ！Section Styles！
なんぞ？って感じですが、（だいぶん簡略に言うと）ブロックスタイルがjsonだけで作れるようになるよってことです。この機能自体register_block_styleに置き換わるものではなく、拡張的な機能なので、どちらを使うかは好みかなぁと今のところ思っています。
ただ、同じことをregister_block_styleでやろうと思うとなかなかコードが面倒そうな感じ（配列まみれ）なので、私はSection Stylesでモリモリやっていくと思います。
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"title": "Variation A",
"slug": "variation-a",
"blockTypes": [ "core/group", "core/columns", "core/media-text" ],
"styles": {
"color": {
"background": "#eed8d3",
"text": "#201819"
},
"elements": {
"heading": {
"color": {
"text": "#201819"
}
}
},
"blocks": {
"core/group": {
"color": {
"background": "#825f58",
"text": "#eed8d3"
},
"elements": {
"heading": {
"color": {
"text": "#eed8d3"
}
}
}
}
}
}
}
これをテーマディレクトリ内の/stylesに入れてみると、あら不思議。グループにブロックスタイルが追加されました。
このブロックスタイルだと、以下のことが行われます。
- スタイルが適用された親ブロック（ここではグループ、カラム、メディアとテキスト）の背景色を
#eed8d3にする - スタイルが適用された親ブロックのテキストの色を
#201819にする - 直下の見出しブロックのテキストの色を
#201819にする - インナーブロックとして持たせたグループブロックの背景色を
#825f58にする - インナーブロックとして持たせたグループブロックのテキストの色を
#eed8d3にする - インナーブロックとして持たせたグループブロックの内部にある見出しブロックのテキストの色を
#eed8d3にする
中に配置したブロックのスタイルまである程度操作できます。また、これはパターンとは違ってブロックスタイルなので、このjsonファイルの色を変更したら、Variation Aとして配置済みのブロックも同様に色が変更されます。素晴らしい👏
若干認識されたりされなかったりが起こるっぽい？ですが、何回かリロードしたらスタイルにVariation Aが出てきますので気長に待ちましょう。なんたってまだRC版ですから。
listに No List Styleをつけてみる
では試しに /styles/no-list-style.css をつけてみます。
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"title": "No list style",
"slug": "no-list-style",
"blockTypes": [ "core/list" ],
"styles": {
"spacing": {
"padding": {
"left": "0px"
}
},
"css": "list-style-type: none;"
}
}
リストスタイル、消えました！こちらも反映に若干のタイムラグがあったり、管理画面ではスタイルが有効なのにプレビューだと有効にならないとかもありました。最終的にどちらもしっかり反映されたので、自分の書き方が間違ってるかも…とそわそわせずに座して待つのがよさそう。
こういうシンプルなやつはregister_block_styleとCSSファイルでサクッと追加してしまった方が早いのかも？いや、でもjsonだけで完結できるのは大きいかも。どうかな？🤔
ちなみに、stylesがない場合は認識されないので、cssで書かない場合はregister_block_styleとCSSファイルの組み合わせ一択かと。
真価を発揮するのは、やっぱりvariation-aのときのサンプルのように、複数ブロックを組み合わせてスタイルをつけるケースかなと思います。
………これ…今後プラグインでjson形式で書き出せるようになったりすると最強なのでは…？ってちょっと期待したりしてしまいます🥹
Discussion