1. HOME
  3. CSS

【WordPress】【Create Block ツール】Gutenberg オリジナルブロックの開発環境構築を解説

SHIROYA

SHIROYA

投稿日

WordPressのGutenbergのオリジナルブロックで公式の Create Block ツール を用いた開発環境構築方法を解説します。

公式からパッケージ @wordpress/create-block が提供されており、これを利用することでブロック開発を瞬時に始められるようになっています。

カスタム環境との違い

公式パッケージ @wordpress/create-block は自動でWebpackやBabelが構築、設定されます。

Create Block ツールでも設定を独自にカスタムすることは可能ですが、より柔軟な開発環境や、特殊な Webpack や Babel の設定が求められる場合は下記を参考に構築してください。

設定を簡素化したい場合や、ブロック開発のみに集中したい方は公式の@wordpress/create-blockをご利用下さい。

カスタム環境構築する方法はこちら

【WordPress】オリジナルブロックの開発環境構築を解説【Gute...

【WordPress】オリジナルブロックの開発環境構築を解説【Gute…

今回は、オリジナルブロックの開発環境構築方法を解説します。公式とはやり方は異なりますが、今回紹介する…
項目カスタム環境create-block
セットアップWebpack/Babel を手動で設定CLI で自動生成
Webpack や Babel の設定も
プリセットされる
ディレクトリ構成自分で設計し手動で
ファイルを作成		推奨構成やファイルを自動生成
ブロックの設定registerBlockType を使用block.json を利用
依存関係管理必要なモジュールを
手動インストール		必要な依存関係が最初から
用意されている
難易度少々高い簡単かつ手軽
複数ブロックの管理各ブロックを手動で登録block.json により一元管理

ブロック開発環境構築

オリジナルのブロックはテーマで実装するよりプラグインを作る方がおすすめなので、プラグインを作る流れで説明します。

また、ブロックの開発には、Reactを使う方法と使わない方法がありますが、Reactの方が便利なのでReactで開発します。

WordPressの開発環境を作成

WordPressの開発環境は「Local (旧 Local by flywheel 」が便利なので、開発環境がない方はそちらを使ってください。

【Mac】Local（旧 Local by Flywheel）でWordPress開発環境を...

【Mac】Local（旧 Local by Flywheel）でWordPress開発環境を…

今回は、「Local（旧 Local by Flywheel）」の導入方法と使い方を解説していきます…

デバッグ

PHPのエラー確認をするために、「Query Monitor」というプラグインをインストールしておきましょう。

Query Monitor – The developer tools panel for WordPress

エラーの箇所やPHPの処理にかかった時間を把握できます。

Node.jsのインストール

Node.jsは直接インストールするのではなく、nodenvのようなバージョン管理ツールを使うと便利です。

M1 Macにnodenvをインストール（Node.jsバージョン管理）

M1 Macにnodenvをインストール（Node.jsバージョン管理）

今回は、Node.jsのバージョン管理ツール、Nodenvのインストール方法を紹介します。Homeb…

nodenvがインストールできたら、Node.jsをインストールしてください。

今回はNode.jsのバージョン20.10.0で進めます。

@wordpress/create-block の実行

今回はプラグインを作る方法で解説するので、wp-content/plugins　まで移動します。

cd ./app/public/wp-content/plugins

wp-content/plugins　まで移動したら、以下のコマンドを実行してブロック開発に必要な環境構築及びファイル（ひな形）を作成します。

my-plugin は新しいプラグインの名前になります。いくつかoptionがありますがここでは詳しく説明しません。公式サイトをご確認下さい。

npx @wordpress/create-block my-plugin

質問が出てきますが、全てそのままEnterでOKです。

これだけで自動的に必要なファイルやディレクトリが生成されます。webpackやbabelも同時にインストール、設定がされます。

my-plugin/
├── build/               // ビルドされたファイルが入るディレクトリ
├── node_modules/        // 必要なnodeのモジュールが入っているディレクトリ
├── my-plugin.php        // プラグインのメインファイル(PHP)       
├── package-lock.json    // 依存パッケージのバージョンを固定するファイル(JSON)
├── package.json         // プロジェクト設定とパッケージ管理(JSON)
├── README.md            // ブロックの説明
└── src
     └── my-plugin
              ├── block.json       // ブロックの設定ファイル(JSON)
              ├── index.js         // ブロックのエントリーポイント(JavaScript)
              ├── edit.js          // エディター用の編集コード(JavaScript)
              ├── editor.scss      // エディター専用のスタイル(CSS)
              ├── save.js          // フロントエンド用の保存コード(JavaScript)
              ├── style.scss       // フロントエンド用のスタイル(CSS)
              └── view.js          // フロントエンド用の動作コード(JavaScript)
コマンド

以下のコマンドから起動とビルド、zipファイルの作成ができるようになります。

npm start   　　# 起動
npm run build   # ビルド
npm run plugin-zip # 配布用zipファイル作成
管理画面に入って有効化してみましょう
npm start   　　# 起動します。

これでbuildフォルダにファイルが生成され、管理画面に表示されるようになります。

プラグイン一覧に表示されたら「My Plugin」を有効化してください。

その他パッケージをインストール

ブロック開発用のパッケージ

ブロック開発用の主要パッケージ（例: @wordpress/blocks, @wordpress/i18n, @wordpress/block-editor）は @wordpress/scripts を通じて自動的にインストールされますが、特定の機能に必要な パッケージは含まれない場合があるため、確認後に手動でインストールしてください。

・@wordpress/scripts に含まれるものをリスト化

npm info @wordpress/scripts dependencies

・手動インストール例

以下は、頻繁に使用されますが @wordpress/scripts に含まれていない可能性があるパッケージです。

npm i -D @wordpress/core-data @wordpress/edit-post @wordpress/icons @wordpress/keycodes @wordpress/plugins @wordpress/primitives @wordpress/rich-text @wordpress/server-side-render @wordpress/url
その他のパッケージ

WordPress に組み込まれているバージョンではなく、個別で管理するためlodashやjQueryもインストールしておきます。

npm i jquery lodash -D

実際に開発してみよう

プラグインファイルを修正

必要なパッケージをインストールしたら、実際にファイルを作成してみましょう。

下記のコメントアウトがプラグインの情報を記述しているので、これが管理画面に表示されるようになります。

my-plugin.phpを以下のように修正します。

my-plugin.php
<?php
/**
 * Plugin Name:       My Plugin
 * Description:       Original Block Plugin.
 * Version:           0.1.0
 * Requires at least: 6.7
 * Requires PHP:      7.4
 * Author:            TomiwaTech.Inc
 * License:           GPL-2.0-or-later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain:       my-plugin
 *
 * @package CreateBlock
 */

ブロック定義ファイルの修正

/src/my-plugin/block.json

にはブロック固有の設定が入っています。（ブロックの名前やカテゴリー、アイコンの設定）必要に応じて修正します。

デフォルトは以下のようになっています。

icon smileyにセットされています。WordPressのDashiconsの中から指定できます。または、svgを直接記述すること可能です。
category widgetsにセットされています。
block.json
{
    "$schema":      "https://schemas.wp.org/trunk/block.json", 
    "apiVersion":   3,                             // 使用する Gutenberg API のバージョン
    "name":         "create-block/my-plugin",      // ブロックの名前（名前空間/ブロック名）
    "version":      "0.1.0",                       // ブロックのバージョン
    "title":        "My Plugin",                   // Gutenberg エディターで表示されるブロックのタイトル
    "category":     "widgets",                     // ブロックのカテゴリー
    "icon":         "smiley",                      // Gutenberg エディターで表示されるブロックのアイコン
    "description":  "Example block scaffolded with Create Block tool.", // ブロックの説明
    "example":      {},                            // エディターのブロックプレビュー
    "supports": {
        "html":     false                          // カスタム HTML をサポートしない設定
    },  
    "textdomain":   "my-plugin",                   // 翻訳用のテキストドメイン
    "editorScript": "file:./index.js",             // エディター用スクリプトのファイルパス
    "editorStyle":  "file:./index.css",            // エディター用スタイルのファイルパス
    "style":        "file:./style-index.css",      // フロントエンド用スタイルのファイルパス
    "viewScript":   "file:./view.js"           　  // フロントエンドで動作するスクリプトのファイルパス
}

「投稿」や「固定ページ」エディターを見ると「ブロック」の「ウィジェット」に以下のように追加されています。

ブロックの表示や挙動を修正

次に edit.jsとsave.js、index.js、view.js を修正します。それぞれの役割は下記となっています。

edit.js にはエディター側の処理を記載します。

save.js には保存されるHTMLに関する処理が記載されています。(フロントエンドで表示される静的なhtmlコード)
動的なブロック（サーバーサイドレンダリングを行うブロック）では、このファイルが不要な場合もあります。

view.js にはフロントエンドで実行される JavaScript を定義します。

例えば動的な挙動（クリックイベントやアニメーションなど）をブロックに追加します。
動的なブロック（render_callback を持つサーバーサイドレンダリングブロック）で使用されることが多いです。

エディター側でも動的な挙動が必要な場合はedit.jsに記載します。

両方で同じ動的な挙動をしたい場合は common.js 等を作成してコードを再利用します。(後で解説しています）

index.js にはブロックの登録ロジック が入っており、edit.js と save.js を統合し、block.json の設定に基づいてブロックを登録する役割（registerBlockTypeで登録） を担っています。

edit.js

既にデフォルトの挙動が入っていますが、今回は React で開発するため以下のように書き換えます。

edit.js（変更前）
export default function Edit() {
    return (
        <p { ...useBlockProps() }>
            { __( 'My Blocks2 – hello from the editor!', 'my-blocks2' ) } 
        </p>
    );  
}

↓　この箇所を以下のように書き換えます。

変更後
const Edit = () => {
    const blockProps = useBlockProps();

    return (
        <div {...blockProps}>
            <p className="my-block-test-msg">{ __('これはテストです。', 'my-blocks') }</p>
        </div>
    );
};

export default Edit;
save.js
save.js（変更前）
export default function save() {
    return (
        <p { ...useBlockProps.save() }>
            { 'My Blocks2 – hello from the saved content!' }
        </p>
    );
}

↓　この箇所を以下のように書き換えます。

save.js（変更後）
const Save = () => {
    const blockProps = useBlockProps.save();

    return (
        <div {...blockProps}>
            <p className="my-block-test-msg">これはテストです。</p>
        </div>
    );
};

export default Save;
index.js

今回は変更不要です。

CSS（SCSS）の読み込み

次に、SCSSが使えるようにしていきます。

@wordpress/create-block を利用する場合、CSSに関連するパッケージの多くが @wordpress/scripts にプリセットされているため、これらのパッケージを手動でインストールする必要は基本的にありません。

ただし、@wordpress/scripts は SCSS のサポートを前提としていないため、SCSSを利用する（コンパイルしてCSSにする）場合は以下のパッケージの追加が必要です。

npm i -D sass sass-loader

ここでもしエラーが出たら、以下のように--forceオプションを付与してください。

npm i -D sass sass-loader --force
style.scss

既にcssのコードが入っていますが、今回は scss を用いますので以下のように書き換えます。

style.scss 変更前
.wp-block-create-block-my-plugin {
    background-color: #21759b;
    color: #fff;
    padding: 2px;
}

↓　この箇所を例えば以下のように書き換えます。

style.scss 変更後
$background-color: #21759b;
$text-color: #fff;
$padding: 2px;

// ブロックスタイル
.wp-block-create-block-my-plugin {
    background-color: $background-color;
    color: $text-color;
    padding: $padding;
}

これでコードの修正は完了です。

作成したブロックを追加しフロントページで正しく確認ができるか確認して下さい。

ESLintを設定する

JavaScriptにエラーや無駄な記述がないかをチェックしてくれるのが、ESLintです。

エラーを防ぎ、コードをスッキリさせることもできます。

既に 入っていますので下記のコマンドで走らせることが可能です。

npm run lint:js

走らせるとエラーが出るかもしれないです。その場合は以下のコマンドから自動修正します。

npm run lint:js -- --fix

例えば下記はPrettier のインデントのエラーとなります。（タブがスペース2と決まっていますが、4つはいっているエラーです）

/app/public/wp-content/plugins/my-blocks/src/save.js
  26:1  error  Replace `····` with `↹`                                               prettier/prettier

次の設定ファイルを作成してruleを追加します。

.eslintrc.js
module.exports = {
    env: {
        browser: true,
        es6: true,
        node: true,
        amd: true,
    },
    ignorePatterns: [".eslintrc.js"], // この行で無視対象を指定
    extends: [
        "plugin:react/recommended",
        "plugin:@wordpress/eslint-plugin/recommended", // WordPress のルール
        "prettier" // Prettier のルールを統合
    ],  
    globals: {
        Atomics: "readonly",
        SharedArrayBuffer: "readonly",
        wp: "readonly",
    },  
    parserOptions: {
        ecmaFeatures: {
            jsx: true
        },  
        ecmaVersion: 2023, 
        sourceType: "module"
    },  
    plugins: [
        "react"
    ],  
    rules: {
        "no-alert": "off", // alertを許可
        "no-console": "warn",
        "no-unused-vars": "warn",
        "react/react-in-jsx-scope": "off",
        "react/display-name": "off",
        "react/prop-types": "off",
    },
    settings: {
        react: {
            version: "detect"
        }
    },
};

prettier をカスタマイズするには、プロジェクトのルートに .prettierrc ファイルを作成します。

.prettierrc
{
    "useTabs": false,
    "tabWidth": 4
}

ビルドする

最後に、開発したブロックをビルドし、WordPress に配布可能な ZIP ファイルを作成します。

@wordpress/create-block を使用すると、配布用の ZIP ファイルを簡単に作成できます。

ビルドの実行

下記のコマンドで srcフォルダ内のファイルが Webpackで最適化されたファイルを build/ フォルダに生成します。（JavaScript と CSS の最適化（圧縮や不要部分の削除））

npm run build

次に以下のコマンドでZIP 化します。
my-blocks.php（プラグインのメインファイル）や build/ 内の最適化済みファイルを ZIP 化。

npm run plugin-zip

コマンドの作成

上記の流れを1つのコマンドにするためpackage.jsonに以下を追加します。
（コードチェック、ビルド、ZIP 作成 の一連の作業をまとめて実行します。）

package.jsonの “scripts” の箇所に以下を追加します。

package.json
"scripts": {
    "build": "wp-scripts build",
    "format": "wp-scripts format",
    "lint:css": "wp-scripts lint-style",
    "lint:js": "wp-scripts lint-js",
    "packages-update": "wp-scripts packages-update",
    "plugin-zip": "wp-scripts plugin-zip",
    "start": "wp-scripts start",   //  （追加）最後に,を追加して下さい
    "build:zip": "npm run lint:js && npm run build && npm run plugin-zip" //（追加）チェック＋ビルド＋ZIP作成
},

あとは以下のコマンドを実行するだけでルートディレクトリにZipファイルが作成されます。

npm run build:zip

簡単ですね。

複数ブロックを開発

新しいpluginを作成

まずは先ほどと同じように新しいpluginファイルを作ります。
plugins ディレクトリまで移動します。

cd  ./app/public/wp-content/plugins

移動しましたら下記のように新しいプラグインファイルを作ります。

npx @wordpress/create-block my-plugin

ブロックを追加

次に新しいブロックの追加をします。作成した新しい plugin ディレクトリにある srcまで移動します。

cd my-plugin/src

移動したら下記を実行します。srcの中に新しいnew-block ディレクトリが作成され、その中にブロックのファイル（block.json, edit.js, save.js, style.scss など）が生成されます。

npx @wordpress/create-block new-block --namespace=my-plugin --no-plugin

--no-plugin　は、新しいプラグインとしてではなく、ブロックのファイル一式のみを作成するオプションです。
ブロック作成時に plugin.php や独自の package.json が生成されず、既存のプラグインに統合します。

--namespace　は、ブロックの名前空間を指定します。名前空間は WordPress 内でブロックを一意に識別するために使用されます。

例えば block.json の name フィールドが以下のように設定されます。

{
    "name": "my-plugin/new-block"
}

ディレクトリ構造は下記のようになります。

src
├── my-plugin
│   ├── block.json
│   ├── edit.js
│   ├── editor.scss
│   ├── index.js
│   ├── save.js
│   ├── style.scss
│   └── view.js
└── new-block
    ├── block.json
    ├── edit.js
    ├── editor.scss
    ├── index.js
    ├── save.js
    ├── style.scss
    └── view.js

plugin.phpの修正

続いて plugin の大本のファイル plugin.php　を下記のように編集します。

/plugins/my-plugin/my-plugin.php
function create_block_my_plugin_block_init() {
    register_block_type( __DIR__ . '/build/my-plugin' );
}

↓ buildディレクトリ以下のブロック毎のディレクトリを取得します。

/plugins/my-plugin/my-plugin.php
function create_block_my_plugin_block_init() {
    // build/ディレクトリ内のすべてのサブディレクトリを取得
    $block_directories = glob( __DIR__ . '/build/*', GLOB_ONLYDIR );

    // 各ディレクトリをループしてブロックとして登録
    foreach ( $block_directories as $block_directory ) {
        register_block_type( $block_directory );
    }
}

まとめ

今回は、公式の Create Block ツール でのオリジナルブロックの開発環境構築と、Static ブロックの作成方法について解説しました。

Static ブロックとは、保存時に生成されたデータをデータベースに保存し、そのデータを基にフロントエンドに出力するブロックです。

一方で、Dynamic ブロックとは、出力時にフロントエンド側でコンテンツを構築し、常に最新の状態を表示できる柔軟なブロックです。

それぞれの特性や活用方法について詳しく学ぶことで、より高度なブロック開発が可能になります。詳しくは WordPress公式ドキュメント をご覧ください。

これからオリジナルブロックを開発したいという方は参考にしてください。

その他の記事

【WordPress】オリジナルブロックの開発環境構築を解説【Gute...

【WordPress】オリジナルブロックの開発環境構築を解説【Gute…

今回は、オリジナルブロックの開発環境構築方法を解説します。公式とはやり方は異なりますが、今回紹介する…
WordPressのテーマを自作する方法【オリジナルテーマ開発】

WordPressのテーマを自作する方法【オリジナルテーマ開発】

今回は、オリジナルのWordPressテーマを自作する方法を紹介します。かなり長い記事ですが、数日か…
LPを作成できるおすすめWordPressテーマ・プラグイン（有料＆...

LPを作成できるおすすめWordPressテーマ・プラグイン（有料＆…

今回は、LP（ランディングページ）を制作できるWordPressテーマやプラグインを紹介します。Wo…
SHIROYA

SHIROYA

WEBマネージャー／エンジニア

株式会社トミワテックのWEBマネージャーです。
PHPやRuby on Railsを使用し数多くのサイトを開発してきました。
最近はpythonやアプリ開発も勉強中です。

  • PHP
  • Ruby
  • HTML/CSS
  • JavaScript
  • WordPress
  • SEO

関連記事

【CSS】アニメーションをCSSで実現する方法（1）

【Docker+nginx】HTMLファイルでPHPを実行する方法

【CSS】ボタンアニメーション16種類！コピペで今すぐ使える！

【HTML】pictureタグの使い方を紹介！レスポンシブもスマートに

関連キーワード