Container panel

A perfect shell for options within the Block editor sidebar. Replaces the default WordPress <PanelBody> component.

<ContainerPanel title='My block'>
	<span>This is demo content</span>
</ContainerPanel>

Highlighted props

For the complete list of props, use your IDE's autocomplete functionality.

Closable

<ContainerPanel
	title='My block'
	closable
>
	<span>This is demo content</span>
</ContainerPanel>

Use toggle

<ContainerPanel
	title='My block'
	use={value}
	onUseChange={(value) => setValue(value)}
>
	<span>This is demo content</span>
</ContainerPanel>

Use toggle and closable

<ContainerPanel
	title='My block'
	use={value}
	onUseChange={(value) => setValue(value)}
	closable
>
	<span>This is demo content</span>
</ContainerPanel>

Externally toggle use

<ContainerPanel
	title='My block'
	use={myUseValue}
	closable
>
	<span>This is demo content</span>
</ContainerPanel>

Actions

<ContainerPanel
	title='My block'
	closable
	actions={
		<>
			<Button size='small'>Demo 1</Button>
			<Button size='small'>Demo 2</Button>
		</>
	}
>
	<span>This is demo content</span>
</ContainerPanel>