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.