ブロックテーマ時代における、テーマの CSS について考える Toro_Unit / 2025.09.13 @ Shinshu WordPress Meetup

信州 WordPress Meetup in 松本 Vol.37 WordPress とかの話をする会 ( https://www.meetup.com/shinshu-wordpress-meetup/events/310575290 )

Transcript

1. ブロックテーマ時代における、テーマの CSS について考える Toro_Unit / 2025.09.13 @ Shinshu WordPress Meetup 1
2. $ whoami Toro_Unit / 占部 紘 Frontend & WordPress Engineer Github: @torounit Twitter: @Toro_Unit 2
3. Contributions WordPress / Gutenberg Team Shinshu WordPress Meetup WordCamp Tokyo 2023 Speaker WordCamp Kansai 2024 Organizer Team WordCamp Kansai 2025 Organizer Team 3
5. テーマ作ってますか？ 5
6. スタイルの管理どうしてますか？ 6
7. theme.json /styles/block-style-variation.json (Section Styles) 7
8. theme.json 昔よりかなりいろんなことができるようになった。 margin / padding / gap / border typography color / background border-radius / box-shadow etc... https://make.wordpress.org/core/2025/03/12/roster-of- design-tools-per-block-wordpress-6-8-edition/ 8
9. Section Styles ( WordPress 6.6+ ) ブロックのバリエーションを、 json で定義できるように。その定 義にも、 theme.json のようなス タイルのプロパティが使える。 子ブロックのスタイルも定義でき る。 https://make.wordpress.org/core/2024/ 06/24/section-styles/ 9
10. これでもう CSS 書かなくていいんじゃね？ 10
11. ・・・・・・・・・ 11
12. いやそんなことないですよね。 12
13. theme.json で出来ないこと メディアクエリ / コンテナクエリ 擬似クラス / 擬似要素 CSS アニメーション Subgrid / 複雑な CSS Grid レイアウト position / z-index etc... 13
14. 簡単なモノであれば、theme.json で記述出来るが... { "css": "& .wp-block-button__link::after { content: '→'; }" } この時点でつらい。 しかもブロックごとのCSSには、パーサーの関係で メディアクエリ等など様々な機能が使えない。 & th, &td {} とかも使えない。 14
15. コアのブロックへのスタイルをCSSファイルで記述すれば解決！ wp_enqueue_block_style( 'core/button', array( 'handle' => 'my-core-button-default', 'src' => get_parent_theme_file_uri( 'styles/blocks/core/button/default.css' ), 'path' => get_parent_theme_file_path( 'styles/blocks/core/button/default.css' ), ) ); wp_enqueue_block_style( 'core/button', array( 'handle' => 'my-core-button-variation', 'src' => get_parent_theme_file_uri( 'styles/blocks/core/button/variation.css' ), 'path' => get_parent_theme_file_path( 'styles/blocks/core/button/variation.css' ), ) ); 15
16. styles/blocks/core/button/variation.css .wp-block-button.is-style-my-core-button-variation { .wp-block-button__link::before { content: '→'; } } 16
17. ブロックバリエーションのスタイルも定義できたし、 もう問題無いですね！ ブロックを組み合わせて、バリエーションを変えてページを 作るだけですね！ 17
18. ・・・・・・・・ 18
19. どうしてこうなった 19
20. スタイルが肥大化してしまう原因 20
21. 複数のブロックの組み合わせで作るデザイン上のコンポーネントの存在。 21
22. デザインとしてのコンポーネントと、ブロックの粒度が一致しない。 CSS Grid 等の DOM の親子関係に依存するスタイルの存在。 これらのバリエーションを作るために、 <div> = グループブロックが多用 される。 これらの要因が複合し、ブロックスタイルが量産される。 22
23. その結果 再利用性は低いスタイルが量産され、使い勝手が悪化。 グループブロックに限らず汎用性の高いブロックのスタイル増えがち。 23
24. 「複数のブロックの組み合わせで作るデザイン上のコンポーネント」 24
25. これってブロックパターン、テンプレートパーツですよね。 25
26. パターン・テンプレートパーツと同じ粒度で CSS を書けばよいのでは? 26
27. 追加 CSS を設定した状態でパターンとして 保存し、パターンごとのCSSを作成すれば良い？ parts/ └── my-part.html patterns/ └── my-pattern.php styles/ ├── parts/ │ └── my-part.css └── patterns/ └── my-pattern.css 27
28. この方法の問題点 パーツ・パターンごとに CSSファイルが増えるが関連付けが手動（ファイ ル名、クラス名）なので、管理しづらい。 スターターテンプレートなど、パターンからパターンを呼ぶようなものも ある。 28
29. そんなことを悩んでいたときこんな話を思い出す。 Riot and Components「Riotとコンポーネント」by Tsutomu Kawamura https://speakerdeck.com/cognitom/riot-and-components 29
33. フロントエンドの世界では、コンポーネント単位でCSSを 管理するのが一般的になって早数年 Vue.js / Svelte / Riot.js ...etc CSS-in-JS Styled Components Emotion CSS Modules Gutenberg も React で記述されており、管理画面のコンポーネントにも このような技術が用いられている。 33
34. パターン・パーツ上で完全にCSS管理できないか？ 34
37. Tailwind CSS 「ユーティリティファースト」が特長のCSSフレームワーク。 最近の流行というより、スタンダードな方法の一つとして定着してる。 Tailwind CSS で構成された UI キットなども多数。 Flowbite https://flowbite.com/ とか。 37
40. Q:「めちゃくちゃ大量のCSSクラスが準備されてるけどどうすんの？」 A:「使う分だけビルド時に生成されるので、最終的なCSSは 小さくなる」 40
41. Q:「それって WordPress の ブロックテーマでもできるの？」 41
42. postcss.config.js module.exports = { plugins: { '@tailwindcss/postcss': {}, }, }; 42
43. package.json { "private": true, "scripts": { "build": "wp-scripts build --webpack-copy-php", "dev": "wp-scripts start --webpack-copy-php" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.11", "@wordpress/scripts": "^30.20.0", "tailwindcss": "^4.1.11" } } 43
44. src/index.js import './theme.css'; 44
45. src/theme.css Tailwind CSS の preflight を読み込むと WordPressのスタイルが壊れるので 除外。 https://tailwindcss.com/docs/preflight#disabling-preflight @layer theme, base, components, utilities; @import "tailwindcss/theme.css" layer(theme); @import "tailwindcss/utilities.css" layer(utilities); パターンやら、パーツやら、テンプレートやらを対象にする。 @source "../{parts,templates,patterns}/**/*.{php,html}"; 45
46. WordPress のブレークポイントに合わせる https://github.com/WordPress/gutenberg/tree/trunk/packages/viewport#usage @theme { --breakpoint-sm: 600px; --breakpoint-md: 782px; --breakpoint-lg: 960px; --breakpoint-xl: 1280px; } 46
47. 画像ブロックの size-full が Tailwind CSS の size-full と衝突するので その対処。 .wp-block-image.size-full { /* width: auto; height: auto; */ @apply w-auto h-auto; } 47
48. おまけ blockごとのCSSを別のファイルに分割したときも それらの CSS で @apply つかって Tailwind CSS を使いたいとき。 .wp-block-button__link { @apply relative; &::after { @apply absolute top-1/2 right-3 -translate-y-1/2; content: '→'; } } 48
49. webpack.config.js で頑張れば出来る。ふだんこんな感じでやってる。 const defaultConfig = require("@wordpress/scripts/config/webpack.config"); const RemoveEmptyScriptsPlugin = require("webpack-remove-empty-scripts"); const path = require("path"); const glob = require("glob"); /* 各ブロックのCSSファイルをentryに追加するためのオブジェクトを作成*/ const blockStyleDir = "src/styles"; const blockEntries = glob .sync("blocks/**/*.css", { cwd: blockStyleDir }) .map((key) => [`styles/${key.replace(".css", "")}`, path.resolve(process.cwd(), blockStyleDir, key)]); const blockEntriesObj = Object.fromEntries(blockEntries); module.exports = { ...defaultConfig, entry: { ...defaultConfig.entry, "styles/theme/theme": path.resolve(process.cwd(), "src/styles/theme/theme.css"), ...blockEntriesObj, }, plugins: [ ...defaultConfig.plugins, new RemoveEmptyScriptsPlugin({ stage: RemoveEmptyScriptsPlugin.STAGE_AFTER_PROCESS_PLUGINS, }), ], watchOptions: { ignored: ["**/node_modules", "**/build/**"], }, }; 49
50. ワークフロー 1. npm run dev で wp-scripts start 2. ブラウザで確認しながら、パターンやパーツの編集 3. WordPress の機能で難しいものは追加クラスを書く。 4. create-block-theme の機能でテーマファイルを更新。 面倒なときは、直接ファイルを弄るときもよくある。 50
51. HTML として吐き出されないブロックについて コメントの中身も読んでくれるので、ダイナミックブロック(ナビゲーショ ンとか)でも機能する。 ただし、子要素に対しての変更時に、そのセレクタに __ (アンダース コア2つ)が入るとエスケープやらの問題で上手くいかない。 51
52. 感想 全部 Tailwind CSS で書くと管理画面上での変更が効かなかったり等が発生 するので、WordPress 側で出来ることはそちらで。足りないところを Tailwind CSS で補う感じ。 まぁなんだかんだこんな感じで1年くらいやってみているけど、今のとこ ろ上手くいってる感じがする。この CSS どこで使ってるの？みたいな話 はだいぶ無くなった。 Tailwind CSS v4 になって、設定ファイルが不要になったのも楽で良い。 ブロックの追加CSSをいじると壊れるのはどーせ一緒なので気にしない。 壊れたらパターンをリセットすれば解決する。 52
53. 余談 daisyUI のページで 言及されてた。wasm とか使って tailwindcss のビルドしてる。 採用しないけど、 いろいろ興味深い。 世界は広いなぁって思った。 https://github.com/wind-press/ 53
54. Thanks!!! 54