初心者向けのGutenbergチュートリアル:最初のブロックプラグインを作成する

初心者のためのグーテンベルクチュートリアル


2020年にWordPress用に何かを開発することを考えている場合、グーテンベルクを無視することは単に選択肢ではありません。プラグインとテーマはすべて、グーテンベルクとうまく連携し、ユーザーがWordPressダッシュボードで見ることができるすべての内容に一貫したユーザーエクスペリエンスを提供する必要があります。そして特にグーテンベルクは現在WordPressの不可欠な部分なので、単にブロックエディターと呼ばれています.

そうは言っても、グーテンベルクを使い始めるのは簡単ではありません。数年前はメモ帳だけを使用して高品質のWordPressプラグインを作成できましたが、今ではプロセスがはるかに難しくなっています.

Gutenbergは、WordPress REST API、JavaScript、Reactなどのテクノロジーを使用しています。したがって、Gutenbergを使用するには、プラグインとテーマの新しい要件が必要でした。.

良いニュースは、今日はそのすべてについて話し合うことです! この投稿は、Gutenbergのプラグインを初めて作成する初心者向けのGutenbergチュートリアルとして機能します.

私たちは主に、グーテンベルク用のプラグインを作成するさまざまな側面に焦点を当てています—開発環境のセットアップ、基本的なプラグインの作成、およびブロックの操作のニュアンス.

1. Gutenberg開発環境をセットアップする

Gutenberg開発を始めるには、JavaScriptとReactの基本的な知識が必要です。これは、WordPress開発者向けのJavaScriptのチュートリアルです。さらに、Gutenbergの追加パッケージでは、NodeJSパッケージマネージャーnpmの使用が必要になる場合があります。.

インストーラーを使用して、NodeJSの最新の安定バージョンをWindowsまたはMacOSにインストールできます。 公式サイト. Linuxサーバーがある場合は、ソースコードをコンパイルするか、対応するパッケージマネージャー(aptやyumなど)を使用できます。たとえば、Ubuntuを使用している場合は、ターミナルで次のコマンドを実行します.

sudo apt update
sudo apt install nodejs npm

インストールが成功した後、次のコマンドを実行してNodeJSのバージョンを確認できます.

nodejs-バージョン

これらのボックスにチェックを入れた後、現在のGutenbergプラグイン(スタンドアロンプ​​ラグイン)のインスタンスまたはその開発バージョンでさえ、テスト用のWordPressウェブサイトをセットアップすることをお勧めします。 GitHubから.

⚠️注; Gutenbergは現在WordPressに組み込まれていますが、そのバージョンは最新のものではありません。 Gutenbergでの開発はまだかなり個別に行われており、新しいものはすべて最初にGutenbergスタンドアロンプ​​ラグインに含まれています。コアの実際のGutenbergバージョンは、WordPress 5.0に含まれて以来、大きなアップデートをまだ受け取っていません。あなたは常に最新バージョンのGutenbergで作業することを望んでいます。これは、作業を将来にわたって保証し、後でWordPressコアにもたらされるすべてと調和するようにするために、より良いチャンスを与えるからです。.

別の注記として、コアGutenbergプラグインに貢献するつもりなら、リポジトリには 寄稿ガイドライン ローカル環境をセットアップし、レビューのために変更をセットアップする方法について.

��最後に、既存のプラグインをGutenbergに適合させる場合は、これを実現する方法に関する詳細なチュートリアルを以下に示します。パート1とパート2.

Gutenbergと連携する準備ができているテンプレートプラグインディレクトリを使い始めるには、 Gutenbergボイラープレートプラグイン. このようなソリューションは、基本的なファイル構造に役立ち、プラグインのコンテンツに集中できます。ボイラープレートを使用するには、プラグインをダウンロードしてインストールします ここから(zip). ボイラープレートプラグインをインストールしてアクティブ化すると、サンプルブロックがアクティブ化されます。これについては、このチュートリアルで説明します。各ブロックのコードは、ボイラープレートのプラグインの場所にあるそれぞれのディレクトリにあります。.

2.初期設定

念のため、Gutenbergはブロックの概念を導入しました。これは、標準のTinyMCEエディターキャンバスの代わりとなるものです。場合によっては、ブロックは、プラグインがさまざまな方法でWordPressコンテンツに追加するために使用したショートコードやその他の追加コンテンツ要素を置き換えることもできます.

Gutenberg向けのビルドに関心がある場合、最も一般的なアプローチは、新しいブロックを作成してユーザーが利用できるようにするプラグインをビルドすることです。これはまさに、グーテンベルクのチュートリアルで行うことです.

次のセクションでは、最初から最後までのプロセスについて説明します.

これから作成する特定のプラグインは、カスタマイズ可能な特定の背景を持つメッセージを出力します。ビルドの例にすぎませんが、ここで説明する原則を取り入れて、独自のより複雑なプラグインに適用できます.

このようなプラグインを構築するための基本はおなじみのはずです。まず、WordPressのプラグインディレクトリに新しいディレクトリを作成します。その中に、4つのファイルを配置します。

  • index.php –このファイルには、新しいGutenbergブロックに関するメタデータが含まれています.
  • block.js –このJavaScriptファイルは、カスタムGutenbergブロックを登録します.
  • editor.css –このファイルには、エディターのスタイルが含まれています.
  • style.css –このファイルには、ブロックのフロントエンドのスタイルが含まれています.

リストの最初の2つのファイルはブロックの登録を処理し、次の2つのファイルはブロックの要素の視覚スタイルを定義します.

3.ブロックの登録

グーテンベルクのブロックを登録するこのステップでは、次の2つを広くカバーします。

  • WordPressのPHPエンジンにプラグインのメタデータを登録する,
  • Gutenbergが実行されるReactフレームワークにブロックを登録する.

index.phpファイルには、ブロックとエディターのエンキューアセットが含まれています.

  • 最初に、add_actionを使用してカスタム関数を登録します。.
  • 次に、wp_enqueue_styleおよびwp_enqueue_script関数を使用して、ブロックおよびエディターのJavaScriptおよびCSSファイルのパスをリストする関数を定義します。.

以下のPHPコードでこれを要約します。

add_action( ‘enqueue_block_editor_assets’、 ‘gb_block_01_basic_editor_assets’);

function gb_block_01_basic_editor_assets(){
//スクリプト.
wp_enqueue_script(
「gb-block-01-basic」,
plugins_url( ‘block.js’、__FILE__),
配列( ‘wp-blocks’、 ‘wp-i18n’、 ‘wp-element’),
filemtime(plugin_dir_path(__FILE__)。 ‘block.js’)
);

//スタイル.
wp_enqueue_style(
「gb-block-01-basic-editor」,
plugins_url( ‘editor.css’、__FILE__),
配列( ‘wp-edit-blocks’),
filemtime(plugin_dir_path(__FILE__)。 ‘editor.css’)
);
}

これにより、基本エディターのリソースが定義されます。ブロックの場合、CSSファイルのみが必要です。これはwp_enqueue_style関数で定義されます.

block.jsファイルは、Gutenbergエディターでのブロックのプロパティを記述します。次の属性とプロパティを定義します。

  • title –ブロックのタイトル
  • icon –ブロックに表示するアイコン。からアイコンを選択できます このダシコンのコレクション
  • category –ブロックが属するグループ。ブロックのグループの例は "一般," "フォーマット," "埋め込む."
  • edit – DOM要素を返すJavaScript関数。 wp.​​element.createElement関数を使用して、カスタムテキストが記述されたカスタム段落DOM要素pを作成します。ユーザーがエディターからブロックをクリックすると、グーテンベルクはこのプロパティを呼び出します.

( 関数() {
var registerBlockType = wp.blocks.registerBlockType;

registerBlockType( ‘gb / basic-01’、{
タイトル:__( ‘GB Basic’、 ‘GB’),
アイコン: ‘shield-alt’,
カテゴリ:「共通」,

編集:function(props){
wp.​​element.createElement(
「p」,
{className:props.className},
‘こんにちは世界! —エディターから(01 Basic Block)。 ‘
);
},

});
})();

同様に、ブロックがフロントエンドから選択されたときに呼び出される保存プロパティを作成できます。.

上記のコードでは、p要素のclassNameをprops.classNameで定義しました。これにより、wp-blockで始まり、その後にブロックの名前が続くクラス名が作成されます。このGutenbergチュートリアルの次のセクションでは、このクラスのスタイルを定義します.

4.ブロックのカスタマイズ

前のセクションで説明したように、このチュートリアルの次のステップは、ブロック要素のプロパティを定義することです。背景色、テキスト色、境界線を定義しましょう.

.wp-block-gb-basic-01 {
色:#000;
背景:ミスティローズ;
ボーダー:0.2rem赤一色;
}

CSSファイルの代わりに、SCSSファイルを追加してNodeでコンパイルすることもできます。さらに、こちらは グーテンベルク要素のスタイリングに関するチュートリアル CSSトリックから.

最初のグーテンベルクチュートリアルの結果

作成したブロックをテストする準備ができました。 Gutenbergプラグインがアクティブになっている場合は、 + アイコンと新しいブロックがそこに表示されているかどうかを確認.

新しいグーテンベルクブロック

次に、ブロックをクリックすると、CSSファイルの背景色と枠線が付いた、上からのメッセージが表示されます。

ブロック中

結論

最初のGutenbergチュートリアルが終わりました。これがお役に立てば幸いです。確かに、ここで作成したものはそれほど複雑ではありませんが、グーテンベルクで作業するときの基本的な構造と次のプラグインを計画する方法についてのアイデアを与えるはずです.

最初に、Gutenberg開発環境をセットアップする手順について説明しました。次に、さらなる開発に役立つボイラープレートプラグインを導入しました。その後、議論の焦点は、新しいブロックの登録とスタイル設定のさまざまなステップに移りました.

このGutenbergチュートリアルが、初めてのGutenbergプラグインの作成に役立つことを願っています!

ご不明な点がございましたら、下のコメント欄にご記入ください。.

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