ブロックの作成⑥自作ブロックに色・フォント設定機能を簡単に実装【block.jsonのsupportsを活用】

2022年9月4日

block.jsonのsupoortsを活用すれば、自作ブロックに以下の機能を追加することができます。

• 色の設定（文字色・背景色。背景色にはグラデーションも可）
• 幅広や全幅などブロックのアライメント設定
• フォントのサイズ変更、行高さの設定
• パディング・マージンなど余白設定
• idの付与機能
• ブロックのロックなどデフォルト機能の無効化

本記事では最小限のコード追記で、上記の機能を簡単にブロックに実装する方法を紹介します。

準備（前提条件）

ワードプレスのversion、使用テーマ

ワードプレスのversion	6.0.1
使用テーマ	Twenty Twenty-One（version1.6）

Twenty Twenty-Oneのデフォルトの背景色は薄いブルーですが、白に変更して使います。

自作ブロックを準備

過去記事：ブロック作成④までで作成したRichtextというテキスト入力機能を持ったブロックを使います。

ブロックの作成④ではブロックに<ColorPalette />コンポーネントを実装して文字色・背景色の設定ができるようにしましたが、本記事では<ColorPalette />を削除して色設定機能のない状態から始めます。

<ColorPalette />を削除後の各ファイルは、以下の”準備するブロックの各コード” の通りです。

準備するブロックの各コード

block.json

{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 2,
	"name": "create-block/richtext",
	"version": "0.1.0",
	"title": "Richtext",
	"category": "widgets",
	"icon": "welcome-write-blog",
	"description": "RichTextを使ってブロックを実装",
	"supports": {
		"ClassName": false,
		"html": false
	},
	"attributes": {
		"content": {
			"type": "string",
			"source": "html",
			"selector": ".my-richtext"
		},
		"alignment": {
			"type": "string",
			"default": "none"
		}
	},
	"textdomain": "richtext",
	"editorScript": "file:./index.js",
	"editorStyle": "file:./index.css",
	"style": "file:./style-index.css"
}

edit.js

import { __ } from '@wordpress/i18n';
import { 
	AlignmentToolbar,
	BlockControls,
	RichText, 
	useBlockProps
} from '@wordpress/block-editor';
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: { 
			textAlign: attributes.alignment
		},
		onChange: (newContent) => {
			setAttributes({ content: newContent });
		}
	});
	return (
		<>
			<RichText { ...blockProps } />
			<BlockControls>
				<AlignmentToolbar
					value = { attributes.alignment }
					onChange = {(newAlignment) => {
						setAttributes({alignment: newAlignment});
					}}
				/>
			</BlockControls>
		</>
	);
}

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: { 
			textAlign: attributes.alignment || null
		}
	});
	return (
		<RichText.Content { ...blockProps } />
	);
}

style.scss

.wp-block-create-block-richtext {
	background-color: #21759b;
	color: #fff;
	padding: 2px;
}

editor.scss

.wp-block-create-block-richtext {
	border: 1px dotted #f00;
}

準備したブロックの外観

準備したRichtextブロックをブロックエディター側とフロント側で見てみましょう。

ブロックエディター側

Richtextブロックは、テキストの入力エリアに文字を入力したり、ツールバーで太字化・文字の配置変更などができますが、設定サイドバーには、”追加CSSクラス”以外には機能がありません。

フロント側（WEB表示側）

背景色が青、文字色が白になっているのは、このブロックのデフォルト値として設定したスタイルです。

block.jsonのsupports部にコードを追記していくことで、このブロックに機能を増やしていきます。

block.jsonのsupportsを活用した機能の追加

block.jsonのsupportsにコードを追加しくと、さまざまな機能がブロックに追加されます。editor.jsやsave.js、cssファイルは変更する必要はありません。

以下の記事にも記述があるように、editor.jsやsave.jsでブロックのラッパー要素にuseBlockPropsの記述がないとこのsupportsの機能は使えないので注意しましょう。

サポート

現在のblock.jsonのsupports部のみ書き出しておきます。

"supports": {
	"ClassName": false,
	"html": false
},

カラーパレットの追加

block.jsonのsupportsに以下のようにcolorの記述を追加します。

"supports": {
	"ClassName": false,
	"html": false,
	"color": {
		"background": true,
		"text": true,
		"gradients": true
	},
},

buildした後、ブロックエディターを開いているページを再読み込みさせると、Richtextブロックの設定サイドバーに色の設定機能（文字色と背景色）が追加されます。背景色にはグラデーションも設定できます。

上のように文字色の設定と背景色を設定すると、Richtextブロックは以下の通りに変わりました。
（見やすくするために、ツールバーで太字化と中央寄せ配置もしてあります）

アライメント機能の追加

次にblock.jsonのsupportsにalignとalignwideの記述を追加します。

"supports": {
	"ClassName": false,
	"html": false,
	"color": {
		"background": true,
		"text": true,
		"gradients": true
	},
	"align": true,
	"alignWide": true
},

するとツールバーにアライメント機能が追加されます。試しに全幅設定としてみました。

ブロックエディター側・フロント側ともに画面いっぱいの全幅表示が確認できました。

タイポグラフィの追加

さらにblock.jsonのsupportsにtypographyの記述を追加します。

"supports": {
	"ClassName": false,
	"html": false,
	"color": {
		"background": true,
		"text": true,
		"gradients": true
	},
	"align": true,
	"alignWide": true,
	"typography": {
		"fontSize": true,
		"lineHeight": true
	}
},

すると設定サイドバーにタイポグラフィー設定（文字サイズ・行高さ）が追加されます。

試しに文字サイズを特大、行高さを３にしてみました。

余白設定の追加

今度は余白設定を追加します。spacingを記述します。

"supports": {
	"ClassName": false,
	"html": false,
	"color": {
		"background": true,
		"text": true,
		"gradients": true
	},
	"align": true,
	"alignWide": true,
	"typography": {
		"fontSize": true,
		"lineHeight": true
	},
	"spacing": {
		"margin":true,
		"padding":true
	}
},

設定サイドバーにパディング設定機能が追加されました。
（テーマTT1はテーマ側でマージンの機能サポートがされていないのでパディングのみとなりました）

試しにパディングを100pxとしてみました。

Google Chromeの開発者ツールで確認すると、次のようにパディングが設定されたのが確認できます。

アンカー（idの付与）を追加

アンカーは”高度な設定”にidを設定する機能です。anchorを追記します。

"supports": {
	"ClassName": false,
	"html": false,
	"color": {
		"background": true,
		"text": true,
		"gradients": true
	},
	"align": true,
	"alignWide": true,
	"typography": {
		"fontSize": true,
		"lineHeight": true
	},
	"spacing": {
		"margin":true,
		"padding":true
	},
	"anchor": true
},

設定サイドバーの ”高度な設定” にHTMLアンカー設定が追加されます。

デフォルト機能の無効化

ブロックにあらかじめ準備されているデフォルト機能を無効化したいときにもsupportsへの記述を使います。

例えばブロックのロックはversion6.0から追加された比較的新しい機能ですが、これを無効化するには、"lock":f alse を追記します。

"supports": {
	"ClassName": false,
	"html": false,
	"color": {
		"background": true,
		"text": true,
		"gradients": true
	},
	"align": true,
	"alignWide": true,
	"typography": {
		"fontSize": true,
		"lineHeight": true
	},
	"spacing": {
		"margin":true,
		"padding":true
	},
	"anchor": true,
	"lock":false
},

ツールバー一番右の3点メニューを開くとロックの設定が追加されています。

このほかにも次の記述でデフォルト機能を無効化できます。

無効化したい機能	supportsへの記述
再利用ブロックへの変換を無効化	“reusable": false
ブロック一覧で表示させない	“inserter": false
同じページ内に１回のみ使用可とする	“multiple": false

まとめ

block.jsonのsupportsに簡単なコードを記述するだけでの次の機能を使えるようになりました。いずれも段落ブロックやグループブロックなど既存のブロックで見たことがあるものばかりですね。

• 色の設定（文字色・背景色。背景色にはグラデーションも可）
• 幅広や全幅などブロックのアライメント設定
• フォントのサイズ変更、行高さの設定
• パディング・マージンなど余白設定
• idの付与機能
• ブロックのロックなどデフォルト機能の無効化

私がこのsupportsの使い方を知ったのはわりに最近でしたが、初めて知ったときは若干衝撃的でした。

記事：ブロック作成④【色選択機能をColorPaletteとする】で紹介したような、”カラーパレット機能の追加にコンポーネントを使う” というコード記述の必要性がなくなってしまったからです。

これからもワードプレスがversionアップするに従い、コンポーネントを使うことなくsupportsの記述だけで使える機能が増えていくと予測されます。ぜひ以下のページもチェックしてみてください。

https://github.com/WordPress/gutenberg/blob/trunk/docs/reference-guides/block-api/block-supports.md