[WordPress]1分でGutenbergのカスタムブロック開発を始める[WP10]

WP10は弊社が掲げる「WordPressを使った１０倍速開発」です。
10倍とは、フルスクラッチに比べて10倍ということです。

この連載ではWP開発に長く携わっている弊社のWordPress開発ベストプラクティスを発信していきます。

第五回はGutenbergのカスタムブロックを開発する環境をDockerを使って一瞬で整えます。

create-guten-blockでGutenbergブロックのプラグインを作成しました。この作成にはnpmをインストールする必要があるため、少々手間取ります。そこで、東方の環境にてcreate-guten-blockコマンドで作成したファイルをzipにまとめました。

wordpressのイメージを使用したdocker.ymlを使用しているので、docker-compose up で立ち上げれば、ローカル環境ですぐにGutenbergのカスタムブロックのプラグインを試すことができます。

ダウンロードはこちら

（ymlは下記記事のものを使用しています）

ディレクトリ構成

.
├── docker-compose.yml
└── plugins
   ├── gutenberg
   │   ├── README.md
   │   ├── build
   │   ├── changelog.txt
   │   ├── gutenberg.php
   │   ├── languages
   │   ├── lib
   │   ├── packages
   │   ├── post-content.php
   │   ├── readme.txt
   │   └── vendor
   └── my-block
       ├── README.md
       ├── dist
       ├── node_modules
       ├── package-lock.json
       ├── package.json
       ├── plugin.php
       └── src
           ├── block
           │   ├── block.js
           │   ├── editor.scss
           │   └── style.scss
           ├── blocks.js
           ├── common.scss
           └── init.php

2039 directories, 16235 files

my-blockプラグインの中に@babelやeslintなどのnode_modulesがたくさん入っているので、ファイル自体の容量は重めです。

docker.ymlの内容

version: '2'

services:
  wordpress:
    image: wordpress:latest
    ports: 
      - "3001:80"
    volumes:
      - ./plugins:/var/www/html/wp-content/plugins
    environment:
      WORDPRESS_DB_NAME: wordpress
      WORDPRESS_DB_USER: mysql_user
      WORDPRESS_DB_PASSWORD: mysql_pw

  mysql:
    image: mysql:5.7
    environment: 
      MYSQL_ROOT_PASSWORD: root_pw
      MYSQL_DATABASE: wordpress
      MYSQL_USER: mysql_user
      MYSQL_PASSWORD: mysql_pw

（参考） create-guten-blockで手軽にGutenbergプラグイン開発環境を整える