銀河鉄道

月うさぎBlog

【ブロックエディタ】RichTextのシンプルな使い方｜文字入力できるBox作成

記事更新日：2022-08-28

サムネイル
RichTextでブロックエディタを作ってみる

RichText

RickText コンポーネントは非常にパワフル

参照：
RichText リファレンス

まずはシンプルに作ってみます

block.json：attributesを設定する

	"attributes": {
		"content": {
			"type": "string",
			"source": "html",
			"selector": "（コンテンツのクラス名）",
			"default": ""
		}
	},

attributesとは

edit 関数と save 関数には、値を設定する setAttributes 関数と共に attributes が渡されます。

参照：
wordpress.org:ブロックの属性

編集画面とフロント画面で受け渡しするもの

edit.js：編集画面の設定

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

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

export default function Edit({ attributes, setAttributes }) {
	const blockProps = useBlockProps();
	const { content } = attributes;

	const onChangeText = (value) =>
		setAttributes({
			content: value,
		});

	return (
		<div {...blockProps}>
			<div className="（ラッパーのクラス名）">
				<RichText
					tagName="p"
					className="（コンテンツのクラス名）"
					value={content}
					onChange={onChangeText}
				/>
			</div>
		</div>
	);
}

入力された内容を読み取るのが、onChange

save.js：フロント画面の設定

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

export default function save({ attributes }) {
	const blockProps = useBlockProps.save();
	const { content } = attributes;

	return (
		<div {...blockProps}>
			<div className="（ラッパーのクラス名）">
				<RichText.Content
					tagName="p"
					className="（コンテンツのクラス名）"
					value={content}
				/>
			</div>
		</div>
	);
}

RichText.Contentに、tagNameをつけ忘れるとうまく表示されないので注意

RichText：補足

isSelected：選択されたときだけ表示したい場合（編集画面）

例）title欄をさわったときに、入力画面が表示される

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

export default function Edit({ attributes, setAttributes, isSelected }) {
	const blockProps = useBlockProps();
	const { title } = attributes;

	const onChangeTitle = (value) =>
		setAttributes({
			title: value,
		});

	return (
		<div {...useBlockProps()}>
			{(!RichText.isEmpty(title) || isSelected) && (
				<RichText
					className="（クラス名）"
					value={ title }
					placeholder={__('タイトルを入力', 'my-placeholder')}
					onChange={onChangeTitle}
				/>
			)}
		</div>
	);
}

isSelectedと三項演算子・・・
参考：wordpress.org:執筆エクスペリエンス

!RichText.isEmpty()：入力された場合のみ表示する場合（フロント画面）

例）title欄に入力がなければ、titleは表示しない

{!RichText.isEmpty(title) && (
	<RichText.Content
		tagName="p"
		className="（クラス名）"
		value={title}
	/>
)}
リンクにするとき（href指定）の注意点
<RichText.Content
	tagName="a"
	className="（クラス名）"
	value={url}
	href={url}
/>

【href指定の注意点】

  • 入力時にリンクボタンを押して設定するとエラーになる
  • 入力したテキストがそのままリンクになる（どんな文字でも）

使わないほうが無難かも

必要なファイルは、最初にnpmで新規作成します

CLICK

【WordPress】ブロックエディタ新規作成｜npmでひな形を作る手順

WordPressのgithub も見てみよう

著者

author
月うさぎ

2022-08-28

編集後記：
この記事の内容がベストではないかもしれません。