プラグインをグーテンベルクに適応させる方法:パート1(ブロックAPI)

"プラグインを持っています," あなたが言います, "グーテンベルク対応にする方法?"


話は簡単です。 GutenbergはWordPressの新しいエディターエクスペリエンスであり、次のメジャーリリースでコアに統合される予定です。これに追いつかない多くのプラグイン 時代遅れになります. 手遅れになる前に、グーテンベルクにプラグインを適合させることが不可欠です.

影響を受けるのは?

ほとんどすべてのプラグイン 投稿エディタと関係があるものはグーテンベルクの影響を受けます。たとえば、プラグインがTinyMCEにボタンを追加してエディターにショートコードを配置する場合、悪いニュースです。それで終わりです.
プラグインをグーテンベルクに適合させる:パート1(ブロックAPI)

"プラグインをグーテンベルクに適応させる必要がありますか?"

では、グーテンベルクのためにどのプラグインを更新する必要があるのでしょうか?動作するプラグイン:

  • カスタムメタボックス
  • ショートコード
  • TinyMCEボタン
  • またはすべてのエディタ機能

たとえば、単純なメタボックスを追加するプラグインのように、一部のプラグインはGutenbergで動作しますが、ユーザーのエクスペリエンスはそれほどスムーズではありません.

ショートコードでも以前と同じように機能しますが、エディターではプレーンテキストノードになるだけですが、GutenbergのすべてのショートコードプラグインはそのブロックUIに従い、ユーザーが使いやすくなります.

したがって、はい、ユーザーはグーテンベルク体験用に作成されたプラグインを好みます。そして、後に残るものは競合プラグインに置き換えられます.

アイデアを与えるために、ここに、ユーザーの標準的な古いエディターエクスペリエンスが、私たちのプラグインでどのように見えるかの例を示します。 (a), そしてグーテンベルクでそれがどのように見えるか (b) –最適化されたプラグインを使用.

(b)Feedzy RSSフィード-Gutenberg対応のプラグイン

恐れるな!私たちはあなたのプラグインをグーテンベルクに対応させるのを助けるためにここにいます。プラグインがどのように機能するかに応じて、プラグインをGutenbergに統合するには多くの方法があります。これについては、この記事で説明します。.

事前に知っておくべきことGutenbergはReactに書かれています。また、GutenbergプラグインはJavaScriptでコーディングされているため、PHPでのみコーディングする開発者にとっては大まかな移行になる可能性があります。 Gutenbergのプラグインを作成するためにReactの知識は必要ありませんが、JavaScriptの基本的な知識が必要になります。以前にReactとJSXに取り組んだことがある場合は、同様の根拠になります。.

十分ではありませんが グーテンベルクの公式ドキュメント, そのGithubリポジトリには、開発者にとって貴重な情報がたくさんあります。 Gutenbergの開発について深く学びたい場合は、GutenbergのGitHubリポジトリで行われているすべてのことに目を離さないようにする必要があります。これは、プロジェクトが非常に高速で進行し、状況が日々変化しているためです。.

プラグインをグーテンベルクに適合させる方法

GutenbergのAPIは、Block API、Shortcode APIなど、エディターを拡張する多くの方法を提供します。使用するAPIは、構築しているプラ​​グインのタイプによって異なります.

プラグインが単純なショートコードプラグインの場合、Block APIを使用して、エディターの美しいブロックを作成できます。ただし、プラグインがブロックだけでは不十分な複雑なメタボックスを使用する場合は、サイドバーAPIを使用できます。.

また、NodeJS、NPM、webpack、ESNextなどのJavaScript開発ツールの最新のスタックを使用します。サンプルファイルを提供するので、開発環境のセットアップについて心配する必要はありません。.

この投稿では、 ブロックAPIを使用してプラグインGutenberg互換にする方法. 他のメソッド(Sidebar API、Publish Panel、Status Bar)に入ります & 同様のAPI)必要に応じてパート2.

あなたはすべての言及された例を見つけることができます このGitHubリポジトリ.

グーテンベルク開発環境

Gutenberg向けの開発では、NPM、webpack、Babel、JSXなどの一連のツールをセットアップする必要があります。時間と手間がかかるので、あなたのための環境を用意しました.

Gutenbergボイラープレートは、最小限のGutenberg開発設定と例を備えたプラグインです。 1つのブロックとサイドバーの例が含まれています。これを使用して、カスタムブロックに拡張できます。.

グーテンベルクボイラープレート

フォークまたはクローンできます Gutenbergボイラープレートリポジトリ あなたに / wp-content / plugins / 開発環境として使用します.

その後、開始するには、マシンにNodeJSをインストールする必要があります。 Gutenbergボイラープレートフォルダーに移動し、npm installを実行します

この時点から、開発プロセス中に使用する3つのコマンドを知る必要があります。

  • npm install –プロジェクトのクローンを作成するときにプロジェクトの依存関係をインストールします.
  • npm run dev –開発プロセス中にコードをコンパイルします。これを一度実行する必要があり、変更を監視し続けます.
  • npm run build –開発プロセスが終了したら、最適化されたビルドのコードをコンパイルします.

ブロックAPI

ブロックはグーテンベルクの基本的な要素であり、ブロックベースのエディターです。ブロックAPIを使用すると、グーテンベルクのブロックを作成できます。基本的なHTML、ショートコードをレンダリングできるブロックを作成したり、動的ブロックを作成して、たとえば最新の投稿を表示したりできます.

既存のプラグインに基づくプロセス

この例では、GutenbergブロックにClick to Tweetショートコードを採用します。このClick to Tweetショートコードは、テキストを含むツイートボックスと、そのテキストをツイートするボタンをレンダリングします。このような:

クリックしてレイアウトをツイート

ショートコードは次のようになります。

[clicktotweetツイート="表示するテキスト" tweetent ="ツイートするテキスト" ボタン="つぶやき" テーマ="Click-to-tweet"]

ショートコードには4つのパラメーターがあります。

  • ツイート:サイトに表示されるテキスト.
  • Tweetent:Twitterに送られるテキスト.
  • button:ツイートボタンのテキスト.
  • テーマ:Click-to-TweetまたはClick-to-Tweet-altのいずれかをボックスのテーマとして使用.

Block APIを使用したGutenbergのプラグインの適合

HTMLをフロントエンドにレンダリングする方法と、Gutenbergブロックを使用してショートコードをフロントエンドにレンダリングする方法の2つがあります。この記事では、後者を行います.

すべてのコードは こんにちはGitHub上のGutenbergプラグインリポジトリ. リポジトリを複製してプラグインの動作を確認したり、コードを変更したりできます.

Gutenbergのエンキュースクリプト/スタイル

まず、enqueue_block_assetsを使用して、スクリプトとスタイルをGutenbergエディターにエンキューする必要があります。

/ **
*フロントエンドのエンキューとエディターのJavaScriptおよびCSS
* /
function hello_gutenberg_scripts(){
$ blockPath = ‘/dist/block.js’;
$ stylePath = ‘/dist/block.css’;

//バンドルされたブロックJSファイルをエンキューします
wp_enqueue_script(
「hello-gutenberg-block-js」,
plugins_url($ blockPath、__FILE__),
[‘wp-i18n’、 ‘wp-blocks’、 ‘wp-editor’、 ‘wp-components’],
filemtime(plugin_dir_path(__ FILE__)。$ blockPath)
);

//フロントエンドとエディターブロックスタイルをエンキューします
wp_enqueue_style(
「hello-gutenberg-block-css」,
plugins_url($ stylePath、__FILE__),
」,
filemtime(plugin_dir_path(__ FILE__)。$ stylePath)
);

}

//フックスクリプトはブロックエディターフックに機能します
add_action( ‘enqueue_block_assets’、 ‘hello_gutenberg_scripts’);

ブロックで使用するスクリプトに4つの依存関係を追加しました。最初にこれらの依存関係について学びましょう:

wp-i18nは、次のような国際化関数のグーテンベルクバージョンです。 __(). wp-blocksは、ブロックを登録するregisterBlockType関数に使用されます。ブロック内のさまざまなコンポーネントにwp-editorおよびwp-componentsスクリプトを使用します.

アセットをキューに追加したので、ブロックの書き込みを開始できます /src/block.js ファイル.

依存関係のインポート

Gutenbergボイラープレートを使用している場合は、 block.js ファイルは、Gutenbergのプラグインを構築するために使用できる基本的なブロック構造を持つ必要があります。

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

const {registerBlockType} = wp.blocks;

/ **
*登録ブロック
* /
デフォルトのregisterBlockType( ‘gutenberg-boilerplate / block’、{
//ブロックタイトル
タイトル:__( ‘Gutenberg Boilerplate’),
//ブロックの説明
説明:__( ‘ブロックの例’),
//ブロックカテゴリ
カテゴリ:「共通」,
//ブロックアイコン
アイコン: ‘admin-site’,
//キーワードをブロック
キーワード:[
__( ‘ボイラープレート’),
__( ‘こんにちは世界’ ),
__( ‘例’),
],
属性:{
},
//編集インターフェースを定義します
編集:小道具=> {
戻る(

{__( ‘Hello Backend’)}

);
},
//フロントエンドインターフェイスを定義する
保存:小道具=> {
戻る(

{__( ‘Helloフロントエンド’)}

);
},
});

npm run devを実行して、リアルタイムでコードのコンパイルを開始できます.

最初に、上部のブロックに必要なすべてのコンポーネントとライブラリをインポートします。

/ **
*依存関係をブロック
* /

「クラス名」からクラス名をインポートします。

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

const {registerBlockType} = wp.blocks;

const {
リッチテキスト,
InspectorControls,
BlockControls,
} = wp.editor;

const {
PanelBody,
TextareaControl,
TextControl,
ダシコン,
ツールバー,
ボタン,
ツールチップ,
} = wp.components;

最初の輸入 クラス名 JSXでは要素内に複数のクラスを使用できないため、npmを使用してコード内で複数のクラスを使用してインストールしました。.

それらを使用しながらインポートした他のコンポーネントについて学習します.

属性を定義する

次に、ショートコードと同じように、Gutenbergブロックに4つの属性を定義します。

属性:{
つぶやき: {
タイプ: ‘string’,
},
ツイート送信:{
タイプ: ‘string’,
},
ボタン:{
タイプ: ‘string’,
デフォルト:__( ‘Tweet’),
},
テーマ:{
タイプ:「ブール値」,
デフォルト:false,
},
},

ご覧のとおり、すべての属性はショートコードと同じです。すべての属性にはタイプキーがあり、グーテンベルクにそのデータタイプを通知します。文字列、数値、ブール値を使用できます & 受け入れられる型としてのオブジェクト.

一部の属性にはデフォルト値も含まれています。属性には、ソースやセレクターなど、この例では使用しない他のプロパティも含めることができますが、 ここでそれらについてもっと学びましょう.

インターフェースを編集

次に、ブロックの編集インターフェイスを作成します。これが表示になります。ユーザーは、Gutenbergでブロックを編集しているときに表示されます。.

基本的なアイデアを得るには、まずブロックをハードコーディングして、コード内の次の領域を置き換えることでブロックを構築します。

//編集インターフェースを定義します
編集:小道具=> {
戻る(

{__( ‘Hello Backend’)}

);
},

次のコードで:

//編集インターフェースを定義します
編集:小道具=> {
戻る[

カボチャとペンギン

つぶやき

];
},

これにより、最終結果がわかります。次のようになります。

Gutenbergのプラグイン

ブロックの最初の要素は、ツイートのテキスト領域です。グーテンベルクの見出しブロックと同様に、編集可能なテキストフィールドに置き換えます.

我々は使用するだろう リッチテキスト ハードコードされたテキストを置き換えるために以前にインポートしたコンポーネント.

RichTextコンポーネントには5つの引数があります。ショートコードを使用してフロントエンドの要素を表示するため、formatは文字列です。属性でセレクターを使用したい場合、フォーマットは配列になります.

リッチテキストには、太字や斜体など、デフォルトでいくつかのフォーマットオプションがあります。これらは、formattingControls引数に空の配列を渡すことで無効にしています。.

プレースホルダーは、フィールドにテキストがない場合のプレースホルダーテキストです。変更イベントが発生すると、onChangeはonChangeTweet関数をトリガーします.

最後に、値はフィールドの値になります。これは、前に定義したツイート属性から取得されます.

リッチテキスト領域を定義したら、テキストフィールドの値が変化したときにトリガーされるonChangeTweet関数を作成する必要があります。.

//編集インターフェースを定義します
編集:小道具=> {
const onChangeTweet = value => {
props.setAttributes({ツイート:値});
};
戻る[
…コードの残りの部分

RichTextフィールドの値をonChangeTweet関数に渡します。 props.setAttributes ツイート属性の値を更新する関数.

あなたがあなたのブロックを使うとき、あなたは今グーテンベルクの力を見るでしょう.

グーテンベルクのリッチフィールド

すごくないですか?

ブロックインスペクター

Gutenbergのプラグインを作成する場合、プラグインのオプションパネルを作成するために毎回ホイールを作り直す必要はありません。 Gutenbergは、ブロックのカスタマイズを可能にする簡単な方法を提供し、すべてのユーザーが組み込みのUIパターンで一貫したエクスペリエンスを確実に実現できるようにします.

RichTextコンポーネントと同様に、InspectorControlsコンポーネントは、ブロックが選択されたときにサイドバーを追加します。このようなもの:

グーテンベルクインスペクターコントロール

また、TextareaControlとTextControlを使用して、インスペクター領域にテキスト領域とテキスト入力フィールドを追加します。.

次のコードをreturnステートメントに追加します。

!! props.isSelected && (

),

props.isSelectedは、ブロックが選択されている場合にのみインスペクターが表示されることを確認します.

TextareaControlおよびTextControlコンポーネントは、RichTextと同様に、値とonChangeメソッドを持っています.

新しい変更に対応するために、ブロック表示のコードも変更する必要があります。この場合、ツイートテキストがリンクに追加されるので、ブロックテキストにボタンテキストを追加するだけでよいので、バックエンドに表示する必要はありません。.

最初のコードのハイパーリンクを次のように置き換えることができます。


{props.attributes.button}

前述のように、バックエンドでハイパーリンクを表示する必要がないため、コードからハイパーリンクを削除しています。これにより、ブロックは次のようになります。

グーテンベルクClick to Tweetインスペクターコントロール

ブロックインスペクターはあなたのブロックのための強力なツールになることができます。プラグインに、エディター領域には複雑すぎる詳細オプションがある場合は、それらをインスペクター領域に配置できます.

最後のオプションをブロックに追加して、次のセクションでJavaScriptの部分を終了します.

ブロックツールバー

ブロックツールバーは、ブロックにオプションを追加するために使用できる別のビルド済みUIコンポーネントです。選択すると、ブロックの上に表示されます。例:

グーテンベルクブロックツールバー

理想的には、ブロックツールバーにはブロックのプライマリコントロールが含まれ、インスペクターはセカンダリコントロールをホストする必要があります。しかし、それは議論の余地があり、あなたのブロックに依存します.

ブロックツールバー領域を使用して、代替スタイルコントロールをホストします。.

ブロックインスペクターと同様に、次のコードをreturnステートメントに追加して、ブロックツールバーをブロックに追加する必要があります。

!! props.isSelected && (

),

BlockControlsおよびToolbarコンポーネントを使用して、ブロックにツールバーを追加します。ブロックインスペクターと同様に、props.isSelectedは、ブロックにフォーカスを置いたときにのみツールバーが表示されるようにします.

また、コントロールにはTooltipおよびButtonコンポーネントを使用します。ツールチップコンポーネントはボタンコンポーネントの周囲に配置され、コントロールにカーソルを合わせるとツールチップが表示され、より多くのコンテキストが提供されます。.

ボタンコンポーネントは、前の記事でインポートしたclassnamesモジュールを使用しています。クラス名関数を使用して、3つのクラスをコントロールに割り当てました。 3番目のクラスはアクティブであり、テーマ属性値がtrueの場合にのみ表示されます.

そのonChange関数は、テーマ属性をtrue / falseに切り替えます。最後に、Dashiconコンポーネントを使用して、コントロールのアイコンを表示します.

また、変更に対応するために、ブロックコードを変更する必要があります。次の行を置き換える必要があります。

と:

テーマ属性がtrueかfalseかをチェックし、それに応じてブロックにクラスを割り当てます.

これで、ブロックは次のようになります。

ツールバーをクリックしてツイートする

GutenbergブロックのJavaScript側の部分が完成しました。ファイルのソースコード全体を見つけることができます ここに.

次に、サーバー側の出力を処理してブロックを終了します.

サーバー側レンダリング

Gutenbergでは、サーバー側のレンダリングを使用して、フロントエンドにブロックを表示できます。そのサーバー側のレンダリングにより、ショートコードのブロックを作成することが可能になります.

最初に、次のコードで置き換えることにより、nullを返すようにsaveメソッドを作成します。

//フロントエンドインターフェイスを定義する
セーブ() {
// PHPでのレンダリング
nullを返します。
},

register_block_type PHP関数を使用して、ブロックタイプをPHPに登録します。

if(function_exists( ‘register_block_type’)){
//サーバー側のレンダリングをレンダリングコールバックにフックします
register_block_type(
‘hello-gutenberg / click-to-tweet’、[
‘render_callback’ => 「hello_gutenberg_block_callback」,
‘属性’ => アレイ(
‘tweet’ => アレイ(
‘タイプ’ => ‘ストリング’,
),
‘tweetsent’ => アレイ(
‘タイプ’ => ‘ストリング’,
),
‘ボタン’ => アレイ(
‘タイプ’ => ‘ストリング’,
‘デフォルト’ => ‘つぶやき’,
),
‘テーマ’ => アレイ(
‘タイプ’ => 「ブール」,
‘デフォルト’ => 偽,
),
),
]
);
}

register_block_type関数。最初に、引数の配列とともにブロック名を渡します.

最初の引数はrender_callback関数で、サーバー側レンダリングのためにhello_gutenberg_block_callback関数を呼び出します.

レンダーコールバックの後で、block.jsファイルと同様に、属性を配列として渡し、レンダーコールバック関数で使用します。.

レンダーコールバック関数は次のようになります。

function hello_gutenberg_block_callback($ attr){
extract($ attr);
if(isset($ tweet)){
$ theme =($ theme === true? ‘click-to-tweet-alt’: ‘click-to-tweet’);
$ shortcode_string = ‘[clicktotweet tweet ="%s" tweetent ="%s" ボタン="%s" テーマ="%s"] ‘;
return sprintf($ shortcode_string、$ tweet、$ tweetsent、$ button、$ theme);
}
}

すべての属性を抽出し、ショートコード内で返します。 Gutenbergのショートコードプラグインを適応させるために必要なことはこれだけです。.

この記事で使用されているすべてのコードは、 こんにちはグーテンベルク リポジトリ.

次のパートでは、サイドバーAPIを含む、グーテンベルクの既存のプラグインを適応させる他の方法を見ていきます。.

プラグインをグーテンベルクに適応させる方法について質問がある場合は、コメントで質問してください!

WordPressサイトの高速化に関する速習コースに参加することを忘れないでください。いくつかの簡単な修正により、ロード時間を50〜80%も短縮できます。

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map