1-1. 必要な準備について

本書を読むにあたり、事前に必要な準備があります。

1-1-1. 環境の準備

• WordPresのローカル開発環境は自分で用意してください。（レンサバ等にテストサイトを用意してももちろんOKです。）
• ベースにシンプルなテーマを入れ、プレーンな子テーマまたはプラグインを用意しておいてください。
  • もしくは、普段制作に使用しているシンプルな自作テンプレートテーマがあればそれでも大丈夫です。

1-1-2. PHPでの定数定義

用意した子テーマのfunctions.phpまたはプラグインファイル（your-plugin.phpとします）に、以下の定数を定義しておいてください。

▼ テーマの場合

define( 'MY_DIR_URL', get_stylesheet_directory_uri() );
define( 'MY_DIR_PATH', get_stylesheet_directory() );

▼ プラグインの場合

define( 'MY_DIR_URL', plugins_url( '', __FILE__ ) );
define( 'MY_DIR_PATH', untrailingslashit( plugin_dir_path( __FILE__ ) ) );

1-2. 本書について

1-2-1. レベル感

タイトルに「入門」とある通りあまり複雑な内容は扱いませんが、PHPのフックなどはある程度理解していることを前提に話を進めていきます。

普段から仕事でWordPressを扱っていて簡単な独自テーマくらいなら作れるけど、「ブロックエディター」に関してはまだ全然ついていけていない。

という人向けです。

• そろそろブロックエディターを軸にしてサイト制作していきたい人
• 公式チュートリアルの難易度が高くて一度挫折してしまった人
• 黒い画面でnpmとか使わなくてもいい方法が知りたい人

などにもおすすめの一冊となっています。

1-2-2. 本書で紹介するスクリプトについて

と思っている人が多いかと思います。（そしてそのせいでブロック開発のハードルが高くなってしまってかもしれません。）

が、実はそんなことはありません。

もちろん、がっつりとエディター機能を拡張したりカスタムブロックをたくさん作っていくような場合にはReact的な知識が必要で開発環境も整える必要がありますが、基本的な部分を理解するためにはまず、とりあえず実際に作って動かしてみることが大事だと思っています。

素のJSファイルに素のJSコードを書いていく方法で紹介していきます。
カスタムブロックの作成も、いつも通り普通にJS書いて、ファイル読み込ませるだけです。

ただし、ビルドなしの方法でその先もずっとやっていくのはおすすめしません。
本書で基本的な仕組みを理解できたら、本腰を入れて公式チュートリアルに取り組んでみてください。

1-2-3. 解説時に使用しているWordPressテーマ

本書では、コードを追記した際の変化についてスクリーンショット画像や画面の操作動画を添付して説明することがよくあります。

それらの画像等は、（別途記述がない限り）「Arkhe」という公式ディレクトリに登録されている無料テーマをベースにした状態でコードを書いた結果を撮影したものになります。

1-3. 本来参照すべき情報源について

本書では、主要な基本知識をざっくり紹介していきます。
しかしこれはあくまで、初心者の方が最初に勉強しやすいように執筆しているものです。

より実践的に開発を行っていくことになった場合は、公式の情報を参考にするべきだということを覚えておいてほしいです。

1-3-1. 公式ハンドブック

ブロックエディターに関する情報をまとめてくれている「公式ハンドブック」がちゃんと存在します。

英語版 : https://developer.wordpress.org/block-editor/
日本語版 : https://ja.wordpress.org/team/handbook/block-editor/

ということは念頭においたうえで、（本書のような）ネット上の情報を追加の参考資料として読んでいただくといいかなと思っています。

1-3-2. Gutenberg本体のソースコード

慣れてくると、直接本家のソースコードを読み漁るのがなんだかんだ一番参考になります。（高度なことに挑戦しようとすると、ググっても情報が出てこなくなってきます。 特に日本語だと。）

参考になると感じるまで時間がかかるかもですが、定期的にチェックしにいくとだんだんソースコードが理解できるようになってきて自分の成長を感じることもできます。（私もまだ全然分かりませんが...）

Gutenbergのソースコード(Github)： https://github.com/WordPress/gutenberg/

1-4. Gutenebrg予備知識

1-4-1. 「Gutenberg」？「ブロックエディター」？

「ブロックエディター」のことを「Gutenberg」と呼ぶ人もたくさんいて（私もよく混同します...）、「どっちで呼べばいいの？」と疑問に思うかもしれません。

この辺について一度整理しておきましょう。

• 「Gutenberg」とはWordPressが現在進めている壮大なプロジェクト名のことで、
• 「ブロックエディター」は、そのGutenbergプロジェクトの第一段階で実装された新しいエディターのことです。

ブロックエディター実装前は「Gutenberg = ブロックエディター」と呼ばれていたため、今でもごっちゃになって呼ばれています。

1-4-2. 「Gutenberg」プラグインについて

WordPress5.0でブロックエディターが本体に実装される前は、この「Gutenberg」プラグインをインストールしないとブロックエディターは利用できませんでした。

しかし今では、普通にブロックエディターを使う分にはこのプラグインは不要です。
では、このプラグインは今は何のためにあるのか？

テーマやプラグインの開発者たちが将来のWordPressに実装予定の機能をあらかじめテストするために導入するプラグインであり、普通にサイトを運営する上で必要になることはありません。

1-4-3. まだまだ変化が激しい

現在、Gutenbergプロジェクトは猛スピードで進められていて、WordPresのメジャーアップデートごとに大幅な仕様変更が含まれます。

ウィジェットエリアなどが今後新しくブロック化されるだけでなく、5.0で実装完了しているはずのコンテンツエリアのブロックエディターでさえ、5.8の現時点まで毎回かなりの変貌を見せています。

その辺りは予めご了承いただいた上で、お読みください。