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です。

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

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

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

    カスタムブロックですが、WP-CLIを使うのが正直一番楽です。 WP-CLIのある開発環境を用意する VCCWやWockerがカスタマイズできて便利ですが、黒い画面に抵抗のある人はLocal by Flywheel使いま ...

    ただ、デフォルトだと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 -v

    以下のように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で作成したローカル環境のプラグインフォルダに移動します。

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

    cd "C:\Users\USERNAME\Local Sites\XXXXXX\app\public\wp-content\plugins"

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

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

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

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

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

    プロジェクトの作成

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

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

      npx create-guten-block demo-block

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

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

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

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

      Gutenbergプロジェクト作成後

      全メッセージはこちら。

      C:\Users\USERNAME\Local Sites\demo\app\public\wp-content\plugins>npx create-guten-block demo-block
      npx: installed 113 in 5.998s
      
      
         Creating a WP Gutenberg Block plugin called:  demo-block
      
       In the directory: C:\Users\USERNAME\Local Sites\demo\app\public\wp-content\plugins\demo-block
       This might take a couple of minutes.
      
      √ 1. Creating the plugin directory called →  demo-block
      √ 2. Installing npm packages...
      √ 3. Creating plugin files...
      
      
      <img draggable="false" data-mce-resize="false" data-mce-placeholder="1" data-wp-emoji="1" class="emoji" alt="✅" src="https://s.w.org/images/core/emoji/11/svg/2705.svg">   All done! Go build some Gutenberg blocks.
      
      CGB (create-guten-block) has created a WordPress plugin called  demo-block  that you can use with zero configurations #0CJS to build Gutenberg blocks with ESNext (i.e. ES6/7/8), React.js, JSX, Webpack, ESLint, etc.
      
      Created demo-block plugin at: C:\Users\USERNAME\Local Sites\demo\app\public\wp-content\plugins\demo-block
      Inside that directory, you can run several commands:
      
      
         Type  npm start
      
            Use to compile and run the block in development mode.
            Watches for any changes and reports back any errors in your code.
      
      
         Type  npm run build
      
            Use to build production code for your block inside dist folder.
            Runs once and reports back the gzip file sizes of the produced code.
      
         Type  npm run eject
      
            Removes this tool and copies build dependencies, configuration files
            and scripts into the plugin folder. <img draggable="false" data-mce-resize="false" data-mce-placeholder="1" data-wp-emoji="1" class="emoji" alt="⚠️" src="https://s.w.org/images/core/emoji/11/svg/26a0.svg">  It's a one way street.
            If you do this, you can’t go back!
      
      
       <img draggable="false" data-mce-resize="false" data-mce-placeholder="1" data-wp-emoji="1" class="emoji" alt="✊" src="https://s.w.org/images/core/emoji/11/svg/270a.svg">   Support create-guten-block →
      
      Love create-guten-block? You can now support this free and open source project. Supporting CGB means more updates and better maintenance:
      
        Support for one hour or more → https://AhmdA.ws/CGB99
        More ways to support → https://AhmdA.ws/CGBSupport
      
      
        Get Started →
      
       We suggest that you begin by typing:
      
        cd demo-block
        npm start
      
      

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

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

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

      We suggest that you begin by typing:

      cd demo-block
      npm start

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

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

      cd demo-block

      cd demo-block

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

      npm start

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

      Let's build and compile the files...

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

      作成される主なファイル

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

      ├── package.json(パッケージ情報)
      ├── README.md(Readme情報)
      ├── plugin.php(プラグインとして最初に読み込まれるPHPファイル)
      ├── dist(ビルドしたファイルが格納される)
      |  ├── blocks.build.js(jsファイルをすべてまとめてビルドしたファイル)
      |  ├── blocks.editor.build.css(エディター用のSCSSファイルをすべてまとめてビルドしたファイル)
      |  └── blocks.style.build.css(公開ページ用のSCSSファイルをすべてまとめてビルドしたファイル)
      └── src(主にこのフォルダで編集を行う)
        ├── block(カスタムブロックフォルダ)
        |  ├── block.js(ここのブロックの動作を書く)
        |  ├── editor.scss(エディター上のCSSを書く)
        |  └── style.scss(公開ページ上のCSSを書く)
        ├── blocks.js(作成したカスタムブロックjsファイルをインポートする)
        ├── common.scss(共通するCSSを書く)
        └── init.php(CSSやスクリプトの読み込み処理を書く)

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

      参考 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ファイル内でインポートする

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

      import './block/block.js';
      import './block-add/block.js'; //←インポートを追記していく

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

      まとめ

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

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

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

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