From 86f64a7f26d9ff2133b8f9641511dda4dd809b68 Mon Sep 17 00:00:00 2001 From: Mayank-Tripathi32 Date: Mon, 1 Jun 2026 23:40:50 +0530 Subject: [PATCH 1/2] Panel: Recommend CollapsibleCard for use outside the block inspector --- packages/components/src/panel/README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/components/src/panel/README.md b/packages/components/src/panel/README.md index dcb3560bc023bf..8dcfbad0b1e8e4 100644 --- a/packages/components/src/panel/README.md +++ b/packages/components/src/panel/README.md @@ -50,6 +50,8 @@ Panels should be expanded by default if the content is important or essential. P The `Panel` creates a container with a header that can take collapsible `PanelBody` components to easily create a user friendly interface for affecting state and attributes. +> **Note:** The `Panel` family is intended for the block inspector sidebar. For collapsible sections elsewhere, use the [`CollapsibleCard`](https://wordpress.github.io/gutenberg/?path=/docs/design-system-components-collapsiblecard--docs) component instead. + ### Usage ```jsx From b56e3b469fb5f3094eba33d39ae6d6c9580014e1 Mon Sep 17 00:00:00 2001 From: Mayank-Tripathi32 Date: Fri, 12 Jun 2026 23:04:09 +0530 Subject: [PATCH 2/2] Panel: mark as editor component and add CollapsibleCard guidance --- packages/components/src/panel/README.md | 4 ++-- packages/components/src/panel/stories/index.story.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/components/src/panel/README.md b/packages/components/src/panel/README.md index 8dcfbad0b1e8e4..2c88f5e28dc00e 100644 --- a/packages/components/src/panel/README.md +++ b/packages/components/src/panel/README.md @@ -2,6 +2,8 @@ Panels expand and collapse multiple sections of content. +The `Panel` family is intended for the block inspector sidebar. For collapsible sections elsewhere, use the [`CollapsibleCard`](https://wordpress.github.io/gutenberg/?path=/docs/design-system-components-collapsiblecard--docs) component instead. + ![](https://make.wordpress.org/design/files/2019/03/panel.png) ## Design guidelines @@ -50,8 +52,6 @@ Panels should be expanded by default if the content is important or essential. P The `Panel` creates a container with a header that can take collapsible `PanelBody` components to easily create a user friendly interface for affecting state and attributes. -> **Note:** The `Panel` family is intended for the block inspector sidebar. For collapsible sections elsewhere, use the [`CollapsibleCard`](https://wordpress.github.io/gutenberg/?path=/docs/design-system-components-collapsiblecard--docs) component instead. - ### Usage ```jsx diff --git a/packages/components/src/panel/stories/index.story.tsx b/packages/components/src/panel/stories/index.story.tsx index 76c2528b7ddb2c..1a974734f1e92e 100644 --- a/packages/components/src/panel/stories/index.story.tsx +++ b/packages/components/src/panel/stories/index.story.tsx @@ -17,7 +17,6 @@ import PanelBody from '../body'; import InputControl from '../../input-control'; const meta: Meta< typeof Panel > = { - tags: [ 'manifest' ], title: 'Components/Containers/Panel', id: 'components-panel', component: Panel, @@ -30,7 +29,8 @@ const meta: Meta< typeof Panel > = { docs: { canvas: { sourceState: 'shown' } }, componentStatus: { status: 'recommended', - whereUsed: 'global', + whereUsed: 'editor', + notes: 'Intended for the block inspector sidebar. For collapsible sections elsewhere, use `CollapsibleCard` from `@wordpress/ui` instead.', }, }, };