【wordpress】ブロックツールバーのカスタマイズ方法(自作ブロック)

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など制御できる
			/>
		</>
	);
}
JavaScript

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"
		}
	}
}
JavaScript

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>
JavaScript

BlockControlsにcontrols属性を指定することで、ブロックのツールバーにボタンを簡単に作成できます。
isActiveはボタンのオンオフの見た目を色反転でトグルすることができます。
onClickにしたい処理を記述します。
icon属性でアイコンも自由に変えられます。

ToolbarGroupとToolbarButton

以下コマンドでToolbarGroupとToolbarButtonを使えるようになります。

npm i @wordpress/components
Git

edit.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など制御できる
			/>
		</>
	);
}
JavaScript

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';
JavaScript
<BlockControls>
	<AlignmentToolbar/>
</BlockControls>
JavaScript

wordpress

Posted by devsakaso