Block Editor WordPress

WordPress/gutenberg

Blockの関連事項は、大きく3つに分けられる。

テーマをコアブロック(Core Block）に対応
カスタムブロック(Custom Block）を作成（プラグイン）
開発環境（@wordpress/env / wp-env）

Block Editor レファレンス

ブロックエディターハンドブック（日本語）
Block Editor Handbook（英語）
ブロックコントロール: ブロックツールバーと設定サイドバー
https://github.com/WordPress/gutenberg/blob/c938222e90ef772fa453edac9605a59008712bdf/packages/block-library/src/column/edit.js
https://developer.wordpress.org/block-editor/reference-guides/filters/block-filters/（コアブロックにスタイルを追加）
https://capitalp.jp/2019/10/15/customize-with-registerblockstyle/

テーマをコアブロック(Core Block）に対応

コアブロック対応は下記内容を実装すれば良い。

[Theme Support

Block Editor Handbook

WordPress Developer Resources](https://developer.wordpress.org/block-editor/developers/themes/theme-support/)

コアブロックスタイル

コアブロックの基本スタイルは、デフォルトでブロックエディタ・フロント両方に読み込まれる
- フロントで読み込むスタイルはwp-includes/css/dist/block-library/style.min.css
コアブロックのオプショナルなスタイルは、add_theme_support( 'wp-block-styles' )でOpt-inする
- フロントで読み込むスタイルはwp-includes/css/dist/block-library/theme.css（SCRIPT_DEBUGがfalseの場合はtheme.min.css）

エディタ側・フロント側の両方にCSSを追加する場合はenqueue_block_assetsフックを使用する。 wp-includes/css/dist/block-library/style.min.css、theme.cssの後に読み込まれる。

add_action( 'enqueue_block_assets', function() {
    wp_enqueue_style( 'block', get_template_directory_uri() . '/block.css' );
});

エディタ側のみに読み込むCSSはenqueue_block_editor_assetsフックを使用する。

add_action( 'enqueue_block_editor_assets', function() {
    wp_enqueue_style( 'block-editor', get_template_directory_uri() . '/block-editor.css' );
});

参考: https://qiita.com/TetsuakiHamano/items/a71eae47e444a31b8b8e

コアブロック拡張

https://capitalp.jp/2019/10/15/customize-with-registerblockstyle/

カスタムブロック(Custom Block）作成（プラグイン）

以下のチュートリアルが分かりやすいので、最初に取り組むのに良い。

ブロックエディターハンドブック / チュートリアル / ブロック（日本語）
[Blocks Block Editor Handbook](https://developer.wordpress.org/block-editor/tutorials/block-tutorial/)（英語）

属性（attributes）の編集・保存については以下を参照。

https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/

カスタムブロック開発環境

[Development Environment Block Editor Handbook](https://developer.wordpress.org/block-editor/tutorials/devenv/)

$ npm -g install @wordpress/env
$ mkdir -p /path/to/project
$ cd /path/to/project
$ npx @wordpress/create-block starter-block（スターターブロックを追加）
$ cd starter-block
$ wp-env start

The wp-env script is used to create a Docker WordPress environment. You can use this script to start an environment with your plugin activated by running it from the directory containing your plugin.

https://developer.wordpress.org/block-editor/tutorials/devenv/

ブロック名（namespace/block-name）

ブロック名はブロックを一意に識別する固有の文字列で、「namespace/block-name」の形式を取る。namespaceはプラグインやテーマの名前になる。

参考: https://ja.wordpress.org/team/handbook/block-editor/developers/block-api/block-registration/

$ npx @wordpress/create-block --namespace kanagata

ブロックスタイル

ブロックには2種類のスタイルを定義できる。

editor側のみに読み込むスタイル
editor側とfront側の両方に読み込むスタイル

$ npx @wordpress/create-block --namespace kanagata sample

// sample.php
function kanagata_sample_register_block() {
    wp_register_script(
        'sample-block-script',
        plugins_url( 'block.js', __FILE__ ),
        array( 'wp-blocks', 'wp-element' ),
        filemtime( plugin_dir_path( __FILE__ ) . 'block.js' )
    );

    // editor側のみに読み込むスタイル
    wp_register_style(
        'sample-block-editor-style',
        plugins_url( 'editor.css', __FILE__ ),
        array( 'wp-edit-blocks' ),
        filemtime( plugin_dir_path( __FILE__ ) . 'editor.css' )
    );

    // editor側とfront側の両方に読み込むスタイル
    wp_register_style(
        'sample-block-style',
        plugins_url( 'style.css', __FILE__ ),
        array(),
        filemtime( plugin_dir_path( __FILE__ ) . 'style.css' )
    );

    register_block_type( 'kanagata/sample', array(
        'apiVersion'    => 2,
        'style'         => 'sample-block-style',        /* editor側とfront側の両方に読み込むスタイル */
        'editor_style'  => 'sample-block-editor-style',  /* editor側のみに読み込むスタイル */
        'editor_script' => 'sample-block-script',        /* スクリプトは当然editor側のみに読み込む */
    ) );
}
add_action( 'init', 'kanagata_sample_register_block' );

コンポーネントとコアブロック

コアブロック（core/image、core/paragraphなど）はWordPress Coreソースのwp-includes/blocksに格納される（例:core/imageはwp-includes/blocks/imageに対応）
RichTextコンポーネントはnpmパッケージ@wordpress/rich-textに格納。@wordpress/rich-textは@wordpress/block-editorから呼び出される

Core block

https://wordpress.org/support/article/blocks/
https://gist.github.com/DavidPeralvarez/37c8c148f890d946fadb2c25589baf00

RichText Reference

Block Patterns

ブロックパターン

Components reference

https://developer.wordpress.org/block-editor/components/

wp-env

https://github.com/WordPress/gutenberg/tree/trunk/packages/env
https://developer.wordpress.org/block-editor/packages/packages-env/
https://ja.wordpress.org/team/handbook/block-editor/reference-guides/packages/packages-env/（日本語訳）

インストール

$ npm -g install @wordpress/env

$ npm list -g --depth=0
/Users//.nvm/versions/node/v15.13.0/lib
├── @wordpress/env@4.0.0
└── npm@7.8.0

アップデート

$ npm -g update @wordpress/env

起動

$ cd /path/to/target_plugin
$ wp-env start

$ wp-env startはdevelop/test/cliの3環境、計6コンテナを起動する。

Dockerfile / docker-compose.yml

グローバルにインストールした場合は、~/.wp-env/に作成される。

例）docker-compose.yml

version: '3.7'
services:
  mysql:
    image: mariadb
    ports:
      - '3306'
    environment:
      MYSQL_ROOT_PASSWORD: password
      MYSQL_DATABASE: wordpress
    volumes:
      - 'mysql:/var/lib/mysql'
  tests-mysql:
    image: mariadb
    ports:
      - '3306'
    environment:
      MYSQL_ROOT_PASSWORD: password
      MYSQL_DATABASE: tests-wordpress
    volumes:
      - 'mysql-test:/var/lib/mysql'
  wordpress:
    build: .
    depends_on:
      - mysql
    image: wordpress
    ports:
      - '${WP_ENV_PORT:-3333}:80'
    environment:
      WORDPRESS_DB_USER: root
      WORDPRESS_DB_PASSWORD: password
      WORDPRESS_DB_NAME: wordpress
    volumes: &ref_0
      - 'wordpress:/var/www/html'
      - '/Users//workspace/src/github.com//columns:/var/www/html/wp-content/plugins/columns'
  tests-wordpress:
    depends_on:
      - tests-mysql
    image: wordpress
    ports:
      - '${WP_ENV_TESTS_PORT:-8889}:80'
    environment:
      WORDPRESS_DB_USER: root
      WORDPRESS_DB_PASSWORD: password
      WORDPRESS_DB_NAME: tests-wordpress
      WORDPRESS_DB_HOST: tests-mysql
    volumes: &ref_1
      - 'tests-wordpress:/var/www/html'
      - '/Users//workspace/src/github.com//columns:/var/www/html/wp-content/plugins/columns'
  cli:
    depends_on:
      - wordpress
    image: 'wordpress:cli'
    volumes: *ref_0
    user: '33:33'
    environment:
      WORDPRESS_DB_USER: root
      WORDPRESS_DB_PASSWORD: password
      WORDPRESS_DB_NAME: wordpress
  tests-cli:
    depends_on:
      - tests-wordpress
    image: 'wordpress:cli'
    volumes: *ref_1
    user: '33:33'
    environment:
      WORDPRESS_DB_USER: root
      WORDPRESS_DB_PASSWORD: password
      WORDPRESS_DB_NAME: tests-wordpress
      WORDPRESS_DB_HOST: tests-mysql
  composer:
    image: composer
    volumes:
      - '/Users//workspace/src/github.com//columns:/app'
  phpunit:
    image: 'wordpressdevelop/phpunit:latest'
    depends_on:
      - tests-wordpress
    volumes:
      - 'tests-wordpress:/var/www/html'
      - '/Users//workspace/src/github.com//columns:/var/www/html/wp-content/plugins/columns'
      - 'phpunit-uploads:/var/www/html/wp-content/uploads'
    environment:
      LOCAL_DIR: html
      WP_PHPUNIT__TESTS_CONFIG: /var/www/html/phpunit-wp-config.php
      WORDPRESS_DB_USER: root
      WORDPRESS_DB_PASSWORD: password
      WORDPRESS_DB_NAME: tests-wordpress
      WORDPRESS_DB_HOST: tests-mysql
volumes:
  wordpress: {}
  tests-wordpress: {}
  mysql: {}
  mysql-test: {}
  phpunit-uploads: {}

それぞれWORDPRESS_DB_USER: root、WORDPRESS_DB_PASSWORD: password、WORDPRESS_DB_NAME: wordpressのような環境変数が定義される。

例）Dockerfile

FROM wordpress

RUN apt-get -qy install $PHPIZE_DEPS \
	&& pecl install xdebug \
	&& docker-php-ext-enable xdebug

RUN touch /usr/local/etc/php/php.ini
RUN echo 'xdebug.start_with_request=yes' >> /usr/local/etc/php/php.ini
RUN echo 'xdebug.mode=off' >> /usr/local/etc/php/php.ini
RUN echo 'xdebug.client_host="host.docker.internal"' >> /usr/local/etc/php/php.ini

トラブルシュート

mysqlcheck: Got error: 1130: Host '192.168.80.5' is not allowed to connect to this MariaDB server when trying to connect

対策1
対策2

対策1

rootユーザーをどのホストからでも接続可能にする。

MariaDB > CREATE USER 'root'@'%';
MariaDB > GRANT ALL ON *.* TO 'root'@'%';

コンテナを停止 → 起動。

$ wp-env stop
$ wp-env start

対策2

対策1で解決できなかった場合。

npmと@wordpress/envを最新バージョンにアップデートする。

$ npm -g update npm
$ npm -g update @wordpress/env

以下を順番に試す。

コンテナをストップ＆スタート：$ wp-env stop && wp-env start
解決しない場合は、コンテナを停止：$ wp-env stop
ボリューム（データベース）をクリア：$ wp-env clean all
$ wp-env destroy
イメージを削除
$ wp-env start

wp-env destroyを使用してローカルのDockerコンテナとボリュームを強制的に削除できる。ゼロからやり直すことができる。

参考: https://ja.wordpress.org/team/handbook/block-editor/reference-guides/packages/packages-env/

上記をすべて試しても以下のエラーが発生することがあった。しかし繰り返し$ wp-env startを実行したところ正常に起動した（Docker Hubへの一時的な接続エラーとみられる）。

$ wp-env start
✖ Error while running docker-compose command.
Pulling mysql           ... error
Pulling tests-mysql     ... error
Pulling wordpress       ... error
Pulling tests-wordpress ... done
Pulling cli             ... error
Pulling tests-cli       ... error
Pulling composer        ... done
Pulling phpunit         ... done

ERROR: for mysql  Get https://registry-1.docker.io/v2/: EOF
ERROR: for cli  Head https://registry-1.docker.io/v2/library/wordpress/manifests/cli: EOF
ERROR: for tests-cli  Head https://registry-1.docker.io/v2/library/wordpress/manifests/cli: EOF
ERROR: for wordpress  Get https://registry-1.docker.io/v2/: EOF
ERROR: for tests-mysql  Head https://registry-1.docker.io/v2/library/mariadb/manifests/latest: EOF

ESNext

https://developer.wordpress.org/block-editor/tutorials/javascript/esnext-js/

Block Editor | WordPress