first pass

WordPress · Oct 13, 2023 · 3e762bb · 3e762bb
1 parent f7e66a4
commit 3e762bb
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 73 deletions.
diff --git a/packages/components/src/tabs/tab.tsx b/packages/components/src/tabs/tab.tsx
@@ -18,7 +18,7 @@ export const Tab = forwardRef< HTMLButtonElement, TabProps >( function Tab(
 ) {
 	const context = useContext( TabsContext );
 	if ( ! context ) {
-		warning( '`Tabs.TabList` must be wrapped in a `Tabs` component.' );
+		warning( '`Tabs.Tab` must be wrapped in a `Tabs` component.' );
 		return null;
 	}
 	const { store, instanceId } = context;

diff --git a/packages/components/src/tabs/tablist.tsx b/packages/components/src/tabs/tablist.tsx
@@ -8,18 +8,18 @@ import * as Ariakit from '@ariakit/react';
  * WordPress dependencies
  */
 import warning from '@wordpress/warning';
-import { forwardRef } from '@wordpress/element';
+import { forwardRef, useContext } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import type { TabListProps } from './types';
-import { useTabsContext } from './context';
+import { TabsContext } from './context';
 import { TabListWrapper } from './styles';
 
 export const TabList = forwardRef< HTMLDivElement, TabListProps >(
 	function TabList( { children, className, style }, ref ) {
-		const context = useTabsContext();
+		const context = useContext( TabsContext );
 		if ( ! context ) {
 			warning( '`Tabs.TabList` must be wrapped in a `Tabs` component.' );
 			return null;

diff --git a/packages/edit-post/src/components/sidebar/settings-header/index.js b/packages/edit-post/src/components/sidebar/settings-header/index.js
@@ -1,7 +1,10 @@
 /**
  * WordPress dependencies
  */
-import { Button } from '@wordpress/components';
+import {
+	Button,
+	privateApis as componentsPrivateApis,
+} from '@wordpress/components';
 import { __, _x, sprintf } from '@wordpress/i18n';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { store as editorStore } from '@wordpress/editor';
@@ -10,6 +13,9 @@ import { store as editorStore } from '@wordpress/editor';
  * Internal dependencies
  */
 import { store as editPostStore } from '../../../store';
+import { unlock } from '../../../lock-unlock';
+
+const { Tabs } = unlock( componentsPrivateApis );
 
 const SettingsHeader = ( { sidebarName } ) => {
 	const { openGeneralSidebar } = useDispatch( editPostStore );
@@ -45,48 +51,51 @@ const SettingsHeader = ( { sidebarName } ) => {
 			? [ __( 'Template (selected)' ), 'is-active' ]
 			: [ __( 'Template' ), '' ];
 
-	/* Use a list so screen readers will announce how many tabs there are. */
 	return (
-		<ul>
-			{ ! isTemplateMode && (
-				<li>
-					<Button
-						onClick={ openDocumentSettings }
-						className={ `edit-post-sidebar__panel-tab ${ documentActiveClass }` }
-						aria-label={ documentAriaLabel }
-						data-label={ documentLabel }
-					>
-						{ documentLabel }
-					</Button>
-				</li>
-			) }
-			{ isTemplateMode && (
-				<li>
-					<Button
-						onClick={ openDocumentSettings }
-						className={ `edit-post-sidebar__panel-tab ${ templateActiveClass }` }
-						aria-label={ templateAriaLabel }
-						data-label={ __( 'Template' ) }
-					>
-						{ __( 'Template' ) }
-					</Button>
-				</li>
-			) }
-			<li>
-				<Button
-					onClick={ openBlockSettings }
-					className={ `edit-post-sidebar__panel-tab ${ blockActiveClass }` }
-					aria-label={ blockAriaLabel }
-					// translators: Data label for the Block Settings Sidebar tab.
-					data-label={ __( 'Block' ) }
+		<>
+			{ /* // Also: we may have to retain the onclick handler to call the dispatch function*/ }
+			<Tabs.TabList>
+				<Tabs.Tab
+					id="edit-post/document"
+					render={
+						isTemplateMode ? (
+							<Button
+								onClick={ openDocumentSettings }
+								className={ `edit-post-sidebar__panel-tab ${ templateActiveClass }` }
+								aria-label={ templateAriaLabel }
+								data-label={ __( 'Template' ) }
+							/>
+						) : (
+							<Button
+								onClick={ openDocumentSettings }
+								className={ `edit-post-sidebar__panel-tab ${ documentActiveClass }` }
+								aria-label={ documentAriaLabel }
+								data-label={ documentLabel }
+							/>
+						)
+					}
 				>
-					{
-						// translators: Text label for the Block Settings Sidebar tab.
-						__( 'Block' )
+					{ isTemplateMode ? __( 'Template' ) : documentLabel }
+				</Tabs.Tab>
+				<Tabs.Tab
+					id="edit-post/block"
+					render={
+						<Button
+							onClick={ openBlockSettings }
+							className={ `edit-post-sidebar__panel-tab ${ blockActiveClass }` }
+							aria-label={ blockAriaLabel }
+							// translators: Data label for the Block Settings Sidebar tab.
+							data-label={ __( 'Block' ) }
+						>
+							{  }
+						</Button>
 					}
-				</Button>
-			</li>
-		</ul>
+				>
+					{ /* translators: Text label for the Block Settings Sidebar tab. */ }
+					{ __( 'Block' ) }
+				</Tabs.Tab>
+			</Tabs.TabList>
+		</>
 	);
 };
 

diff --git a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js
@@ -28,6 +28,10 @@ import PluginDocumentSettingPanel from '../plugin-document-setting-panel';
 import PluginSidebarEditPost from '../plugin-sidebar';
 import TemplateSummary from '../template-summary';
 import { store as editPostStore } from '../../../store';
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
+import { unlock } from '../../../lock-unlock';
+
+const { Tabs } = unlock( componentsPrivateApis );
 
 const SIDEBAR_ACTIVE_BY_DEFAULT = Platform.select( {
 	web: true,
@@ -70,35 +74,39 @@ const SettingsSidebar = () => {
 	);
 
 	return (
-		<PluginSidebarEditPost
-			identifier={ sidebarName }
-			header={ <SettingsHeader sidebarName={ sidebarName } /> }
-			closeLabel={ __( 'Close Settings' ) }
-			headerClassName="edit-post-sidebar__panel-tabs"
-			/* translators: button label text should, if possible, be under 16 characters. */
-			title={ __( 'Settings' ) }
-			toggleShortcut={ keyboardShortcut }
-			icon={ isRTL() ? drawerLeft : drawerRight }
-			isActiveByDefault={ SIDEBAR_ACTIVE_BY_DEFAULT }
-		>
-			{ ! isTemplateMode && sidebarName === 'edit-post/document' && (
-				<>
-					<PostStatus />
-					<PluginDocumentSettingPanel.Slot />
-					<LastRevision />
-					<PostTaxonomies />
-					<FeaturedImage />
-					<PostExcerpt />
-					<DiscussionPanel />
-					<PageAttributes />
-					<MetaBoxes location="side" />
-				</>
-			) }
-			{ isTemplateMode && sidebarName === 'edit-post/document' && (
-				<TemplateSummary />
-			) }
-			{ sidebarName === 'edit-post/block' && <BlockInspector /> }
-		</PluginSidebarEditPost>
+		<Tabs selectedId={ sidebarName }>
+			<PluginSidebarEditPost
+				identifier={ sidebarName }
+				header={ <SettingsHeader sidebarName={ sidebarName } /> }
+				closeLabel={ __( 'Close Settings' ) }
+				headerClassName="edit-post-sidebar__panel-tabs"
+				/* translators: button label text should, if possible, be under 16 characters. */
+				title={ __( 'Settings' ) }
+				toggleShortcut={ keyboardShortcut }
+				icon={ isRTL() ? drawerLeft : drawerRight }
+				isActiveByDefault={ SIDEBAR_ACTIVE_BY_DEFAULT }
+			>
+				{ /* Tabs.TabPanel id="edit-post/document" */ }
+				{ /* Tabs.TabPanel id="edit-post/block" */ }
+				{ ! isTemplateMode && sidebarName === 'edit-post/document' && (
+					<>
+						<PostStatus />
+						<PluginDocumentSettingPanel.Slot />
+						<LastRevision />
+						<PostTaxonomies />
+						<FeaturedImage />
+						<PostExcerpt />
+						<DiscussionPanel />
+						<PageAttributes />
+						<MetaBoxes location="side" />
+					</>
+				) }
+				{ isTemplateMode && sidebarName === 'edit-post/document' && (
+					<TemplateSummary />
+				) }
+				{ sidebarName === 'edit-post/block' && <BlockInspector /> }
+			</PluginSidebarEditPost>
+		</Tabs>
 	);
 };