[Gutenberg]カスタムブロックの作り方

WordPress 5.0から採用された新エディタGutenberg(グーテンベルグ)に自分好みのカスタムブロックが作成できるようなので挑戦してみます。

公式サイトにもチュートリアルが公開されています。

開発環境の用意

公式サイトの開発環境のセットアップ方法を参考に進めていきます。

最初に手順をまとめておきます。

1. Node.jsのバージョン管理ツールnvm(Node Version Manager)をインストール
2. nvmでNode.jsをインストール
3. WordPressの開発用パッケージをインストール

Node.jsのバージョン管理ツールnvm(Node Version Manager)をインストール

Windows用にnvm-windowsが用意されているのでこれをインストールしていきます。

今回はマニュアルインストールするので、手動で設定が必要が必要です。公式のマニュアルインストール方法はこちらに載っています。

GitHubからnvmインストーラーをダウンロード

GitHubにアクセスし、nvm-noinstall.zipをダウンロードします。

ダウンロードしたZIPを解凍

ZIPファイルを解凍し「nvm-windows」フォルダを任意の場所に設置します。

C:\tools\nvm

nvmの動作に必要なのは下記の3ファイルがあるか確認します。その他にも2つファイルがありますが残しておいても問題ありません。

nvm
|- elevate.cmd
|- elevate.vbs
|- nvm.exe

システム環境変数を更新

「システム環境変数」にNVM_HOMEとNVM_SYMLINKの2つを追加し、Pathを更新します。

まずはシステムのプロパティ画面を開く

[Windows]+[R]キーで「ファイル名を指定して実行」ダイアログを表示させ、名前にsysdm.cplと入力し実行します。

「詳細設定」タブを選び「環境変数」ボタンをクリック

システム環境変数にNVM_HOMEを追加

変数値は解凍したnvmフォルダを設置した場所を指定します。

変数名：NVM_HOME
変数値：C:\tools\nvm

システム環境変数にNVM_SYMLINKを追加

ここで設定するフォルダはnode.jsのバージョンを識別するために使用されますが、nvmが自動で作成するのでフォルダは事前に作成する必要はありません。

変数名：NVM_SYMLINK
変数値：C:\tools\nodejs

システム環境変数にPathを編集

末尾に%NVM_HOME%と%NVM_SYMLINK%を追加します。

settings.txtをnvmフォルダ内に作成

実際にはコメント行（#から始まる行）は削除してください。

# NVM_HOMEで設定したフォルダパス
root: C:\tools\nvm
# NVM_SYMLINKで設定したフォルダパス
path: C:\tools\nodejs
# 導入するパソコンのOSによって変更。32bit = 32, 64bit = 64
arch: 64
# プロキシを利用している場合は変更が必要
# 設定する場合は、proxy: user:password@proxyServerName:port
proxy: none

# 最終的にnvmフォルダ内は下記の構成になっています。
nvm
|-elevate.cmd
|-elevate.vbs
|-nvm.exe
|-settings.txt

動作確認

最後に正常に動作するか確認してみます。

[Windows]+[R]キーで「ファイル名を指定して実行」ダイアログを表示させ、名前にcmdと入力し実行します。起動したコマンドプロンプトに下記のコマンドを実行してバージョンを確認します。

$ nvm version
1.1.7

# 以下のエラーが表示されたらsettings.txtの設定を確認してみましょう。
could not be found or does not exist. Exiting.

最新のNode.jsをインストール

--ltsは長期サポート対象の最新バージョンをインストールするオプションです。

$ nvm install --lts
#省略
Installation complete. If you want to use this version, type

nvm use 14.8.0

使用するNode.jsのバージョンをNVMに設定

インストール結果の最後に表示されているバージョンを設定します。

$ nvm use 14.8.0
Now using node v14.8.0 (64-bit)

Node.jsのバージョンを確認

設定したバージョンが表示されれば正常に動作しています。

$ node -v
v14.8.0

よく使うnvmのコマンド

リリースされているバージョンは公式サイトのリリース一覧から確認できます。

# NVMで管理しているNode.jsのバージョンを確認
$ nvm list

# Node.jsのバージョンを指定してインストール
$ nvm install [バージョン]

# Node.jsのバージョンを切り替える
$ nvm use [切り替えたいNode.jsのバージョン]