@wordpress/edit-site 3.0.15 → 3.0.16

package/src/components/editor/index.js

@@ -3,16 +3,10 @@
  */
 import { useEffect, useState, useMemo, useCallback } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
-import {
-	SlotFillProvider,
-	Popover,
-	Button,
-	Notice,
-} from '@wordpress/components';
+import { Popover, Button, Notice } from '@wordpress/components';
 import { EntityProvider, store as coreStore } from '@wordpress/core-data';
 import { BlockContextProvider, BlockBreadcrumb } from '@wordpress/block-editor';
 import {
-	FullscreenMode,
 	InterfaceSkeleton,
 	ComplementaryArea,
 	store as interfaceStore,
@@ -21,8 +15,6 @@ import {
 	EditorNotices,
 	EditorSnackbars,
 	EntitiesSavedStates,
-	UnsavedChangesWarning,
-	store as editorStore,
 } from '@wordpress/editor';
 import { __ } from '@wordpress/i18n';
 import { PluginArea } from '@wordpress/plugins';
@@ -47,13 +39,14 @@ import WelcomeGuide from '../welcome-guide';
 import { store as editSiteStore } from '../../store';
 import { GlobalStylesRenderer } from './global-styles-renderer';
 import { GlobalStylesProvider } from '../global-styles/global-styles-provider';
+import useTitle from '../routes/use-title';
 
 const interfaceLabels = {
 	secondarySidebar: __( 'Block Library' ),
 	drawer: __( 'Navigation Sidebar' ),
 };
 
-function Editor( { initialSettings, onError } ) {
+function Editor( { onError } ) {
 	const {
 		isInserterOpen,
 		isListViewOpen,
@@ -111,26 +104,7 @@ function Editor( { initialSettings, onError } ) {
 			).getAllShortcutKeyCombinations( 'core/edit-site/next-region' ),
 		};
 	}, [] );
-	const { updateEditorSettings } = useDispatch( editorStore );
-	const { setPage, setIsInserterOpened, updateSettings } = useDispatch(
-		editSiteStore
-	);
-
-	useEffect( () => {
-		updateSettings( initialSettings );
-	}, [] );
-
-	// Keep the defaultTemplateTypes in the core/editor settings too,
-	// so that they can be selected with core/editor selectors in any editor.
-	// This is needed because edit-site doesn't initialize with EditorProvider,
-	// which internally uses updateEditorSettings as well.
-	const { defaultTemplateTypes, defaultTemplatePartAreas } = settings;
-	useEffect( () => {
-		updateEditorSettings( {
-			defaultTemplateTypes,
-			defaultTemplatePartAreas,
-		} );
-	}, [ defaultTemplateTypes, defaultTemplatePartAreas ] );
+	const { setPage, setIsInserterOpened } = useDispatch( editSiteStore );
 
 	const [
 		isEntitiesSavedStatesOpen,
@@ -189,120 +163,120 @@ function Editor( { initialSettings, onError } ) {
 		return null;
 	};
 
+	// Only announce the title once the editor is ready to prevent "Replace"
+	// action in <URlQueryController> from double-announcing.
+	useTitle( isReady && __( 'Editor (beta)' ) );
+
 	return (
 		<>
 			<URLQueryController />
 			{ isReady && (
 				<ShortcutProvider>
-					<SlotFillProvider>
-						<EntityProvider kind="root" type="site">
-							<EntityProvider
-								kind="postType"
-								type={ templateType }
-								id={ entityId }
-							>
-								<GlobalStylesProvider>
-									<BlockContextProvider
-										value={ blockContext }
-									>
-										<GlobalStylesRenderer />
-										<ErrorBoundary onError={ onError }>
-											<FullscreenMode isActive />
-											<UnsavedChangesWarning />
-											<KeyboardShortcuts.Register />
-											<SidebarComplementaryAreaFills />
-											<InterfaceSkeleton
-												labels={ interfaceLabels }
-												secondarySidebar={ secondarySidebar() }
-												sidebar={
-													sidebarIsOpened && (
-														<ComplementaryArea.Slot scope="core/edit-site" />
-													)
-												}
-												drawer={ <NavigationSidebar /> }
-												header={
-													<Header
+					<EntityProvider kind="root" type="site">
+						<EntityProvider
+							kind="postType"
+							type={ templateType }
+							id={ entityId }
+						>
+							<GlobalStylesProvider>
+								<BlockContextProvider value={ blockContext }>
+									<GlobalStylesRenderer />
+									<ErrorBoundary onError={ onError }>
+										<KeyboardShortcuts.Register />
+										<SidebarComplementaryAreaFills />
+										<InterfaceSkeleton
+											labels={ interfaceLabels }
+											secondarySidebar={ secondarySidebar() }
+											sidebar={
+												sidebarIsOpened && (
+													<ComplementaryArea.Slot scope="core/edit-site" />
+												)
+											}
+											drawer={
+												<NavigationSidebar.Slot />
+											}
+											header={
+												<Header
+													openEntitiesSavedStates={
+														openEntitiesSavedStates
+													}
+												/>
+											}
+											notices={ <EditorSnackbars /> }
+											content={
+												<>
+													<EditorNotices />
+													{ template && (
+														<BlockEditor
+															setIsInserterOpen={
+																setIsInserterOpened
+															}
+														/>
+													) }
+													{ templateResolved &&
+														! template &&
+														settings?.siteUrl &&
+														entityId && (
+															<Notice
+																status="warning"
+																isDismissible={
+																	false
+																}
+															>
+																{ __(
+																	"You attempted to edit an item that doesn't exist. Perhaps it was deleted?"
+																) }
+															</Notice>
+														) }
+													<KeyboardShortcuts
 														openEntitiesSavedStates={
 															openEntitiesSavedStates
 														}
 													/>
-												}
-												notices={ <EditorSnackbars /> }
-												content={
-													<>
-														<EditorNotices />
-														{ template && (
-															<BlockEditor
-																setIsInserterOpen={
-																	setIsInserterOpened
-																}
-															/>
-														) }
-														{ templateResolved &&
-															! template &&
-															settings?.siteUrl &&
-															entityId && (
-																<Notice
-																	status="warning"
-																	isDismissible={
-																		false
-																	}
-																>
-																	{ __(
-																		"You attempted to edit an item that doesn't exist. Perhaps it was deleted?"
-																	) }
-																</Notice>
-															) }
-														<KeyboardShortcuts
-															openEntitiesSavedStates={
-																openEntitiesSavedStates
+												</>
+											}
+											actions={
+												<>
+													{ isEntitiesSavedStatesOpen ? (
+														<EntitiesSavedStates
+															close={
+																closeEntitiesSavedStates
 															}
 														/>
-													</>
-												}
-												actions={
-													<>
-														{ isEntitiesSavedStatesOpen ? (
-															<EntitiesSavedStates
-																close={
-																	closeEntitiesSavedStates
+													) : (
+														<div className="edit-site-editor__toggle-save-panel">
+															<Button
+																variant="secondary"
+																className="edit-site-editor__toggle-save-panel-button"
+																onClick={
+																	openEntitiesSavedStates
 																}
-															/>
-														) : (
-															<div className="edit-site-editor__toggle-save-panel">
-																<Button
-																	variant="secondary"
-																	className="edit-site-editor__toggle-save-panel-button"
-																	onClick={
-																		openEntitiesSavedStates
-																	}
-																	aria-expanded={
-																		false
-																	}
-																>
-																	{ __(
-																		'Open save panel'
-																	) }
-																</Button>
-															</div>
-														) }
-													</>
-												}
-												footer={ <BlockBreadcrumb /> }
-												shortcuts={ {
-													previous: previousShortcut,
-													next: nextShortcut,
-												} }
-											/>
-											<WelcomeGuide />
-											<Popover.Slot />
-											<PluginArea />
-										</ErrorBoundary>
-									</BlockContextProvider>
-								</GlobalStylesProvider>
-							</EntityProvider>
+																aria-expanded={
+																	false
+																}
+															>
+																{ __(
+																	'Open save panel'
+																) }
+															</Button>
+														</div>
+													) }
+												</>
+											}
+											footer={ <BlockBreadcrumb /> }
+											shortcuts={ {
+												previous: previousShortcut,
+												next: nextShortcut,
+											} }
+										/>
+										<WelcomeGuide />
+										<Popover.Slot />
+										<PluginArea />
+									</ErrorBoundary>
+								</BlockContextProvider>
+							</GlobalStylesProvider>
 						</EntityProvider>
-					</SlotFillProvider>
+					</EntityProvider>
 				</ShortcutProvider>
 			) }
 		</>

package/src/components/global-styles/gradients-palette-panel.js

@@ -53,18 +53,6 @@ export default function GradientPalettePanel( { name } ) {
 			className="edit-site-global-styles-gradient-palette-panel"
 			spacing={ 10 }
 		>
-			<div>
-				<Heading className="edit-site-global-styles-gradient-palette-panel__duotone-heading">
-					{ __( 'Duotone' ) }
-				</Heading>
-				<DuotonePicker
-					duotonePalette={ duotonePalette }
-					disableCustomDuotone={ true }
-					disableCustomColors={ true }
-					clearable={ false }
-					onChange={ noop }
-				/>
-			</div>
 			{ !! themeGradients && !! themeGradients.length && (
 				<PaletteEdit
 					canReset={ themeGradients !== baseThemeGradients }
@@ -94,6 +82,18 @@ export default function GradientPalettePanel( { name } ) {
 				) }
 				slugPrefix="custom-"
 			/>
+			<div>
+				<Heading className="edit-site-global-styles-gradient-palette-panel__duotone-heading">
+					{ __( 'Duotone' ) }
+				</Heading>
+				<DuotonePicker
+					duotonePalette={ duotonePalette }
+					disableCustomDuotone={ true }
+					disableCustomColors={ true }
+					clearable={ false }
+					onChange={ noop }
+				/>
+			</div>
 		</VStack>
 	);
 }

package/src/components/global-styles/use-global-styles-output.js

@@ -378,7 +378,6 @@ export function useGlobalStylesOutput() {
 			{
 				css: customProperties,
 				isGlobalStyles: true,
-				__experimentalNoWrapper: true,
 			},
 			{
 				css: globalStyles,

package/src/components/header/document-actions/index.js

@@ -106,22 +106,16 @@ export default function DocumentActions( {
 			>
 				<Text
 					size="body"
-					className="edit-site-document-actions__title-prefix"
+					className="edit-site-document-actions__title"
+					as="h1"
 				>
 					<VisuallyHidden as="span">
 						{ sprintf(
 							/* translators: %s: the entity being edited, like "template"*/
-							__( 'Editing %s:' ),
+							__( 'Editing %s: ' ),
 							entityLabel
 						) }
 					</VisuallyHidden>
-				</Text>
-
-				<Text
-					size="body"
-					className="edit-site-document-actions__title"
-					as="h1"
-				>
 					{ entityTitle }
 				</Text>
 

package/src/components/list/index.js

@@ -21,8 +21,14 @@ import Header from './header';
 import NavigationSidebar from '../navigation-sidebar';
 import Table from './table';
 import { store as editSiteStore } from '../../store';
+import { useLocation } from '../routes';
+import useTitle from '../routes/use-title';
+
+export default function List() {
+	const {
+		params: { postType: templateType },
+	} = useLocation();
 
-export default function List( { templateType } ) {
 	useRegisterShortcuts();
 
 	const { previousShortcut, nextShortcut, isNavigationOpen } = useSelect(
@@ -47,6 +53,8 @@ export default function List( { templateType } ) {
 		[ templateType ]
 	);
 
+	useTitle( postType?.labels?.name );
+
 	// `postType` could load in asynchronously. Only provide the detailed region labels if
 	// the postType has loaded, otherwise `InterfaceSkeleton` will fallback to the defaults.
 	const itemsListLabel = postType?.labels?.items_list;
@@ -75,18 +83,9 @@ export default function List( { templateType } ) {
 				...detailedRegionLabels,
 			} }
 			header={ <Header templateType={ templateType } /> }
-			drawer={
-				<NavigationSidebar
-					activeTemplateType={ templateType }
-					isDefaultOpen
-				/>
-			}
+			drawer={ <NavigationSidebar.Slot /> }
 			notices={ <EditorSnackbars /> }
-			content={
-				<main className="edit-site-list-main">
-					<Table templateType={ templateType } />
-				</main>
-			}
+			content={ <Table templateType={ templateType } /> }
 			shortcuts={ {
 				previous: previousShortcut,
 				next: nextShortcut,

package/src/components/list/style.scss

@@ -44,18 +44,13 @@
 
 		.interface-interface-skeleton__content {
 			background: $white;
-		}
-	}
-}
+			align-items: center;
+			padding: $grid-unit-20;
 
-.edit-site-list-main {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	padding: $grid-unit-20;
-
-	@include break-medium() {
-		padding: $grid-unit * 9;
+			@include break-medium() {
+				padding: $grid-unit * 9;
+			}
+		}
 	}
 }
 

package/src/components/list/table.js

@@ -8,11 +8,11 @@ import {
 	VisuallyHidden,
 	__experimentalHeading as Heading,
 } from '@wordpress/components';
-import { addQueryArgs } from '@wordpress/url';
 
 /**
  * Internal dependencies
  */
+import Link from '../routes/link';
 import Actions from './actions';
 import AddedBy from './added-by';
 
@@ -92,15 +92,15 @@ export default function Table( { templateType } ) {
 					>
 						<td className="edit-site-list-table-column" role="cell">
 							<Heading level={ 4 }>
-								<a
-									href={ addQueryArgs( window.location.href, {
+								<Link
+									params={ {
 										postId: template.id,
 										postType: template.type,
-									} ) }
+									} }
 								>
 									{ template.title?.rendered ||
 										template.slug }
-								</a>
+								</Link>
 							</Heading>
 							{ template.description }
 						</td>

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

@@ -18,30 +18,31 @@ export const {
 	Slot: NavigationPanelPreviewSlot,
 } = createSlotFill( 'EditSiteNavigationPanelPreview' );
 
-export default function NavigationSidebar( {
-	isDefaultOpen = false,
-	activeTemplateType,
-} ) {
+const {
+	Fill: NavigationSidebarFill,
+	Slot: NavigationSidebarSlot,
+} = createSlotFill( 'EditSiteNavigationSidebar' );
+
+function NavigationSidebar( { isDefaultOpen = false, activeTemplateType } ) {
 	const isDesktopViewport = useViewportMatch( 'medium' );
 	const { setIsNavigationPanelOpened } = useDispatch( editSiteStore );
 
-	useEffect( () => {
-		// When transitioning to desktop open the navigation if `isDefaultOpen` is true.
-		if ( isDefaultOpen && isDesktopViewport ) {
-			setIsNavigationPanelOpened( true );
-		}
-
-		// When transitioning to mobile/tablet, close the navigation.
-		if ( ! isDesktopViewport ) {
-			setIsNavigationPanelOpened( false );
-		}
-	}, [ isDefaultOpen, isDesktopViewport, setIsNavigationPanelOpened ] );
+	useEffect(
+		function autoOpenNavigationPanelOnViewportChange() {
+			setIsNavigationPanelOpened( isDefaultOpen && isDesktopViewport );
+		},
+		[ isDefaultOpen, isDesktopViewport, setIsNavigationPanelOpened ]
+	);
 
 	return (
-		<>
+		<NavigationSidebarFill>
 			<NavigationToggle />
 			<NavigationPanel activeItem={ activeTemplateType } />
 			<NavigationPanelPreviewSlot />
-		</>
+		</NavigationSidebarFill>
 	);
 }
+
+NavigationSidebar.Slot = NavigationSidebarSlot;
+
+export default NavigationSidebar;

package/src/components/navigation-sidebar/navigation-panel/index.js

@@ -15,11 +15,9 @@ import {
 } from '@wordpress/components';
 import { store as coreDataStore } from '@wordpress/core-data';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useEffect, useRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { ESCAPE } from '@wordpress/keycodes';
 import { decodeEntities } from '@wordpress/html-entities';
-import { addQueryArgs } from '@wordpress/url';
 import {
 	home as siteIcon,
 	layout as templateIcon,
@@ -29,11 +27,18 @@ import {
 /**
  * Internal dependencies
  */
+import { useLink } from '../../routes/link';
 import MainDashboardButton from '../../main-dashboard-button';
 import { store as editSiteStore } from '../../../store';
 
 const SITE_EDITOR_KEY = 'site-editor';
 
+function NavLink( { params, replace, ...props } ) {
+	const linkProps = useLink( params, replace );
+
+	return <NavigationItem { ...linkProps } { ...props } />;
+}
+
 const NavigationPanel = ( { activeItem = SITE_EDITOR_KEY } ) => {
 	const { isNavigationOpen, siteTitle } = useSelect( ( select ) => {
 		const { getEntityRecord } = select( coreDataStore );
@@ -48,15 +53,6 @@ const NavigationPanel = ( { activeItem = SITE_EDITOR_KEY } ) => {
 	}, [] );
 	const { setIsNavigationPanelOpened } = useDispatch( editSiteStore );
 
-	// Ensures focus is moved to the panel area when it is activated
-	// from a separate component (such as document actions in the header).
-	const panelRef = useRef();
-	useEffect( () => {
-		if ( isNavigationOpen ) {
-			panelRef.current.focus();
-		}
-	}, [ activeItem, isNavigationOpen ] );
-
 	const closeOnEscape = ( event ) => {
 		if ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {
 			event.preventDefault();
@@ -70,8 +66,6 @@ const NavigationPanel = ( { activeItem = SITE_EDITOR_KEY } ) => {
 			className={ classnames( `edit-site-navigation-panel`, {
 				'is-open': isNavigationOpen,
 			} ) }
-			ref={ panelRef }
-			tabIndex="-1"
 			onKeyDown={ closeOnEscape }
 		>
 			<div className="edit-site-navigation-panel__inner">
@@ -92,32 +86,32 @@ const NavigationPanel = ( { activeItem = SITE_EDITOR_KEY } ) => {
 
 						<NavigationMenu>
 							<NavigationGroup title={ __( 'Editor' ) }>
-								<NavigationItem
+								<NavLink
 									icon={ siteIcon }
 									title={ __( 'Site' ) }
 									item={ SITE_EDITOR_KEY }
-									href={ addQueryArgs( window.location.href, {
+									params={ {
 										postId: undefined,
 										postType: undefined,
-									} ) }
+									} }
 								/>
-								<NavigationItem
+								<NavLink
 									icon={ templateIcon }
 									title={ __( 'Templates' ) }
 									item="wp_template"
-									href={ addQueryArgs( window.location.href, {
+									params={ {
 										postId: undefined,
 										postType: 'wp_template',
-									} ) }
+									} }
 								/>
-								<NavigationItem
+								<NavLink
 									icon={ templatePartIcon }
 									title={ __( 'Template Parts' ) }
 									item="wp_template_part"
-									href={ addQueryArgs( window.location.href, {
+									params={ {
 										postId: undefined,
 										postType: 'wp_template_part',
-									} ) }
+									} }
 								/>
 							</NavigationGroup>
 						</NavigationMenu>

package/src/components/routes/index.js

@@ -0,0 +1,53 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	createContext,
+	useState,
+	useEffect,
+	useContext,
+} from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import history from '../../utils/history';
+
+const RoutesContext = createContext();
+const HistoryContext = createContext();
+
+export function useLocation() {
+	return useContext( RoutesContext );
+}
+
+export function useHistory() {
+	return useContext( HistoryContext );
+}
+
+function getLocationWithParams( location ) {
+	const searchParams = new URLSearchParams( location.search );
+	return {
+		...location,
+		params: Object.fromEntries( searchParams.entries() ),
+	};
+}
+
+export function Routes( { children } ) {
+	const [ location, setLocation ] = useState( () =>
+		getLocationWithParams( history.location )
+	);
+
+	useEffect( () => {
+		return history.listen( ( { location: updatedLocation } ) => {
+			setLocation( getLocationWithParams( updatedLocation ) );
+		} );
+	}, [] );
+
+	return (
+		<HistoryContext.Provider value={ history }>
+			<RoutesContext.Provider value={ location }>
+				{ children( location ) }
+			</RoutesContext.Provider>
+		</HistoryContext.Provider>
+	);
+}