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

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

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

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

詳細はこちら

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

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

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

ブロック作成①【テキスト入力と装飾のRichText、複数選択師のSelectControl】

ワードプレスの公式チュートリアルから一歩踏み込んで、ブロックを作成しながら基本的なコンポーネントを何回かにわけて紹介していきます。

今回のコンポーネントは、RichTextとSelectControlです。ブロックスタイルも追加します。

作成後のブロックは以下の通り

ブロックエディター側

  • RichTextでテキスト入力欄を実装。ブロックツールバーからは太字や斜体文字などの文字装飾やリンクも可能です。
  • SelectControlでテキストカラーの選択ボックスを実装。本記事はで赤色と青色を選択可能とします。
  • ブロックスタイルを追加。本記事では赤枠と青枠を選択可能とします。またパディングを1emとします。
作成後のエディター側

フロント側(Web表示側)

テキストを赤(SelectControlで選択)、枠線を青枠(ブロックスタイルで選択)とした場合です。

作成後のフロント側

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

RichTextはコアの段落ブロックにも使用されており、テキストを入力するブロック作成にはよく使用されるコンポーネントです。

ブロック作成が全くの初めての方は、公式チュートリアルを参考に書いた3つの記事を先に読むことをおすすめとします。

まずはブロックの雛形を作成

ワードプレス公式チュートリアルでブロックを作成②【ブロック雛形作成】で実施したように、create-blockを使ってブロックの雛形を作成します。pluginsのフォルダ直下で以下のコマンドを走らせればOKです。

>npx @wordPress/create-block richtext

今回はrichtextという名前でブロックを作成しました。

各ファイルのコード変更

ブロック雛形で作成したsrcフォルダ内の各ファイル内のコードを変更します。変更後はbuildまたはstartを走らせてbuildフォルダを変更してください。

block.jsonの変更

変更前の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": "smiley",
	"description": "Example block written with ESNext standard and JSX support – build step required.",
	"supports": {
		"html": false
	},
	"textdomain": "richtext",
	"editorScript": "file:./index.js",
	"editorStyle": "file:./index.css",
	"style": "file:./style-index.css"
}

変更後のblock.json

変更内容は以下の通り。

  • supportsに”className”: falseを追加
  • RichText用のプロパティとしてattributes.contentを追加
  • SelectControl用のプロパティとしてattributes.colorを追加
  • stylesでブロックスタイルを追加
  • iconやcategoryをテキスト用ブロックとして変更
{
	"$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,
		"html": 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": ""
		}
	},
	"textdomain": "richtext",
	"editorScript": "file:./index.js",
	"editorStyle": "file:./index.css",
	"style": "file:./style-index.css"
}

edit.jsの変更

変更前のedit.js

import { __ } from '@wordpress/i18n';
import { useBlockProps } from '@wordpress/block-editor';
import './editor.scss';

export default function Edit() {
	return (
		<p { ...useBlockProps() }>
			{ __( 'Richtext – hello from the editor!', 'richtext' ) }
		</p>
	);
}

変更後のedit.js

変更内容は以下の通り。

  • RichTextコンポーネントの追加
  • SelectControlコンポーネントの追加
  • <RichText />がブロック本体のラッパーとなるので内部にuseBlockProps( )を配置。RichTextの各属性もuseBlockProps( )内で定義する
  • <RichText />と<SelectControl />を同階層に配置するのでFragment<></>で囲む
  • <RichText />の属性にstyleを追加定義して、<SelectControl />でセットしたcolorを文字色とする
import { __ } from '@wordpress/i18n';
import { RichText, useBlockProps } from '@wordpress/block-editor';
import { 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} />
			<SelectControl
				value = { attributes.color }
				options = { [
					{value: '', label: 'カラーを選択'},
					{value: 'red', label: '赤色'},
					{value: 'blue', label: '青色'}
				] }
				onChange = { (newColor) => {
					setAttributes({ color: newColor });
				}}
			/>
		</>
	);
}

コンポーネントによるattributes更新のしくみ

RichTextやSelectControlのようなコンポーネントは HTML タグと同じように記述します。

属性としてvalue とonChange関数を記述することで、block.jsonで定義したattributesプロパティの値をセットしたり変更したりします。

例えばSelectControlの場合は、valueに attributes.color をセットし、onChange 関数に setAttributes を使用して colorプロパティの値を更新します。

<SelectControl
	value={attributes.color}
	options={[
		{ value: "", label: "カラーを選択" },
		{ value: "red", label: "赤色" },
		{ value: "blue", label: "青色" },
	]}
	onChange={(newColor) => {
		setAttributes({ color: newColor });
	}}
/>

optionsはSelectControl独自の属性です。
https://developer.wordpress.org/block-editor/reference-guides/components/select-control/

注意事項

RichTextの属性をタグ内に記述せず、useBlockProps( )を使って記述しているのは、apiVersion:2の仕様で、ブロック本体のラッパー要素にはuseBlockProps( )が必要だからです。同じ理由でsave.js側にはuseBlockProps.save( )が必要となります。

仮にuseBlockProps( )を使用せずに、RichTextタグ内に直接属性を記述すると、ブロックは一見機能するように思えますが、ブロックスタイルの追加がうまくできないなどの不具合が発生します。

save.jsの変更

変更前のsave.js

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

export default function save() {
	return (
		<p { ...useBlockProps.save() }>
			{ __(
				'Richtext – hello from the saved content!',
				'richtext'
			) }
		</p>
	);
}

変更後のsave.js

変更点は以下の通り。

  • RichTextコンポーネントの追加(save.jsでは<RichText.Content />となります)
  • <RichText.Content />がブロック本体のラッパーとなるので内部にuseBlockProps.save( )を配置。各属性もuseBlockProps.save( )内で定義する
  • <RichText.Content />の属性としてstyleを追加定義して、<SelectControl />でセットしたcolorを文字色とする

※save.js側にはSelectControlコンポーネントを記述する必要はありません。エディター側でSelectControlから渡されたattributes.colorの値をRichtextのスタイルとして記述すればOKです。

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} />
	);
}

style.scssの変更

変更前のstyle.scss

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

変更後のstyle.scss

ブロックスタイルの具体的な記述をする。

  • デフォルト値として枠線なしとパディングの記述
  • 赤枠用に.is-style-red-borderの記述
  • 青枠用に.is-style-blue-borderの記述
.my-richtext {
	padding:1em;
}
.my-richtext.is-style-red-border {
	border: 1px solid red;
}
.my-richtext.is-style-blue-border {
	border: 1px solid blue;
}

block.jsonのstylesに記述したnameの頭にis-style-を付けたものがクラス名となります。

editor.scssの変更

必ずしも必要はありませんが、デフォルトでもエディター内のみブロックの目印として枠線ありとしておきます。

変更前のeditor.scss

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

変更後のeditor.scss

.my-richtext {
	border: 1px dotted #333;
	padding: 1em;
}

まとめ

RichTextコンポーネントとSelectControlコンポーネントおよびブロックスタイルの記述方法について紹介しました。

この記事を起点にして、さらにいくつかのコンポーネントを紹介していく予定です。

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

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

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