docs » wordpress
#
ドキュメント

Document

自分のための備忘録です。

Block Editor

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

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

Block Editor レファレンス。

目次

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

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

コアブロックスタイル

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

エディタ側、フロント側にCSSを追加する場合はenqueue_block_assetsフックを使用。
wp-includes/css/dist/block-library/style.min.css、wp-includes/css/dist/block-library/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）作成（プラグイン）

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

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

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

  1. $ npm -g install @wordpress/env
  2. $ mkdir -p /path/to/project
  3. $ cd /path/to/project
  4. $ npx @wordpress/create-block starter-block startar block 追加
  5. $ cd starter-block
  6. $ 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 {{block_name}}

ブロックスタイル

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

  1. editor側のみに読み込むスタイル
  2. editor側とfront側の両方に読み込むスタイル
$ npx wp-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', /* editor側のみに読み込むスタイル */
        'editor_script' => 'sample-block-script', /* スクリプトは当然editor側のみに読み込む */
    ) );
}
add_action( 'init', 'kanagata_sample' );

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

  • コアブロック（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

RichText Reference

Block Patterns

ブロックパターン

Components reference

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

wp-env

インストール

$ npm -g install @wordpress/env

$ npm list -g --depth=0
/Users/shiroshi/.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/{{hash}}に作成。

例）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/shiroshi/workspace/src/github.com/kanagata-block/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/shiroshi/workspace/src/github.com/kanagata-block/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/shiroshi/workspace/src/github.com/kanagata-block/columns:/app'
  phpunit:
    image: 'wordpressdevelop/phpunit:latest'
    depends_on:
      - tests-wordpress
    volumes:
      - 'tests-wordpress:/var/www/html'
      - >-
        /Users/shiroshi/workspace/src/github.com/kanagata-block/columns:/var/www/html/wp-content/plugins/columns
      - 'phpunit-uploads:/var/www/html/wp-content/uploads'
    environme
      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

以下を順番に試す

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

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

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

上記をすべて試したが以下エラーが発生。
しかし繰り返し$wp-env startを実行したら正常に起動した。

$ ｗp-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
Get https://registry-1.docker.io/v2/: EOF
Head https://registry-1.docker.io/v2/library/wordpress/manifests/cli: EOF
Head https://registry-1.docker.io/v2/library/wordpress/manifests/cli: EOF
Get https://registry-1.docker.io/v2/: EOF
Head https://registry-1.docker.io/v2/library/mariadb/manifests/latest: EOF

ESNest

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