@wordpress/edit-site 3.0.12 → 3.0.16

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>
+	);
+}

package/src/components/routes/link.js

@@ -0,0 +1,44 @@
+/**
+ * WordPress dependencies
+ */
+import { addQueryArgs } from '@wordpress/url';
+
+/**
+ * Internal dependencies
+ */
+import { useHistory } from './index';
+
+export function useLink( params = {}, state, shouldReplace = false ) {
+	const history = useHistory();
+
+	function onClick( event ) {
+		event.preventDefault();
+
+		if ( shouldReplace ) {
+			history.replace( params, state );
+		} else {
+			history.push( params, state );
+		}
+	}
+
+	return {
+		href: addQueryArgs( window.location.href, params ),
+		onClick,
+	};
+}
+
+export default function Link( {
+	params = {},
+	state,
+	replace: shouldReplace = false,
+	children,
+	...props
+} ) {
+	const { href, onClick } = useLink( params, state, shouldReplace );
+
+	return (
+		<a href={ href } onClick={ onClick } { ...props }>
+			{ children }
+		</a>
+	);
+}

package/src/components/routes/use-title.js

@@ -0,0 +1,56 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useRef } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { __, sprintf } from '@wordpress/i18n';
+import { speak } from '@wordpress/a11y';
+
+/**
+ * Internal dependencies
+ */
+import { useLocation } from './index';
+
+export default function useTitle( title ) {
+	const location = useLocation();
+	const siteTitle = useSelect(
+		( select ) =>
+			select( coreStore ).getEntityRecord( 'root', 'site' )?.title,
+		[]
+	);
+	const isInitialLocationRef = useRef( true );
+
+	useEffect( () => {
+		isInitialLocationRef.current = false;
+	}, [ location ] );
+
+	useEffect( () => {
+		// Don't update or announce the title for initial page load.
+		if ( isInitialLocationRef.current ) {
+			return;
+		}
+
+		if ( title && siteTitle ) {
+			// @see https://github.com/WordPress/wordpress-develop/blob/94849898192d271d533e09756007e176feb80697/src/wp-admin/admin-header.php#L67-L68
+			const formattedTitle = sprintf(
+				/* translators: Admin screen title. 1: Admin screen name, 2: Network or site name. */
+				__( '%1$s ‹ %2$s — WordPress' ),
+				title,
+				siteTitle
+			);
+
+			document.title = formattedTitle;
+
+			// Announce title on route change for screen readers.
+			speak(
+				sprintf(
+					/* translators: The page title that is currently displaying. */
+					__( 'Now displaying: %s' ),
+					document.title
+				),
+				'assertive'
+			);
+		}
+	}, [ title, siteTitle, location ] );
+}

package/src/components/sidebar/global-styles-sidebar.js

@@ -4,15 +4,18 @@
 import { DropdownMenu, FlexItem, FlexBlock, Flex } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { styles, moreVertical } from '@wordpress/icons';
+import { useDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import DefaultSidebar from './default-sidebar';
 import { GlobalStylesUI, useGlobalStylesReset } from '../global-styles';
+import { store as editSiteStore } from '../../store';
 
 export default function GlobalStylesSidebar() {
 	const [ canReset, onReset ] = useGlobalStylesReset();
+	const { toggleFeature } = useDispatch( editSiteStore );
 
 	return (
 		<DefaultSidebar
@@ -39,6 +42,11 @@ export default function GlobalStylesSidebar() {
 									title: __( 'Reset to defaults' ),
 									onClick: onReset,
 								},
+								{
+									title: __( 'Welcome Guide' ),
+									onClick: () =>
+										toggleFeature( 'welcomeGuideStyles' ),
+								},
 							] }
 						/>
 					</FlexItem>

package/src/components/sidebar/template-card/template-areas.js

@@ -6,7 +6,7 @@ import {
 	Button,
 	__experimentalHeading as Heading,
 } from '@wordpress/components';
-import { getTemplatePartIcon } from '@wordpress/editor';
+import { store as editorStore } from '@wordpress/editor';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 
@@ -14,19 +14,31 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import { store as editSiteStore } from '../../../store';
-import { TEMPLATE_PART_AREA_TO_NAME } from '../../../store/constants';
 
 function TemplateAreaItem( { area, clientId } ) {
 	const { selectBlock, toggleBlockHighlight } = useDispatch(
 		blockEditorStore
 	);
+	const templatePartArea = useSelect(
+		( select ) => {
+			const defaultAreas = select(
+				editorStore
+			).__experimentalGetDefaultTemplatePartAreas();
+
+			return defaultAreas.find(
+				( defaultArea ) => defaultArea.area === area
+			);
+		},
+		[ area ]
+	);
+
 	const highlightBlock = () => toggleBlockHighlight( clientId, true );
 	const cancelHighlightBlock = () => toggleBlockHighlight( clientId, false );
 
 	return (
 		<Button
 			className="edit-site-template-card__template-areas-item"
-			icon={ getTemplatePartIcon( area ) }
+			icon={ templatePartArea?.icon }
 			onMouseOver={ highlightBlock }
 			onMouseLeave={ cancelHighlightBlock }
 			onFocus={ highlightBlock }
@@ -35,7 +47,7 @@ function TemplateAreaItem( { area, clientId } ) {
 				selectBlock( clientId );
 			} }
 		>
-			{ TEMPLATE_PART_AREA_TO_NAME[ area ] }
+			{ templatePartArea?.label }
 		</Button>
 	);
 }

package/src/components/template-details/edit-template-title.js

@@ -0,0 +1,28 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { TextControl } from '@wordpress/components';
+import { useEntityProp } from '@wordpress/core-data';
+
+export default function EditTemplateTitle( { template } ) {
+	const [ title, setTitle ] = useEntityProp(
+		'postType',
+		template.type,
+		'title',
+		template.id
+	);
+
+	return (
+		<TextControl
+			label={ __( 'Title' ) }
+			value={ title }
+			help={ __(
+				'Give the template a title that indicates its purpose, e.g. "Full Width".'
+			) }
+			onChange={ ( newTitle ) => {
+				setTitle( newTitle || template.slug );
+			} }
+		/>
+	);
+}

package/src/components/template-details/index.js

@@ -12,7 +12,6 @@ import {
 } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { store as editorStore } from '@wordpress/editor';
-import { addQueryArgs } from '@wordpress/url';
 
 /**
  * Internal dependencies
@@ -24,6 +23,8 @@ import {
 } from '../navigation-sidebar/navigation-panel/constants';
 import { store as editSiteStore } from '../../store';
 import TemplateAreas from './template-areas';
+import EditTemplateTitle from './edit-template-title';
+import { useLink } from '../routes/link';
 
 export default function TemplateDetails( { template, onClose } ) {
 	const { title, description } = useSelect(
@@ -43,6 +44,12 @@ export default function TemplateDetails( { template, onClose } ) {
 		);
 	}, [ template ] );
 
+	const browseAllLinkProps = useLink( {
+		// TODO: We should update this to filter by template part's areas as well.
+		postType: template.type,
+		postId: undefined,
+	} );
+
 	if ( ! template ) {
 		return null;
 	}
@@ -55,13 +62,17 @@ export default function TemplateDetails( { template, onClose } ) {
 	return (
 		<div className="edit-site-template-details">
 			<div className="edit-site-template-details__group">
-				<Heading
-					level={ 4 }
-					weight={ 600 }
-					className="edit-site-template-details__title"
-				>
-					{ title }
-				</Heading>
+				{ template.is_custom ? (
+					<EditTemplateTitle template={ template } />
+				) : (
+					<Heading
+						level={ 4 }
+						weight={ 600 }
+						className="edit-site-template-details__title"
+					>
+						{ title }
+					</Heading>
+				) }
 
 				{ description && (
 					<Text
@@ -80,7 +91,7 @@ export default function TemplateDetails( { template, onClose } ) {
 				<MenuGroup className="edit-site-template-details__group edit-site-template-details__revert">
 					<MenuItem
 						className="edit-site-template-details__revert-button"
-						info={ __( 'Restore template to theme default' ) }
+						info={ __( 'Restore template to default state' ) }
 						onClick={ revert }
 					>
 						{ __( 'Clear customizations' ) }
@@ -90,11 +101,7 @@ export default function TemplateDetails( { template, onClose } ) {
 
 			<Button
 				className="edit-site-template-details__show-all-button"
-				href={ addQueryArgs( window.location.href, {
-					// TODO: We should update this to filter by template part's areas as well.
-					postId: undefined,
-					postType: template.type,
-				} ) }
+				{ ...browseAllLinkProps }
 			>
 				{ sprintf(
 					/* translators: the template part's area name ("Headers", "Sidebars") or "templates". */

package/src/components/template-details/template-areas.js

@@ -4,7 +4,7 @@
 import { sprintf, __ } from '@wordpress/i18n';
 import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { getTemplatePartIcon } from '@wordpress/editor';
+import { store as editorStore } from '@wordpress/editor';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { moreVertical } from '@wordpress/icons';
 
@@ -12,18 +12,29 @@ import { moreVertical } from '@wordpress/icons';
  * Internal dependencies
  */
 import { store as editSiteStore } from '../../store';
-import { TEMPLATE_PART_AREA_TO_NAME } from '../../store/constants';
 import isTemplateRevertable from '../../utils/is-template-revertable';
+import { useLocation } from '../routes';
+import { useLink } from '../routes/link';
 
 function TemplatePartItemMore( {
 	onClose,
 	templatePart,
 	closeTemplateDetailsDropdown,
 } ) {
-	const { pushTemplatePart, revertTemplate } = useDispatch( editSiteStore );
+	const { revertTemplate } = useDispatch( editSiteStore );
+	const { params } = useLocation();
+	const editLinkProps = useLink(
+		{
+			postId: templatePart.id,
+			postType: templatePart.type,
+		},
+		{
+			fromTemplateId: params.postId,
+		}
+	);
 
-	function editTemplatePart() {
-		pushTemplatePart( templatePart.id );
+	function editTemplatePart( event ) {
+		editLinkProps.onClick( event );
 		onClose();
 		closeTemplateDetailsDropdown();
 	}
@@ -37,7 +48,7 @@ function TemplatePartItemMore( {
 	return (
 		<>
 			<MenuGroup>
-				<MenuItem onClick={ editTemplatePart }>
+				<MenuItem { ...editLinkProps } onClick={ editTemplatePart }>
 					{ sprintf(
 						/* translators: %s: template part title */
 						__( 'Edit %s' ),
@@ -48,7 +59,7 @@ function TemplatePartItemMore( {
 			{ isTemplateRevertable( templatePart ) && (
 				<MenuGroup>
 					<MenuItem
-						info={ __( 'Restore template to theme default' ) }
+						info={ __( 'Restore template to default state' ) }
 						onClick={ clearCustomizations }
 					>
 						{ __( 'Clear customizations' ) }
@@ -67,6 +78,18 @@ function TemplatePartItem( {
 	const { selectBlock, toggleBlockHighlight } = useDispatch(
 		blockEditorStore
 	);
+	const templatePartArea = useSelect(
+		( select ) => {
+			const defaultAreas = select(
+				editorStore
+			).__experimentalGetDefaultTemplatePartAreas();
+
+			return defaultAreas.find(
+				( defaultArea ) => defaultArea.area === templatePart.area
+			);
+		},
+		[ templatePart.area ]
+	);
 	const highlightBlock = () => toggleBlockHighlight( clientId, true );
 	const cancelHighlightBlock = () => toggleBlockHighlight( clientId, false );
 
@@ -77,7 +100,7 @@ function TemplatePartItem( {
 		>
 			<MenuItem
 				role="button"
-				icon={ getTemplatePartIcon( templatePart.area ) }
+				icon={ templatePartArea?.icon }
 				iconPosition="left"
 				onClick={ () => {
 					selectBlock( clientId );
@@ -87,7 +110,7 @@ function TemplatePartItem( {
 				onFocus={ highlightBlock }
 				onBlur={ cancelHighlightBlock }
 			>
-				{ TEMPLATE_PART_AREA_TO_NAME[ templatePart.area ] }
+				{ templatePartArea?.label }
 			</MenuItem>
 
 			<DropdownMenu

package/src/components/template-part-converter/convert-to-template-part.js

@@ -50,16 +50,18 @@ export default function ConvertToTemplatePart( { clientIds, blocks } ) {
 		createSuccessNotice( __( 'Template part created.' ), {
 			type: 'snackbar',
 		} );
+
+		// The modal and this component will be unmounted because of `replaceBlocks` above,
+		// so no need to call `closeModal` or `onClose`.
 	};
 
 	return (
 		<>
 			<BlockSettingsMenuControls>
-				{ ( { onClose } ) => (
+				{ () => (
 					<MenuItem
 						onClick={ () => {
 							setIsModalOpen( true );
-							onClose();
 						} }
 					>
 						{ __( 'Make template part' ) }

package/src/components/url-query-controller/index.js

@@ -3,29 +3,29 @@
  */
 import { useEffect } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { getQueryArg, addQueryArgs, removeQueryArgs } from '@wordpress/url';
 
 /**
  * Internal dependencies
  */
+import { useLocation, useHistory } from '../routes';
 import { store as editSiteStore } from '../../store';
 
 export default function URLQueryController() {
 	const { setTemplate, setTemplatePart, showHomepage, setPage } = useDispatch(
 		editSiteStore
 	);
+	const history = useHistory();
+	const {
+		params: { postId, postType },
+	} = useLocation();
+	const { getPage, getEditedPostId, getEditedPostType } = useSelect(
+		editSiteStore
+	);
 
-	// Set correct entity on load.
+	// Set correct entity on page navigation.
 	useEffect( () => {
-		const url = window.location.href;
-		const postId = getQueryArg( url, 'postId' );
-
-		if ( ! postId ) {
-			showHomepage();
-			return;
-		}
+		let isMounted = true;
 
-		const postType = getQueryArg( url, 'postType' );
 		if ( 'page' === postType || 'post' === postType ) {
 			setPage( { context: { postType, postId } } ); // Resolves correct template based on ID.
 		} else if ( 'wp_template' === postType ) {
@@ -33,44 +33,33 @@ export default function URLQueryController() {
 		} else if ( 'wp_template_part' === postType ) {
 			setTemplatePart( postId );
 		} else {
-			showHomepage();
-		}
-	}, [] );
-
-	// Update page URL when context changes.
-	const pageContext = useCurrentPageContext();
-	useEffect( () => {
-		const newUrl = pageContext
-			? addQueryArgs( window.location.href, pageContext )
-			: removeQueryArgs( window.location.href, 'postType', 'postId' );
+			showHomepage().then( () => {
+				if ( ! isMounted ) {
+					return;
+				}
 
-		window.history.replaceState( {}, '', newUrl );
-	}, [ pageContext ] );
+				const page = getPage();
+				const editedPostId = getEditedPostId();
+				const editedPostType = getEditedPostType();
 
-	return null;
-}
-
-function useCurrentPageContext() {
-	return useSelect( ( select ) => {
-		const { getEditedPostType, getEditedPostId, getPage } = select(
-			editSiteStore
-		);
-
-		const page = getPage();
-		let _postId = getEditedPostId(),
-			_postType = getEditedPostType();
-		// This doesn't seem right to me,
-		// we shouldn't be using the "page" and the "template" in the same way.
-		// This need to be investigated.
-		if ( page?.context?.postId && page?.context?.postType ) {
-			_postId = page.context.postId;
-			_postType = page.context.postType;
+				if ( page?.context?.postId && page?.context?.postType ) {
+					history.replace( {
+						postId: page.context.postId,
+						postType: page.context.postType,
+					} );
+				} else if ( editedPostId && editedPostType ) {
+					history.replace( {
+						postId: editedPostId,
+						postType: editedPostType,
+					} );
+				}
+			} );
 		}
 
-		if ( _postId && _postType ) {
-			return { postId: _postId, postType: _postType };
-		}
+		return () => {
+			isMounted = false;
+		};
+	}, [ postId, postType ] );
 
-		return null;
-	}, [] );
+	return null;
 }