ToolbarItem

使用法

プロパティとして

カスタムコンポーネントまたは任意のHTML要素でasプロパティを使用できます。

import { Toolbar, ToolbarItem, Button } from '@wordpress/components';
function MyToolbar() {
   return (
   <Toolbar label="Options">
   <ToolbarItem as={ Button }>I am a toolbar button</ToolbarItem>
   <ToolbarItem as="button">I am another toolbar button</ToolbarItem>
   </Toolbar>
   );
}

レンダープロパティ

子要素を関数として渡すことで、ToolbarItemプロパティを取得し、それを別のコンポーネントに渡すことができます。

import { Toolbar, ToolbarItem, DropdownMenu } from '@wordpress/components';
import { table } from '@wordpress/icons';
function MyToolbar() {
   return (
   <Toolbar label="Options">
   <ToolbarItem>
   { ( toolbarItemHTMLProps ) => (
   <DropdownMenu
   icon={ table }
   toggleProps={ toolbarItemHTMLProps }
   label={ 'Edit table' }
   controls={ [] }
   />
   ) }
   </ToolbarItem>
   </Toolbar>
   );
}

BlockControls内

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

import { BlockControls } from '@wordpress/block-editor';
import { ToolbarGroup, ToolbarItem, Button } from '@wordpress/components';
function Edit() {
   return (
   <BlockControls>
   <ToolbarGroup>
   <ToolbarItem as={ Button }>I am a toolbar button</ToolbarItem>
   </ToolbarGroup>
   </BlockControls>
   );
}

関連コンポーネント

• ToolbarItemはToolbarまたはToolbarGroup内で使用する必要があります。
• シンプルなツールバーボタンが必要な場合は、代わりにToolbarButtonを使用することを検討してください。