(旧)ブロックを共有する

(2024/1/20) この文書の原文は削除されました。以後は「チュートリアル: はじめてのブロック作成」を参照ください。便宜上、しばらく訳文を掲載しますが、内容は更新されず、一部古くなっていますので注意してお読みください。

素晴らしいブロックが完成しましたか ? ぜひ、世界と共有しましょう !

ブロックを理解してもらう
プラグインを解析する
zip して、サブミットする

ステップ1: ブロックを理解してもらう

ブロックディレクトリにとっても、エンドユーザーにとっても、ブロックがどのように作成されたのかをわかりやすく伝えることは重要です。

ガイドライン:

内容を表す名前をつける
説明は明確に記述する
すべてのコンテキストにキーワードを追加する
正しいカテゴリーを選択する

内容を表す名前をつける

一般にユーザーは、ブロックエディターの使用中に、タスクのコンテキスト内でブロックディレクトリを検索します。たとえば、ユーザーは投稿を作成中、ブロックディレクトリ内を「image gallery」で検索します。このとき、正しくブロックを名前付けしていれば、ブロックディレクトリ必要とされるブロックを表示できます。

あまり良くない: WebTeam5 Image Works
良い: Responsive Image Slider by WebTeam5

このとき、同じ名前のブロックが複数ある場合は、どうなるでしょう ?

ブロックの名前はできる限り、機能を表し、ユニークで、目立つものにしてください。適切な同義語を探し、必要であれば接頭辞を付けてください。

説明は明確に記述する

ブロックの説明は、ブロックが何をするのかを知らせるために非常に重要です。ブロックが何に役立つのかをすぐに理解できれば、すぐに使い始めてくれるでしょう。ユーザーはブロックエディターの限られたスペースでブロックの説明を読みます。短く、完結に記述してください。

あまり良くない: The best way to show images on your website using jQuery and CSS. (サイトで画像を表示する最高の方法です。jQuery と CSS を使用しています。)
良い: A responsive image gallery block. (レスポンシブなイメージギャラリーブロック)

ヒント: ここはブロックのマーケティングの場所ではありません。実際、ブロック内でのマーケティングは避けるべきです。詳細については「プラグインガイドブック」を参照してください。説明はできる限り明確に記述してください。あなたのブロックがどれだけ素晴らしいかは、ブロックディレクトリが指標を提供してくれるでしょう。

広範なコンテキストにキーワードを追加する

キーワードはブロックにコンテキストを追加し、インサーター内でユーザーが発見しやすくなります。

イメージスライダーブロックの場合の例です。

slider
carousel
gallery

キーワードの詳細についてはこちらを参照してください。

正しいカテゴリーを選択する

ブロックエディターには、ブロックの属するカテゴリーを指示できます。ユーザーがメニュー内でブロックを配置しやすくなります。

可能な値:

text
media
design
widgets
theme
embed

カテゴリーについての詳細はこちらしてください。

これらすべての情報をどこに入力すればよいのだろう、と思案に暮れていませんか ? 次のセクションをお読みください 🙂

プラグイン内の各ブロックは、対応する block.json ファイルとブロックメタデータを持つ必要があります。このファイルはブロックディレクトリに、ブロックに関する重要な情報を提供します。block.json ファイルは、ブロックに関するコンテキスト情報、たとえば name、description、keywords、categoryを保存する場所であり、ブロックのファイルの場所を格納します。

ブロックディレクトリにサブミットされたブロックプラグインは、単一の親や先祖を持つ場合にのみ複数のブロックを含むことができます。ブロックは、メインブロック1つのみでなければなりません。たとえば、リストブロックは複数のリスト項目ブロックを含むことができます。子ブロックは、block.json ファイルで parent プロパティを設定する必要があります。

以下のルールを満たすことを再度、確認してください。

editorScript は、エディター で使用されるすべてのコードを含む JavaScript バンドルを指している。
editorStyle は、エディター で使用されるすべての css を含む CSS バンドルを指している。
script は、Web サイト で使用されるすべてのコードを含む JavaScript バンドルを指している。
style Web サイト で使用されるすべての css を含む CSS バンドルを指している。

block.json にリストした、editorScript/editorStyle および script/style ファイルの両方を使用して、コードを分離してください。これで、バックエンドインターフェースとフロントエンドインターフェースがスムーズに動作します。1つファイルが必要なだけですが。

基本的な block.json ファイルの例です。

{
	"name": "plugin-slug/image-slider",
	"title": "Responsive Image Slider",
	"description": "A responsive and easy to use image gallery block.",
	"keywords": [ "slider", "carousel", "gallery" ],
	"category": "media",
	"editorScript": "file:./dist/editor.js"
}

また、block.json ファイルは他の重要なプロパティも含みます。block.json ファイルが含む追加プロパティの詳細については block.json の例を参照してください。

ステップ3: zip して、サブミットする

コミュニティは、あなたのコントリビューション (貢献) に感謝します。プラグインをサブミットしましょう。

ブロックガイドラインをお読みください。ブロックの zip ファイルを作成し、ブロックプラグインバリエーターに移動し、プラグインをアップロードしてください。

原文

First published

2021年2月23日

Last updated

2024年1月20日