Windowsにブロックエディター(Gutenberg)開発環境を構築する方法

WordPress5.0でブロックエディター(以下、Gutenberg)が標準化されました。

Gutenbergのカスタムブロック開発を手軽に行うには、開発環境をしっかり構築しておく必要があると思います。

一応、開発環境を構築しなくても、WordPressのローカル環境があり、JavaScriptが書ければブロック開発をすることは可能です。

けれど、JavaScriptオンリーで書くには、複雑かつ冗長な記述になり、逆に開発の手間がかかるように思います。

なので開発で楽をするなら開発環境を整えておくことをおすすめします。

というわけで以下では、「僕がいろいろGutenberg開発環境試した結果、最も簡単だった構築方法」の紹介です。

スポンサーリンク
レクタングル(大)広告

主な手順

GutenbergでReact(JSX)を用いた開発環境をWindowsに作成する主な手順はこちら。

  1. WordPressローカル環境を準備しておく
  2. Node.jsをインストールする
  3. ターミナルでローカルのpluginsフォルダーに移動
  4. プロジェクトの作成
  5. カスタムブロックを動作させてみる
  6. プラグインの動作確認

今回は、単に開発できる環境を整えるまでの紹介です。

    WordPressローカル環境を準備しておく

    Local by Flywheel

    まずは、Windows上で動作するWordPressローカル環境は必要になります。

    個人的なおすすめは、Local by Flywheelです。

    Local is a free local development environment designed to simplify the workflow of WordPress developers and designers. Download it for free today!

    インストール方法はこちら。

    先日、Wordpressローカル環境のLocal by Flywheelを使ってみました。そしたら、余りにも使い勝手が良いの...

    ちなみに、Local by FlywheelだけでもWP-CLIを用いることで、カスタムブロック作成はできます。

    カスタムブロックですが、WP-CLIを使うのが正直一番楽です。 目次 WP-CLIのある開発環境を用意するプラグインフォルダを用意するカスタムブロックをセットアップするscaffoldしたファイルをプラグインで呼び出すs

    ただ、デフォルトだとJavaScriptオンリー(Reactを使用しない)開発になってしまうため、逆に難しいです。

    Node.jsをインストールする

    Node.jsロゴ

    React(JSX)で開発を行うには、Node.jsというサーバーサイド環境をインストールしておく必要があります。

    Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

    ページを開いたらNode.jsをダウンロードします。今回の用途であれば「推奨版」でOKかと思います。

    Node.jsのダウンロード

    ダウンロードし、インストーラーを起動すると、以下のような画面が表示されるので、「Next」等を押していけばインストールが完了します。

    Node.jsのインストール

    特に難しいことはないかと思います。

    インストールが完了したら、コマンドプロンプトを立ち上げます。

    Windowsボタンを右クリックするなどして「ファイル名を指定して実行」メニューを選択します。

    ファイル名を指定して実行

    名前部分に「cmd」と入力してOKボタンを押します。

    コマンドプロンプトを開く名前を入力する

    コマンドプロンプトが開くので、以下のコマンドを入力してみてください。

    以下のようにNode.jsのバージョンが表示されれば、インストールは成功です。

    node -v

    うまく表示されない場合は、コマンドプロンプトを再起動してみてください。それでもうまくいかない場合は、Windowsを再起動してみてください。

    Gutenberg開発でおすすめのWindowsターミナル

    コマンドプロンプトでも、Gutenberg開発は十分にできます。

    ただ、コマンドプロンプトの場合、コマンドの履歴保存や、タブ表示ができないため個人的には以下のターミナル(シェル)環境がおすすめです。

    ConEmu&nyaos。

    Windowsデフォルトのコマンドプロンプトは、どうも使いにくいです。Ruby on Railsなどを書いていると、コマンド...

    Cmder&nyaos。

    僕はこれまで、Windowsのターミナルは、ConEmu+nyaosを利用していました。というのも、Windowsに...

    Console2&nyaos。

    Windowsのコマンドプロンプトはどうも苦手です。と言うのも実行したコマンド履歴が保存されないからです。1度、その...

    タブ化ソフトは好みで。シェルはnyaosがおすすめ。

    ターミナルでローカルのpluginsフォルダに移動

    次に、Local by Flywheelで作成したローカル環境のプラグインフォルダに移動します。

    移動コマンドはこんな感じ。

    USERNAMEには、パソコンログイン用のユーザーネームを入力。

    XXXXXXには、作成したサイトのスラッグを入力。

    cd するパスは「Local Sites」という半角スペースが入ったフォルダがあるので、全体をダブルクォーテーション(”)で囲む必要があります。

    cdコマンドを実行すると、現在の場所が変わります。

    チェンジディレクトリでプラグインフォルダに移動

    プロジェクトの作成

    次に「demo-block」というフォルダにプロジェクトを作成します。

    プロジェクトを作成するコマンドはこちら。

      「demo-block」部分がプロジェクト名(プラグインフォルダ名)になります。

      コマンド実行中は、以下のような画面が表示され、しばらく待つ必要があります。

      create-guten-blockコマンドを実行中

      プロジェクトの作成が終わると、以下のような画面になります。

      Gutenbergプロジェクト作成後

      全メッセージはこちら。

      カスタムブロックを動作させてみる

      あとは、試しにデフォルトで作成されるカスタムブロックを動作させてみましょう。

      先程の長いメッセージの最後の方に以下のコマンド案内がありました。

      We suggest that you begin by typing:

      cd demo-block
      npm start

      あとはコマンドプロンプト上で、この通りに行えば良いだけです。

      cdコマンドで作成したプラグインフォルダに場所を移動します。

      cd demo-block

      あとは、以下のコマンドを実行して、構築が完了します。

      npm startコマンドを開始すると、コマンドプロンプトは以下のような状態になります。

      Let's build and compile the files...

      この状態になると、「demo-block」フォルダー内を監視し、変更があれば自動でビルドしてくれる状態になります(※詳しい説明は省きます)。

      作成される主なファイル

      開発環境が構築されると、以下のようなファイル構造が作成されます。

      主に必要となる部分のみで、特に利用しないファイルについては割愛してあります。

      参考 Create Guten BlockでGutenbergのカスタムブロック開発環境を構築する | webOpixel

      プラグインの動作確認

      最後にWordPressローカル環境管理画面のプラグインページに行き、「demo-block」が作成されているかを確認します。

      demo-block — CGB Gutenberg Block Plugin

      プラグインの有効化

      作成されていれば、プラグインを有効化します。

      カスタムブロックプラグインの有効化

      ブロックエディター

      投稿画面に移動して「ブロックの追加」から「一般ブロック」を選択して「demo-block」と表示されていれば正常に動作しています。

      demo-block — CGB Gutenberg Block Pluginブロックが表示される
      ちなみに、「demo-block」を選択するとGutenberg上では以下のように表示されます。

      Gutenberg上でのデモ動作

      公開ページでの表示

      公開ページ上では、以下のように表示されます。

      公開ページでのデモ動作

      新しいカスタムブロックを作るには

      今回は、デモだったのでデフォルトで生成されるカスタムブロック1つだけの紹介でした。

      その他のカスタムブロックを自作していく方法も簡単に書いておきます。

      1. 「src」フォルダ内の「block」をコピーして別名で保存(例として「block-add」とする)
      2. 「block-add」フォルダ内のblock.js、editor.scss、style.scssの内容を変更する
      3. 「src」フォルダ内のblocks.jsファイル内でインポートする

      インポート記述はこんな感じ。

      たったこれだけで、新しくカスタムブロックを追加作成していくことができます。超簡単。

      まとめ

      Gutenbergの開発環境を構築するには、他にもいくつかあると思います。

      ただ冒頭でも書きましたが、僕がWindows環境でいろいろ試してみた限りでは、これが最も簡単でした。

      スタイルもデフォルトでSCSSで書いたら、勝手にCSSにビルドしてくれるのも楽でいいです。

      とりあえず、「Windowsで簡単にカスタムブロックの開発環境を整えたい」ということであれば今回の方法はおすすめです。