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

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

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

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

詳細はこちら

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

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

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

ブロック作成②【設定サイドバーにコンポーネント配置できるInspectorControlsとPanelBody】

ワードプレスのブロックの作成方法②としてInspectorControlsコンポーネントとPanelBodyコンポーネントを使って、設定サイドバーでSelectControlを使えるようにします。

本記事で作成できるブロック

前回SelectControlコンポーネントで実装した色選択ボックスは、ブロック本体のすぐ下に表示されていました。

前回(InspectorControlsを使わない場合)

InspectorControlsを使わない場合の色選択ボックス

今回は設定サイドバー内で色選択できるようにします。

今回(InspectorControlsを使う)

InspectorControlsを使った場合の色選択ボックス

フロント側(Web表示側)には変更はありません。

作成後のフロント側
(テキスト色に赤、枠線に青枠を選択したときの表示)

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

PanelBodyは設定サイドバー内でラベル付きの折りたためるコンテナを形成します。このPanelBodyの中にInspectorControlsを配置します。

PanelBodyが複数あってまとめたい場合は、<PanelBody>の親パネルとして<Panel>を使うとよいでしょう。

コードの変更点

変更するのはedit.jsだけです。

変更前のedit.js

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

変更後のedit.js

変更点は以下の通り。

  • <InspectorControls>内に<PanelBody>を介して<SelectControls>を配置
  • ブロック本体<RichText>と<InspectorControls>は<Fragment>で囲む
import { __ } from '@wordpress/i18n';
import { InspectorControls, RichText, useBlockProps } from '@wordpress/block-editor';
import { PanelBody, 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} />
			<InspectorControls>
				<PanelBody title="色の選択">
					<SelectControl
						value = { attributes.color }
						options = { [
							{value: '', label: 'カラーを選択'},
							{value: 'red', label: '赤色'},
							{value: 'blue', label: '青色'}
						] }
						onChange = { (newColor) => {
							setAttributes({ color: newColor });
						}}
					/>
				</PanelBody>
			</InspectorControls>
		</>
	);
}

以上で、設定サイドバー内でSelectControlを使うことができます。save.js側にはもともとSelectControlはないので何も変更ありません。

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

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

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