グーテンベルクエディタにボタンを追加する方法

一部の人に嫌われ、多くの人に愛されている新しいWordPressブロックエディターがあなたを無関心にさせないことは明らかです。 1か月以上使用されており、より多くのプラグインとテーマが互換性があります。

プラグイン開発者として、私たちの製品をグーテンベルクに適応させることは、2、3日でできることではなかったと言わざるを得ません。 Nelioでは、プラグインと同じ機能を大幅な変更なしで維持できるようにするために、かなり長い間、新しいブロックエディターの進化と開発を追跡してきました。

Nelioコンテンツをグーテンベルクに適応させるための重要なポイントの1つは、テキストブロックにボタンを追加して、TinyMCE（クラシックエディター）で行っていたのと同じことを継続できることでした。 Nelioコンテンツの最も興味深い機能の1つは、コンテンツ内のフレーズを選択してソーシャルネットワークで直接共有したり、マークを付けたりできることです。その後、アルゴリズムが最も関連性の高いフレーズを選択してシリーズを設定します。自動プロモーションメッセージの。 以前、この投稿で説明しました。

TinyMCEに追加のボタンを含めるために、WordPressにはかなり完全なドキュメントがあります。 しかし、グーテンベルクでそれをどのように行うのでしょうか？ WordPressのリッチテキストブロックにボタンを追加するにはどうすればよいですか？

この機能を維持することが、グーテンベルクの文強調機能の使用に関心を持っているため、お客様だけでなく私たち自身にもNelioContentなどの高品質な製品を提供し続けるための鍵であることは明らかです。

このため、2018年1月（ほぼ1年前、この投稿を公開した時点）に、グーテンベルクプロジェクトのGitHubで問題を説明し、助けを求める問題を開くことにしました。 そこで私は、グーテンベルクのテキストブロックで選択したテキストを操作するために、そのようなブロックにボタンを追加する可能性を求めました。

問題の進展は前向きであり、最終的にそのような機能はグーテンベルクのフォーマットタイプのおかげで追加されました。 ドキュメントはまだかなり貧弱なので（この投稿を書いている時点で）、ブロックエディタのテキストブロックにカスタムボタンを追加する方法を説明します。これにより、時間を無駄にせず、より簡単に時間を過ごすことができます。自分。

このGitHubリポジトリには、エディターにボタンを追加するすべてのプラグインコードがあります。 非常に簡単ですが、このプロジェクトの最も重要な部分について詳しく説明します。

重要なプロジェクトファイルは、/ src / js / /src/js/gutenberg.jsにあり、以下にあります。

registerFormatType関数は、WordPressコアに固有であり、アクションをトリガーするボタンとともに、新しいフォーマットタイプを追加できるようにする関数です。 名前（ 'nelio/button' ）と引数をパラメーターとして持つJavaScriptオブジェクトを渡します。 これらの引数の中には、React Elementを返すeditメソッドがあります。この場合、これはブロックに配置するボタンになります。

このボタンはRichTextToolbarButtonであり、ここで定義されているGutenbergエディター自体のReactコンポーネントにすぎません。 このコンポーネントには、アイコン（この場合、Nelioのロゴが付いたSVGファイル）、ボタンのタイトル、およびボタンがクリックされたときに実行される関数が必要です。 この関数は、最終的にdoTheJob関数を呼び出します。この関数では、選択したテキストが取得され、ブラウザーのコンソールに出力されます。 ここで、選択したテキストを処理するJavaScriptコードを追加できます。

RichTextToolbarButtonのicon属性に、SVGの代わりにWordPressDashiconという名前の文字列を入れることができます。 SVGが機能するためには、SVGファイルをReact要素に変換するsvg-react-loaderパッケージを使用することに注意してください。これは、このReactコンポーネントに必要なものです。

コードはES6+構文を使用して理解しやすくしていますが、それを機能させるには、Babelで処理する必要があります。そのために、webpackに次の構成があります。

以前のwebpack構成ファイルの各行の目的については詳しく説明しませんが、それを見ると、SVGファイルにはsvg-react-loaderを使用し、JavaScriptを処理して変換するためにbabel-loaderを使用していることがわかります。どのブラウザでも機能するコードに変換します。 この投稿では、これらすべての最新テクノロジーについてすでに説明しました。

結果は、 /dist/jsに表示されるJavaScriptファイルgutenberg.jsです。 ここで、（いつものように） wp_enqueue_scriptを使用して、このファイルをWordPress編集画面にロードする必要があります。

スクリプトはenqueue_block_editor_assetsフックのキューに入れられていることに注意してください。これにより、WordPressブロックエディターが使用されている場合にのみスクリプトが読み込まれることが保証されます。

コードを試してみたい場合は、GitHubプロジェクトをダウンロードし、フォルダーを/wp-content/plugins内のWordPressに移動します。 そこで、ターミナルを開き、 npm installを実行します。 すべてが機能し、コードに必要な依存関係を含めることができるようにするには、NodeJSをインストールする必要があります。

依存関係がある場合は、ターミナルでnpm run buildを実行して、最終的なコードを生成します（JavaScriptの処理など）。 これで、WordPressにアクセスして、追加したプラグインをアクティブ化できます。

編集のために投稿を開くと、テキストブロックに新しいボタンが表示されます。 テキストの一部を選択してボタンをクリックすると、選択したテキストがブラウザのコンソールに表示されます。 これは、上記のコードで見たように、私たちが予想したことです。

詳細を知るには…

これは、テキストブロックにボタンを配置する方法の最小限の例にすぎません。 ボタンをクリックしたときに選択したテキストを変更する場合は、このプラグインのコードを確認することをお勧めします。このプラグインには、異なる、より複雑な形式のボタンがいくつか追加されています。

一方、主題をさらに深く掘り下げたい場合は、Gustenbergプラグインのコードを確認することをお勧めします。このプラグインは、さまざまな要素を追加することでGutenbergのデフォルトのインターフェイスを変更します。 また、非常によく構造化されており、理解しやすいコードです。

ある時点で、このグーテンベルクの機能のすべての側面をカバーする公式の詳細なドキュメントがありますが、今のところ、WordPressブロックエディターのこれらのタイプの変更を実装する方法を学ぶためにコードを読む必要があります。 幸運を！

UnsplashのAshimD'Silvaによる注目の画像。