ウィジェットのカスタマイズ（Customize Widgets）

セレクタ

isInserterOpened

インサータが開いている場合はtrueを返します。

使用法

import { store as customizeWidgetsStore } from '@wordpress/customize-widgets';
import { __ } from '@wordpress/i18n';
import { useSelect } from '@wordpress/data';
const ExampleComponent = () => {
   const { isInserterOpened } = useSelect(
   ( select ) => select( customizeWidgetsStore ),
   []
   );
   return isInserterOpened()
   ? __( 'Inserter is open' )
   : __( 'Inserter is closed.' );
};

パラメータ

• state Object: グローバルアプリケーションの状態。

返り値

• boolean: インサータが開いているかどうか。

アクション

setIsInserterOpened

インサータを開閉するために使用されるアクションオブジェクトを返します。

使用法

import { useState } from 'react';
import { store as customizeWidgetsStore } from '@wordpress/customize-widgets';
import { __ } from '@wordpress/i18n';
import { useDispatch } from '@wordpress/data';
import { Button } from '@wordpress/components';
const ExampleComponent = () => {
   const { setIsInserterOpened } = useDispatch( customizeWidgetsStore );
   const [ isOpen, setIsOpen ] = useState( false );
   return (
   <Button
   onClick={ () => {
   setIsInserterOpened( ! isOpen );
   setIsOpen( ! isOpen );
   } }
   >
   { __( 'Open/close inserter' ) }
   </Button>
   );
};

パラメータ

• value boolean|Object: インサータを開くべきか（true）または閉じるべきか（false）。挿入ポイントを指定するには、オブジェクトを使用します。
• value.rootClientId string: 挿入するためのルートクライアントID。
• value.insertionIndex number: 挿入するインデックス。

返り値

• Object: アクションオブジェクト。