「WordPressのカスタムブロックをペアプロで作ってみよう」Gutenbergを読む会 2年も続いちゃった記念Youtubeライブ配信やってみました

こんにちは、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"
        }
    }
}

とかにすると出ます。

という訳で、ペアプロ回に向けて、鋭意準備中…。