> For the complete documentation index, see [llms.txt](https://tigriweb.gitbook.io/components/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tigriweb.gitbook.io/components/meta.md).

# Meta

## 1. PluginSidebar

<div align="left"><figure><img src="/files/ajwkcAx9u0z4Q7bYQCvs" alt=""><figcaption></figcaption></figure></div>

{% code title="index.js" %}

```jsx
import { __ } from '@wordpress/i18n';

import {
	PluginSidebar,
} from '@wordpress/editor';

import {
	PanelBody,
} from '@wordpress/components';

const TestPluginSidebar = () => (
	<PluginSidebar
		name="test-plugin-sidebar"
		title={ __('Test Plugin Sidebar', 'your-theme-name') }
		icon="paperclip"
	>
		<PanelBody>
			...
		</PanelBody>
	</PluginSidebar>
);

registerPlugin('test-settings-plugin-sidebar', {
	render: TestPluginSidebar,
});
```

{% endcode %}

## 2. PluginDocumentSettingPanel

<div align="left"><figure><img src="/files/VpRp2E23J3nBUWim6Su2" alt=""><figcaption></figcaption></figure></div>

{% code title="index.js" %}

```jsx
import { __ } from '@wordpress/i18n';

import {
	registerPlugin,
} from '@wordpress/plugins';

import {
	PluginDocumentSettingPanel,
} from '@wordpress/editor';

const TestSettingPanel = () => (
	<PluginDocumentSettingPanel
		name="test-panel"
		title={ __('Test Panel', 'your-theme-name') }
		icon="paperclip"
	>
		...
	</PluginDocumentSettingPanel>
);

registerPlugin('test-settings-panel', {
	render: TestSettingPanel,
});
```

{% endcode %}

## 3. InspectorControls

{% code title="index.js" %}

```jsx
import { __ } from '@wordpress/i18n';

import {
	InspectorControls,
} from '@wordpress/block-editor';

import {
	PanelBody,
} from '@wordpress/components';
```

{% endcode %}

<div align="left"><figure><img src="/files/56Cj0ZNFMsOh6rVC32P4" alt=""><figcaption></figcaption></figure></div>

{% tabs %}
{% tab title="Settings Tab" %}

<pre class="language-jsx" data-title="index.js | edit()"><code class="lang-jsx"><strong>&#x3C;InspectorControls>
</strong>	&#x3C;PanelBody
		title={ __('Panel Title', 'your-theme-name') }
		initialOpen={ true }
	>
		...
	&#x3C;/PanelBody>
&#x3C;/InspectorControls>
</code></pre>

{% endtab %}

{% tab title="Styles Tab" %}

<pre class="language-jsx" data-title="index.js | edit()"><code class="lang-jsx"><strong>&#x3C;InspectorControls group="styles">
</strong>	&#x3C;PanelBody
		title={ __('Panel Title', 'your-theme-name') }
		initialOpen={ true }
	>
		...
	&#x3C;/PanelBody>
&#x3C;/InspectorControls>
</code></pre>

{% endtab %}
{% endtabs %}

## Controls:

* [Checkbox](/components/meta/checkbox.md)
* [Color](/components/meta/color.md)
* [DateTime](/components/meta/datetime.md)
* [Icon](/components/meta/icon.md)
* [Media](/components/meta/media.md)
* [Number](/components/meta/number.md)
* [PostType](/components/meta/posttype.md)
* [PostTypeMultiple](/components/meta/posttypemultiple.md)
* [Radio](/components/meta/radio.md)
* [Range](/components/meta/range.md)
* [Select](/components/meta/select.md)
* [Taxonomy](/components/meta/taxonomy.md)
* [TaxonomyMultiple](/components/meta/taxonomymultiple.md)
* [Text](/components/meta/text.md)
* [Textarea](/components/meta/textarea.md)
* [Toggle](/components/meta/toggle.md)