(旧)ブロックの属性

Topics

  • Edit と Save
  • TextControl コンポーネント

(2024/1/20) この文書の原文は削除されました。以後は「チュートリアル: はじめてのブロック作成」を参照ください。便宜上、しばらく訳文を掲載しますが、内容は更新されず、一部古くなっていますので注意してお読みください。

「属性」は、ブロックがデータを保存する方法です。属性は、保存されたコンテンツからデータを取り出すために、ブロックをどのようにパースするかを定義します。

このチュートリアルのブロックでは、ユーザーがメッセージを入力でき、公開された投稿ではそのメッセージがスタイリングされて表示されます。したがってメッセージを保持する message 属性を追加する必要があります。以下のコードは属性タイプを string、ソースをセレクター内のテキスト、セレクターを div タグとした message 属性を定義します。

"attributes": {
	"message": {
		"type": "string",
		"source": "text",
		"selector": "div",
		"default": ""
	}
},

このコードを src/block.json ファイルに追加してください。attributes は name や title フィールドと同じレベルです。

ブロックがロードされると、ブロックのために保存されたコンテンツを探し、div タグを探し、text 部分を取り出し、コンテンツを attributes.message 変数に保存します。

注意: text 部分は DOM 要素の innerText 属性と同じです。詳細および他の例については ブロックの属性 ドキュメント を参照してください。

Edit と Save

attributes は、editとsave の両方の関数に渡されます。setAttributes 関数も渡されますが、edit 関数にのみ渡されます。setAttributes 関数は、値の設定に使用されます。また、edit 関数と save 関数には追加のパラメータも渡されます。詳細は Edit と Save ドキュメント を参照してください。

attributes は各属性の値、または存在するならデフォルト値を含む JavaScript オブジェクトです。setAttributes は属性を更新する関数です。

export default function Edit( { attributes, setAttributes } ) {
	// ...
}

Top ↑

TextControl コンポーネント

このチュートリアルのブロックは HTML テキスト入力フィールドに似た TextControl コンポーネントを使用します。TextControl コンポーネント ドキュメント を参照してください。この Storybook でインタラクティブなコンポーネントセット をブラウズできます。

コンポーネントは HTML タグと同じように追加できます。ラベルを設定し、value に attributes.message をセットし、onChange 関数に setAttributes を使用して message 属性の値を更新します。

save 関数は単純に attributes.message を div タグとして書き出します。これはそのようにパースされると定義したことに依ります。

オプション: IDEサポート（コード補完やヒント）のために、TextControl コンポーネントがインポートされる@wordpress/components モジュールをインストールできます。このインストールコマンドはオプションです。ビルドプロセスは、自動的に @wordpress/* のインポートを検出して、アセットファイルの中で依存関係を指定します。

npm install @wordpress/components --save

edit.js ファイルと save.js ファイルを以下のように更新し、既存の関数を置き換えてください。

edit.js ファイル:

import { __ } from '@wordpress/i18n';
import { useBlockProps } from '@wordpress/block-editor';
import { TextControl } from '@wordpress/components';
import './editor.scss';

export default function Edit( { attributes, setAttributes } ) {
	return (
		<div { ...useBlockProps() }>
			<TextControl
				label={ __( 'Message', 'gutenpride' ) }
				value={ attributes.message }
				onChange={ ( val ) => setAttributes( { message: val } ) }
			/>
		</div>
	);
}

save.js ファイル:

import { useBlockProps } from '@wordpress/block-editor';

export default function save( { attributes } ) {
	const blockProps = useBlockProps.save();
	return <div { ...blockProps }>{ attributes.message }</div>;
}

以前に npm run start を実行して、スクリプトがまだ実行されている場合は、エディターをリロードして、ブロックをテストに追加できます。
そうでなければ、npm run build を使用してブロックをリビルドし、エディターをリロードして、ブロックを追加してください。エディターでメッセージを入力し、保存し、投稿を表示してみてください。

次のセクション: コードの実装

原文

最終更新日: