Gutenberg Blocks チュートリアルの和訳と解説【属性・コンポーネント・リッチテキスト】

今回はIntroducing Attributes and Editable Fieldsを日本語化します。エディターで編集可能な動的ブロックを作るための基本的な概念、attuributes(属性)について、components(コンポーネント)ついて、リッチテキストの有効化についてが説明されてます。補足説明では、私が特に理解できなかった箇所を中心に解説してます。

公式チュートリアルの和訳

公式チュートリアルの英文はこちらのページ↓

Attributes(属性)と編集可能フィールドの紹介

これまでの例では、ブロックのメッセージ内容を編集するオプションがなく、あまり面白くなかったでしょう。このセクションでは、RichTextフィールドを実装することで、ユーザーが自分でメッセージを編集できるようになります。この実装の前に、ブロックの状態(「attributes: 属性」)がどのように維持され、変化するかを理解することが重要です。

属性

これまで、editおよびsave関数は単純な文章だけを返していました。また、これらの関数がどのような役割でブロックの外観を作るのかを学びました。 ユーザーがブロックを編集できるようにするには、この構造を変える必要があります。 これを実現するために、ブロック編集中はブロックのデータをJavaScriptオブジェクトとして保持し、更新されたら再度edit関数を呼び出します。 別の言い方をすると、ブロックはそのブロックの属性(attributes)関数を出力します。

ブロックのデータをJavaScriptオブジェクトとして保持すると、保存された投稿コンテンツの中からこのオブジェクトを再度抽出しなければいけません。これは、次のようなブロックタイプのattributesプロパティで実現されています。

新しいブロックタイプを登録するとき、edit関数とsave関数で受け取りたい属性オブジェクトの形をattributesプロパティで表します。それぞれの値はsource functionで、これはブロックで書かれたマークアップの中から目的の値を見つけるために使います。

上記のコードスニペットでは、エディターを読み込むときに、保存された投稿のマークアップに含まれるp要素からcontentの値が抽出されます。

コンポーネントとリッチテキスト

前の例ではcreateElement関数を使用してDOMノードを作成しましたが、この行動を「コンポーネント(components)」にカプセル化することも可能です。 これにより共通の行動をまとめて、複雑なコードを避けることができます。

ブロックの実装で使用できるコンポーネントは多数あります。下記のコードで見られるRichTextコンポーネントはそのうちの1つです。

RichTextコンポーネントは強力なtextarea要素で、太字、斜体、ハイパーリンクなどのリッチコンテンツの編集が可能です。

RichTextコンポーネントを使用するには、wp_register_scriptを呼び出すときにスクリプトハンドルの依存関係を指定する配列内にwp-editorを追加します。

register_block_typeeditor_scriptハンドルもgutenberg-examples-03に更新することを忘れないでください。

コンポーネントとして実装することで、編集可能なフィールドをより細かく実装することができます。 あなたが作成するブロックはRichTextを全く必要としないかもしれませんし、多くのRichText要素を必要とするかもしれません。

RichTextではネストされたノードを使用できるため、保存されたコンテンツから値を抽出するときには、html属性のソースと合わせて使用することが多いでしょう。RichTextの値を出力するには、save関数でRichText.Contentを使用します。

これがExample03の最終的なコードです。

補足説明

attributesプロパティについて

まず、ブロック要素を動的に書き換えるための仕組みが説明されてますね。editやsaveでプレーンなテキストを指定する代わりに、ブロックで書かれたコンテンツのデータを保存するためのJavascriptオブジェクトを使います。ブロック内のコンテンツデータをどのような形で保存したり呼び出すかを、attributesプロパティで設定する訳です。データの受け渡しをする時に使う型みたいなものです。

上に書かれたコードの例だと、「contentという名前の型は配列(array)の形でpタグ内全ての子要素をデータとして保存する」ということを、attributesプロパティで設定していることになります。type, source, selectorなどの詳細はまた後ほど。

コンポーネントについて

components(コンポーネント)は、よく使うものを予め部品化したようなものだと思ってます。カスタムブロックを作るときは、実装したい機能に合わせてコンポーネント(部品)を選んでいく、という感じでしょうか。
ちなみにこちらの記事↓でよく使いそうなコンポーネントが紹介されていて、参考になりました!

propsについて

Reactを使える方はよくご存知だと思いますが、私はまだ勉強中なので最初はちんぷんかんぷんでした。。Reactの公式ドキュメントでは、 props = データの入ったオブジェクトという言い方をしていて、まさにその通りなのかな。ブロック内に書かれたコンテンツのデータを受け渡す時に使われるものと考えればいいと思います。

editのコードを読み解く

最後に、edit部分のコードをもう一度詳しく見てみましょう。

データが入ったpropsを引数に入れる。動的カスタムブロックではお決まりの書き方。

→attributesで指定した型(例ではcontent)のpropsをcontentに代入。

→エディターで編集されたらattributesのデータ(content)を更新する、という関数。

→elはコードの冒頭で定義してあるelement.createElementのこと。要素を描画するためのメソッドです。

el( HTMLタグやコンポーネント名 , { クラス等の属性( properties)}, タグの中のコンテンツ); …という形で記述されてます。例では第一引数でRichTextコンポーネント、第二引数でその属性。

classNameprops.classNameを指定すると、registerBlockTypeの( )内に書いた名前を使ってクラス名が自動的に付与されます。サンプルコードだと、「wp-block-gutenberg-examples-example-03-editable」というクラス名がブロックに付与されます。onChangeにリッチテキストのエディターが編集された時に実行したい関数を指定。valueにはリッチテキストエディターに表示させる内容を指定。ここでは当然、contentですね。

こんな感じです。なんとなく繋がりましたか?少しずつ理解できると嬉しいです。今回はこれで以上です!

関連記事

Blocksチュートリアル和訳記事の一覧