概要

• ユースケース: Gutenberg エディターで独自のブロックを追加したい場合、JavaScript を使用してカスタム Gutenberg Block を登録する必要があります。このスニペットはその基本的な手順を提供します。
• 前提条件: WordPress テーマやプラグインの開発における基本的な知識が必要です。

サンプルコード

“`javascript

// カスタム Gutenberg Block を登録するスニペット

const { registerBlockType } = wp.blocks;

registerBlockType('namespace/blockname', {

title: 'カスタムブロック',

icon: 'smiley',

category: 'common',

edit: () => {

return <div>カスタムブロックの編集画面</div>;

},

save: () => {

return <div>カスタムブロックの保存内容</div>;

},

});

“`

解説

• `registerBlockType` 関数を使用して、カスタム Gutenberg ブロックを登録します。
• `'namespace/blockname'` はブロックの名前空間とブロック名を指定します。
• `title` は Gutenberg エディター内で表示されるブロックの名前です。
• `icon` はブロックのアイコンを指定します。
• `category` はブロックを表示するカテゴリーを指定します。
• `edit` メソッドはブロックの編集画面を定義します。
• `save` メソッドはブロックの保存内容を定義します。

ベストプラクティス

• ブロック名やアイコンは適切なものを選択し、ユーザーがブロックを識別しやすくすることが重要です。
• カスタム Gutenberg ブロックは、編集画面と保存内容を適切に設計することで使いやすくなります。
• ブロックのカテゴリーは適切に選択し、ユーザーがブロックを見つけやすくすることが望ましいです。