WordPress · scruffian · Jul 2, 2024 · Jun 5, 2024 · Jun 5, 2024 · Jun 5, 2024
@@ -30,8 +30,8 @@ import { PatternCategoryPreviewPanel } from './block-patterns-tab/pattern-catego
 import { MediaTab, MediaCategoryPanel } from './media-tab';
 import InserterSearchResults from './search-results';
 import useInsertionPoint from './hooks/use-insertion-point';
-import InserterTabs from './tabs';
 import { store as blockEditorStore } from '../../store';
+import TabbedSidebar from '../tabbed-sidebar';
 
 const NOOP = () => {};
 function InserterMenu(
@@ -315,21 +315,49 @@ function InserterMenu(
 			ref={ ref }
 		>
 			<div className="block-editor-inserter__main-area">
-				<InserterTabs
+				<TabbedSidebar
 					ref={ tabsRef }
 					onSelect={ handleSetSelectedTab }
 					onClose={ onClose }
 					selectedTab={ selectedTab }
-				>
-					{ inserterSearch }
-					{ selectedTab === 'blocks' &&
-						! delayedFilterValue &&
-						blocksTab }
-					{ selectedTab === 'patterns' &&
-						! delayedFilterValue &&
-						patternsTab }
-					{ selectedTab === 'media' && mediaTab }
-				</InserterTabs>
+					closeButtonLabel={ __( 'Close block inserter' ) }
+					tabs={ [
+						{
+							name: 'blocks',
+							title: __( 'Blocks' ),
+							panel: (
+								<>
+									{ inserterSearch }
+									{ selectedTab === 'blocks' &&
+										! delayedFilterValue &&
+										blocksTab }
+								</>
+							),
+						},
+						{
+							name: 'patterns',
+							title: __( 'Patterns' ),
+							panel: (
+								<>
+									{ inserterSearch }
+									{ selectedTab === 'patterns' &&
+										! delayedFilterValue &&
+										patternsTab }
+								</>
+							),
+						},
+						{
+							name: 'media',
+							title: __( 'Media' ),
+							panel: (
+								<>
+									{ inserterSearch }
+									{ mediaTab }
+								</>
+							),
+						},
+					] }
+				/>
 			</div>
 			{ showInserterHelpPanel && hoveredItem && (
 				<Popover

@@ -17,19 +17,13 @@ $block-inserter-tabs-height: 44px;
 }
 
 .block-editor-inserter__main-area {
-	position: relative;
-	display: flex;
-	flex-direction: column;
 	height: 100%;
 	gap: $grid-unit-20;
+	position: relative;
 
 	&.show-as-tabs {
 		gap: 0;
 	}
-
-	@include break-medium {
-		width: $block-inserter-width;
-	}
 }
 
 .block-editor-inserter__popover.is-quick {
@@ -109,48 +103,6 @@ $block-inserter-tabs-height: 44px;
 	padding: $grid-unit-20 $grid-unit-20 0 $grid-unit-20;
 }
 
-.block-editor-inserter__tabs {
-	flex-grow: 1;
-	display: flex;
-	flex-direction: column;
-	overflow: hidden;
-
-	.block-editor-inserter__tablist-and-close-button {
-		border-bottom: $border-width solid $gray-300;
-		padding-right: $grid-unit-15;
-		display: flex;
-		justify-content: space-between;
-	}
-
-	.block-editor-inserter__close-button {
-		/* stylelint-disable-next-line property-disallowed-list -- This should be refactored to avoid order if possible */
-		order: 1;
-		align-self: center;
-	}
-
-	.block-editor-inserter__tablist {
-		width: 100%;
-		margin-bottom: -$border-width;
-
-		button[role="tab"] {
-			flex-grow: 1;
-			&[id$="reusable"] {
-				flex-grow: inherit;
-				// These are to align the `reusable` icon with the search icon.
-				padding-left: $grid-unit-20;
-				padding-right: $grid-unit-20;
-			}
-		}
-	}
-
-	.block-editor-inserter__tabpanel {
-		display: flex;
-		flex-grow: 1;
-		flex-direction: column;
-		overflow-y: auto;
-	}
-}
-
 .block-editor-inserter__no-tab-container {
 	overflow-y: auto;
 	flex-grow: 1;

@@ -0,0 +1,76 @@
+# Tabbed Panel
+
+The `TabbedPanel` component is used to create the secondary panels in the editor.
+
+## Development guidelines
+
+This acts as a wrapper for the `Tabs` component, but adding conventions that can be shared between all secondary panels, for example:
+
+-   A close button
+-   Tabs that fill the panel
+-   Custom scollbars
+
+### Usage
+
+Renders a block alignment toolbar with alignments options.
+
+```jsx
+import { TabbedSidebar } from '@wordpress/components';
+
+const MyTabbedSidebar = () => (
+	<TabbedSidebar
+		tabs={ [
+			{
+				name: 'slug-1',
+				title: _x( 'Title 1', 'context' ),
+				panel: <PanelContents>,
+				panelRef: useRef('an-optional-ref'),
+			},
+			{
+				name: 'slug-2',
+				title: _x( 'Title 2', 'context' ),
+				panel: <PanelContents />,
+			},
+		] }
+		onClose={ onClickCloseButton }
+		onSelect={ onSelectTab }
+		defaultTabId="slug-1"
+		ref={ tabsRef }
+	/>
+);
+```
+
+### Props
+
+### `defaultTabId`
+
+-   **Type:** `String`
+-   **Default:** `undefined`
+
+This is passed to the `Tabs` component so it can handle the tab to select by default when it component renders.
+
+### `onClose`
+
+-   **Type:** `Function`
+
+The function that is called when the close button is clicked.
+
+### `onSelect`
+
+-   **Type:** `Function`
+
+This is passed to the `Tabs` component - it will be called when a tab has been selected. It is passed the selected tab's ID as an argument.
+
+### `selectedTab`
+
+-   **Type:** `String`
+-   **Default:** `undefined`
+
+This is passed to the `Tabs` component - it will display this tab as selected.
+
+### `tabs`
+
+-   **Type:** `Array`
+-   **Default:** `undefined`
+
+An array of tabs which will be rendered as `TabList` and `TabPanel` components.
@@ -0,0 +1,70 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	Button,
+	privateApis as componentsPrivateApis,
+} from '@wordpress/components';
+import { forwardRef } from '@wordpress/element';
+import { closeSmall } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const { Tabs } = unlock( componentsPrivateApis );
+
+function TabbedSidebar(
+	{ defaultTabId, onClose, onSelect, selectedTab, tabs, closeButtonLabel },
+	ref
+) {
+	return (
+		<div className="block-editor-tabbed-sidebar">
+			<Tabs
+				selectOnMove={ false }
+				defaultTabId={ defaultTabId }
+				onSelect={ onSelect }
+				selectedTabId={ selectedTab }
+			>
+				<div className="block-editor-tabbed-sidebar__tablist-and-close-button">
+					<Button
+						className="block-editor-tabbed-sidebar__close-button"
+						icon={ closeSmall }
+						label={ closeButtonLabel }
+						onClick={ () => onClose() }
+						size="small"
+					/>
+
+					<Tabs.TabList
+						className="block-editor-tabbed-sidebar__tablist"
+						ref={ ref }
+					>
+						{ tabs.map( ( tab ) => (
+							<Tabs.Tab
+								key={ tab.name }
+								tabId={ tab.name }
+								className="block-editor-tabbed-sidebar__tab"
+							>
+								{ tab.title }
+							</Tabs.Tab>
+						) ) }
+					</Tabs.TabList>
+				</div>
+				{ tabs.map( ( tab ) => (
+					<Tabs.TabPanel
+						key={ tab.name }
+						tabId={ tab.name }
+						focusable={ false }
+						className="block-editor-tabbed-sidebar__tabpanel"
+						ref={ tab.panelRef }
+					>
+						{ tab.panel }
+					</Tabs.TabPanel>
+				) ) }
+			</Tabs>
+		</div>
+	);
+}
+
+export default forwardRef( TabbedSidebar );
@@ -0,0 +1,53 @@
+.block-editor-tabbed-sidebar {
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	flex-grow: 1;
+	overflow: hidden;
+
+	@include break-medium() {
+		width: 350px;
+	}
+}
+
+.block-editor-tabbed-sidebar__tablist-and-close-button {
+	border-bottom: $border-width solid $gray-300;
+	display: flex;
+	justify-content: space-between;
+	padding-right: $grid-unit-15;
+}
+
+
+.block-editor-tabbed-sidebar__close-button {
+	background: $white;
+	/* stylelint-disable-next-line property-disallowed-list -- This should be removed when https://github.com/WordPress/gutenberg/issues/59013 is fixed. */
+	order: 1;
+	align-self: center;
+}
+
+.block-editor-tabbed-sidebar__tablist {
+	box-sizing: border-box;
+	flex-grow: 1;
+	margin-bottom: -$border-width;
+	width: 100%;
+}
+
+.block-editor-tabbed-sidebar__tab {
+	flex-grow: 1;
+	margin-bottom: -$border-width;
+
+	&[id$="reusable"] {
+		flex-grow: inherit;
+		// These are to align the `reusable` icon with the search icon.
+		padding-left: $grid-unit-20;
+		padding-right: $grid-unit-20;
+	}
+}
+
+.block-editor-tabbed-sidebar__tabpanel {
+	display: flex;
+	flex-grow: 1;
+	flex-direction: column;
+	overflow-y: auto;
+	scrollbar-gutter: auto;
+}
@@ -44,6 +44,7 @@ import { PrivateInserterLibrary } from './components/inserter/library';
 import { PrivatePublishDateTimePicker } from './components/publish-date-time-picker';
 import useSpacingSizes from './components/spacing-sizes-control/hooks/use-spacing-sizes';
 import useBlockDisplayTitle from './components/block-title/use-block-display-title';
+import TabbedSidebar from './components/tabbed-sidebar';
 
 /**
  * Private @wordpress/block-editor APIs.
@@ -73,6 +74,7 @@ lock( privateApis, {
 	useLayoutStyles,
 	DimensionsTool,
 	ResolutionTool,
+	TabbedSidebar,
 	TextAlignmentControl,
 	ReusableBlocksRenameHint,
 	useReusableBlocksRenameHint,

@@ -42,6 +42,7 @@
 @import "./components/rich-text/style.scss";
 @import "./components/segmented-text-control/style.scss";
 @import "./components/skip-to-selected-block/style.scss";
+@import "./components/tabbed-sidebar/style.scss";
 @import "./components/tool-selector/style.scss";
 @import "./components/url-input/style.scss";
 @import "./components/url-popover/style.scss";