笹垣亮介こんにちは!3児のパパエンジニアの笹垣です。弊社では、WordPressをベースにしたサイト制作についてもよくご相談をいただくのですが、今回はWordPressバージョン5から導入された「Gutenberg」のカスタムブロック開発について備忘録も兼ねてご紹介します。はじめにWordPressバージョン5が正式リリースされてから4か月。v5リリース時はそこそこ興奮したのを覚えています。Editor)は“ブログ”という側面が強く、エディターのツールバーと改行を駆使して記事を書く形で、行間の調整に苦労したり編集者ごとのトンマナの統一が難しく、案件によってはカスタムフィールドを複数作成して回避するなどの対応が必要でした。v5で採用されたGutenbergは、“ブロック”単位で記事を書いていくスタイルで、記事を書く上で最低限必要なブロック(パーツ)はデフォルトで備わっているため、上述のような何十個ものカスタムフィールドを作成することなく、トンマナが保たれた綺麗な記事・ページの作成が可能です。Gutenbergについては賛否両論ありますが、個人的にはサイト制作側・コンテンツ制作者(記事を書く人)双方にとってとても有用な機能だと思います!そんなGutenbergですが、案件によっては標準のブロックでは足りない場面が出てきます。そんな時は、独自のブロックを開発しさらに編集画面の使い勝手を良くしましょう!独自のブロックを追加するには、プラグインとして追加する必要があるメインの言語はJavaScriptというのが大きなポイントになると思うのですが、従来のWordPress開発とは少し違った知識が必要になるため、はじめてブロック開発をする方にとっては若干取っ付きにくさがあると思います。ブロック開発については色々なサイトで説明されていますが、本記事では先日実際に案件で必要になった「定義リスト(dl,dt,dd)ブロック」の追加方法についてご紹介します。必要な知識Gutenbergには、新しめのフロントエンド技術が使われており、以下の知識が必要になります。React.jsES6(ES2015)Babelwebpack環境構築まずはターミナルでプラグインディレクトリに移動します。~/Documents/develop/samplesite.com/htdocs/cms/wp-content/pluginsカスタムブロックプラグイン用のディレクトリを作成します。initでpackage.jsonを生成します。initpackage.jsonを更新します。}}パッケージをインストールします。i続いて、Babelによるトランスパイルとwebpackの設定を行います。すべてのブラウザがES6に対応しているわけではないため、Babelを使ってES5に変換する必要があります。作成し内容を編集します。]}webpackを使うことで、トランスパイル後のJSのバンドル(ひとまとめにすること)とES6のモジュール機構が使えるようになります。作成し内容を編集します。}};ここまでで、Gutenbergブロック開発の準備が整いました。ブロックタイプの定義Gutenbergはwpというグローバル変数を通して様々な機能を利用可能にしています。wp.blocksにあるregisterBlockType関数を利用しブロックタイプを登録します。今後、定義リスト以外のブロックも作成予定のため、ブロックの定義は各ファイルに分割しblock.jsでブロックをまとめて登録します。);続いて、各ブロックの中身を作成します。dlブロックは、dt,dd要素の親となるため、InnerBlocksだけを保持します。}};allowedBlocks属性で、中に入れられるブロックを指定します。dtブロック、ddブロックは、parent属性によって、dlブロックの子ブロックであることを明示的に宣言します。これにより、定義リストを選択したときのみ表示されるようになります。buildします!ブロック用JSの読み込み作成したブロックを編集画面で使用するために、プラグインを作成します。);プラグインを有効化します。Inc.2007年5月設立。ブランディング、コンサルティング、マーケティングの観点を大事にし、消費者、クライアントとより良き未来を創造していきます。求人情報まで毎月1回お届けします。YOU!ご登録ありがとうございました。