ToolsPanel Edit
implementation subject to drastic and breaking changes.
These panels provide progressive discovery options for their children. For
example the controls provided via block supports.
Development guidelines Development guidelines
The ToolsPanel
creates a container with a header including a
dropdown menu. The menu is generated automatically from the panel’s children
matching the ToolsPanelItem
component type.
Each menu item allows for the display of the corresponding child to be
toggled on or off. The control’s onSelect
and onDeselect
callbacks are fired
allowing for greater control over the child e.g. resetting block attributes when
a block support control is toggled off.
Whether a child control is initially displayed or not is dependent upon
if there has previously been a value set or the child has been flagged as
displaying by default through the isShownByDefault
prop. Determining whether a
child has a value is done via the hasValue
function provided through the
child’s props.
Usage Usage
import { __experimentalToolsPanel as ToolsPanel, __experimentalToolsPanelItem as ToolsPanelItem, } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { PaddingEdit, hasPaddingValue, resetPadding, useIsPaddingDisabled, } from './padding'; export function DimensionPanel( props ) { const isPaddingDisabled = useIsPaddingDisabled( props ); const resetAll = () => { // Reset attributes for all block support features in this panel. }; return ( <ToolsPanel header={ __( 'Dimensions' ) } label={ __( 'Dimensions options' ) } resetAll={ resetAll } > { ! isPaddingDisabled && ( <ToolsPanelItem hasValue={ () => hasPaddingValue( props ) } label={ __( 'Padding' ) } onDeselect={ () => resetPadding( props ) } > <PaddingEdit { ...props } /> </ToolsPanelItem> ) } </ToolsPanel> ); }
Props Props
label
: string
label
: string
The label for the panel’s dropdown menu.
- Required: Yes
resetAll
: function
resetAll
: function
A function to call when the Reset all
menu option is selected. This is passed
through to the panel’s header component.
- Required: Yes
header
: string
header
: string
Text to be displayed within the panel’s header.
- Required: Yes