はじめに
WordPressの最新版では、Gutenbergブロックエディタがデフォルトで使用されています。この新しいエディタは、従来の「Classic」エディタとは異なり、ドラッグアンドドロップやカスタムブロックを使用して、より柔軟なウェブサイトコンテンツ作成を可能にします。
Gutenbergブロックエディタでは、カスタムブロックを作成するためにRichTextコンポーネントが利用できます。この記事では、その使い方について詳しく説明します。
症状・背景
- WordPressのカスタムテーマやプラグインを開発中
- ユーザーにテキスト編集機能を提供したい
- カスタム投稿タイプに高度なテキスト形式機能が必要
- グローバルスタイルを活用したテキストのカスタマイズがほしい
手順・設定方法
ステップ1: RichTextコンポーネントのインポートと初期化
# WordPressで新しいカスタムブロックを作成する際、まずRichTextコンポーネントをインポートします。
import { RichText } from '@wordpress/block-editor';
# コンストラクタ内で使用可能なpropsを定義し、RichTextコンポーネントを初期化します。
const attributes = {
content: {
type: 'string',
source: 'html',
selector: 'p',
},
};ステップ2: RichTextコンポーネントの設定
# カスタムブロック内でRichTextコンポーネントを使用する場合、以下のプロパティを指定します。
<RichText
tagName="p"
value={ attributes.content }
onChange={ ( newContent ) => setAttributes( { content: newContent } ) }
placeholder="ここにテキストを入力してください。"
/>スtep3: カスタムスタイルの追加と機能拡張
# RichTextコンポーネントを使用して、カスタムCSSスタイルやフォーマットを適用します。
<RichText
tagName="p"
value={ attributes.content }
onChange={ ( newContent ) => setAttributes( { content: newContent } ) }
placeholder="ここにテキストを入力してください。"
style={ { color: 'blue', fontSize: '20px' } }
/>
# RichTextコンポーネントの機能を拡張するために、formatControlsプロパティを使用します。
<RichText
tagName="p"
value={ attributes.content }
onChange={ ( newContent ) => setAttributes( { content: newContent } ) }
placeholder="ここにテキストを入力してください。"
formatControls={[
'core/bold',
'core/italic',
'core/link',
'core/strikethrough',
]}
/>ステップ4: バックエンド処理の設定と更新
# カスタムブロックの保存時に、RichTextコンポーネントで変更されたデータを保存するようにバックエンド処理を設定します。
save() {
return <p>{ this.props.attributes.content }</p>;
}注意事項
- RichTextコンポーネントを使用する前に、WordPressの最新バージョンとGutenbergブロックエディタを確認してください。
- ブロックエディターAPIは頻繁に更新されるため、ドキュメンテーションを定期的に参照することをおすすめします。
- カスタムスタイルやフォーマット機能を使用する際には、ユーザーが誤って使用できないように注意深く設計することが重要です。
まとめ
1. RichTextコンポーネントのインポート: 新しいカスタムブロックを作成する際に必要となる基本的なステップ。
2. プロパティの指定と初期化: ブロックにテキスト入力機能を追加し、ユーザーが簡単に利用できるようにします。
3. カスタマイズ: カスタムCSSスタイルやフォーマット機能を使用してブロックを拡張できます。
4. 保存処理の設定: ブロックエディタで作成されたテキストデータを永続的に保存するためのバックエンド処理が必要です。
関連記事: