ブロック作成④【色選択機能をColorPaletteとする】

2022年8月21日

ワードプレスのブロックの作成方法④として、ColorPaletteで色の選択ができるようにします。

この記事は、記事：ブロック作成③【BlockControlを使ってツールバーにAlignmentToolbarを設置】の続きとなっています。

本記事で作成できるブロック

記事：ブロック作成③までで作成したブロックの色選択機能はSelectControlを使っていました。

本記事ではSelectControlの代わりにColorPaletteを使います。文字色・背景色を設定できるようになります。

今回使うコンポーネントの公式ページは以下の通りです。

ColorPalette
https://developer.wordpress.org/block-editor/reference-guides/components/color-palette/

こちらのページも参照ください。
https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/block-tutorial/block-controls-toolbar-and-sidebar/

コードの変更点

記事：ブロック作成③からの変更点を紹介します。

block.json

変更前のblock.json

{
	"$schema": "https://json.schemastore.org/block.json",
	"apiVersion": 2,
	"name": "create-block/richtext",
	"version": "0.1.0",
	"title": "Richtext",
	"category": "text",
	"icon": "welcome-write-blog",
	"description": "RichTextを使ってブロックを実装",
	"supports": {
		"className": false
	},
	"styles": [
		{
			"name": "default",
			"label": "デフォルト",
			"isDefault": true
		},
		{
			"name": "red-border",
			"label": "赤枠"
		},
		{
			"name": "blue-border",
			"label": "青枠"
		}
	],
	"attributes": {
		"content": {
			"type": "string",
			"source": "html",
			"selector": ".my-richtext"
		},
		"color": {
			"type": "string",
			"default": ""
		},
		"alignment": {
			"type": "string",
			"default": "none"
		}
	},
	"textdomain": "richtext",
	"editorScript": "file:./index.js",
	"editorStyle": "file:./index.css",
	"style": "file:./style-index.css"
}

変更後のblock.json

attributes.colorの代わりにattributes.text_color（文字色用）とattributes.bg_color（背景色用）を追加します。

{
	"$schema": "https://json.schemastore.org/block.json",
	"apiVersion": 2,
	"name": "create-block/richtext",
	"version": "0.1.0",
	"title": "Richtext",
	"category": "my-block",
	"icon": "welcome-write-blog",
	"description": "RichTextを使ってブロックを実装",
	"supports": {
		"className": false
	},
	"styles": [
		{
			"name": "default",
			"label": "デフォルト",
			"isDefault": true
		},
		{
			"name": "red-border",
			"label": "赤枠"
		},
		{
			"name": "blue-border",
			"label": "青枠"
		}
	],
	"attributes": {
		"content": {
			"type": "string",
			"source": "html",
			"selector": ".my-richtext"
		},
		"text_color": {
			"type": "string",
			"default": "#333"
		},
		"bg_color": {
			"type": "string",
			"default": "#fff"
		},
		"alignment": {
			"type": "string",
			"default": "none"
		}
	},
	"textdomain": "richtext",
	"editorScript": "file:./build/index.js",
	"editorStyle": "file:./build/index.css",
	"style": "file:./build/style-index.css"
}

editor.js

変更前のeditor.js

import { __ } from '@wordpress/i18n';
import { InspectorControls, RichText, useBlockProps } from '@wordpress/block-editor';
import { PanelBody, SelectControl } from '@wordpress/components';
import './editor.scss';

export default function Edit(props) {
	const { attributes, setAttributes } = props;
	const blockProps = useBlockProps({
		tagName: "div",
		className: "my-richtext",
		value: attributes.content,
		placeholder: "ここにテキストを入力・・・",
		style: { color: attributes.color || null },
		onChange: (newContent) => {
			setAttributes({ content: newContent });
		}
	});
	return (
		<>
			<RichText {...blockProps} />
			<InspectorControls>
				<PanelBody title="色の選択">
					<SelectControl
						value = { attributes.color }
						options = { [
							{value: '', label: 'カラーを選択'},
							{value: 'red', label: '赤色'},
							{value: 'blue', label: '青色'}
						] }
						onChange = { (newColor) => {
							setAttributes({ color: newColor });
						}}
					/>
				</PanelBody>
			</InspectorControls>
		</>
	);
}

変更後のeditor.js

<SelectControl>は削除
<InsepctorControls>とその下位に<Panel><PanelBody>を介して<ColorPalette>を配置。
<RichText>のstyle属性にcolorとbackgroundColorを追加。

import { __ } from '@wordpress/i18n';
import { 
	ColorPalette,
	AlignmentToolbar, 
	BlockControls, 
	InspectorControls, 
	RichText, 
	useBlockProps 
} from '@wordpress/block-editor';
import { 
	Panel,
	PanelBody, 
} from '@wordpress/components';
import './editor.scss';

export default function Edit(props) {
	const { attributes, setAttributes } = props;
	const blockProps = useBlockProps({
		tagName: "div",
		className: "my-richtext",
		value: attributes.content,
		placeholder: "ここにテキストを入力・・・",
		style: {
			color: attributes.text_color,
			backgroundColor: attributes.bg_color,
			textAlign: attributes.alignment || null
		},
		onChange: (newContent) => {
			setAttributes({ content: newContent });
		}
	});
	return (
		<>
			<RichText {...blockProps} />
			<BlockControls>
				<AlignmentToolbar
					value = { attributes.alignment }
					onChange = { ( newAlignment ) => {
						setAttributes({ alignment: newAlignment });
					} }
				/>
			</BlockControls>
			<InspectorControls>
					<Panel header="色の選択">
						<PanelBody title="文字色">
							<ColorPalette
								onChange= { ( newTextcolor ) => {
									setAttributes({ text_color: newTextcolor });
								}}
							/>
						</PanelBody>
						<PanelBody title="背景色">
							<ColorPalette
								onChange= { ( newBgcolor ) => {
									setAttributes({ bg_color: newBgcolor });
								}}
							/>
						</PanelBody>
					</Panel>
			</InspectorControls>
		</>
	);
}

save.js

変更前のsave.js

import { __ } from '@wordpress/i18n';
import { RichText, useBlockProps } from '@wordpress/block-editor';

export default function save(props) {
	const{ attributes } = props;
	const blockProps = useBlockProps.save({
		tagName: "div",
		className: "my-richtext",
		value: attributes.content,
		style: { color: attributes.color || null }
	});
	return (
		<RichText.Content {...blockProps} />
	);
}

変更後のsave.js

<RichText.Content>のstyle属性にcolorとbackgroundColorを追加

import { __ } from '@wordpress/i18n';
import { RichText, useBlockProps } from '@wordpress/block-editor';

export default function save(props) {
	const{ attributes } = props;
	const blockProps = useBlockProps.save({
		tagName: "div",
		className: "my-richtext",
		value: attributes.content,
		style: {
			color: attributes.text_color,
			backgroundColor: attributes.bg_color,
			textAlign: attributes.alignment || null
		}
	});
	return (
		<RichText.Content {...blockProps} />
	);
}

以上で設定サイドバーにカラーパレットが表示され、文字色と背景色の設定ができるようになります。