エディタ内のブロック（The block in the Editor）

組み込みコンポーネント

パッケージ @wordpress/components には、ブロックエディタおよびWordPressダッシュボードの一般的なUI要素を作成するための汎用WordPressコンポーネントのライブラリが含まれています。このパッケージから最も一般的に使用されるコンポーネントは次のとおりです：

• TextControl
• Panel
• ToggleControl
• ExternalLink

パッケージ @wordpress/block-editor には、ブロックエディタ用のコンポーネントとフックのライブラリが含まれており、ブロックのカスタム設定コントロールを定義するためのものも含まれています。このパッケージから最も一般的に使用されるコンポーネントは次のとおりです：

• RichText
• BlockControls
• InspectorControls
• InnerBlocks

パッケージ @wordpress/block-editor も、スタンドアロンのブロックエディタを作成および使用するためのツールを提供します。

ブロックエディタ用のコンポーネントを使用する際の良いワークフローは次のとおりです：

• WordPressパッケージからコンポーネントをインポートします。
• JSX形式でプロジェクトにコンポーネントの対応するコードを追加します。
• ほとんどの組み込みコンポーネントは ブロック属性 を設定するために使用されるため、block.json で必要な属性を定義し、setAttributes を使用してコンポーネント内の属性を更新するためのイベントハンドラを作成します。
• 必要に応じて、データベースにシリアライズして保存できるようにコードを適応させます。
  

ブロックコントロール：ブロックツールバーと設定サイドバー

ブロックのカスタマイズを簡素化し、一貫したユーザーエクスペリエンスを確保するために、ブロックのエディタープレビューを生成するのに役立ついくつかの組み込みUIパターンがあります。

以下の画像は、選択された段落ブロックのブロックツールバーと設定サイドバーを詳細に示しています。

ブロックツールバー

ユーザーがブロックを選択すると、選択されたブロックの上にいくつかのコントロールボタンがツールバーに表示される場合があります。これらのブロックレベルのコントロールのいくつかは自動的に含まれる場合がありますが、ツールバーをカスタマイズしてブロックタイプに特有のコントロールを含めることもできます。ブロックタイプの Edit 関数の戻り値に BlockControls 要素が含まれている場合、それらのコントロールは選択されたブロックのツールバーに表示されます。

export default function Edit( { className, attributes: attr, setAttributes } ) {
   const onChangeContent = ( newContent ) => {
   setAttributes( { content: newContent } );
   };
   const onChangeAlignment = ( newAlignment ) => {
   setAttributes( {
   alignment: newAlignment === undefined ? 'none' : newAlignment,
   } );
   };
   return (
   <div { ...useBlockProps() }>
   <BlockControls>
   <ToolbarGroup>
   <AlignmentToolbar
   value={ attr.alignment }
   onChange={ onChangeAlignment }
   />
   </ToolbarGroup>
   </BlockControls>
   <RichText
   className={ className }
   style={ { textAlign: attr.alignment } }
   tagName="p"
   onChange={ onChangeContent }
   value={ attr.content }
   />
   </div>
   );
}

上記の 完全なブロック例 を参照してください。

BlockControls は、ブロックが現在選択されていて視覚編集モードのときのみ表示されることに注意してください。BlockControls は、HTML編集モードでブロックを編集しているときには表示されません。

設定サイドバー

設定サイドバーは、あまり使用されない設定や、より多くの画面スペースを必要とする設定を表示するために使用されます。設定サイドバーは ブロックレベルの設定のみ に使用され、ブロックが選択されているときに表示されます。

設定がブロック内の選択されたコンテンツにのみ影響を与える場合、たとえばテキストを「太字」にする場合は、設定を設定サイドバー内に配置しないでください。代わりにツールバーを使用してください。設定サイドバーは、HTMLモードでブロックを編集しているときでも表示されるため、ブロックレベルの設定のみを含むべきです。

ツールバーをレンダリングするのと同様に、ブロックタイプの Edit 関数の return 値に InspectorControls コンポーネントを含めると、それらのコントロールは設定サイドバー領域に表示されます。

export default function Edit( { attributes, setAttributes } ) {
   const onChangeBGColor = ( hexColor ) => {
   setAttributes( { bg_color: hexColor } );
   };
   const onChangeTextColor = ( hexColor ) => {
   setAttributes( { text_color: hexColor } );
   };
   return (
   <div { ...useBlockProps() }>
   <InspectorControls key="setting">
   <div>
   <fieldset>
   <legend className="blocks-base-control__label">
   { __( 'Background color', 'block-development-examples' ) }
   </legend>
   <ColorPalette // Element Tag for Gutenberg standard color selector
   onChange={ onChangeBGColor } // onChange event callback
   />
   </fieldset>
   <fieldset>
   <legend className="blocks-base-control__label">
   { __( 'Text color', 'block-development-examples' ) }
   </legend>
   <ColorPalette
   onChange={ onChangeTextColor }
   />
   </fieldset>
   </div>
   </InspectorControls>
   <TextControl
   value={ attributes.message }
   onChange={ ( val ) => setAttributes( { message: val } ) }
   style={ {
   backgroundColor: attributes.bg_color,
   color: attributes.text_color,
   } }
   />
   </div>
   );
}

上記の 完全なブロック例 を参照してください。

ツールバーとサイドバーの両方にレンダリングされたブロックコントロールは、同じタイプの複数のブロックが選択されているときにも利用可能です。

色、境界線、間隔などの一般的なカスタマイズ設定については、カスタムソリューションの代わりに ブロックサポート を利用できます。ブロックサポートは、他のコアブロックと同じ機能を持つ一貫したUIを提供します。

追加リソース

• WordPressコンポーネントのストーリーブック
• @wordpress/block-editor
• @wordpress/components
• InspectorControls
• BlockControls