take that, slot/fill!

WordPress · Dec 11, 2023 · f76e131 · f76e131
1 parent 8a702c3
commit f76e131
Show file tree

Hide file tree

Showing 2 changed files with 83 additions and 96 deletions.
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/index.js b/packages/edit-site/src/components/sidebar-edit-mode/index.js
@@ -1,10 +1,13 @@
 /**
  * WordPress dependencies
  */
-import { createSlotFill } from '@wordpress/components';
+import {
+	createSlotFill,
+	privateApis as componentsPrivateApis,
+} from '@wordpress/components';
 import { isRTL, __ } from '@wordpress/i18n';
 import { drawerLeft, drawerRight } from '@wordpress/icons';
-import { useEffect } from '@wordpress/element';
+import { useCallback, useContext, useEffect } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as interfaceStore } from '@wordpress/interface';
 import { store as blockEditorStore } from '@wordpress/block-editor';
@@ -22,12 +25,55 @@ import TemplatePanel from './template-panel';
 import PluginTemplateSettingPanel from '../plugin-template-setting-panel';
 import { SIDEBAR_BLOCK, SIDEBAR_TEMPLATE } from './constants';
 import { store as editSiteStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
+const { Tabs } = unlock( componentsPrivateApis );
 
 const { Slot: InspectorSlot, Fill: InspectorFill } = createSlotFill(
 	'EditSiteSidebarInspector'
 );
 export const SidebarInspectorFill = InspectorFill;
 
+const FillContents = ( {
+	sidebarName,
+	isEditingPage,
+	supportsGlobalStyles,
+} ) => {
+	// Because `DefaultSidebar` renders a `ComplementaryArea`, we
+	// need to forward the `Tabs` context so it can be passed through the
+	// underlying slot/fill.
+	const tabsContextValue = useContext( Tabs.Context );
+
+	return (
+		<>
+			<DefaultSidebar
+				identifier={ sidebarName }
+				title={ __( 'Settings' ) }
+				icon={ isRTL() ? drawerLeft : drawerRight }
+				closeLabel={ __( 'Close Settings' ) }
+				header={
+					<Tabs.Context.Provider value={ tabsContextValue }>
+						<SettingsHeader />
+					</Tabs.Context.Provider>
+				}
+				headerClassName="edit-site-sidebar-edit-mode__panel-tabs"
+			>
+				<Tabs.Context.Provider value={ tabsContextValue }>
+					<Tabs.TabPanel id={ SIDEBAR_BLOCK } focusable={ false }>
+						{ isEditingPage ? <PagePanels /> : <TemplatePanel /> }
+						<PluginTemplateSettingPanel.Slot />
+					</Tabs.TabPanel>
+
+					<Tabs.TabPanel id={ SIDEBAR_TEMPLATE } focusable={ false }>
+						<InspectorSlot bubblesVirtually />
+					</Tabs.TabPanel>
+				</Tabs.Context.Provider>
+			</DefaultSidebar>
+			{ supportsGlobalStyles && <GlobalStylesSidebar /> }
+		</>
+	);
+};
+
 export function SidebarComplementaryAreaFills() {
 	const {
 		sidebar,
@@ -81,27 +127,28 @@ export function SidebarComplementaryAreaFills() {
 		sidebarName = hasBlockSelection ? SIDEBAR_BLOCK : SIDEBAR_TEMPLATE;
 	}
 
+	const onTabSelect = useCallback(
+		( newSelectedTabId ) => {
+			enableComplementaryArea( STORE_NAME, newSelectedTabId );
+		},
+		[ enableComplementaryArea ]
+	);
+
 	return (
-		<>
-			<DefaultSidebar
-				identifier={ sidebarName }
-				title={ __( 'Settings' ) }
-				icon={ isRTL() ? drawerLeft : drawerRight }
-				closeLabel={ __( 'Close Settings' ) }
-				header={ <SettingsHeader sidebarName={ sidebarName } /> }
-				headerClassName="edit-site-sidebar-edit-mode__panel-tabs"
-			>
-				{ sidebarName === SIDEBAR_TEMPLATE && (
-					<>
-						{ isEditingPage ? <PagePanels /> : <TemplatePanel /> }
-						<PluginTemplateSettingPanel.Slot />
-					</>
-				) }
-				{ sidebarName === SIDEBAR_BLOCK && (
-					<InspectorSlot bubblesVirtually />
-				) }
-			</DefaultSidebar>
-			{ supportsGlobalStyles && <GlobalStylesSidebar /> }
-		</>
+		<Tabs
+			// Due to how this component is controlled (via a value from the
+			// edit-site store), when the sidebar closes the currently selected
+			// tab can't be found. This causes the component to continuously reset
+			// the selection to `null` in an infinite loop. Proactively setting
+			// the selected tab to `null` avoids that.
+			selectedTabId={ isEditorSidebarOpened ? sidebarName : null }
+			onSelect={ onTabSelect }
+		>
+			<FillContents
+				sidebarName={ sidebarName }
+				isEditingPage={ isEditingPage }
+				supportsGlobalStyles={ supportsGlobalStyles }
+			/>
+		</Tabs>
 	);
 }
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/settings-header/index.js b/packages/edit-site/src/components/sidebar-edit-mode/settings-header/index.js
@@ -1,26 +1,22 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
-import { Button } from '@wordpress/components';
-import { __, sprintf } from '@wordpress/i18n';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { store as interfaceStore } from '@wordpress/interface';
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
 import { store as editorStore } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
-import { STORE_NAME } from '../../../store/constants';
 import { SIDEBAR_BLOCK, SIDEBAR_TEMPLATE } from '../constants';
 import { store as editSiteStore } from '../../../store';
 import { POST_TYPE_LABELS, TEMPLATE_POST_TYPE } from '../../../utils/constants';
+import { unlock } from '../../../lock-unlock';
 
-const SettingsHeader = ( { sidebarName } ) => {
+const { Tabs } = unlock( componentsPrivateApis );
+
+const SettingsHeader = () => {
 	const { isEditingPage, entityType } = useSelect( ( select ) => {
 		const { getEditedPostType, isPage } = select( editSiteStore );
 		const { getRenderingMode } = select( editorStore );
@@ -35,69 +31,13 @@ const SettingsHeader = ( { sidebarName } ) => {
 		POST_TYPE_LABELS[ entityType ] ||
 		POST_TYPE_LABELS[ TEMPLATE_POST_TYPE ];
 
-	const { enableComplementaryArea } = useDispatch( interfaceStore );
-	const openTemplateSettings = () =>
-		enableComplementaryArea( STORE_NAME, SIDEBAR_TEMPLATE );
-	const openBlockSettings = () =>
-		enableComplementaryArea( STORE_NAME, SIDEBAR_BLOCK );
-
-	let templateAriaLabel;
-	if ( isEditingPage ) {
-		templateAriaLabel =
-			sidebarName === SIDEBAR_TEMPLATE
-				? // translators: ARIA label for the Template sidebar tab, selected.
-				  __( 'Page (selected)' )
-				: // translators: ARIA label for the Template Settings Sidebar tab, not selected.
-				  __( 'Page' );
-	} else {
-		templateAriaLabel =
-			sidebarName === SIDEBAR_TEMPLATE
-				? // translators: ARIA label for the Template sidebar tab, selected.
-				  sprintf( __( '%s (selected)' ), entityLabel )
-				: // translators: ARIA label for the Template Settings Sidebar tab, not selected.
-				  entityLabel;
-	}
-
-	/* Use a list so screen readers will announce how many tabs there are. */
 	return (
-		<ul>
-			<li>
-				<Button
-					onClick={ openTemplateSettings }
-					className={ classnames(
-						'edit-site-sidebar-edit-mode__panel-tab',
-						{
-							'is-active': sidebarName === SIDEBAR_TEMPLATE,
-						}
-					) }
-					aria-label={ templateAriaLabel }
-					data-label={ isEditingPage ? __( 'Page' ) : entityLabel }
-				>
-					{ isEditingPage ? __( 'Page' ) : entityLabel }
-				</Button>
-			</li>
-			<li>
-				<Button
-					onClick={ openBlockSettings }
-					className={ classnames(
-						'edit-site-sidebar-edit-mode__panel-tab',
-						{
-							'is-active': sidebarName === SIDEBAR_BLOCK,
-						}
-					) }
-					aria-label={
-						sidebarName === SIDEBAR_BLOCK
-							? // translators: ARIA label for the Block Settings Sidebar tab, selected.
-							  __( 'Block (selected)' )
-							: // translators: ARIA label for the Block Settings Sidebar tab, not selected.
-							  __( 'Block' )
-					}
-					data-label={ __( 'Block' ) }
-				>
-					{ __( 'Block' ) }
-				</Button>
-			</li>
-		</ul>
+		<Tabs.TabList>
+			<Tabs.Tab tabId={ SIDEBAR_TEMPLATE }>
+				{ isEditingPage ? __( 'Page' ) : entityLabel }
+			</Tabs.Tab>
+			<Tabs.Tab tabId={ SIDEBAR_BLOCK }>{ __( 'Block' ) }</Tabs.Tab>
+		</Tabs.TabList>
 	);
 };