WordPressのために複数のブロックプラグインを作成する方法

写真でElodie Oudot on Unsplash
ファイルが欲しいですか?
あなたが私のようなせっかちであるならば、あなたはまっすぐに行くことができますthe code on GitHub .

単一のブロックプラグインの作成

一つのブロックプラグインを作成するためのパッケージがすでに存在していますので、複数のブロックプラグインを作成するための基礎として使用するつもりです.
のリリース以来@wordpress/create-block パッケージは、非常に簡単に開発されているブロックのプラグインを作成する(scaffolding)多くの容易になっている-それはWebpack、トランスポーター、SSS +全体の多くを設定するのは難しい仕事の多くを取る-私はいくつかのあなたのいくつかはまだ自分自身をロールバックする必要がありますが.
あなたが速く行くことを望むならば、私はよく知られることを勧めます@wordpress/create-block , しかし、我々はまだ最初からステップを通過します.
とにかく、最近、私は質問を見ました(Twitterで考える)-何か、このツールで複数のブロックを作成するには?
それで、私はこれに掘り下げていました、そして、それは私がこのポストで分担することを目指すものです.

ワードプレス/クリエイトブロックの設定

私はこれに簡単にしようとするが、深さのセットアップガイドの詳細については、上記のリンクに従うことができます.
新しいプラグインを作成する@wordpress/create-block .
ローカル開発環境で/wp-content/plugins/ ディレクトリを開き、そこから端末を開きます.

npx @wordpress/create-block multiple-blocks-plugin

それはセットアップにいくつかの時間を取ることができる、ドリンクをつかむ…!
これは、名前の付いたメインプラグインディレクトリを作成しますmultiple-blocks-plugin とデフォルトのプロジェクト構造.このディレクトリを入力し、devスクリプトを起動します.

cd multiple-blocks-plugin
npm run start

今すぐプラグインを使用する準備ができていると、WordPressのダッシュボードのプラグインページを介して有効にすることができます.
一旦有効になったら、セットアップがポストエディタを通してブロックを追加することによってうまくいったことを確認してください.

既存構造

上記のようにうまくいけば、プロジェクト構造を見て、複数のブロックをサポートするために再配置する必要があることを視覚化できます.
私はすべてのファイル/フォルダ、ちょうど関連するものを説明することはありません.

複数のブロックのプラグイン。PHP

これは、メインのプラグインファイルであり、それは信じられないほど簡単です-それはコールregister_block_type() カレントディレクトリを引数として、block.json ファイル().

ブロック。JSON

これはあなたのブロックのメイン設定ファイルです.where you define basic settings - また、あなたのブロック(エディタスクリプト、エディタスタイルと共有スタイル)で使用される他のファイルへの参照が含まれます.

src

The src ディレクトリは、あなたがあなたのブロックで仕事の大部分をしているところです.これは通常、あなたのスタイルと同様にあなたのブロックエディタ機能を追加する場所です.

ビルド

私たちは現代の開発スタックを使用しています--それは我々が我々のプロジェクトでESNEEDとJSXコードを書くことができることを意味します、しかし、それがすべてのブラウザーで使われる前に、それは変換されなければなりません.このプロセスは自動的に処理され、結果はこのディレクトリに置かれます.

パッケージ。JSON

このファイルにはnpm run start あなたのブロックを構築するために使用するスクリプト、我々はこれを更新し、作成する各ブロックのスクリプトを追加します.

複数のブロックに変換するプラグイン

では、既存の構造を変換するプロセスを開始し、複数のブロックをサポートする構造にしましょう.
ここで注意する主なことはblock.json , src , and build プロジェクト内のすべての他のファイルは、プラグイン/開発設定に関連します.

0 .すべてのブロックを格納するディレクトリを作成します

このような想像的な何かを挙げましょう.blocks :multiple-blocks-plugin/blocks/

The next steps can be repeated for every new block you want to create.

1 .ブロックのディレクトリを作成する

この場合、Buyボタンを使用します.multiple-blocks-plugin/blocks/buy-button/

2 .ブロック関連ファイルの識別とコピー

私たちは動くことができますblock.json , src and build 新しいブロックディレクトリに.
ディレクトリ構造は次のようになります.

ブロックのブロック設定を変更します。JSON

このステップは重要です、我々はブロック名とタイトルを何かユニークに更新する必要があります.これらは変更する2つのプロパティです.

"name": "multiple-blocks-plugin/buy-button",
"title": "Buy Button",

新しい名前のメモを取る-multiple-blocks-plugin/buy-button - 次のステップでそれを必要とするでしょう.

4 .新しいブロック名への更新参照

あなたのブロックでsrc ディレクトリ編集index.js :multiple-blocks-plugin/buy-button/src/index.jsを含む行を変更するregisterBlockType()新しい名前を使用する名前を更新します.

registerBlockType( 'multiple-blocks-plugin/buy-button', {

更新CSSクラス

以下の二つのscssファイルがあります.

blocks/buy-button/src/style.scss

blocks/buy-button/src/editor.scss

両方ともクラスを含みます:

.wp-block-create-block-multiple-blocks-plugin

しかし、クラス名は私たちのブロック名に基づいています.

.wp-block-multiple-blocks-plugin-buy-button

6 .複数のブロックプラグインを更新します。新しい場所を参照するPHP

ここで使用するディレクトリを変更したいだけですregister_block_type (これを行うのが初めてである場合)、または追加を追加するregister_block_type 新しいブロックディレクトリを参照します.
以下のようなメイン関数を更新できます:

function create_block_multiple_blocks_plugin_block_init() {
    register_block_type( plugin_dir_path( __FILE__ ) . 'blocks/buy-button/' );

    // Additional blocks would be registered here
    // register_block_type( plugin_dir_path( __FILE__ ) . 'blocks/another-block/' );
}

パッケージ内の新しいブロック用のスクリプトを作成します。JSON

使用するときnpm run start で定義されたスクリプトを実行していますpackage.json , いくつかのデフォルト設定を使用します.
ブロックファイルを動かしたので、新しい場所にスクリプトを作成する必要があります.にscripts セクションpackage.json 以下を追加する必要があります.

"start:buy-button": "wp-scripts start blocks/buy-button/src/index.js --output-path=blocks/buy-button/build/",
"build:buy-button": "wp-scripts build blocks/buy-button/src/index.js --output-path=blocks/buy-button/build/"

入力パスを指定しますsrc 我々のブロックのディレクトリ、そして、出力経路を示している出力経路build 我々のブロックのディレクトリ、そして、我々が我々のブロック名を加えることによってスクリプトをアップデートしたということ:buy-button スクリプト名に.
上記の追加で、これはあなたのdevビルドを開始する新しい方法です.

npm run start:buy-button

あなただけの代わりにそれを使用する必要がありますnpm run start 開発モードで実行するためには、次のようにします.

npm run build:buy-button

そして、それは、あなたが行くには良いです-あなたはこれらのブロックを行うことはあなた次第です!

概要

それで、最初のランを通して、我々は基本的にデフォルトの生成されたブロックファイルをサブディレクトリに動かして、新しい名前+場所を使用するためにプロジェクトを再配線しました.
作成したい新しいブロックについては、プロセスは似ています.あなたがする必要があるのは、デフォルトのブロックファイルをコピーすることです@wordpress/create-block ) -
注意:build フォルダーは実際には必要ありません(以前に移動しました)-コマンドラインスクリプトを実行すると自動的に生成されます.

repo +ファイル

プロジェクトが使用される準備ができている2ブロック-購入ボタンとヒーローブロック(彼らは何もしないでください)-しかし、私は、上記のプロセスを学び、追加のブロックを自分で作成をお勧めします.
Download from GitHub
質問+フィードバックが大歓迎です.
あなたがこのポストが好きであるならば、来て、Hi overを言います-私の計画は、近い将来により多くのWordPress Developer関連の内容をつくることです.