PluginDocumentSettingPanel

利用可能なプロパティ

• name string: パネルを識別する文字列です。
• className string: サイドバー本体に追加されるオプションのクラス名です。
• title string: サイドバーの上部に表示されるタイトルです。
• icon (string|Element): Dashicon アイコンスラッグ文字列、またはSVG WP要素です。
  

例

import { registerPlugin } from '@wordpress/plugins';
import { PluginDocumentSettingPanel } from '@wordpress/editor';
const PluginDocumentSettingPanelDemo = () => (
   <PluginDocumentSettingPanel
   name="custom-panel"
   title="Custom Panel"
   className="custom-panel"
   >
   Custom Panel Contents
   </PluginDocumentSettingPanel>
);
registerPlugin( 'plugin-document-setting-panel-demo', {
   render: PluginDocumentSettingPanelDemo,
   icon: 'palmtree',
} );

プログラムでパネルにアクセスする

コアおよびカスタムパネルは、そのパネル名を使用してプログラムでアクセスできます。コアパネル名は次のとおりです：

• サマリーパネル: post-status
• カテゴリーパネル: taxonomy-panel-category
• タグパネル: taxonomy-panel-post_tag
• 特徴的な画像パネル: featured-image
• 抜粋パネル: post-excerpt
• ディスカッションパネル: discussion-panel

カスタムパネルは、registerPluginに渡されたプラグイン名で名前空間化されています。

プログラムでパネルを切り替えるには、次のようにします：  
``````bash
import { useDispatch } from '@wordpress/data';
import { store as editorStore } from '@wordpress/editor';
const Example = () => {
   const { toggleEditorPanelOpened } = useDispatch( editorStore );
   return (
   <Button
   variant="primary"
   onClick={ () => {
   // Toggle the Summary panel
   toggleEditorPanelOpened( 'post-status' );
   // Toggle the Custom Panel introduced in the example above.
   toggleEditorPanelOpened(
   'plugin-document-setting-panel-demo/custom-panel'
   );
   } }
   >
   Toggle Panels
   </Button>
   );
};
`

登録されたパネルの名前を渡すことによって、removeEditorPanel関数を使用して管理者からパネルを削除することも可能です。

import { useDispatch } from '@wordpress/data';
import { store as editorStore } from '@wordpress/editor';
const Example = () => {
   const { removeEditorPanel } = useDispatch( editorStore );
   return (
   <Button
   variant="primary"
   onClick={ () => {
   // Remove the Featured Image panel.
   removeEditorPanel( 'featured-image' );
   // Remove the Custom Panel introduced in the example above.
   removeEditorPanel(
   'plugin-document-setting-panel-demo/custom-panel'
   );
   } }
   >
   Toggle Panels
   </Button>
   );
};