Gutenberg/日記003
ブロックの実装
前回ブロックの構成をある程度把握できたので、今回は実際に使えるブロックに仕上げてみます。簡単な目標として、記事編集画面上でリッチテキストエディタによって中身が編集できるブロックを目指します。
const RichText = wp.editor.RichText;
まず、リッチテキストエディタを利用するために、エディタのコンポーネントを読み込みます。いろいろなコンポーネントがあるようですが、必要に応じて調べていくスタンスです。これでRichTextという名前でエディタが使えるようになりました。
attributes: {
content: {
source: 'children',
selector: 'p'
}
},
次にこのブロックの中身を保存する変数を定義します。前回は出てきませんでしたが、registerBlockTypeで登録するブロックの実体である第二変数オブジェクトにattributesプロパティを追加します。リッチテキストの中身を保存する変数のようなものを作りたいのでcontentという名前がついています。その中身はsourceとselectorというキーをもつオブジェクトになっています。リッチテキストエディタなどのコンポーネントに入力された内容の中から必要な情報を抜き出して保存したいということなので、「RichText.children（リッチテキストエディタの中身）からpタグを抽出してcontentとして保存する」みたいな意味が含まれています。
edit: function( props ) {
return (
<div className={ props.className }>
<RichText tagName='p' className={ props.className } onChange={ (content) => props.setAttributes({content}) } value={ props.attributes.content } />
</div>
);
},
こちらは記事編集画面でブロックの中にリッチテキストエディタの中身を表示するように書き換えたeditメソッドです。他の解説サイトを参考にして、真似てみたので正しく把握できてないのですが、パッと見て何となくその挙動はわかりそうですね。ReactみたいにJSX的な記法で
メソッドの引数 props はこのブロックのインスタンスみたいなものが入るようです。なので、props.classNameにはブロックのIDをclass属性用の表記にしたもの、props.attributes.contentには先ほど定義したattributesプロパティのcontent変数がそれぞれ返ってきます。
ブロックのインスタンスの値を更新するときはonChangeイベントを使ってprops.setAttributesメソッドで更新していますね。一つのブロックに入力欄を複数設けることも簡単にできそうです。
save: function( props ) {
return (
<div>
<RichText.Content tagName="p" value={ props.attributes.content } />
</div>
);
},
saveメソッドも同様にcontentの中身を表示するような記述になっています。レイアウトするためのdivタグなんかもつけ放題ですね。なんかもっときれいに書けそうな気もしますが、これで一応完成です。
プラグインとしてリリース
実装が済んだので、プラグインとしてビルドします。npm startコマンドを実行中であれば勝手に必要なファイルを作成してくれますが、手動でnpm run buildでビルドすることもできるようです。
それでは実際にサーバにアップロードして、ちゃんと動くことを確かめてみたいと思います。node.jsによる開発環境をWordpressの動いているサーバーに全部アップロードする必要はありません。
- plugin.php
- src/init.php
- dist の中身全部
↑これらをアップロードすればよさそうでした。アップロードしたものをWordpressのプラグインとして有効化してあげて、実際に記事編集画面でブロックが追加されていることが確認できました。動作もOKです。後は使い勝手のいいように適宜変更するだけですね。
Last-Modified