gutenberg-inspector-portal

Render custom controls in the WordPress block editor's inspector sidebar, independent of inspector tab groups.

Problem

The Gutenberg block editor's InspectorControls ties controls to a specific inspector tab group. There is no built-in way to render controls that persist across all groups. These issues track this gap:

• WordPress/gutenberg#59115
• WordPress/gutenberg#67814

Installation

npm install gutenberg-inspector-portal

Usage

import { registerGutenbergInspectorPortal } from 'gutenberg-inspector-portal';
import { PanelBody, TextControl } from '@wordpress/components';

registerGutenbergInspectorPortal(
  'my-plugin/custom-panel',
  ( name ) => name === 'core/paragraph',
  () => (
    <PanelBody title="My Custom Panel" initialOpen>
      <TextControl
        label="Custom Field"
        value=""
        onChange={ () => {} }
      />
    </PanelBody>
  )
);

API

registerGutenbergInspectorPortal(namespace, filterCallback, render)

| Parameter | Type | Description | |---|---|---| | namespace | string | Unique identifier for filter registration and CSS scoping. The rendered content is wrapped in <div class="gutenberg-inspector-portal-{namespace}">. | | filterCallback | (name: string) => boolean | Called with the block name when a block is selected. Return true to show, false to hide. | | render | () => ReactNode | Returns the React content to render in the sidebar. |

Multiple plugins can register independently — each namespace is isolated.

License

Apache-2.0