使用法

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

  1. import { Toolbar, ToolbarDropdownMenu } from '@wordpress/components';
  2. import {
  3.    more,
  4.    arrowLeft,
  5.    arrowRight,
  6.    arrowUp,
  7.    arrowDown,
  8. } from '@wordpress/icons';
  10. function MyToolbar() {
  11.    return (
  12.    <Toolbar label="Options">
  13.    <ToolbarDropdownMenu
  14.    icon={ more }
  15.    label="Select a direction"
  16.    controls={ [
  17.    {
  18.    title: 'Up',
  19.    icon: arrowUp,
  20.    onClick: () => console.log( 'up' ),
  21.    },
  22.    {
  23.    title: 'Right',
  24.    icon: arrowRight,
  25.    onClick: () => console.log( 'right' ),
  26.    },
  27.    {
  28.    title: 'Down',
  29.    icon: arrowDown,
  30.    onClick: () => console.log( 'down' ),
  31.    },
  32.    {
  33.    title: 'Left',
  34.    icon: arrowLeft,
  35.    onClick: () => console.log( 'left' ),
  36.    },
  37.    ] }
  38.    />
  39.    </Toolbar>
  40.    );
  41. }

ブロックコントロールの内部

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

  1. import { BlockControls } from '@wordpress/block-editor';
  2. import { Toolbar, ToolbarDropdownMenu } from '@wordpress/components';
  3. import {
  4.    more,
  5.    arrowLeft,
  6.    arrowRight,
  7.    arrowUp,
  8.    arrowDown,
  9. } from '@wordpress/icons';
  11. function Edit() {
  12.    return (
  13.    <BlockControls group="block">
  14.    <ToolbarDropdownMenu
  15.    icon={ more }
  16.    label="Select a direction"
  17.    controls={ [
  18.    {
  19.    title: 'Up',
  20.    icon: arrowUp,
  21.    onClick: () => console.log( 'up' ),
  22.    },
  23.    {
  24.    title: 'Right',
  25.    icon: arrowRight,
  26.    onClick: () => console.log( 'right' ),
  27.    },
  28.    {
  29.    title: 'Down',
  30.    icon: arrowDown,
  31.    onClick: () => console.log( 'down' ),
  32.    },
  33.    {
  34.    title: 'Left',
  35.    icon: arrowLeft,
  36.    onClick: () => console.log( 'left' ),
  37.    },
  38.    ] }
  39.    />
  40.    </BlockControls>
  41.    );
  42. }

@

プロップス

このコンポーネントは DropdownMenu コンポーネントの同じAPIを受け入れます。