自定义小工具

命名空间：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()
        ? __( '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：操作对象。