Customize Widgets

Namespace: core/customize-widgets.

Selectors

isInserterOpened

Returns true if the inserter is opened.

Usage

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.' );
};

Parameters

• state Object: Global application state.

Returns

• boolean: Whether the inserter is opened.

Actions

setIsInserterOpened

Returns an action object used to open/close the inserter.

Usage

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

Parameters

• value boolean|Object: Whether the inserter should be opened (true) or closed (false). To specify an insertion point, use an object.
• value.rootClientId string: The root client ID to insert at.
• value.insertionIndex number: The index to insert at.

Returns

• Object: Action object.