@wordpress/edit-site 3.0.15 → 3.0.16

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/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;
 }

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

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { Guide } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { createInterpolateElement } from '@wordpress/element';
@@ -15,6 +15,15 @@ import { store as editSiteStore } from '../../store';
 export default function WelcomeGuideEditor() {
 	const { toggleFeature } = useDispatch( editSiteStore );
 
+	const isActive = useSelect(
+		( select ) => select( editSiteStore ).isFeatureActive( 'welcomeGuide' ),
+		[]
+	);
+
+	if ( ! isActive ) {
+		return null;
+	}
+
 	return (
 		<Guide
 			className="edit-site-welcome-guide"

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

@@ -1,33 +1,14 @@
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-import { store as interfaceStore } from '@wordpress/interface';
-
 /**
  * Internal dependencies
  */
 import WelcomeGuideEditor from './editor';
 import WelcomeGuideStyles from './styles';
-import { store as editSiteStore } from '../../store';
 
 export default function WelcomeGuide() {
-	const { isActive, isStylesOpen } = useSelect( ( select ) => {
-		const sidebar = select( interfaceStore ).getActiveComplementaryArea(
-			editSiteStore.name
-		);
-		const isStylesSidebar = sidebar === 'edit-site/global-styles';
-		const feature = isStylesSidebar ? 'welcomeGuideStyles' : 'welcomeGuide';
-
-		return {
-			isActive: select( editSiteStore ).isFeatureActive( feature ),
-			isStylesOpen: isStylesSidebar,
-		};
-	}, [] );
-
-	if ( ! isActive ) {
-		return null;
-	}
-
-	return isStylesOpen ? <WelcomeGuideStyles /> : <WelcomeGuideEditor />;
+	return (
+		<>
+			<WelcomeGuideEditor />
+			<WelcomeGuideStyles />
+		</>
+	);
 }

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

@@ -1,9 +1,10 @@
 /**
  * WordPress dependencies
  */
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { ExternalLink, Guide } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { store as interfaceStore } from '@wordpress/interface';
 
 /**
  * Internal dependencies
@@ -14,6 +15,23 @@ import { store as editSiteStore } from '../../store';
 export default function WelcomeGuideStyles() {
 	const { toggleFeature } = useDispatch( editSiteStore );
 
+	const { isActive, isStylesOpen } = useSelect( ( select ) => {
+		const sidebar = select( interfaceStore ).getActiveComplementaryArea(
+			editSiteStore.name
+		);
+
+		return {
+			isActive: select( editSiteStore ).isFeatureActive(
+				'welcomeGuideStyles'
+			),
+			isStylesOpen: sidebar === 'edit-site/global-styles',
+		};
+	}, [] );
+
+	if ( ! isActive || ! isStylesOpen ) {
+		return null;
+	}
+
 	return (
 		<Guide
 			className="edit-site-welcome-guide"
@@ -99,7 +117,7 @@ export default function WelcomeGuideStyles() {
 								) }
 								<ExternalLink
 									href={ __(
-										'https://wordpress.org/support/article/wordpress-editor/'
+										'https://wordpress.org/support/article/styles-overview/'
 									) }
 								>
 									{ __(

package/src/index.js

@@ -14,6 +14,7 @@ import {
 } from '@wordpress/core-data';
 import { store as editorStore } from '@wordpress/editor';
 import { store as viewportStore } from '@wordpress/viewport';
+import { getQueryArgs } from '@wordpress/url';
 
 /**
  * Internal dependencies
@@ -21,8 +22,8 @@ import { store as viewportStore } from '@wordpress/viewport';
 import './plugins';
 import './hooks';
 import { store as editSiteStore } from './store';
-import Editor from './components/editor';
-import List from './components/list';
+import EditSiteApp from './components/app';
+import getIsListPage from './utils/get-is-list-page';
 
 /**
  * Reinitializes the editor after the user chooses to reboot the editor after
@@ -33,12 +34,37 @@ import List from './components/list';
  * @param {?Object} settings Editor settings object.
  */
 export function reinitializeEditor( target, settings ) {
+	// This will be a no-op if the target doesn't have any React nodes.
 	unmountComponentAtNode( target );
 	const reboot = reinitializeEditor.bind( null, target, settings );
-	render(
-		<Editor initialSettings={ settings } onError={ reboot } />,
-		target
-	);
+
+	// We dispatch actions and update the store synchronously before rendering
+	// so that we won't trigger unnecessary re-renders with useEffect.
+	{
+		dispatch( editSiteStore ).updateSettings( settings );
+		// 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.
+		dispatch( editorStore ).updateEditorSettings( {
+			defaultTemplateTypes: settings.defaultTemplateTypes,
+			defaultTemplatePartAreas: settings.defaultTemplatePartAreas,
+		} );
+
+		const isLandingOnListPage = getIsListPage(
+			getQueryArgs( window.location.href )
+		);
+
+		if ( isLandingOnListPage ) {
+			// Default the navigation panel to be opened when we're in a bigger
+			// screen and land in the list screen.
+			dispatch( editSiteStore ).setIsNavigationPanelOpened(
+				select( viewportStore ).isViewportMatch( 'medium' )
+			);
+		}
+	}
+
+	render( <EditSiteApp reboot={ reboot } />, target );
 }
 
 /**
@@ -54,7 +80,6 @@ export function initializeEditor( id, settings ) {
 	settings.__experimentalSpotlightEntityBlocks = [ 'core/template-part' ];
 
 	const target = document.getElementById( id );
-	const reboot = reinitializeEditor.bind( null, target, settings );
 
 	dispatch( blocksStore ).__experimentalReapplyBlockTypeFilters();
 	registerCoreBlocks();
@@ -64,35 +89,7 @@ export function initializeEditor( id, settings ) {
 		} );
 	}
 
-	render(
-		<Editor initialSettings={ settings } onError={ reboot } />,
-		target
-	);
-}
-
-/**
- * Initializes the site editor templates list screen.
- *
- * @param {string} id           ID of the root element to render the screen in.
- * @param {string} templateType The type of the list. "wp_template" or "wp_template_part".
- * @param {Object} settings     Editor settings.
- */
-export function initializeList( id, templateType, settings ) {
-	const target = document.getElementById( id );
-
-	dispatch( editorStore ).updateEditorSettings( {
-		defaultTemplateTypes: settings.defaultTemplateTypes,
-		defaultTemplatePartAreas: settings.defaultTemplatePartAreas,
-	} );
-
-	// Default the navigation panel to be opened when we're in a bigger screen.
-	// We update the store synchronously before rendering so that we won't
-	// trigger an unnecessary re-render with useEffect.
-	dispatch( editSiteStore ).setIsNavigationPanelOpened(
-		select( viewportStore ).isViewportMatch( 'medium' )
-	);
-
-	render( <List templateType={ templateType } />, target );
+	reinitializeEditor( target, settings );
 }
 
 export { default as __experimentalMainDashboardButton } from './components/main-dashboard-button';