MENU

【ブロック開発】ToggleControlの使い方

WordPress

このページでは、WordPressのブロック開発で使用されるToggleControl（トグルボタン）の使い方をまとめています。

ToggleControlの使い方を習得することで、要素/設定項目の表示・非表示を自由に制御することが可能になります。

目次

インポート

ToggleControlは「@wordpress/components」からインポートすることができます。

import { ToggleControl } from '@wordpress/components';
edit.js

属性

ToggleControlで主に使用する属性は「label」「help」「checked」「onChange」の4つです。

import { useState } from '@wordpress/element';
import { ToggleControl } from '@wordpress/components';

export default function Edit() {
	const [ toggleFlg, setToggleFlg ] = useState( false );
	return (
		<ToggleControl
			label="トグルボタン01"
			help="このトグルボタンはテスト用です"
			checked={ toggleFlg }
			onChange={ ( newFlg ) => setToggleFlg( newFlg ) }
		/>
	);
}
edit.js
属性の解説
  • label：ラベル名を指定
  • help：補足事項などがある場合は指定
  • checked：トグルボタンの「ON/OFF」を真偽値で指定
  • onChange：トグルボタンの状態が変化した際に、呼び出す関数を指定（引数には変化後の真偽値が渡される）

他にも扱える属性はあるので、興味のある方はWordPress Developer Resourcesをご参照ください。

サンプルコード

下記のサンプルコードでは、トグルボタンをONにすると「<p>テキストが表示されるよ！</p>」の要素とhelp属性に設定されているテキストが切り替わります。

{
	"attributes": {
		"textFlg": {
			"type": "boolean",
			"default": false
		}
	}
}
block.json
import { __ } from '@wordpress/i18n';
import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
import { ToggleControl, PanelBody } from '@wordpress/components';
import './editor.scss';
import metadata from './block.json';

export default function Edit( { attributes, setAttributes } ) {
	const { textFlg } = attributes;
	return (
		<>
			<InspectorControls>
				<PanelBody title={ __( 'トグルパネル', metadata.textdomain ) }>
					<ToggleControl
						label={ __( 'テキストの表示', metadata.textdomain ) }
						checked={ textFlg }
						onChange={ ( newTextFlg ) =>
							setAttributes( { textFlg: newTextFlg } )
						}
						help={
							textFlg
								? __(
										'現在テキストは表示の状態です',
										metadata.textdomain
								  )
								: __(
										'現在テキストは非表示の状態です',
										metadata.textdomain
								  )
						}
					/>
				</PanelBody>
			</InspectorControls>
			<div { ...useBlockProps() }>
				{ textFlg && (
					<p>
						{ __(
							'テキストが表示されるよ！',
							metadata.textdomain
						) }
					</p>
				) }
				<p>{ __( 'Edit Content', metadata.textdomain ) }</p>
			</div>
		</>
	);
}
edit.js
WordPress
よかったらシェアしてね！
  • URLをコピーしました！
目次