WordPressのブロックテーマつくるメモ
ちあきハイブリットテーマに変えると、theme.json で css のとこに書いてたやつは適用されなくなる。
もうCSSはtheme.jsonにせずに大人しくCSSファイルに書くほうがよいのかなあ…
ちあき参考のベースはtt4がよさそう
ちあきデザイン見ながらまずはtheme.json を設定する
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 2,
"settings": {
"color": {
"defaultPalette": false,
"palette": [
{
"name": "Black",
"slug": "black",
"color": "#000000"
},
{
"name": "White",
"slug": "white",
"color": "#ffffff"
},
{
"name": "Gray / 800",
"slug": "gray-800",
"color": "#1f2937"
},
{
"name": "Gray / 700",
"slug": "gray-700",
"color": "#374151"
},
{
"name": "Gray / 600",
"slug": "gray-600",
"color": "#4b5563"
}
]
},
"layout": {
"contentSize": "1024px",
"wideSize": "1600px"
},
"spacing": {
"padding": true,
"margin": true,
"units": ["%", "px", "em", "rem", "vh", "vw"]
}
},
"styles": {},
"patterns": []
}
デフォルトのパレットがいらなかったら "defaultPalette": false をいれる
ちあき$schema 設定してると補完してくれていのちたすかる（PhpStorm）
ちあきcreate-block-theme のプラグインでなんかファイルつくっておく
ちあきスタイルを設定する前にフォントサイズとかカラーとか設定しておくといい。
色ならvar(--wp--preset--color--◯◯)、フォントサイズならvar(--wp--preset--font-size--◯◯)みたいな感じで変数がつかえる。
ちあきこういうtheme.json で設定できる値はCSSで握りつぶさない。（管理画面から触ることを大前提にする）
ちあきcss もtheme.jsonで設定できるけど、どうもエレメント（h2とか）は設定できないっぽい？
ちあきできる。"elements" 配下です。ちなみに全部の見出しをまとめて太字にする！とかなら"core/heading" でやるとよい
ちあきメディアクエリでCSS調整するより clamp でやるのがよさそうかも。
推奨値は 最小のフォントサイズ ÷ 最小のフォントサイズの画面サイズ ✕ 100 = vwの値 で計算が楽そう
ちあき背景画像とか使いたいときは別のCSSファイルを用意する。
wp_enqueue_block_style を使って読み込ませる。
function theme_init(): void {
wp_enqueue_block_style(
'core/heading',
array(
'handle' => 'custom-heading-style',
'src' => get_theme_file_uri( 'assets/blocks/core-heading.css' ),
'path' => get_theme_file_path( 'assets/blocks/core-heading.css' ),
)
);
}
add_action( 'init', 'theme_init' );
見出し類は core/heading。基本的にブロックの name がここに該当しそう
ちあきwp_enqueue_block_style はページ上で該当するブロックが使われてるときだけそのCSSを呼び出せる。（インラインで記述）＝CSSの読み込む量を減らせる
だからブロックのCSSはwp_enqueue_block_styleを使うのを推奨されてる
ちあきCSSのビルドをどうするか考える。
- body だとか tailwind とかのフレームワークのCSS読み込み用のCSSは必要
-
wp_enqueue_block_styleではブロック単位でCSSを作るので1つにまとめるとかはいらない。そもそもビルドもいらないのでは？という気もする
ちあきCSSファイル（だけじゃないけど）とかは同じフォルダで一元管理したいから、
ビルド不要（※かも）のCSSファイルだけビルド後だったり別フォルダに置くとかはなし
ちあき参考。ベースのテーマ用と各ブロック用のCSSを entry で分けてビルドする
ちあきブロック用のCSSはこれを参考に自動でentryに指定させることにする
webpack.config.jsはこんなかんじに。
const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
const path = require( 'path' );
const glob = require( 'glob' );
/**
* 各ブロックのCSSファイルをentryに追加するためのオブジェクトを作成
*/
const blockStyleDir = 'src/styles';
const blockEntries = glob
.sync( 'blocks/*', {
cwd: blockStyleDir,
} )
.map( function ( key ) {
return [
key.replace( '.css', '' ),
path.resolve( process.cwd(), blockStyleDir, key ),
];
} );
const blockEntriesObj = Object.fromEntries( blockEntries );
module.exports = {
...defaultConfig,
entry: {
...{ theme: path.resolve( process.cwd(), 'src/', 'theme.js' ) },
...blockEntriesObj,
},
plugins: [ ...defaultConfig.plugins ],
};
core/button とか内部のリンクをカスタマイズしたいときは、
"core/button": {
"elements": {
"link": {
"color": {
"text": "#ffffff",
"background": "#000000"
}
}
}
}
みたいなかんじで書けそう
ちあき.css でもちゃんとPostCSSでビルド通るけど、ネストだったりなんだりのプラグインまでは入ってないので、必要ならpostcss.config.jsとかでPostCSS Preset Envをいれる
ちあきspacing は規則性があれば spacingScale で書けるけど、step の数が多くなると画像みたいな感じになっちゃうから大人しくspacingSizes で一個ずつ書いていくほうがよさそう
ちあきテーマで parts -> header 作ってるとパターンのヘッダーの中にあるやつと混同しがちになってしまうけど、これは「テンプレートパーツのヘッダー」だからパターンとは別のもの
ちあきtheme.json 内の css の扱いにちょっとなやむ。theme.json でまとめちゃうほうが「どこ見たらいいっけ？」ってならなそう（CSSフォルダ見たりtheme.json 見たりが若干手間では？と思ってる）
でも、たくさん書くと可読性なにそれおいしいの？ってなるし、画像の取り扱いだったりメディアクエリーだったりはCSSファイルのほうがいい。それならいっそ css は使わずにCSSファイルで扱う？
ちあき
register_block_style で登録したスタイルはまだtheme.json では設定できないみたい（6.4時点
ちあきボタンブロック、管理画面からだと上下と左右のpaddingしか設定できないな？
横に矢印アイコンつけたときとか右だけpadding広めにしたいとかはどうするのがいいかな
ちあき管理画面で設定した値＋◯％みたいな書き方ができたらいいのに
ちあき
メディアとテキスト、間隔はblockGapで調整させてほしい……コンテンツ側のpaddingを握りつぶすしかない
ちあき管理画面で設定できるpaddingとmarginは.wp-block-media-text に対するものなので、.wp-block-media-text__content に対するCSSは握りつぶすのは許容する？
でも、カラムがマージン→gapに変わったようにここもgapに変わる可能性がなきにしもあらずだから、あんまりがっつりコアのCSSを触るのはやめた方がいいかもしれない。（ゆくゆくのメンテナンスコストを考えて）
それはそれとしていい案が思いつかない
ちあきパターンのカテゴリーいつもわからなくなるからめも