@wordpress/edit-site 3.0.14 → 3.0.18-next.33ec3857e2.0

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/navigation-sidebar/navigation-toggle/index.js

@@ -79,6 +79,8 @@ function NavigationToggle( { icon } ) {
 			<Button
 				className="edit-site-navigation-toggle__button has-icon"
 				label={ __( 'Toggle navigation' ) }
+				// isPressed will add unwanted styles.
+				aria-pressed={ isNavigationOpen }
 				onClick={ toggleNavigationPanel }
 				showTooltip
 			>

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/default-sidebar.js

@@ -15,6 +15,7 @@ export default function DefaultSidebar( {
 	closeLabel,
 	header,
 	headerClassName,
+	panelClassName,
 } ) {
 	return (
 		<>
@@ -27,6 +28,7 @@ export default function DefaultSidebar( {
 				closeLabel={ closeLabel }
 				header={ header }
 				headerClassName={ headerClassName }
+				panelClassName={ panelClassName }
 			>
 				{ children }
 			</ComplementaryArea>

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
@@ -21,6 +24,7 @@ export default function GlobalStylesSidebar() {
 			title={ __( 'Styles' ) }
 			icon={ styles }
 			closeLabel={ __( 'Close global styles sidebar' ) }
+			panelClassName="edit-site-global-styles-sidebar__panel"
 			header={
 				<Flex>
 					<FlexBlock>
@@ -39,6 +43,11 @@ export default function GlobalStylesSidebar() {
 									title: __( 'Reset to defaults' ),
 									onClick: onReset,
 								},
+								{
+									title: __( 'Welcome Guide' ),
+									onClick: () =>
+										toggleFeature( 'welcomeGuideStyles' ),
+								},
 							] }
 						/>
 					</FlexItem>

package/src/components/sidebar/style.scss

@@ -17,6 +17,23 @@
 	}
 }
 
+.edit-site-global-styles-sidebar {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+
+	&__panel,
+	&__navigator-provider {
+		display: flex;
+		flex-direction: column;
+		flex: 1;
+	}
+
+	&__navigator-screen {
+		flex: 1;
+	}
+}
+
 .edit-site-global-styles-sidebar .interface-complementary-area-header .components-button.has-icon {
 	margin-left: 0;
 }
@@ -25,20 +42,6 @@
 	margin-left: auto;
 }
 
-.edit-site-global-styles-sidebar__border-controls-row {
-	display: flex;
-	justify-content: space-between;
-	margin-bottom: $grid-unit-15;
-
-	> * {
-		width: calc(50% - #{ $grid-unit-10 });
-	}
-
-	.components-border-style-control__buttons {
-		margin-bottom: 0;
-	}
-}
-
 .edit-site-global-styles-sidebar .components-navigation__menu-title-heading {
 	font-size: $default-font-size * 1.2;
 	font-weight: 500;
@@ -53,6 +56,10 @@
 	border: 0;
 }
 
+.edit-site-global-styles-sidebar .components-tools-panel-item.single-column {
+	grid-column: span 1;
+}
+
 .edit-site-global-styles-sidebar__blocks-group {
 	padding-top: $grid-unit-30;
 	border-top: $border-width solid $gray-200;

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/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
@@ -25,6 +24,7 @@ import {
 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(
@@ -44,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;
 	}
@@ -95,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' ),
@@ -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;
 }