使用法

一般的なインターフェースを作成するには、Toolbarコンポーネント内でToolbarButtonをレンダリングする必要があります。

  1. import { Toolbar, ToolbarButton } from '@wordpress/components';
  2. import { edit } from '@wordpress/icons';
  3. function MyToolbar() {
  4. return (
  5. <Toolbar label="Options">
  6. <ToolbarButton
  7. icon={ edit }
  8. label="Edit"
  9. onClick={ () => alert( 'Editing' ) }
  10. />
  11. </Toolbar>
  12. );
  13. }

BlockControls内

カスタムブロックに取り組んでいて、ブロックツールバーにコントロールを追加したい場合は、代わりにBlockControlsを使用する必要があります。オプションで、ToolbarGroupでラップすることもできます。

  1. import { BlockControls } from '@wordpress/block-editor';
  2. import { ToolbarGroup, ToolbarButton } from '@wordpress/components';
  3. import { edit } from '@wordpress/icons';
  4. function Edit() {
  5. return (
  6. <BlockControls>
  7. <ToolbarGroup>
  8. <ToolbarButton
  9. icon={ edit }
  10. label="Edit"
  11. onClick={ () => alert( 'Editing' ) }
  12. />
  13. </ToolbarGroup>
  14. </BlockControls>
  15. );
  16. }

プロパティ

このコンポーネントは、次のものに加えて、Buttonコンポーネントの同じAPIを受け入れます:

containerClassName: string

ボタンコンテナに適用するためのオプションの追加クラス名です。

  • 必須: いいえ

subscript: string

ボタンのオプションの下付き文字です。

  • 必須: いいえ

関連コンポーネント

  • アイコンボタンとしてグループ化されたオプションを選択するコントロールを実装したい場合は、この戦略をすでに処理しているToolbarコンポーネントを使用できます。
  • ToolbarButtonは、ポップオーバーでオプションを表示するためにDropdownなどの他の要素と一緒に使用できます。