gutenbergdocs/docs/reference-guides/data/data-core-customize-widgets.md

自定义小工具

命名空间：core/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()
		? __( '插入器已开启' )
		: __( '插入器已关闭' );
};

参数

• 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 );
			} }
		>
			{ __( '开启/关闭插入器' ) }
		</Button>
	);
};

参数

• value boolean|Object: 插入器应开启(true)或关闭(false)。要指定插入位置，请使用对象格式
• value.rootClientId string: 要插入的根客户端ID
• value.insertionIndex number: 要插入的索引位置

返回值

• Object: 操作对象