【wordpress】ブロックツールバーのカスタマイズ方法(自作ブロック)
wordpressのブロックエディタ「Gutenberg」でカスタムブロックを作成した際のブロックツールバーのカスタマイズ方法を紹介します。
ブロックツールバーのカスタマイズ方法(自作ブロック)
edit.jsを作成します。
edit.js
import { __ } from '@wordpress/i18n';
import {
useBlockProps,
RichText,
BlockControls,
} from '@wordpress/block-editor';
import { ToolbarGroup, ToolbarButton } from '@wordpress/components';
import './editor.scss';
export default function Edit( { attributes, setAttributes } ) {
// attributesはblock.jsonで定義したattributes
const { text } = attributes;
return (
<>
{/* BlockControlsでツール部分にボタンなどを作成できる */}
<BlockControls
controls={ [
{
title: 'ボタン1',
icon: 'admin-generic',
isActive: true, // ボタンのトグル
onClick: () => console.log("ボタン1 clicked")
},
{
title: 'ボタン2',
icon: 'admin-collapse',
onClick: () => console.log("ボタン2 clicked")
},
] }
>
</BlockControls>
<ToolbarGroup>
<ToolbarButton/>
</ToolbarGroup>
<RichText
{ ...useBlockProps() }
onChange={ ( value ) => setAttributes( { text: value } ) }
value={ text }
placeholder={ __( '入力してください。', 'text-box' ) }
tagName="h4"
// allowedFormats={ [ 'core/bold' ] }//allowedFormatsでbold,italicなど制御できる
/>
</>
);
}
block.json
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 2,
"name": "cuctom-block/text-box",
"version": "0.1.0",
"title": "カスタムテキストボックス",
"category": "text",
"icon": "text-page",
"description": "カスタムテキストボックスです。",
"keywords": [ "text", "paragraph", "box", "テキスト", "文章", "ボックス" ],
"supports": {
"html": false
},
"textdomain": "text-box",
"editorScript": "file:./index.js",
"editorStyle": "file:./index.css",
"style": "file:./style-index.css",
"attributes": {
"text": {
"type": "string",
"source": "html",
"selector": "h4"
}
}
}
RichText
RichTextで出力するタグやbold,italicなどをコントールすることができます。
onChangeでblock.jsonのattributesで設定した値を受け取ってvalue属性にセットすることでリアクティブに入力値を反映させられます。
tagName属性でh4やpタグなどhtmlのタグを指定できます。
allowedFormatsでbold,italicなど許可したいもののみを指定できます。
BlockControls
<BlockControls
controls={ [
{
title: 'ボタン1',
icon: 'admin-generic',
isActive: true, // ボタンのトグル
onClick: () => console.log("ボタン1 clicked")
},
{
title: 'ボタン2',
icon: 'admin-collapse',
onClick: () => console.log("ボタン2 clicked")
},
] }
>
</BlockControls>BlockControlsにcontrols属性を指定することで、ブロックのツールバーにボタンを簡単に作成できます。
isActiveはボタンのオンオフの見た目を色反転でトグルすることができます。
onClickにしたい処理を記述します。
icon属性でアイコンも自由に変えられます。
ToolbarGroupとToolbarButton
以下コマンドでToolbarGroupとToolbarButtonを使えるようになります。
npm i @wordpress/componentsedit.jsの参考例です。
import { __ } from '@wordpress/i18n';
import {
useBlockProps,
RichText,
BlockControls,
} from '@wordpress/block-editor';
import {
ToolbarGroup,
ToolbarButton,
ToolbarDropdownMenu,
} from '@wordpress/components';
import './editor.scss';
export default function Edit( { attributes, setAttributes } ) {
// attributesはblock.jsonで定義したattributes
const { text } = attributes;
return (
<>
{ /* BlockControlsでツール部分にボタンなどを作成できる */ }
<BlockControls group="inline">
<p>inlineコントロール</p>
</BlockControls>
<BlockControls group="block">
<p>blockコントロール</p>
</BlockControls>
<BlockControls
group="other"
controls={ [
{
title: 'ボタン1',
icon: 'admin-generic',
isActive: true, // ボタンのトグル
onClick: () => console.log( 'ボタン1 clicked' ),
},
{
title: 'ボタン2',
icon: 'admin-collapse',
onClick: () => console.log( 'ボタン2 clicked' ),
},
] }
>
{ text && (
<ToolbarGroup>
<ToolbarButton
title="左揃え"
icon="editor-alignleft"
onClick={ () => console.log( '左揃え' ) }
/>
<ToolbarButton
title="中央揃え"
icon="editor-aligncenter"
onClick={ () => console.log( '中央揃え' ) }
/>
<ToolbarButton
title="右揃え"
icon="editor-alignright"
onClick={ () => console.log( '右揃え' ) }
/>
<ToolbarDropdownMenu
icon="arrow-down-alt2"
label={ __( '他のオプション', 'text-box' ) }
controls={ [
{
title: __( '幅広', 'text-box' ),
icon: 'align-wide',
},
{
title: __( '全幅', 'text-box' ),
icon: 'align-full-width',
},
] }
/>
</ToolbarGroup>
) }
<ToolbarGroup>
<p>テキスト1</p>
</ToolbarGroup>
</BlockControls>
<RichText
{ ...useBlockProps() }
onChange={ ( value ) => setAttributes( { text: value } ) }
value={ text }
placeholder={ __( '入力してください。', 'text-box' ) }
tagName="h4"
// allowedFormats={ [ 'core/bold' ] }//allowedFormatsでbold,italicなど制御できる
/>
</>
);
}
ToolbarButtonでボタンを作成できます。
ToolbarGroupでToolbarButtonをラップして使用することでグループを作成できます。
また、ToolbarDropdownMenuで他のオプションなどをドロップダウン形式で表示させることができます。
ツールバーのグループについて
ブロックツールバーでは、ブロックレベルのコントロール、インラインレベルのコントロール、その他のコントロールという順番にグループ分けすることができます。group="block"でブロックレベルのコントロールを指定でき、並び順が最初になります。group="inline"でinlineレベルのコントロールを指定でき、ブロックの次にきます。group="other"でその他のレベルのコントロールを指定でき、最後の順番になります。
ツールバーのカスタム中に確認すべきドキュメント
wordpressのgithubはチェックするととても良い情報があります。
https://github.com/WordPress/gutenberg/tree/trunk/packages/block-editor/src/components
たとえば、アラインメントなどは自分で自作せずともコンポーネントをインポートするだけで実装できます。
import {
useBlockProps,
RichText,
BlockControls,
AlignmentToolbar
} from '@wordpress/block-editor';<BlockControls>
<AlignmentToolbar/>
</BlockControls>