ブロックの属性

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

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

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

このコードを index.js ファイルの registerBlockType 関数内に追加してください。attributes は title や description フィールドと同じレベルです。

ブロックがロードされると、ブロックのために保存されたコンテンツを探し、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 { TextControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n';

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

save.js ファイル:

export default function Save( { attributes, className } ) {
    return <div className={ className }>{ attributes.message }</div>;
}

npm run build を使用してブロックをリビルドし、エディターをリロードして、ブロックを追加してください。エディターでメッセージを入力し、保存し、投稿を表示してみてください。

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

原文

最終更新日: