概要
まずは、ターミナルを開いて、wordpressのpluginsのフォルダに移動します。GutenbergのBlockを簡単に作るには、create-guten-blockというジェネレータがいいらしいので、使ってみます。(Blockを作るには、nodejsが必要になります。)
pluginsフォルダに移動
今回の作業は、ターミナルを開いて、自分のwordpressのpluginsフォルダで実行します。私の場合、こんな感じのフォルダ。
cd /var/www/html/wp-content/plugins
Blockを作成
移動したら、「create-guten-block」コマンドで、pluginのテンプレートをジェネレートして、スタートします。
npx create-guten-block my-block
cd my-block
npm start
これでBlockのテンプレート作成は完了。
PluginをActivate
WordPressでこの作ったBlockを使うにはPluginのActivateが必要になります。管理画面のPluginsの一覧に作ったBlockが出てくるのでこれをActivateします。(「my-block — CGB Gutenberg Block Plugin」が上のコマンドで作成したものです。)
記事に作ったBlockを挿入
PluginでActivateした後、記事で「+」ボタンを押すと、Blockの中に、「CGB Block」が追加されていると思います。これを選べば、
記事の中に、こんな感じで作ったBlockが作成されます。
今回は、create-guten-block を叩いてそのままBlockとして使ってみました。そのうち、コマンドで生成されるファイルをいじって色々やっていきたいと思います。