使用法
一般的なインターフェースを作成するには、Toolbarコンポーネント内でToolbarButtonをレンダリングする必要があります。
import { Toolbar, ToolbarButton } from '@wordpress/components';
import { edit } from '@wordpress/icons';
function MyToolbar() {
return (
<Toolbar label="Options">
<ToolbarButton
icon={ edit }
label="Edit"
onClick={ () => alert( 'Editing' ) }
/>
</Toolbar>
);
}
BlockControls内
カスタムブロックに取り組んでいて、ブロックツールバーにコントロールを追加したい場合は、代わりにBlockControlsを使用する必要があります。オプションで、ToolbarGroupでラップすることもできます。
import { BlockControls } from '@wordpress/block-editor';
import { ToolbarGroup, ToolbarButton } from '@wordpress/components';
import { edit } from '@wordpress/icons';
function Edit() {
return (
<BlockControls>
<ToolbarGroup>
<ToolbarButton
icon={ edit }
label="Edit"
onClick={ () => alert( 'Editing' ) }
/>
</ToolbarGroup>
</BlockControls>
);
}
プロパティ
このコンポーネントは、次のものに加えて、Buttonコンポーネントの同じAPIを受け入れます:
containerClassName: string
ボタンコンテナに適用するためのオプションの追加クラス名です。
- 必須: いいえ
subscript: string
ボタンのオプションの下付き文字です。