ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる

ワードプレスの始め方
~稼げるしくみづくりまで
書籍で徹底解説!

詳細はこちら

amazonでたった1コインで手に入れる

ブログ型サイトでも
本格的ホームページ型でも
起業に副業に・・・

あなたに専門知識がなくても
目的のWebサイトを制作できるよう
ウェブチルがお手伝いします

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

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

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

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

準備(前提条件)

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

ワードプレスのversion6.0.1
使用テーマTwenty Twenty-One(version1.6)

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

自作ブロックを準備

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

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

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

もしゼロからブロックを作成する場合は、以下の記事まで進めてから、srcフォルダ内の各ファイルを以下のコードに書き換えればOKです。

ワードプレス公式チュートリアルでブロックを作成①【環境準備編】

ワードプレス公式チュートリアルでブロックを作成②【ブロック雛形作成】

ただし”ワードプレス公式チュートリアルでブロックを作成②【ブロック雛形作成】”でブロックを作成するコマンド

>npx @wordpress/create-block gutenpride

を走らせる代わりに、

>npx @wordpress/create-block richtext

を走らせて、プラグインRichtextを作成してください。

もちろんコードを書き換えした後、npm run startまたはnpm run buildを走らせてbuildフォルダを更新する必要があります。

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

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クラス”以外には機能がありません。

準備したRichtextブロックのブロックエディター側

フロント側(WEB表示側)

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

準備したRichtextブロックのフロント側

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
	}
},

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

タイポグラフィの設定追加

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

文字サイズ特大_行高さ3に設定

余白設定の追加

今度は余白設定を追加します。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としてみました。

パディンングを100pxに設定

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

パディングを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アンカー設定が追加されます

anchorの記述前後

デフォルト機能の無効化

ブロックにあらかじめ準備されているデフォルト機能を無効化したいときにも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
同じページ内に1回のみ使用可とする“multiple": false

まとめ

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

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

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

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

とはいえ、supportsでの設定が反映されるのは、useBlockPropsのある要素、すなわちブロックのコンテナ要素となるので、次の記事で紹介するようなブロック内の複数の要素に別々の配色設定をしたい場合は、やはり<ColorPalette/>コンポーネントを使うことになります。

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

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

ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる