# Meta

## 1. PluginSidebar

<div align="left"><figure><img src="https://870798947-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWAokPCWM65E5XQJVixgi%2Fuploads%2FPuktsadj6aI1ySw6GOjH%2Fplugin-sidebar.jpg?alt=media&#x26;token=347bcfe4-daf4-4ac8-8794-d6f31468c049" 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="https://870798947-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWAokPCWM65E5XQJVixgi%2Fuploads%2FeIIkIBa2VL553ymfJaEv%2Fdocument-panel.jpg?alt=media&#x26;token=a8cc93fd-aba6-41d8-af0c-9ad1a4529e75" 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="https://870798947-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWAokPCWM65E5XQJVixgi%2Fuploads%2Fsl1ftJanJBjxxFqGsM5g%2Finspector-controls.jpg?alt=media&#x26;token=80b31b23-4edc-433c-81f3-57331baaca68" 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](https://tigriweb.gitbook.io/components/meta/checkbox)
* [Color](https://tigriweb.gitbook.io/components/meta/color)
* [DateTime](https://tigriweb.gitbook.io/components/meta/datetime)
* [Icon](https://tigriweb.gitbook.io/components/meta/icon)
* [Media](https://tigriweb.gitbook.io/components/meta/media)
* [Number](https://tigriweb.gitbook.io/components/meta/number)
* [PostType](https://tigriweb.gitbook.io/components/meta/posttype)
* [PostTypeMultiple](https://tigriweb.gitbook.io/components/meta/posttypemultiple)
* [Radio](https://tigriweb.gitbook.io/components/meta/radio)
* [Range](https://tigriweb.gitbook.io/components/meta/range)
* [Select](https://tigriweb.gitbook.io/components/meta/select)
* [Taxonomy](https://tigriweb.gitbook.io/components/meta/taxonomy)
* [TaxonomyMultiple](https://tigriweb.gitbook.io/components/meta/taxonomymultiple)
* [Text](https://tigriweb.gitbook.io/components/meta/text)
* [Textarea](https://tigriweb.gitbook.io/components/meta/textarea)
* [Toggle](https://tigriweb.gitbook.io/components/meta/toggle)