Gutenberg/日記002
ブロックの構成
前回、create-guten-blockによって生成されたブロックの雛形情報の実体は、プラグインフォルダの中の src/block/blocks.js の中にあるそうです。同じフォルダの中に「editor.scss」「style.scss」もありますが、多分、編集時の見た目に関することなので、これはお客さんに納品する際に必要に応じて整えてあげればいいかなと思います。（今は特に触れません。）blocks.jsに相当する別のjsファイルを用意することで、多分複数のブロックを一つのプラグインで提供できるのだと思います。（多分、src/blocks.js の中でimportしてあげれば読み込まれるのでしょうね。）
さて、src/block/blocks.jsの中で気になるところをみていきます。
import './style.scss';
import './editor.scss';
↑これはCSSファイルを適用するための記述ですね、きっと。一つ上のフォルダに common.scss というファイルも存在していたので、これがプラグイン全体に関わるファイルで、styles.scssとeditor.scssは単一のブロックに関わるものなのでしょう。ちなみにstyles.scssはフロントエンドとバックエンド、すなわちサイトの閲覧者がみるページと管理画面に適用され、editor.scssはバックエンドにだけ適用されるというすみわけがされているようです。editor.scssの方が例外的な装飾を記述するので、style.scssよりも後方でimportしているとのことです。
const { __ } = wp.i18n; // Import __() from wp.i18n
const { registerBlockType } = wp.blocks; // Import registerBlockType() from wp.blocks
必要なメソッドを読み込んでいるだけの部分です。__メソッドは言語翻訳メソッドなので、使わない場合は削ってもよさそう。
registerBlockType( 'cgb/block-amy-block', {
// Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
title: __( 'amy-block - CGB Block' ), // Block title.
icon: 'shield', // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/.
category: 'common', // Block category ? Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
keywords: [
__( 'amy-block ? CGB Block' ),
__( 'CGB Example' ),
__( 'create-guten-block' ),
],
この辺でブロックの基本的な情報を設定できるようです。
- cgb/block-amy-block
- ブロックを表すユニークなID。Gutenberg のブロックのコード表示のときにコメントアウトされていたブロックの範囲を示す情報に使われていた気がします。
- title
- ブロックの名前。ブロックを表す好きな名前をつけるのがよさそう。
- icon
- ブロックを選択するときに表示されるアイコン。shield以外にも用意されてると思うので、後で調べてみたい。
- category
- ブロックを選択するときのカテゴリ分類。common（一般ブロック）, formatting（フォーマット）, layout（レイアウト要素）, widgets（ウィジェット）, embed（埋め込み）があるとのこと。カテゴリを増やせるかどうかはまだ謎です。
- keywords
- ブロックを検索するときに使うタグの配列とのこと。3つまで制限がある？
edit: function( props ) {
// Creates a <p class='wp-block-cgb-block-amy-block'></p>.
return (
<div className={ props.className }>
<p>? Hello from the backend.</p>
<p>
CGB BLOCK: <code>amy-block</code> is a new Gutenberg block
</p>
<p>
It was created via{ ' ' }
<code>
<a href="https://github.com/ahmadawais/create-guten-block">
create-guten-block
</a>
</code>.
</p>
</div>
);
},
save: function( props ) {
return (
<div>
<p>? Hello from the frontend.</p>
<p>
CGB BLOCK: <code>amy-block</code> is a new Gutenberg block.
</p>
<p>
It was created via{ ' ' }
<code>
<a href="https://github.com/ahmadawais/create-guten-block">
create-guten-block
</a>
</code>.
</p>
</div>
);
},
- edit
- 記事編集画面（バックエンド）での挙動を記述するメソッド
- save
- WEBサイト上（フロントエンド）での挙動を記述するメソッド
これらのメソッドがブロックを便利にする肝となるので、腕の見せ所となりそうですね。雛形の段階では、単純に固定のHTML文字列を表示するブロックのようで、編集画面で何かテキストや画像を入力できるというわけではないようです。ブロックの基本的な構造は以上です。他に拡張した使い方もできるのかもしれませんが、必要に応じて調べてみます。
Last-Modified