ブロックの属性
「属性」はブロックがデータを保存する方法です。ブロックをどのようにパースして保存されたコンテンツからデータを取り出すかを定義します。
このチュートリアルのブロックではユーザーがメッセージを入力でき、公開された投稿ではスタイリングされて表示されます。したがってユーザーのメッセージを保持する message 属性を追加する必要があります。以下のコードは属性タイプを string、ソースをセレクター内のテキスト、セレクターを div
タグとした message 属性を定義します。
registerBlockType( 'create-block/gutenpride', {
apiVersion: 2,
attributes: {
message: {
type: 'string',
source: 'text',
selector: 'div',
default: '', // empty default
},
},
// other settings, like the save and edit functions.
} );
このコードを index.js
ファイルの registerBlockType
関数内に追加してください。attributes
は edit や save フィールドと同じレベルです。
ブロックがロードされると、ブロックのために保存されたコンテンツを探し、div タグを探し、text 部分を取り出し、コンテンツを attributes.message
変数に保存します。
注意: text 部分は DOM 要素の innerText
属性と同じです。詳細および他の例については ブロックの属性 ドキュメント を参照してください。
Edit と Save
edit
関数と save
関数には、値を設定する setAttributes 関数と共に attributes が渡されます。これらの関数には追加のパラメータも渡すことができます。詳細については Edit と Save ドキュメント を参照してください。
attributes
は各属性の値、または存在するならデフォルト値を含む JavaScript オブジェクトです。setAttributes
は属性を更新する関数です。
export default function Edit( { attributes, setAttributes } ) {
// ...
}
TextControl コンポーネント
このチュートリアルのブロックは HTML テキスト入力フィールドに似た TextControl コンポーネントを使用します。TextControl コンポーネント ドキュメント を参照してください。この Storybook でインタラクティブなコンポーネントセット をブラウズできます。
コンポーネントは HTML タグと同じように追加できます。ラベルを設定し、value
に attributes.message
をセットし、onChange
関数に setAttributes
を使用して message 属性の値を更新します。
save 関数は単純に attributes.message
を div タグとして書き出します。これはそのようにパースされると定義したことに依ります。
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 { __ } from '@wordpress/i18n';
import { useBlockProps } from '@wordpress/block-editor';
export default function save( { attributes } ) {
return <div { ...useBlockProps.save() }>{ attributes.message }</div>;
}
npm run build
を使用してブロックをリビルドし、エディターをリロードして、ブロックを追加してください。エディターでメッセージを入力し、保存し、投稿を表示してみてください。
次のセクション: コードの実装
最終更新日: