DESIGNBLOGPORTFOLIOCONTACTサイト内検索Gutenbergカスタムブロックその2Gutenbergのカスタムブロックを制作します。今回は、前回の続きで、pブロック内のテキストを編集可能なカスタムブロックです。pluginディレクトリに専用のフォルダを好きな名前で用意してください。(今回の場合はgutenberg-custom-block-sample02)プラグインフォルダ内のphpファイルのコードです。前回のものと内容にほとんど変化がなくsample02の箇所が異なるだけです。次にblock.jsというファイルを同じディレクトリに用意します。);}(window.wp.blocks,window.wp.element));大きく異なるのはJSのほうです。以下、簡単な解説です。attributesここでは、pタグ中身となるコンテンツの種類を定義します。今回はリッチテキストなので、arrayとchildrenが必要なようです。editリッチテキストなので、wp.editor.RichTextを返すようにしている。onChangeイベントでsetAttributesを利用してコンテンツ内容を変更しています。(ざっくりというと)saveこちらもwp.editor.RichTextをエレメントとして返しています。単純なテキスト変更できるだけのものを用意するならざっとこんな感じ。2019/02/07WordPressABOUT名古屋を中心に、フリーランスで主にホームページ制作をしています。デザイン・サイト制作・WordPress案件・アプリ制作と幅広く対応可能です。新規制作だけでなく、すでにサイトをお持ちで運営方針などに疑問をお持ちの場合など、案件のご依頼・ご相談はお問い合わせよりご連絡ください。