ひさしぶりにWordPressのカスタムブロックを作ろうとしたのですが、やり方を忘れてしまったので覚書としてまとめました。

Create Blockコマンドでプロジェクトを作る

プロジェクトのセットアップは、@wordpress/create-blockコマンドを使います。引数にプロジェクト名を入れると、その名前でディレクトリやファイルが生成されます。

$ npx @wordpress/create-block@latest todo-list

インストールするライブラリが多いため、セットアップには1〜2分ほどかかることがあるようです。

  @wordpress/[email protected]
Ok to proceed? (y) y

Creating a new WordPress plugin in the example-wp-stripe directory.

Creating a "block.json" file.

Creating a "package.json" file.

Installing `@wordpress/scripts` package. It might take a couple of minutes...

作成後、プロジェクトディレクトリに入りましょう。

$ cd todo-list

node_modules/ディレクトリがあれば、ライブラリのインストールも完了しています。もしなければ、npm installでインストールしておきましょう。

TypeScriptで開発するように変更する

ここからはTypeScriptで動くようにするための作業です。

TypeScriptのインストールは不要

TypeScriptをnpm installで追加する必要はない様子です。create-blockを実行した時点で、node_modulesにTypeScriptが入っていました。

 % ls -la node_modules | grep typescript
drwxr-xr-x   10 okamotohidetaka  staff     320 12 10 16:56 @typescript-eslint
drwxr-xr-x    9 okamotohidetaka  staff     288 12 10 16:56 typescript

内部的にインストールされているということでしょうか。

ファイル名をTypeScript向けに変える

生成されている4ファイルを、TypeScript形式に変えましょう。

• src/edit.js -> src/edit.tsx
• src/index.js -> src/index.ts
• src/save.js -> src/save.tsx
• src/view.js -> src/view.tsx

src/index.tsはReact（厳密にはJSX）を使う場合はsrc/index.tsxにしましょう。src/view.tsxについても、特にReact(JSX)を書く予定がなければsrc/view.tsで良いと思います。

tsconfig.jsonを作成する

TypeScriptで開発するためのConfigファイルを作成しましょう。tsx --initで作れます。

% npx tsc --init

Created a new tsconfig.json with:                                                                                       
                                                                                                                     TS 
  target: es2016
  module: commonjs
  strict: true
  esModuleInterop: true
  skipLibCheck: true
  forceConsistentCasingInFileNames: true


You can learn more at https://aka.ms/tsconfig

tsconfig.jsonが生成されますので、complierOptionsにある以下の2つを設定しましょう。

    "compilerOptions": {
        "jsx": "react-jsx",
        "resolveJsonModule": true,

これでReactのJSXやblock.jsonファイルの読み込みができるようになります。

型設定を読み込ませる

デフォルトではいくつかのライブラリが型定義情報を持っていません。そのため、@typesからインストールしましょう。

% npm i -D @types/wordpress__blocks @types/wordpress__block-editor

この辺りは、利用するライブラリによって増減することもあります。

registerBlockTypeの型エラーを解決する

デフォルトでは一部のパラメータが省略されているため、型エラーが発生します。次のように変更しましょう。

registerBlockType( metadata.name, {
    title: metadata.title,
    attributes: {},
    category: metadata.category,
    /**
     * @see ./edit.js
     */
    edit,

    /**
     * @see ./save.js
     */
    save,
} );

もしattributesをblock.jsonで設定している場合は、次のように設定します。

registerBlockType( metadata.name, {
    title: metadata.title,
    attributes: metadata.attributes as any,
    category: metadata.category,
    /**
     * @see ./edit.js
     */
    edit,

    /**
     * @see ./save.js
     */
    save,
} );

anyを使っていますが、もし適切な型定義をご存知の方がいらっしゃれば教えてもらえると助かります。

おわりに

「なんのために必要か」がわかれば、作業自体はそこまで特別ではなさそうです。ただし慣れるなでは高確率で忘れそうなので、このような覚書を作りつつ頭の中を整理していこうと思います。