プラグインをGutenbergと互換性のあるものにする方法:パート2(サイドバーAPI)

プラグインをGutenbergと互換性のあるものにする方法:パート2(サイドバーAPI)

プラグインをGutenbergと互換性のあるものにする方法:パート2(サイドバーAPI)
СОДЕРЖАНИЕ
02 июня 2020

プラグインをGutenbergと互換性のあるものにしようとしている場合、プラグインの機能とユーザーにプラグインの機能を提供する方法に応じて、実行できる/実行する必要のあるパスがいくつかあります。.


このミニシリーズの最初の部分では、GutenbergのBlock APIについて説明しました。これは、Gutenbergとの互換性に関してほとんどのプラグインに必要なものです。今回は、グーテンベルクパズルの別のピースを探ります。 グーテンベルクのサイドバーAPI.

同じページにいることを確認するために、簡単に説明します。

  • GutenbergのBlock APIは非常に広範で、ほとんどすべてをブロックとして構築できますが、それだけでは不十分な場合があります.
  • 一方、サイドバーAPIでは、プラグインがサイドバーを登録して、ブロックを超えて機能を利用できます。サイドバーはブロックインスペクターに似ています.

プラグインをGutenbergと互換性を持たせる-サイドバーAPI

たとえば、Yoast SEOによって示されているGutenberg Sidebar APIを使用しています:

GutenbergサイドバーAPI

サイドバーAPIはどこで使用できますか?

最近、プラグインの作成に取り組みました– WP製品レビュー –グーテンベルクの準備ができています。 WP Product Reviewは投稿にレビューデータを追加するためにメタフィールドを使用しており、さまざまな下位互換性の理由でブロックに変換できませんでした。したがって、サイドバーAPIを使用しました.

WP Product ReviewをGutenbergエディターに統合する方法は次のとおりです。WP Product Review Gutenberg

ユーザーが投稿がサイドバー切り替え付きのレビューであることを示すと、サイドバーオプションからレビューボックスに関するすべてを設定できるようになります.

WP Product Reviewは、サイドバーAPIが役立つ例の1つです。別の素晴らしい例は もうやめろ ユーザーがサイドバーを使用してUnsplashとGiphyからストック画像を挿入できるプラグイン.

この投稿では、同様のものを実装し、Sidebar APIを介してプラグインをGutenberg互換にするプロセスについて説明します.

メタボックスはデフォルトでグーテンベルクに対応できるようになっていますが、

メタボックスから始めましょう。シンプルなメタボックスを使用して、エディター画面でユーザーにいくつかの機能を提供するプラグインを見てみましょう.

これは、クラシックエディタでは次のようになります。

クラシックエディターのメタボックス

次のコードを使用して、このようなメタボックスを作成できます。これは、 こんにちはグーテンベルク リポジトリ:

/ **
* Hello Gutenbert Meta Boxを登録する
* /
function hello_gutenberg_add_meta_box(){
add_meta_box( ‘hello_gutenberg_meta_box’、__( ‘Hello Gutenberg Meta Box’、 ‘hello-gutenberg’)、 ‘hello_gutenberg_metabox_callback’、 ‘post’);
}
add_action( ‘add_meta_boxes’、 ‘hello_gutenberg_add_meta_box’);

/ **
*こんにちはグーテンベルクメタボックスコールバック
* /
function hello_gutenberg_metabox_callback($ post){
$ value = get_post_meta($ post->ID、 ‘_ hello_gutenberg_field’、true);
?>
<?php _e( ‘What \’ s your name? ‘、’ hello-gutenberg ‘) ?>

<?php
}

/ **
* Hello Gutenbergメタボックスを保存
* /
function hello_gutenberg_save_postdata($ post_id){
if(array_key_exists( ‘hello_gutenberg_field’、$ _POST)){
update_post_meta($ post_id、 ‘_hello_gutenberg_field’、$ _POST [‘hello_gutenberg_field’]);
}
}
add_action( ‘save_post’、 ‘hello_gutenberg_save_postdata’);

したがって、ここで尋ねる質問は次のとおりです。

最初にこれをグーテンベルク互換にする必要がありますか?

この時点で、グーテンベルク互換とは何かを自問することを検討する必要があります。たとえば、グーテンベルクでこのメタボックスを変更せずに使用しても、引き続き動作します.

ただし、Gutenbergの互換性について説明するときは、Gutenberg環境で動作するプラグインについてだけではなく、* Gutenberg *のように動作するプラグインについて説明しています。.

"なぜ?" –あなたが尋ねるでしょう簡単に言うと、Gutenbergがデフォルトのエディターになった後にWordPressを使い始めるユーザーは、以前の方法が直感に反していることに気付くでしょう。さらに、編集者のすべてのものに対して、よりグーテンベルクのようなスタイルが期待されます。.

ユーザーにネイティブフィールを提供しない場合、ユーザーはGutenbergでよりうまく機能する代替案を確実に探します。.

最後に、いくつかのコードで手を汚しましょう!

サイドバーAPIの概要

メタフィールドを含めるために、グーテンベルクでサイドバーのコーディングを開始します。引き続き使用できます グーテンベルクボイラープレート 出発点としてのリポジトリ.

メタボックスをグーテンベルクに備える

始める前に、まずグーテンベルクでメタボックスを使用しないことをグーテンベルクに伝える必要があります。これを行うには、次のように__back_compat_meta_box引数をadd_meta_box関数に渡します。

/ **
* Hello Gutenberg Metaboxを登録する
* /
function hello_gutenberg_add_meta_box(){
add_meta_box( ‘hello_gutenberg_meta_box’、__( ‘Hello Gutenberg Meta Box’、 ‘hello-gutenberg’)、 ‘hello_gutenberg_metabox_callback’、 ‘post’、array(
‘__back_compat_meta_box’ => 偽,
));
}
add_action( ‘add_meta_boxes’、 ‘hello_gutenberg_add_meta_box’);

Gutenbergハンドブックには、PHPメタボックスをGutenbergに移植する方法を詳しく説明しています(ここに).

これにより、古いPHPメタボックスがGutenbergに表示されなくなります。次に、Wordフィールドにメタフィールドを追加して、Gutenbergに対応できるようにする必要があります。次のコードを追加して、メタフィールドをREST APIに登録できます。

/ **
* Hello APIにHello Gutenbergメタフィールドを登録する
* /
function hello_gutenberg_register_meta(){
register_meta(
‘post’、 ‘_ hello_gutenberg_field’、array(
‘タイプ’ => ‘ストリング’,
‘シングル’ => 本当,
‘show_in_rest’ => 本当,

);
}
add_action( ‘init’、 ‘hello_gutenberg_register_meta’);

これにより、_hello_gutenberg_fieldが メタ REST APIのオブジェクト.

この関数は、REST APIでの値の表示のみを行います。次に、REST APIを使用してメタフィールドを更新するメソッドも追加する必要があります.

次のコードは、カスタムルートをWordPress REST APIに追加します。 / hello-gutenberg / v1 / update-meta /

/ **
* Hello GutenbergメタボックスをRest APIに登録する
* /
function hello_gutenberg_api_posts_meta_field(){
register_rest_route(
‘hello-gutenberg / v1’、 ‘/ update-meta’、array(
‘メソッド’ => ‘役職’,
‘コールバック’ => 「hello_gutenberg_update_callback」,
‘args’ => アレイ(
‘id’ => アレイ(
‘sanitize_callback’ => 「アブサン」,
),
),

);
}
add_action( ‘rest_api_init’、 ‘hello_gutenberg_api_posts_meta_field’);

/ **
*こんにちはGutenbergのGutenberg REST APIコールバック
* /
function hello_gutenberg_update_callback($ data){
return update_post_meta($ data [‘id’]、$ data [‘key’]、$ data [‘value’]);
}

このREST APIルートは、Gutenbergサイドバーからメタフィールドを変更するために使用されます。 WordPress REST APIの詳細と方法 ここからカスタムルートを登録する.

同様に、WordPress REST APIの概要と開始方法を知りたい場合は、ブログ記事「WordPress REST API:それとは何か」と「使用方法」を参照してください。.

Gutenbergへのサイドバーブロックの追加

サイドバーのコードから始めましょう グーテンベルクボイラープレート

/ **
*内部ブロックライブラリ
* /
const {__} = wp.i18n;

const {Fragment} = wp.element;

const {
PluginSidebar,
PluginSidebarMoreMenuItem,
} = wp.editPost;

const {registerPlugin} = wp.plugins;

constコンポーネント=()=> (

{__( ‘グーテンベルクボイラープレート’)}

{ __( ‘こんにちは世界!’ ) }

);

registerPlugin( ‘gutenberg-boilerplate’、{
アイコン: ‘admin-site’,
レンダリング:コンポーネント,
});

これにより、Gutenbergエディターに非常にシンプルなサイドバーが挿入されます。これを出発点として、プロジェクトを構築します.

サンプルコードはGutenbergボイラープレートリポジトリからのものであり、その結果、すべての出現箇所を置き換える必要があります。 "グーテンベルクボイラープレート" と "こんにちはグーテンベルク".

使用するコンポーネント

サイドバーはすでに多くのコンポーネントをインポートしていますが、さらに必要になります。コードの上部を次のように置き換えることができます。

/ **
*内部ブロックライブラリ
* /

const {__} = wp.i18n;

const {
PluginSidebar,
PluginSidebarMoreMenuItem
} = wp.editPost;

const {
PanelBody,
TextControl
} = wp.components;

const {
成分,
断片
} = wp.element;

const {withSelect} = wp.data;

const {registerPlugin} = wp.plugins;

インポートしたすべてのコンポーネントについて簡単に学びましょう.

  1. 前の記事で説明したように、 __ コンポーネントは、テキストを翻訳可能にするために使用されます.
  2. PluginSidebar コンポーネントを使用してサイドバーをグーテンベルクに追加します.
  3. PluginSidebarMoreMenuItem サイドバーの表示を切り替えるボタンをグーテンベルクメニューに追加するために使用されます.
  4. PanelBody コンポーネントを使用して、サイドバーにパネルを追加します.
  5. TextControl 入力フィールドに使用されます.
  6. その後、 成分 そして 断片 コンポーネント。どちらもサイドバーで使用するReactコンポーネントです.
    • Fragmentコンポーネントは、DOMにノードを追加せずに子のリストをグループ化するために使用されます。 JSXでは複数の親ノードを使用できないため、コードでFragmentコンポーネントを使用する必要があります。.
  7. withSelect 高次コンポーネントです。高次コンポーネントとは何かを知るために、 このドキュメント.
  8. そして最後に、 registerPlugin, これは、前の記事で使用したregisterBlockTypeに似ています。ブロックを登録する代わりに、registerPluginはプラグインを登録します.

コントロールの追加

これまでのところ、サイドバーは単なるComponent関数ですが、Reactのライフサイクルメソッドを使用するため、次のようにReactコンポーネントに変換します。

Hello_GutenbergクラスはComponent {
render(){
戻る(

{__( ‘こんにちはグーテンベルク’)}

{ __( ‘こんにちは世界!’ ) }


}
}

registerPlugin( ‘hello-gutenberg’、{
アイコン: ‘admin-site’,
レンダー:Hello_Gutenberg,
});

これにより、サイドバーがプレーンテキストで機能するようになります.

次に、フィールドをサイドバーに追加します。コンポーネントは次のようになります。

Hello_GutenbergクラスはComponent {
render(){
戻る(

{__( ‘こんにちはグーテンベルク’)}


}
}

まず、初期状態を定義しました。これは基本的にメタフィールドのキーと値です。その後、apiFetchを使用して現在の投稿からデータをフェッチしています.

$ {this.props.postId}変数で現在の投稿のIDを渡します。後でこのポイントに戻ります.

データがフェッチされたら、REST APIからの値で状態を更新します.

では、postId変数に戻りましょう。現在のところ、現在の投稿のIDはわかりません。そのため、次のようにwithSelect高次コンポーネントを使用します。

const HOC = withSelect((select)=> {
const {getCurrentPostId} = select( ‘core / editor’);
返す{
postId:getCurrentPostId(),
};
})(Hello_Gutenberg);

registerPlugin( ‘hello-gutenberg’、{
アイコン: ‘admin-site’,
レンダリング:HOC,
});

これにより、現在の投稿のIDがpostId変数として渡されます。これで古い投稿を実行でき、Gutenbergサイドバーにメタフィールドの値が表示されます.

メタ値を更新する

次に、サイドバーでメタ値も更新できるようにする必要があります。詳細を取得するのと同様に、 wp.​​apiRequest ユーティリティ.

状態の値が変化するたびに、REST APIで状態を更新します。そのためには、まず次のように、TextControlにonChangeイベントを追加する必要があります。

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector