WordPressブロックエディタープラグインボイラープレート

WordPressの開発は、飛躍的に近代化されています。 数日前、コンテンツ管理システムのバージョン5にすでに存在する現在のテクノロジーについて説明しました。 次に、新しいブロックエディターの可能性を考慮して、WordPress用のプラグインを開発する方法を説明します。

今日は、JavaScriptベースのWordPress開発のためにNelioで使用している定型文について説明します。

GitHubにはWordPress用のボイラープレートプラグインのすべてのコードベースがあるので、開発者としての視野を近代化および拡大しない理由はありません。

WordPressブロックエディターボイラープレート

新しいWordPressプラグインを作成するための基礎となるプロジェクトを作成する主な理由は、すべてのプロジェクトを統合および標準化できるようにする開発者としての私たち自身のニーズから生じています。

WordPressプラグインボイラープレートに触発されて、私たちのアイデアは、コンパイラ、トランスパイラー、バンドラー、そして最終的にはJavaScriptプロジェクトの一般的な開発ツールを使用して、ブロックエディターを最新のスタックで拡張するプラグインに焦点を当てた同様のことを行うことです。

インストールと開発のプロセス

ベースとして作成したプラグインの定型文は、GitHubから直接ダウンロードできます。 その後、WordPressインストールのpluginsフォルダー（ /wp-content/plugins/ ）に移動できます。

 git clone https://github.com/avillegasn/wp-beb.git

これにより、すべてのコンテンツを含むプラグインフォルダがダウンロードされます。 次に、このフォルダとそのコンテンツの両方の名前を変更して、必要な名前を使用する必要があります。 たとえば、プラグインがmy-pluginと呼ばれる場合：

• wp-bebファイルの名前をmy-pluginに変更します
• wp-bebをmy-pluginに置き換えます
• wp_bebをmy_pluginに置き換えます
• WP_BEBをMY_PLUGINに置き換えます

これを行ったら、プラグインをコンパイルして最終的なコードを生成するには、次のコマンドを実行します。

 npm install && npm run build

次のツールをインストールしておく必要があることに注意してください。

• Node.jsv8.9.1以降。
• npmv5.5.1以降。
• Composerv1.8.1以降。

npm installコマンドは、Node.jsとPHPの依存関係をそれぞれnode_modulesフォルダーとvendorフォルダーにダウンロードします。 プロセスが終了すると、コンパイルされたファイルを含むdistフォルダーが作成されます。 これで、WordPressでプラグインを安全にアクティブ化できます。

前のコマンドに加えて、ボイラープレートは次の追加コマンドを提供します。

• npm run dev縮小せずにファイルをビルドします。
• npm run watchビルドファイルを実行し、変更を監視します。
• npm run buildビルドファイルを実行し、JSとCSSを縮小します。
• npm run lint-php PHPファイルでPHP_CodeSnifferを実行して、エラーを検出します。
• npm run lint-php:fix phpcbfを実行して、PHPエラーの修正を試みます。
• npm run lint-css SCSSファイルでstylelintを実行して、エラーを検出します。
• npm run lint-css:fixしてみてください。
• npm run lint-js JSファイルでeslintを実行して、エラーを検出します。
• npm run lint-js:fixしてみてください。
• npm run lint PHP、SCSS、およびJSファイルでlintingプロセスを実行します。
• npm run update:packagesのパッケージ依存関係を更新します。

通常、コードの開発中にnpm run watchを実行して、変更がリアルタイムでコンパイルおよびバンドルされるようにします。 ただし、最終的な安定バージョンを生成するには、 npm run buildます。

コンテンツとフォルダ構造

WordPressブロックエディターのボイラープレートには、次のファイルとフォルダーが含まれています。

• .babelrc 。 Babel構成ファイル。
• .editorconfig 。 さまざまなエディターやIDEで同じプロジェクトに取り組んでいる複数の開発者の一貫したコーディングスタイルを維持するのに役立つEditorConfigファイル。
• .eslintignore 。 ESLintリンティングプロセスから特定のファイルを除外するために使用されます。
• .eslintrc 。 ESLint構成ファイル。
• .gitattributes 。 Gitのパス名に属性を与えるテキストファイル。
• .gitignore 。 リポジトリから特定のファイルを除外するために使用されます。
  composer.json 。 プロジェクトのPHP依存関係について説明し、他のメタデータも含まれる場合があります。
• composer.lock 。 同じプロジェクトで作業している複数の開発者を同じバージョンのPHP依存関係にロックするために使用されます。
  index.php 。 サーバーの内部ファイル構造を非表示にすること。
• LICENSE.txt 。 GNUGPLv2ライセンスのコピー。
• package-lock.json 。 同じプロジェクトで作業している複数の開発者を同じバージョンのNPM依存関係にロックするために使用されます。
• package.json 。 プロジェクトのマニフェストファイル。 必要なパッケージの名前とプロジェクトの管理に使用できるCLIコマンドを見つける構成の中央リポジトリ。
• phpcs.ruleset.xml 。 PHP_CodeSniffer構成ファイル。
• postcss.config.js 。 PostCSS構成ファイル。
• README.md 。 現在読んでいるファイル。
• readme.txt 。 WordPressプラグインのreadmeファイルのテンプレート。
• webpack.config.js 。 webpackの設定ファイル。
• wp-beb.php 。 WordPressプラグインのメインファイル。
• CSS、JS、および画像リソースを含むassetsディレクトリ。
• i18nの翻訳ファイルを含むlanguagesディレクトリ。
• WordPressブロックエディタを拡張するためのブロック定義を含むpackagesディレクトリ。

これとは別に、プロジェクトをコンパイルすると、コンパイルされたファイルを含むdistフォルダー、PHPの依存関係と実行可能ファイルを含むvendorディレクトリ、およびNPMとJavaScriptの依存関係と実行可能ファイルをnode_modulesディレクトリが取得されます。

WordPressブロックエディターに新しいブロックを追加する

このWordPressブロックエディターボイラープレートの興味深い点は、デフォルトの状態です。 プラグインをダウンロードしてコンパイルしたら、プラグインをアクティブにします。これが、エディターに新しいブロックを追加する完全に機能するプラグインであることがわかります。

ボイラープレートによって追加されたデモブロックは、前のスクリーンショットでわかるように、ハートのダッシュが前に付いた単純なテキストブロックです。 ブロックは、ブロック内のテキストの色を変更する2つの追加スタイルも定義します。 これらは、グーテンベルクでブロックとスタイルを作成する方法を理解するのに役立つはずです。

このブロックをエディターに追加するJavaScriptコードは、 packages/blocks/demoにあります（ここを参照）。 このブロックを削除する場合は、 demoディレクトリを削除し、 packages/blocks/index.jsファイルでそのインポートと使用法を削除します。

さらに、デモブロックのコードはさまざまなファイルに分割され、各ファイルには、 registerBlockTypeで使用される引数のさまざまな部分が含まれています。

一方、ブロックを追加する場合は、 packages/blocks/demoを複製して、ブロックに必要な名前を付けます。 必要に応じて内部のJavaScriptファイルを変更し、 packages/blocks/index.jsに新しいブロックのメインファイルをインポートすることを忘れないでください。

プラグインでブロックエディタを拡張する

前に述べたデモブロックに加えて、ブロックエディターの定型文にはGutenbergプラグインの定義が含まれています。 この「プラグイン」は通常のWordPressプラグインではなく、ブロックエディタ自体を拡張するものであることに注意してください。 必要に応じて、「WordPressプラグイン内のプラグイン」。

右側にある上のスクリーンショットでプラグインを見ることができます。 このプラグインは、右上の公開ボタンの横にあるアイコンをクリックするとアクティブになります。

プラグインには、カラーピッカー（Gutenbergに含まれるReactコンポーネントを簡単に再利用する方法を確認できます）と、プログラムでエディターにデモブロックを挿入するボタン（別の興味深いシナリオ）が含まれています。

プラグインコードはassets/src/js/adminにあります（ここで確認できます）。 具体的には、ファイルplugin.jsには呼び出しregisterPluginが含まれ、ファイルplugin-component.jsは、前述のカラーピッカーとボタンのレンダリングを担当するコンポーネントを定義します。

繰り返しますが、このプラグインは必要に応じて変更できます。 または、必要に応じて削除することもできます。 そのためには、メインファイルwp-beb.php （ここを参照）にエンキューされているplugin.js JavaScriptファイルと対応するCSSファイル（ここ）を削除することを忘れないでください。

やってみよう！

WordPressブロックエディターボイラープレートが、JSの恐怖を取り除き、WordPressブロックエディターの拡張機能のプログラミングを簡単な方法で開始するのに役立つことを願っています。 それを試して、あなたの経験について教えてください。 コメントをお待ちしております！

Icons8チームによる注目の画像onUnsplash 。