WordPress 用のカスタム Gutenberg ブロックの作成

WordPress 用のカスタム Gutenberg ブロックを作成することは、難しいことではありません。 実際、ほんの少しのコードで、プラグインを使用せずに独自のカスタム ブロックを作成できます。 Gutenberg は WordPress の新しいエディターで、コンテンツのカスタム ブロックを作成できます。 ブロックは、Gutenberg のコンテンツのビルディング ブロックです。 テキスト、画像、ビデオなどを追加するために使用できます。 カスタム ブロックを作成するには、WordPress Code Editor などのテキスト エディターまたは Block Lab などのプラグインを使用する必要があります。 テキスト エディターを用意したら、テーマまたはプラグイン ディレクトリに新しいファイルを作成できます。 最初に行う必要があるのは、ブロック タイプを作成することです。 ブロック タイプは、ブロックの動作を定義する設定のコレクションです。 これを行うには、register_block_type 関数を使用する必要があります。 ブロックタイプを取得したら、WordPress に登録できます。 この関数は、ブロック タイプの名前と、ブロックの設定を含むオブジェクトの 2 つの引数を取ります。 ブロック タイプを登録したら、フィールドの追加を開始できます。 フィールドは、ブロックの外観と動作を制御する設定です。 ブロック タイプにフィールドを追加するには、add_field 関数を使用する必要があります。 ブロックタイプに必要なすべてのフィールドを追加したら、WordPress に登録できます。 以上です！ これで、WordPress 用のカスタム Gutenberg ブロックが作成されました。

Gutenberg ブロック エディターは、WordPress 5.0 の拡張機能の 1 つです。 Gutenberg エディターはコンテンツをブロックに分割し、セクションを簡単に再配置できます。 ほとんどの開発者は、React のスキルがないため、ネイティブに設計されたブロックを作成できません。 WordPress 開発者コミュニティは、React/JavaScript の要件を満たすことができるツールを開発することで対応してきました。 Block Lab のブロックは、3 つの段階で作成されます。アドミン内でブロックを追加し、コピーして貼り付け、エクスポートします。 API を使用して、ブロックのカスタム コントロールを作成することもできます。 これは大したことではないかもしれませんが、カスタム Gutenberg ブロックで何ができるかを理解するのに役立ちます。

ブロックを作成するには、block-notification-bar.php という名前の新しいファイルを作成する必要があります。このファイルには、タイトル (通知バー) と 3 つのフィールドが含まれています。 このファイルに応答して、カスタム ブロック テンプレートをテーマに配置するよう指示する通知メッセージが表示されます。 ファイルをアップロードする前に、ファイルが保存され、Web サーバーにアップロードされていることを確認してください。 カスタム ブロックが作成されました。 重要なのは、その目標を達成することだけです。 すでに作成したものを拡張したい場合は、多くのオプションがあります。 アイコン、ボタン、別の投稿やページへのリンク機能は、追加できる機能のほんの一部です。 これらの機能はすべて、Block Lab や上記の他のプラグインを通じて実現できます。

WordPress カスタム ブロック プラグイン

WordPress で利用できる多くの優れたカスタム ブロック プラグインがあります。 各プラグインは、さまざまな機能とオプションのセットを提供します。 一部のカスタム ブロック プラグインでは、投稿やページのカスタム ブロックを作成できますが、他のプラグインは、使用できる事前に設計されたブロックのセットを提供します。

コンテンツやレイアウト要素をブロックとして追加することで、WordPress で簡単に投稿やページを作成できます。 WordPress は、デフォルト設定で幅広いブロックを提供します。 ただし、特定のタスクを実行するためにカスタム ブロックを作成したい場合があります。 このチュートリアルでは、完全にユニークなブロックを作成する手順について説明します。 最初のステップは、証言ブロックに 3 つのフィールドを挿入することです。 [フィールドの追加] ボタンをクリックして、最初のフィールドの入力を開始します。 2 番目のステップは、データの表示方法を正確に決定するブロック テンプレートを作成することです。

3 番目のステップは、[CSS] タブをクリックして、ブロック出力マークアップのスタイルを設定することです。 テンプレートを手動でアップロードすることにより、独自のカスタム ブロックを作成できます。 この場合、カスタム ブロック フィールドを操作するには PHP が最適です。 アップロード メソッドを使用して、エディター テンプレートをテーマにアップロードするだけです。 まず、カスタム ブロックをプレビューします。 HTML/CSS をプレビューする前に、いくつかのテスト データを提供する必要があります。 Gutenberg ブロックでカスタム構築された WordPress Web サイトを作成します。

ブロックを検索するには、新しいブロックの追加ボタンをクリックした後に表示されるボックスにその名前またはキーワードを入力します。 投稿とページを保存して編集することで、ブロックをプレビューできます。 私たちのテストサイトでは、証言ブロックがどのように見えるかを見ることができます.

Gutenberg Block React を作成する

React で Gutenberg ブロックを作成する方法はいくつかあります。 最初の方法は、create-guten-block CLI ツールを使用することです。 これにより、新しい Gutenberg ブロックが足場になります。 この方法を使用するには、マシンに Node.js と npm がインストールされている必要があります。 これらの依存関係をインストールしたら、次のコマンドを実行して新しい Gutenberg ブロックを作成できます。 create-guten-block my-block これにより、Gutenberg ブロックに必要なすべてのファイルを含む my-block という名前の新しいディレクトリが作成されます。 React で Gutenberg ブロックを作成する 2 つ目の方法は、 @wordpress/block-editor パッケージを使用することです。 このパッケージには、Gutenberg ブロックの作成に使用できる createBlock というヘルパー関数が含まれています。 この方法を使用するには、プロジェクトに @wordpress/block-editor パッケージをインストールする必要があります。 パッケージをインストールしたら、次のコードを実行して新しい Gutenberg ブロックを作成できます。 createBlock( 'my-block/my-block', { title: 'My Block', category: 'common', } ); これにより、共通カテゴリに my-block という新しいブロックが作成されます。 React で Gutenberg ブロックを作成する 3 つ目の方法は、 wp.blocks.createBlock 関数を使用することです。 この関数は WordPress JavaScript API の一部であり、Gutenberg ブロックの作成に使用できます。 この方法を使用するには、プロジェクトに wp-api-request パッケージを含める必要があります。 パッケージをインストールしたら、次のコードを実行して新しい Gutenberg ブロックを作成できます。 wp.​​blocks.createBlock( 'my-block/my-block', { title: 'My Block', category: 'common', } ); これにより、共通カテゴリに my-block という新しいブロックが作成されます。

Gutenberg エディターのこのチュートリアルでカスタム ブロックを作成する方法を学びます。 自分で作成したプラグインを使用してタスクを完了します。 デフォルトのテーマの 1 つを使用してカスタム Gutenberg ブロックを作成できますが、それが可能であることを認めなければなりません。 このチュートリアルでは、Gutenberg を使用して新しいカスタム ブロックを作成する方法について説明します。 さらに、提供されたデザイン設定に基づいて、フロントエンドとエディターの外観をカスタマイズします。 ブロックの作成に多くの時間を費やしたくない場合は、単純にブロックを追加してから、必要に応じてカスタマイズできます。

React はカスタム テーマで使いやすい

React は、JavaScript でユーザー インターフェイスを作成するための優れたライブラリです。 WordPress は、新しい Gutenberg エディター、ウィジェット管理画面、およびサイトのコンテンツ編集機能に対する最近の更新を強化するためにそれを使用しています。 React はすでに WordPress に組み込まれているため、カスタム テーマで簡単に使用できます。

Gutenberg カスタム ボタン ブロックの作成

Gutenberg create custom button block は、Web サイト用のカスタム ボタンを作成するための非常に便利なツールです。 このツールを使用すると、人目を引く機能的なボタンを簡単に作成できます。 これは、あなたのウェブサイトに個人的なタッチを追加し、他のサイトとは一線を画す優れた方法です。

このチュートリアルでは、人気のアプリで最初の簡単なブロックを作成する方法を学びます。 私たちの WordPress @create-block アプリは、Javascript/PHP/CSS コードをすばやく生成できる公式ツールです。 インタラクティブ モードでは、一連の手順でブロックを構成できます。 グーテンベルクについて学習しているとき、これは非常に便利です。 すでにブロックをスキャフォールディングしている場合は、コード エディターを介して新しく作成されたディレクトリにアクセスできるようになりました。 ブロック プラグインの構造は、現在の状態 (このチュートリアルを書いている時点) に従っています。 このモジュールでは、各ファイルの詳細とその使用法について説明します。

コマンドライン フラグは、コマンドライン プログラムのオプションを指定する一般的な方法です。 フラグを使用する前に、フラグ ディレクトリの値を使用する値に置き換えます。 エディターでエンキューまたは適用されるスタイルシート。 プラグインの基本的な詳細について詳しく説明します。 WordPress はデフォルトでプラグイン情報を表示します。 バージョン管理されたプロジェクトを作成するときにどのファイルを無視するかを Git に伝えるには、Gitignore A. ファイルを含める必要があります。 リポジトリには情報が含まれています。 Config を使用すると、開発者は複数のプロジェクトで一貫したコーディング スタイルを維持できます。

WordPress Gutenberg プラグイン開発

WordPress Gutenberg プラグインは、ボランティアのコミュニティによって開発されたオープン ソース プロジェクトです。 誰でもプロジェクトに貢献し、プロジェクトの改善に貢献できます。 プラグインは常に更新され、改善されています。 あなたが開発者であれば、新しい機能を開発したり、バグを修正したりして、プロジェクトに貢献できます。

Gutenberg (WordPress のブロック エディター) について聞いたことがあるかもしれませんが、独自のプラグインを作成するにはどうすればよいでしょうか? ブロックは、単純な WordPress スクリプトで作成されます。 ここで作成される WordPress プラグインの種類は、通常はブロックですが、他のプロセスの開始点として適しています。 Create Block Scriptをテンプレートとして使用して、独自のプラグインを作成できます。 WordPress のフロント エンドではブロックを簡単に確認できますが、バック エンドでは慣れるために外観が異なります。 このファイルは、アセットがコンパイルされた後にのみ、開発モードで生成する必要があります。 /node_modules – これは、プラグインのすべての JavaScript 依存パラメーターが格納されるフォルダーです。

このファイルには、便利な Visual Studio Code (VDC) 環境を含むプリセット ファイルがあります。 プラグインを作成する場合は、WordPress プラグイン フォルダーにいることを確認する必要があります。 その結果、プラグインの開発段階と生産段階を表示できるようになります。 エディターで /src/save.js を開き、save 関数を次のように置き換えます。 BlockText は、この方法で文字列として出力できます。 ブロックをカスタム ブロック カテゴリに表示するには、次のコードをプラグインのルートに追加する必要があります。 registerBlockType.js 関数は、プラグインの registerBlockType.js 関数を使用して再コンパイルできるブロック カテゴリのリストを返します。

グーテンベルク コンテンツ エディター

WordPress ユーザーは、React 上に構築されたシングル ページ アプリケーション (SPA) を介してコンテンツを作成、編集、および削除できます。 従来のコンテンツ エディターとは対照的に、これはより流動的でユーザー フレンドリーなインターフェイスを提供します。 より強力なコンテンツ エディターが必要な場合、 Gutenberg アプリは適していません。 よりゆったりとした外観を好む場合は、グーテンベルクに頼ることができます。

WordPress カスタム ブロック エディター

このブロックは、任意の投稿またはページで使用できます。 [新しいブロックの追加] 画面で、検索ボックスを使用して、名前またはキーワードを入力してブロックを探します。 ブロックをコンテンツ領域に挿入すると、このカスタム ブロック用に作成したブロック フィールドが表示されます。

このチュートリアルでは、WordPress 内で完全に機能するカスタム ブロック エディター インスタンスを作成するプロセスを順を追って説明します。 このエディターは、ブロック エディターと呼ばれるカスタム WP 管理ページ内に完全に構​​築されます (最も創造的な方法で)。 WordPress Plug-A-Thon では、エディターを作成します。 ブロック エディターの React コンポーネントを使用して、カスタム ページに HTML を生成する必要があります。 3 番目の引数として、スクリプトの依存関係 ($script_asset['dependencies']) 行を使用します。 WordPress 関連のスクリプトがビルドされたバンドルに含まれないようにします。 また、カスタム CSS スタイルと WordPress のデフォルトのフォーマット ライブラリを使用するために登録する必要があります。

これにより、JavaScript を使用して、ページの HTML にブロック エディターを生成できます。 このコンポーネントが BlockEditor と呼ばれると、魔法が起こります。 JS グローバルを作成せずに、PHP からエディターをレンダリングすることができます。 エディターのレイアウトは、いくつかの特殊なコンテキスト プロバイダーに加えて、ここで確認できるように、足場に基づいて構築されています。 Block EditorProvider は、WordPress のブロック エディター パッケージの最も重要なコンポーネントです。 以前に説明したように、これにより、ブロック編集のコンテキストで、まったく新しいブロック エディターに新しいコンテキストが提供されます。 これは、提供されたレジストリを (withRegistry Provider HOC を介して) サブスクライブし、ブロック変更イベントをリッスンし、ブロック変更が永続的であるかどうかを判断し、必要に応じて onChange 入力ハンドラーを呼び出すことによってこれを実現します。

最も興味深いコンポーネントは、ブロックのリストをエディターに追加する BlockList コンポーネントです。 これらのコンポーネントは非常に複雑で複雑なものであるため、詳細に検討する価値があります。 カスタム EditorBlock コンポーネントの詳細については、次の記事を参照してください。 Slot/fill は、Blockeditor コンポーネント (上記を参照) を利用してその中に Fill (Sidebar. InspectorFill) を公開することで実装されます。これは後でインポートして実装にレンダリングします。 その結果、React を使用すると、検査コンポーネントを DOM に保持しながら、別の場所 (サイドバーなど) のマークアップにレンダリングすることができます。 ブロックは、キー getdavesbeBlocks の下の LocalStorage 内にもあります。

このデータは、Block Grammar 形式にシリアル化されます。つまり、文字列に格納できます。 GitHub は、カスタム機能ブロック エディターのコード全体をコンパイルしました。 このプログラムは、無料でダウンロードして自分で試すことができます。