Kansai WordPress Meetup@大阪『ブロックテーマを作る上で知っておくべきこと

1. 『ブロックテーマを作る上で知っておくべきこと Toro_Unit / 2026.11.15 @ Kansai WordPress Meetup Osaka 1
2. $ whoami Toro_Unit / 占部 紘 Freelance Frontend Engineer WordPress Engineer Github: @torounit X: @Toro_Unit 2
3. ブロックテーマ作ってますか？ 3
4. Twenty Twenty-Two (WordPress 5.9 / 2022年1月) Twenty Twenty-Three (WordPress 6.1 / 2022年11月) Twenty Twenty-Four (WordPress 6.4 / 2023年11月) Twenty Twenty-Five (WordPress 6.7 / 2024年11月) Ipsum (WordPress 7.2 / 2026年12月予定) 4
5. ここ1〜2年のブロックテーマの進化 レスポンシブスタイル @mobile / @tablet (7.1) ナビゲーションオーバーレイ モバイルメニューをブロックで (7.0) 画面幅ごとのブロック表示切り替え (7.0) :hover / :focus を theme.json で (7.0〜) 角丸プリセット・フォーム要素のスタイル (6.9) 新ブロック: Accordion / Icon / Breadcrumbs / Tabs 5
6. Block Theme is Production Ready !!! 6
7. ブロックテーマ開発で気をつけること 7
8. CSS は極力書かず、ブロックの設定で CSS で書くと「エディタで変えたのにスタイルが当たらない」問題が起き やすい。アップデートでセレクタや優先度が変わることがある。 CSS は WordPress のスタイルを上書きするのではなく、足りない分をち ょい足しする reset / normalize みたいなのも WordPress 側に極力任せる。 8
9. グループブロックの仕様を知る 要素の横幅を決めるのは、グループブロックの仕事 中のブロックが自分で幅を決めるのではない 親のグループブロックが、子要素の幅を揃える コンテンツ幅 / 幅広 / 全幅 9
10. トップレベルにはグループブロック サイトの横幅を制御しているのはグループブロック CSS で横幅を自前で制御すると… 管理画面で崩れる 幅広・全幅が正しく動かない テンプレート / テンプレートパーツは "layout":{"type":"constrained"} のグループの子要素と考える 10
11. 例: Twenty Twenty-Five <!-- wp:template-part {"slug":"header"} /--> <!-- wp:group {"tagName":"main","style":{"spacing":{"margin":{"top":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} --> <main class="wp-block-group" style="margin-top:var(--wp--preset--spacing--60)"> <!-- wp:query-title {"type":"archive"} /--> <!-- wp:term-description /--> <!-- wp:pattern {"slug":"twentytwentyfive/template-query-loop"} /--> </main> <!-- /wp:group --> <!-- wp:template-part {"slug":"footer"} /--> <main> がグループブロック（constrained）になっている 11
12. 置き場所に依存しないスタイル / post_class / 親の class に依存しない ブロックはコピペ・パターンで簡単に使い回せる 投稿・ページ・ヘッダー・フッター、どこでも同じ見た目に 「〇〇の時は自動でいい感じに」は、条件が忘れられる Explicit is better than implicit. — The Zen of Python body_class 12
13. 上書きの単位は、テンプレート / テンプレートパーツごと サイトエディターで編集すると、そのテンプレート（パーツ）が丸ごと DB に保存される 以降はテーマのファイルではなく DB の内容が使われる テーマを更新しても、編集済みのテンプレートには反映されない 運用まで考えて、パーツはある程度分離しておく ヘッダー・フッターなど「お客さんが触る所」は独立したパーツに 13
14. ナビゲーションブロックの使いどころ ナビゲーションブロックを複数設置すると id をテーマに直書きすることに なり、開発・運用に難あり。テーマで１つだけ使うと考えると楽 編集可能なリンク集 != ナビゲーションではない。( クラシックテーマから の大きな違い) 使うのはヘッダーなどのグローバルナビゲーションくらいで良い フッターのリンク集などは、リスト / 段落ブロック + パターンで十分 テーマを編集できる権限 = ナビゲーションを編集できる権限 14
15. レスポンシブスタイル 15
16. レスポンシブスタイル（7.1〜） モバイルファーストではない！ ブレークポイント無し = 全画面幅 → @tablet or @mobile で上書き "styles": { "blocks": { "core/paragraph": { "typography": { "fontSize": "1.25rem" }, "@tablet": { "typography": { "fontSize": "1.125rem" } }, "@mobile": { "typography": { "fontSize": "1rem" }, "elements": { "link": { "color": { "text": "blue" } } }, "css": "letter-spacing: 0;" } } } } 16
17. レスポンシブスタイルの書き方 / @mobile.elements.{element} @mobile の中に "css" も書ける 補足: セクションスタイル（ styles/sections/*.json ）でも使える セクション自体の styles.@mobile は 7.2 から https://github.com/torounit/section-styles-demo blocks.{block}.@mobile 17
18. ブレークポイントは theme.json で変更できる "settings": { "viewport": { "mobile": "30rem", "tablet": "45rem" } } デフォルト: @mobile = 〜480px / @tablet = 480px〜782px レスポンシブスタイル・ブロックの表示切り替え・エディタのプレビュー に反映 18
19. ただし、コアブロックの CSS は固定のまま 782px: カラム / 600px: メディアとテキスト / ナビゲーション / ギャラリー / 投稿テンプレート settings.viewport を変えても、これらは追従しない #79104（viewport を追加した PR）で作者が明言 固定のブレークポイントは今は対応しない いずれ新しいレスポンシブの仕組みに置き換わる想定 関連: #35848 / #45040 19
20. 複雑な CSS はどう書く？ 20
21. アイキャッチ画像の角を切り欠い て、タイトルを載せるカード グループブロックのセクションス タイル is-style-notched 中身はコアブロックだけ アイキャッチ画像 / グループ / 投稿タイトル / 日付 https://github.com/torounit/tsumiki 21
22. マークアップ patterns/hidden-post-card.php <!-- wp:group {"className":"is-style-notched","layout":{"type":"default"}} --> <div class="wp-block-group is-style-notched"> <!-- wp:post-featured-image {"isLink":true,"scale":"cover","height":"100%"} /--> <!-- wp:group {"layout":{"type":"default"}} --> <div class="wp-block-group"> <!-- wp:post-title {"level":2,"isLink":true} /--> <!-- wp:post-date /--> </div> <!-- /wp:group --> </div> <!-- /wp:group --> セクションスタイルを選んだグループブロック + コアブロックだけ 22
23. 役割分担 セクションスタイル（ styles/sections/notched.json ） ブレークポイントごとに変わる値 アスペクト比・余白・文字サイズ・CSS 変数 style.css 構造: grid / clip-path: shape() / calc-size() 基本的には、theme.json の css で完結させたいが、複雑な css はメンテ ナンス性が悪すぎるので、style.css に記述。 23
24. セクションスタイル側: 値を渡す "styles": { "css": "--notch-columns:20;--notch-min-columns:4;--notch-share:0.4;", "@tablet": { "dimensions": { "aspectRatio": "var:preset|aspect-ratio|square" }, "css": "--notch-columns:6;--notch-min-columns:2;--notch-share:0.5;" }, "@mobile": { "dimensions": { "aspectRatio": "var:preset|aspect-ratio|square" }, "css": "--notch-columns:6;--notch-min-columns:2;--notch-share:0.5;" } } メディアクエリは CSS に書かない 24
25. style.css 側: 値を使う .is-style-notched { container-type: inline-size; display: grid; grid-template-columns: auto 1fr; /* デフォルト値は詳細度 0 で。セクションスタイル側が必ず勝つ */ :where(&) { --notch-columns: 20; --notch-min-columns: 4; --notch-share: 0.4; } > :not(.wp-block-post-featured-image) { width: calc(var(--notch-track) * var(--notch-share)); } } 25
26. ポイント 複雑な CSS はブロックスタイルのクラスに閉じ込める 置き場所に依存せず、エディタで明示的に選べる ブレークポイントは theme.json に任せ、CSS 変数で受け取る デフォルト値は :where() で詳細度 0 に add_editor_style( 'style.css' ) で、エディタにも同じ CSS を 26
27. 心構え 27
28. エディタと実際の表示を 95% 一致させる 小まめにプレビューが必要なら、ブロックエディタの意味がない 中途半端な WYSIWYG は、実装コストに対して価値が見合わない WYSIWYG にこだわることが使いやすい WordPress サイトなのでは? 28
29. どうやって学ぶ？ 既存のテーマを触るだけでは気づきにくい Twenty Twenty-Five や Ipsum を眺めながら シンプルなテーマを自作するのが一番の勉強 Theme Test Data で正しく動くか確認する https://github.com/WordPress/theme-test-data 29
30. 最後に: Mētis（フラッグシップテーマ） make.wp.org/core/2026/11/13/introducing-metis-our-new-flagship-theme/ Mētis は実案件の開発の参考になる部分もある。固定ページを スターターテンプレートで用意するとかはよくやる。 カスタムページテンプレートにゴリゴリ書いてあるので、その辺は postcontent を使うようにしないと、編集に難あり。 css ゴリゴリ書いてるので、個人的には tailwindcss とかにしたい気持ち。 speakerdeck.com/torounit/2025-dot-09-dot-13-at-shinshu-wordpressmeetup 30
31. Thanks!!! X: @Toro_Unit Github: @torounit https://torounit.com/ 31