#
ドキュメント

Document

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

Block Editor

Blockの領域は、大きく2つに分けられる

  • テーマをコアブロック(Core Block)に対応
    • コアブロックに対応
  • カスタムブロック(Custom Block)作成(プラグイン)

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.csswp-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_assets', function() {
    wp_enqueue_style( 'block-editor', get_template_directory_uri() . '/block-editor.css' );
});

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

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

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

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

  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/

Appendix

wp-env

https://developer.wordpress.org/block-editor/packages/packages-env/

npm list -g --depth=0
/Users/shiroshi/.nvm/versions/node/v14.15.4/lib
├── @wordpress/env@3.0.0
└── npm@6.14.10

トラブルシュート

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

2度目起動 したら上記エラーが発生

rootユーザーをどのホストからでも接続可能にした

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

コンテナを停止 -> 起動

$ wp-env stop
$ wp-env start

Components reference

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

ESNest

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