こんにちは、mimiです。
2年も続いちゃった記念配信、ご覧いただけましたでしょうか?
参考URLはこちら。
https://ja.wordpress.org/team/handbook/block-editor/handbook/tutorials/devenv/
https://github.com/WordPress/gutenberg/tree/trunk/docs/getting-started/devenv
やった手順
の走り書きを以下においておきますね。
任意のディレクトリをターミナルまたはVS Code で開いて
npx @wordpress/create-block demo-block
を実行します。
Node.jsのバージョンは 12以上。
we-envをつかう場合は、dockerが必要、npm -g install @wordpress/env またはローカルインストールしてください。
公式ドキュメントのnvmはなくても好きなNodeのバージョン管理ツールで良いとは思います。
block.jsonに追記している項目
"supports": {
"html": false,
"color": {
"background": true,
"gradients": true,
"text": true,
"link": true,
"__experimentalDuotone": "span"
},
"typography": {
"fontSize": true,
"lineHeight": true
},
"spacing": {
"margin": true,
"padding": true
}
},
supportsを入れるだけで各種機能が反映されるのめちゃくちゃ良いですよね。
ただし、DuotoneはDOMが入れ子になってないと反映されません。
あと、margin は今の処デフォルトでオンにはならなくて、
Gutenberg有効にして、theme.jsonを
{
"version": 2,
"settings": {
"spacing": {
"blockGap": true,
"margin": true,
"padding": true,
"units": [
"%",
"px",
"em",
"rem",
"vh",
"vw"
]
},
"typography": {
"dropCap": false
},
"layout": {
"contentSize": "650px",
"wideSize": "1000px"
}
}
}
とかにすると出ます。
という訳で、ペアプロ回に向けて、鋭意準備中…。