@wordpress/edit-site 5.27.1 → 5.28.0

package/src/components/sidebar-edit-mode/index.js

@@ -1,14 +1,17 @@
 /**
  * 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, useRef } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as interfaceStore } from '@wordpress/interface';
 import { store as blockEditorStore } from '@wordpress/block-editor';
-import { store as editorStore } from '@wordpress/editor';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -22,12 +25,89 @@ 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,
+} ) => {
+	const tabListRef = useRef( null );
+	// 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 );
+
+	// This effect addresses a race condition caused by tabbing from the last
+	// block in the editor into the settings sidebar. Without this effect, the
+	// selected tab and browser focus can become separated in an unexpected way.
+	// (e.g the "block" tab is focused, but the "post" tab is selected).
+	useEffect( () => {
+		const tabsElements = Array.from(
+			tabListRef.current?.querySelectorAll( '[role="tab"]' ) || []
+		);
+		const selectedTabElement = tabsElements.find(
+			// We are purposefully using a custom `data-tab-id` attribute here
+			// because we don't want rely on any assumptions about `Tabs`
+			// component internals.
+			( element ) => element.getAttribute( 'data-tab-id' ) === sidebarName
+		);
+		const activeElement = selectedTabElement?.ownerDocument.activeElement;
+		const tabsHasFocus = tabsElements.some( ( element ) => {
+			return activeElement && activeElement.id === element.id;
+		} );
+		if (
+			tabsHasFocus &&
+			selectedTabElement &&
+			selectedTabElement.id !== activeElement?.id
+		) {
+			selectedTabElement?.focus();
+		}
+	}, [ sidebarName ] );
+
+	return (
+		<>
+			<DefaultSidebar
+				identifier={ sidebarName }
+				title={ __( 'Settings' ) }
+				icon={ isRTL() ? drawerLeft : drawerRight }
+				closeLabel={ __( 'Close Settings' ) }
+				header={
+					<Tabs.Context.Provider value={ tabsContextValue }>
+						<SettingsHeader ref={ tabListRef } />
+					</Tabs.Context.Provider>
+				}
+				headerClassName="edit-site-sidebar-edit-mode__panel-tabs"
+				// 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-site-sidebar__panel"
+			>
+				<Tabs.Context.Provider value={ tabsContextValue }>
+					<Tabs.TabPanel
+						tabId={ SIDEBAR_TEMPLATE }
+						focusable={ false }
+					>
+						{ isEditingPage ? <PagePanels /> : <TemplatePanel /> }
+						<PluginTemplateSettingPanel.Slot />
+					</Tabs.TabPanel>
+					<Tabs.TabPanel tabId={ SIDEBAR_BLOCK } focusable={ false }>
+						<InspectorSlot bubblesVirtually />
+					</Tabs.TabPanel>
+				</Tabs.Context.Provider>
+			</DefaultSidebar>
+			{ supportsGlobalStyles && <GlobalStylesSidebar /> }
+		</>
+	);
+};
+
 export function SidebarComplementaryAreaFills() {
 	const {
 		sidebar,
@@ -35,23 +115,26 @@ export function SidebarComplementaryAreaFills() {
 		hasBlockSelection,
 		supportsGlobalStyles,
 		isEditingPage,
+		isEditorOpen,
 	} = useSelect( ( select ) => {
 		const _sidebar =
 			select( interfaceStore ).getActiveComplementaryArea( STORE_NAME );
+
 		const _isEditorSidebarOpened = [
 			SIDEBAR_BLOCK,
 			SIDEBAR_TEMPLATE,
 		].includes( _sidebar );
-		const settings = select( editSiteStore ).getSettings();
+		const { getCanvasMode } = unlock( select( editSiteStore ) );
+
 		return {
 			sidebar: _sidebar,
 			isEditorSidebarOpened: _isEditorSidebarOpened,
 			hasBlockSelection:
 				!! select( blockEditorStore ).getBlockSelectionStart(),
-			supportsGlobalStyles: ! settings?.supportsTemplatePartsMode,
-			isEditingPage:
-				select( editSiteStore ).isPage() &&
-				select( editorStore ).getRenderingMode() !== 'template-only',
+			supportsGlobalStyles:
+				select( coreStore ).getCurrentTheme()?.is_block_theme,
+			isEditingPage: select( editSiteStore ).isPage(),
+			isEditorOpen: getCanvasMode() === 'edit',
 		};
 	}, [] );
 	const { enableComplementaryArea } = useDispatch( interfaceStore );
@@ -81,27 +164,37 @@ export function SidebarComplementaryAreaFills() {
 		sidebarName = hasBlockSelection ? SIDEBAR_BLOCK : SIDEBAR_TEMPLATE;
 	}
 
+	// `newSelectedTabId` could technically be falsey if no tab is selected (i.e.
+	// the initial render) or when we don't want a tab displayed (i.e. the
+	// sidebar is closed). These cases should both be covered by the `!!` check
+	// below, so we shouldn't need any additional falsey handling.
+	const onTabSelect = useCallback(
+		( newSelectedTabId ) => {
+			if ( !! 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={
+				isEditorOpen && isEditorSidebarOpened ? sidebarName : null
+			}
+			onSelect={ onTabSelect }
+			selectOnMove={ false }
+		>
+			<FillContents
+				sidebarName={ sidebarName }
+				isEditingPage={ isEditingPage }
+				supportsGlobalStyles={ supportsGlobalStyles }
+			/>
+		</Tabs>
 	);
 }

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

@@ -1,104 +1,44 @@
-/**
- * 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';
+import { forwardRef } from '@wordpress/element';
 
 /**
  * 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';
-
-const SettingsHeader = ( { sidebarName } ) => {
-	const { isEditingPage, entityType } = useSelect( ( select ) => {
-		const { getEditedPostType, isPage } = select( editSiteStore );
-		const { getRenderingMode } = select( editorStore );
+import { unlock } from '../../../lock-unlock';
 
-		return {
-			isEditingPage: isPage() && getRenderingMode() !== 'template-only',
-			entityType: getEditedPostType(),
-		};
-	} );
+const { Tabs } = unlock( componentsPrivateApis );
 
-	const entityLabel =
-		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;
-	}
+const SettingsHeader = ( _, ref ) => {
+	const postTypeLabel = useSelect(
+		( select ) => select( editorStore ).getPostTypeLabel(),
+		[]
+	);
 
-	/* 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 ref={ ref }>
+			<Tabs.Tab
+				tabId={ SIDEBAR_TEMPLATE }
+				// Used for focus management in the SettingsSidebar component.
+				data-tab-id={ SIDEBAR_TEMPLATE }
+			>
+				{ postTypeLabel }
+			</Tabs.Tab>
+			<Tabs.Tab
+				tabId={ SIDEBAR_BLOCK }
+				// Used for focus management in the SettingsSidebar component.
+				data-tab-id={ SIDEBAR_BLOCK }
+			>
+				{ __( 'Block' ) }
+			</Tabs.Tab>
+		</Tabs.TabList>
 	);
 };
 
-export default SettingsHeader;
+export default forwardRef( SettingsHeader );

package/src/components/sidebar-edit-mode/settings-header/style.scss

@@ -1,20 +1,8 @@
 .components-panel__header.edit-site-sidebar-edit-mode__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,78 +12,3 @@
 		}
 	}
 }
-
-// This tab style CSS is duplicated verbatim in
-// /packages/components/src/tab-panel/style.scss
-.components-button.edit-site-sidebar-edit-mode__panel-tab {
-	position: relative;
-	border-radius: 0;
-	height: $grid-unit-60;
-	background: transparent;
-	border: none;
-	box-shadow: none;
-	cursor: pointer;
-	padding: 3px $grid-unit-20; // Use padding to offset the is-active border, this benefits Windows High Contrast mode
-	margin-left: 0;
-	font-weight: 500;
-
-	&:focus:not(:disabled) {
-		position: relative;
-		box-shadow: none;
-		outline: none;
-	}
-
-	// Tab indicator
-	&::after {
-		content: "";
-		position: absolute;
-		right: 0;
-		bottom: 0;
-		left: 0;
-		pointer-events: none;
-
-		// Draw the indicator.
-		background: var(--wp-admin-theme-color);
-		height: calc(0 * var(--wp-admin-border-width-focus));
-		border-radius: 0;
-
-		// Animation
-		transition: all 0.1s linear;
-		@include reduce-motion("transition");
-	}
-
-	// Active.
-	&.is-active::after {
-		height: calc(1 * var(--wp-admin-border-width-focus));
-
-		// Windows high contrast mode.
-		outline: 2px solid transparent;
-		outline-offset: -1px;
-	}
-
-	// Focus.
-	&::before {
-		content: "";
-		position: absolute;
-		top: $grid-unit-15;
-		right: $grid-unit-15;
-		bottom: $grid-unit-15;
-		left: $grid-unit-15;
-		pointer-events: none;
-
-		// Draw the indicator.
-		box-shadow: 0 0 0 0 transparent;
-		border-radius: $radius-block-ui;
-
-		// Animation
-		transition: all 0.1s linear;
-		@include reduce-motion("transition");
-	}
-
-	&:focus-visible::before {
-		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-
-		// Windows high contrast mode.
-		outline: 2px solid transparent;
-	}
-}

package/src/components/sidebar-edit-mode/sidebar-card/style.scss

@@ -11,7 +11,10 @@
 		font-weight: 500;
 		line-height: $icon-size;
 		&.edit-site-sidebar-card__title {
+			font-size: $default-font-size;
+			line-height: $default-line-height;
 			margin: 0;
+			padding: 3px 0; // This makes the title as high as the icon.
 		}
 	}
 

package/src/components/sidebar-edit-mode/style.scss

@@ -99,3 +99,7 @@
 		}
 	}
 }
+
+.edit-site-sidebar__panel {
+	margin-top: -1px;
+}

package/src/components/sidebar-navigation-screen/style.scss

@@ -43,6 +43,8 @@
 
 .edit-site-sidebar-navigation-screen__page-link {
 	color: $gray-600;
+	display: inline-block;
+	word-break: break-word;
 
 	&:hover,
 	&:focus {
@@ -52,7 +54,6 @@
 	.components-external-link__icon {
 		margin-left: $grid-unit-05;
 	}
-	display: inline-block;
 }
 
 .edit-site-sidebar-navigation-screen__title-icon {

package/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js

@@ -6,7 +6,7 @@ import { sentenceCase } from 'change-case';
 /**
  * WordPress dependencies
  */
-import { __, sprintf } from '@wordpress/i18n';
+import { __, _x, sprintf } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as editorStore } from '@wordpress/editor';
 import { useSelect } from '@wordpress/data';
@@ -94,8 +94,14 @@ export default function usePatternDetails( postType, postId ) {
 			label: __( 'Syncing' ),
 			value:
 				record.wp_pattern_sync_status === PATTERN_SYNC_TYPES.unsynced
-					? __( 'Not synced' )
-					: __( 'Fully synced' ),
+					? _x(
+							'Not synced',
+							'Text that indicates that the pattern is not synchronized'
+					  )
+					: _x(
+							'Synced',
+							'Text that indicates that the pattern is synchronized'
+					  ),
 		} );
 
 		if ( record.wp_pattern_category?.length === 0 ) {

package/src/components/site-hub/style.scss

@@ -54,7 +54,6 @@
 }
 
 .edit-site-site-hub__site-title {
-	margin-left: $grid-unit-05;
 	flex-grow: 1;
 	color: $gray-200;
 }

package/src/components/site-icon/index.js

@@ -36,8 +36,8 @@ function SiteIcon( { className } ) {
 	) : (
 		<Icon
 			className="edit-site-site-icon__icon"
-			size="48px"
 			icon={ wordpress }
+			size={ 48 }
 		/>
 	);
 

package/src/components/site-icon/style.scss

@@ -1,10 +1,18 @@
 .edit-site-site-icon__icon {
 	fill: currentColor;
+	// Matches SiteIcon motion, smoothing out the transition.
+	transition: padding 0.3s ease-out;
+	@include reduce-motion("transition");
+
+	.edit-site-layout.is-full-canvas & {
+		// Make the WordPress icon not so big in full canvas.
+		padding: $grid-unit-15 * 0.5; // 6px.
+	}
 }
 
 .edit-site-site-icon__image {
 	width: 100%;
-	height: auto;
+	height: 100%;
 	border-radius: $radius-block-ui * 2;
 	object-fit: cover;
 	background: #333;

package/src/components/welcome-guide/template.js

@@ -25,12 +25,12 @@ export default function WelcomeGuideTemplate() {
 			'welcomeGuide'
 		);
 		const { isPage } = select( editSiteStore );
-		const { getRenderingMode } = select( editorStore );
+		const { getCurrentPostType } = select( editorStore );
 		return (
 			isTemplateActive &&
 			! isEditorActive &&
 			isPage() &&
-			getRenderingMode() === 'template-only'
+			getCurrentPostType() === 'wp_template'
 		);
 	}, [] );
 

package/src/hooks/commands/use-edit-mode-commands.js

@@ -38,22 +38,34 @@ import { PREFERENCES_MODAL_NAME } from '../../components/preferences-modal';
 import { PATTERN_MODALS } from '../../components/pattern-modal';
 import { unlock } from '../../lock-unlock';
 import { TEMPLATE_POST_TYPE } from '../../utils/constants';
+import { useLink } from '../../components/routes/link';
 
 const { useHistory } = unlock( routerPrivateApis );
 
 function usePageContentFocusCommands() {
 	const { record: template } = useEditedEntityRecord();
-	const { isPage, canvasMode, renderingMode } = useSelect( ( select ) => {
-		const { isPage: _isPage, getCanvasMode } = unlock(
-			select( editSiteStore )
-		);
-		const { getRenderingMode } = select( editorStore );
-		return {
-			isPage: _isPage(),
-			canvasMode: getCanvasMode(),
-			renderingMode: getRenderingMode(),
-		};
-	}, [] );
+	const { isPage, canvasMode, templateId, currentPostType } = useSelect(
+		( select ) => {
+			const { isPage: _isPage, getCanvasMode } = unlock(
+				select( editSiteStore )
+			);
+			const { getCurrentPostType, getCurrentTemplateId } =
+				select( editorStore );
+			return {
+				isPage: _isPage(),
+				canvasMode: getCanvasMode(),
+				templateId: getCurrentTemplateId(),
+				currentPostType: getCurrentPostType(),
+			};
+		},
+		[]
+	);
+
+	const { onClick: editTemplate } = useLink( {
+		postType: 'wp_template',
+		postId: templateId,
+	} );
+
 	const { setRenderingMode } = useDispatch( editorStore );
 
 	if ( ! isPage || canvasMode !== 'edit' ) {
@@ -62,7 +74,7 @@ function usePageContentFocusCommands() {
 
 	const commands = [];
 
-	if ( renderingMode !== 'template-only' ) {
+	if ( currentPostType !== 'wp_template' ) {
 		commands.push( {
 			name: 'core/switch-to-template-focus',
 			/* translators: %1$s: template title */
@@ -72,7 +84,7 @@ function usePageContentFocusCommands() {
 			),
 			icon: layout,
 			callback: ( { close } ) => {
-				setRenderingMode( 'template-only' );
+				editTemplate();
 				close();
 			},
 		} );
@@ -129,7 +141,7 @@ function useManipulateDocumentCommands() {
 	const isEditingPage = useSelect(
 		( select ) =>
 			select( editSiteStore ).isPage() &&
-			select( editorStore ).getRenderingMode() !== 'template-only',
+			select( editorStore ).getCurrentPostType() !== 'wp_template',
 		[]
 	);
 

package/src/store/actions.js

@@ -559,6 +559,11 @@ export const toggleDistractionFree =
 		const isDistractionFree = registry
 			.select( preferencesStore )
 			.get( 'core', 'distractionFree' );
+		if ( isDistractionFree ) {
+			registry
+				.dispatch( preferencesStore )
+				.set( 'core', 'fixedToolbar', false );
+		}
 		if ( ! isDistractionFree ) {
 			registry.batch( () => {
 				registry
@@ -586,9 +591,21 @@ export const toggleDistractionFree =
 							{
 								label: __( 'Undo' ),
 								onClick: () => {
-									registry
-										.dispatch( preferencesStore )
-										.toggle( 'core', 'distractionFree' );
+									registry.batch( () => {
+										registry
+											.dispatch( preferencesStore )
+											.set(
+												'core',
+												'fixedToolbar',
+												isDistractionFree ? true : false
+											);
+										registry
+											.dispatch( preferencesStore )
+											.toggle(
+												'core',
+												'distractionFree'
+											);
+									} );
 								},
 							},
 						],