@wordpress/edit-post 7.24.1 → 7.25.0

package/src/components/sidebar/settings-header/index.js

@@ -1,92 +1,40 @@
 /**
  * WordPress dependencies
  */
-import { Button } from '@wordpress/components';
-import { __, _x, sprintf } from '@wordpress/i18n';
-import { useDispatch, useSelect } from '@wordpress/data';
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
+import { __, _x } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
 import { store as editorStore } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
-import { store as editPostStore } from '../../../store';
+import { unlock } from '../../../lock-unlock';
+import { sidebars } from '../settings-sidebar';
 
-const SettingsHeader = ( { sidebarName } ) => {
-	const { openGeneralSidebar } = useDispatch( editPostStore );
-	const openDocumentSettings = () =>
-		openGeneralSidebar( 'edit-post/document' );
-	const openBlockSettings = () => openGeneralSidebar( 'edit-post/block' );
+const { Tabs } = unlock( componentsPrivateApis );
 
+const SettingsHeader = () => {
 	const { documentLabel, isTemplateMode } = useSelect( ( select ) => {
-		const postTypeLabel = select( editorStore ).getPostTypeLabel();
+		const { getPostTypeLabel, getRenderingMode } = select( editorStore );
 
 		return {
 			// translators: Default label for the Document sidebar tab, not selected.
-			documentLabel: postTypeLabel || _x( 'Document', 'noun' ),
-			isTemplateMode: select( editPostStore ).isEditingTemplate(),
+			documentLabel: getPostTypeLabel() || _x( 'Document', 'noun' ),
+			isTemplateMode: getRenderingMode() === 'template-only',
 		};
 	}, [] );
 
-	const [ documentAriaLabel, documentActiveClass ] =
-		sidebarName === 'edit-post/document'
-			? // translators: ARIA label for the Document sidebar tab, selected. %s: Document label.
-			  [ sprintf( __( '%s (selected)' ), documentLabel ), 'is-active' ]
-			: [ documentLabel, '' ];
-
-	const [ blockAriaLabel, blockActiveClass ] =
-		sidebarName === 'edit-post/block'
-			? // translators: ARIA label for the Block Settings Sidebar tab, selected.
-			  [ __( 'Block (selected)' ), 'is-active' ]
-			: // translators: ARIA label for the Block Settings Sidebar tab, not selected.
-			  [ __( 'Block' ), '' ];
-
-	const [ templateAriaLabel, templateActiveClass ] =
-		sidebarName === 'edit-post/document'
-			? [ __( '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' ) }
-				>
-					{
-						// translators: Text label for the Block Settings Sidebar tab.
-						__( 'Block' )
-					}
-				</Button>
-			</li>
-		</ul>
+		<Tabs.TabList>
+			<Tabs.Tab tabId={ sidebars.document }>
+				{ isTemplateMode ? __( 'Template' ) : documentLabel }
+			</Tabs.Tab>
+			<Tabs.Tab tabId={ sidebars.block }>
+				{ /* translators: Text label for the Block Settings Sidebar tab. */ }
+				{ __( 'Block' ) }
+			</Tabs.Tab>
+		</Tabs.TabList>
 	);
 };
 

package/src/components/sidebar/settings-sidebar/index.js

@@ -5,12 +5,13 @@ import {
 	BlockInspector,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { useSelect } from '@wordpress/data';
-import { Platform } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { Platform, useCallback, useContext } from '@wordpress/element';
 import { isRTL, __ } from '@wordpress/i18n';
 import { drawerLeft, drawerRight } from '@wordpress/icons';
 import { store as interfaceStore } from '@wordpress/interface';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+import { store as editorStore } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -28,52 +29,43 @@ 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,
 	native: false,
 } );
+export const sidebars = {
+	document: 'edit-post/document',
+	block: 'edit-post/block',
+};
 
-const SettingsSidebar = () => {
-	const { sidebarName, keyboardShortcut, isTemplateMode } = useSelect(
-		( select ) => {
-			// The settings sidebar is used by the edit-post/document and edit-post/block sidebars.
-			// sidebarName represents the sidebar that is active or that should be active when the SettingsSidebar toggle button is pressed.
-			// If one of the two sidebars is active the component will contain the content of that sidebar.
-			// When neither of the two sidebars is active we can not simply return null, because the PluginSidebarEditPost
-			// component, besides being used to render the sidebar, also renders the toggle button. In that case sidebarName
-			// should contain the sidebar that will be active when the toggle button is pressed. If a block
-			// is selected, that should be edit-post/block otherwise it's edit-post/document.
-			let sidebar = select( interfaceStore ).getActiveComplementaryArea(
-				editPostStore.name
-			);
-			if (
-				! [ 'edit-post/document', 'edit-post/block' ].includes(
-					sidebar
-				)
-			) {
-				if ( select( blockEditorStore ).getBlockSelectionStart() ) {
-					sidebar = 'edit-post/block';
-				}
-				sidebar = 'edit-post/document';
-			}
-			const shortcut = select(
-				keyboardShortcutsStore
-			).getShortcutRepresentation( 'core/edit-post/toggle-sidebar' );
-			return {
-				sidebarName: sidebar,
-				keyboardShortcut: shortcut,
-				isTemplateMode: select( editPostStore ).isEditingTemplate(),
-			};
-		},
-		[]
-	);
+const SidebarContent = ( {
+	sidebarName,
+	keyboardShortcut,
+	isTemplateMode,
+} ) => {
+	// Because `PluginSidebarEditPost` 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 (
 		<PluginSidebarEditPost
 			identifier={ sidebarName }
-			header={ <SettingsHeader sidebarName={ sidebarName } /> }
+			header={
+				<Tabs.Context.Provider value={ tabsContextValue }>
+					<SettingsHeader />
+				</Tabs.Context.Provider>
+			}
 			closeLabel={ __( 'Close Settings' ) }
+			// This classname is added so we can apply a corrective negative
+			// margin to the panel.
+			// see https://github.com/WordPress/gutenberg/pull/55360#pullrequestreview-1737671049
+			className="edit-post-sidebar__panel"
 			headerClassName="edit-post-sidebar__panel-tabs"
 			/* translators: button label text should, if possible, be under 16 characters. */
 			title={ __( 'Settings' ) }
@@ -81,25 +73,96 @@ const SettingsSidebar = () => {
 			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 /> }
+			<Tabs.Context.Provider value={ tabsContextValue }>
+				<Tabs.TabPanel tabId={ sidebars.document } focusable={ false }>
+					{ ! isTemplateMode && (
+						<>
+							<PostStatus />
+							<PluginDocumentSettingPanel.Slot />
+							<LastRevision />
+							<PostTaxonomies />
+							<FeaturedImage />
+							<PostExcerpt />
+							<DiscussionPanel />
+							<PageAttributes />
+							<MetaBoxes location="side" />
+						</>
+					) }
+					{ isTemplateMode && <TemplateSummary /> }
+				</Tabs.TabPanel>
+				<Tabs.TabPanel tabId={ sidebars.block } focusable={ false }>
+					<BlockInspector />
+				</Tabs.TabPanel>
+			</Tabs.Context.Provider>
 		</PluginSidebarEditPost>
 	);
 };
 
+const SettingsSidebar = () => {
+	const {
+		sidebarName,
+		isSettingsSidebarActive,
+		keyboardShortcut,
+		isTemplateMode,
+	} = useSelect( ( select ) => {
+		// The settings sidebar is used by the edit-post/document and edit-post/block sidebars.
+		// sidebarName represents the sidebar that is active or that should be active when the SettingsSidebar toggle button is pressed.
+		// If one of the two sidebars is active the component will contain the content of that sidebar.
+		// When neither of the two sidebars is active we can not simply return null, because the PluginSidebarEditPost
+		// component, besides being used to render the sidebar, also renders the toggle button. In that case sidebarName
+		// should contain the sidebar that will be active when the toggle button is pressed. If a block
+		// is selected, that should be edit-post/block otherwise it's edit-post/document.
+		let sidebar = select( interfaceStore ).getActiveComplementaryArea(
+			editPostStore.name
+		);
+		let isSettingsSidebar = true;
+		if ( ! [ sidebars.document, sidebars.block ].includes( sidebar ) ) {
+			isSettingsSidebar = false;
+			if ( select( blockEditorStore ).getBlockSelectionStart() ) {
+				sidebar = sidebars.block;
+			}
+			sidebar = sidebars.document;
+		}
+		const shortcut = select(
+			keyboardShortcutsStore
+		).getShortcutRepresentation( 'core/edit-post/toggle-sidebar' );
+		return {
+			sidebarName: sidebar,
+			isSettingsSidebarActive: isSettingsSidebar,
+			keyboardShortcut: shortcut,
+			isTemplateMode:
+				select( editorStore ).getRenderingMode() === 'template-only',
+		};
+	}, [] );
+
+	const { openGeneralSidebar } = useDispatch( editPostStore );
+
+	const onTabSelect = useCallback(
+		( newSelectedTabId ) => {
+			if ( !! newSelectedTabId ) {
+				openGeneralSidebar( newSelectedTabId );
+			}
+		},
+		[ openGeneralSidebar ]
+	);
+
+	return (
+		<Tabs
+			// Due to how this component is controlled (via a value from the
+			// `interfaceStore`), 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={ isSettingsSidebarActive ? sidebarName : null }
+			onSelect={ onTabSelect }
+		>
+			<SidebarContent
+				sidebarName={ sidebarName }
+				keyboardShortcut={ keyboardShortcut }
+				isTemplateMode={ isTemplateMode }
+			/>
+		</Tabs>
+	);
+};
+
 export default SettingsSidebar;

package/src/components/sidebar/style.scss

@@ -1,20 +1,8 @@
 .components-panel__header.edit-post-sidebar__panel-tabs {
-	justify-content: flex-start;
 	padding-left: 0;
 	padding-right: $grid-unit-20;
-	border-top: 0;
-	margin-top: 0;
-
-	ul {
-		display: flex;
-	}
-	li {
-		margin: 0;
-	}
 
 	.components-button.has-icon {
-		display: none;
-		margin: 0 0 0 auto;
 		padding: 0;
 		min-width: $icon-size;
 		height: $icon-size;
@@ -24,3 +12,7 @@
 		}
 	}
 }
+
+.edit-post-sidebar__panel {
+	margin-top: -1px;
+}

package/src/components/start-page-options/index.js

@@ -90,11 +90,11 @@ function StartPageOptionsModal( { onClose } ) {
 export default function StartPageOptions() {
 	const [ isClosed, setIsClosed ] = useState( false );
 	const shouldEnableModal = useSelect( ( select ) => {
-		const { isCleanNewPost } = select( editorStore );
-		const { isEditingTemplate, isFeatureActive } = select( editPostStore );
+		const { isCleanNewPost, getRenderingMode } = select( editorStore );
+		const { isFeatureActive } = select( editPostStore );
 
 		return (
-			! isEditingTemplate() &&
+			getRenderingMode() === 'post-only' &&
 			! isFeatureActive( 'welcomeGuide' ) &&
 			isCleanNewPost()
 		);