@wordpress/edit-site 7.0.0 → 7.2.0

package/src/components/add-new-template/index.js

@@ -1,11 +1,4 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import {
 	Button,
 	Modal,
@@ -42,15 +35,7 @@ import { __, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { focus } from '@wordpress/dom';
-
-/**
- * Internal dependencies
- */
 import { TEMPLATE_POST_TYPE } from '../../utils/constants';
-
-/**
- * Internal dependencies
- */
 import AddCustomTemplateModalContent from './add-custom-template-modal-content';
 import {
 	useDefaultTemplateTypes,

package/src/components/add-new-template/utils.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
@@ -8,10 +5,6 @@ import { useMemo, useCallback } from '@wordpress/element';
 import { __, _x, sprintf } from '@wordpress/i18n';
 import { blockMeta, post, archive } from '@wordpress/icons';
 import { safeDecodeURI } from '@wordpress/url';
-
-/**
- * Internal dependencies
- */
 import { TEMPLATE_POST_TYPE } from '../../utils/constants';
 
 const EMPTY_OBJECT = {};

package/src/components/add-new-template-legacy/add-custom-generic-template-modal-content.js

@@ -1,11 +1,4 @@
-/**
- * External dependencies
- */
 import { paramCase as kebabCase } from 'change-case';
-
-/**
- * WordPress dependencies
- */
 import { useState, useEffect, useRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import {

package/src/components/add-new-template-legacy/add-custom-template-modal-content.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { useState, useMemo, useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import {
@@ -18,10 +15,6 @@ import { decodeEntities } from '@wordpress/html-entities';
 import { useDebouncedInput } from '@wordpress/compose';
 import { focus } from '@wordpress/dom';
 import { safeDecodeURI } from '@wordpress/url';
-
-/**
- * Internal dependencies
- */
 import { mapToIHasNameAndId } from './utils';
 
 const EMPTY_ARRAY = [];

package/src/components/add-new-template-legacy/index.js

@@ -1,11 +1,4 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import {
 	Button,
 	Modal,
@@ -42,15 +35,7 @@ import { __, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { focus } from '@wordpress/dom';
-
-/**
- * Internal dependencies
- */
 import { TEMPLATE_POST_TYPE } from '../../utils/constants';
-
-/**
- * Internal dependencies
- */
 import AddCustomTemplateModalContent from './add-custom-template-modal-content';
 import {
 	useExistingTemplates,

package/src/components/add-new-template-legacy/utils.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
@@ -8,10 +5,6 @@ import { useMemo, useCallback } from '@wordpress/element';
 import { __, _x, sprintf } from '@wordpress/i18n';
 import { blockMeta, post, archive } from '@wordpress/icons';
 import { safeDecodeURI } from '@wordpress/url';
-
-/**
- * Internal dependencies
- */
 import { TEMPLATE_POST_TYPE } from '../../utils/constants';
 
 const EMPTY_OBJECT = {};

package/src/components/app/index.js

@@ -1,14 +1,7 @@
-/**
- * WordPress dependencies
- */
 import { useSelect } from '@wordpress/data';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { useCallback, useMemo } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
-
-/**
- * Internal dependencies
- */
 import Layout from '../layout';
 import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';

package/src/components/block-editor/use-editor-iframe-props.js

@@ -1,11 +1,4 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import { useSelect } from '@wordpress/data';
 import { ENTER, SPACE } from '@wordpress/keycodes';
 import { useState, useEffect } from '@wordpress/element';
@@ -13,10 +6,6 @@ import { __ } from '@wordpress/i18n';
 import { store as editorStore } from '@wordpress/editor';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { addQueryArgs } from '@wordpress/url';
-
-/**
- * Internal dependencies
- */
 import { unlock } from '../../lock-unlock';
 
 const { useLocation, useHistory } = unlock( routerPrivateApis );

package/src/components/block-editor/use-navigate-to-entity-record.js

@@ -1,16 +1,9 @@
-/**
- * WordPress dependencies
- */
 import { useSelect, useRegistry } from '@wordpress/data';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { useCallback } from '@wordpress/element';
 import { addQueryArgs } from '@wordpress/url';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as editorStore } from '@wordpress/editor';
-
-/**
- * Internal dependencies
- */
 import { unlock } from '../../lock-unlock';
 import { DEFAULT_DEVICE_TYPE } from './use-viewport-sync';
 

package/src/components/block-editor/use-site-editor-settings.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { useSelect } from '@wordpress/data';
 import { useMemo } from '@wordpress/element';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
@@ -10,10 +7,6 @@ import {
 	privateApis as editorPrivateApis,
 } from '@wordpress/editor';
 import { generateGlobalStyles } from '@wordpress/global-styles-engine';
-
-/**
- * Internal dependencies
- */
 import { store as editSiteStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 import useNavigateToEntityRecord from './use-navigate-to-entity-record';

package/src/components/block-editor/use-viewport-sync.js

@@ -1,14 +1,7 @@
-/**
- * WordPress dependencies
- */
 import { useEffect } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { store as editorStore } from '@wordpress/editor';
-
-/**
- * Internal dependencies
- */
 import { unlock } from '../../lock-unlock';
 
 const { useLocation } = unlock( routerPrivateApis );

package/src/components/canvas-loader/index.js

@@ -1,25 +1,13 @@
-/**
- * WordPress dependencies
- */
-import {
-	privateApis as componentsPrivateApis,
-	ProgressBar,
-} from '@wordpress/components';
+import { ProgressBar } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
 import { privateApis as editorPrivateApis } from '@wordpress/editor';
-
-/**
- * Internal dependencies
- */
 import { unlock } from '../../lock-unlock';
 
-const { Theme } = unlock( componentsPrivateApis );
 const { useStyle } = unlock( editorPrivateApis );
 
 export default function CanvasLoader( { id } ) {
 	const textColor = useStyle( 'color.text' );
-	const backgroundColor = useStyle( 'color.background' );
 	const { elapsed, total } = useSelect( ( select ) => {
 		const selectorsByStatus = select( coreStore ).countSelectorsByStatus();
 		const resolving = selectorsByStatus.resolving ?? 0;
@@ -31,10 +19,11 @@ export default function CanvasLoader( { id } ) {
 	}, [] );
 
 	return (
-		<div className="edit-site-canvas-loader">
-			<Theme accent={ textColor } background={ backgroundColor }>
-				<ProgressBar id={ id } max={ total } value={ elapsed } />
-			</Theme>
+		<div
+			className="edit-site-canvas-loader"
+			style={ textColor ? { '--color': textColor } : undefined }
+		>
+			<ProgressBar id={ id } max={ total } value={ elapsed } />
 		</div>
 	);
 }

package/src/components/canvas-loader/style.scss

@@ -1,4 +1,7 @@
 .edit-site-canvas-loader {
+	// TODO: Use design tokens with ThemeProvider.
+	--wp-components-color-foreground: var(--color);
+
 	width: 100%;
 	height: 100%;
 	display: flex;
@@ -13,10 +16,6 @@
 		animation: 0.5s ease 0.2s edit-site-canvas-loader__fade-in-animation;
 		animation-fill-mode: forwards;
 	}
-
-	& > div {
-		width: 160px;
-	}
 }
 
 @keyframes edit-site-canvas-loader__fade-in-animation {

package/src/components/dataviews-actions/index.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { __ } from '@wordpress/i18n';
 import { pencil, drawerRight } from '@wordpress/icons';
 import { useMemo } from '@wordpress/element';
@@ -8,10 +5,6 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { addQueryArgs } from '@wordpress/url';
-
-/**
- * Internal dependencies
- */
 import { PATTERN_TYPES } from '../../utils/constants';
 import { unlock } from '../../lock-unlock';
 

package/src/components/editor/index.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { useDispatch, useSelect } from '@wordpress/data';
 import { Button } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
@@ -19,10 +16,6 @@ import { decodeEntities } from '@wordpress/html-entities';
 import { chevronLeft, chevronRight } from '@wordpress/icons';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { addQueryArgs } from '@wordpress/url';
-
-/**
- * Internal dependencies
- */
 import WelcomeGuide from '../welcome-guide';
 import CanvasLoader from '../canvas-loader';
 import { unlock } from '../../lock-unlock';
@@ -35,6 +28,7 @@ import SiteEditorMoreMenu from '../more-menu';
 import useEditorIframeProps from '../block-editor/use-editor-iframe-props';
 import { ViewportSync } from '../block-editor/use-viewport-sync';
 import useEditorTitle from './use-editor-title';
+import useRevisionsURLSync from './use-revisions-url-sync';
 import { useIsSiteEditorLoading } from '../layout/hooks';
 import { useAdaptEditorToCanvas } from './use-adapt-editor-to-canvas';
 import {
@@ -79,7 +73,7 @@ function getNavigationPath( location, postType ) {
 	) {
 		return getListPathForPostType( postType );
 	}
-	return addQueryArgs( path, { canvas: undefined } );
+	return addQueryArgs( path, { canvas: undefined, revision: undefined } );
 }
 
 export default function EditSiteEditor( { isHomeRoute = false } ) {
@@ -97,13 +91,13 @@ export default function EditSiteEditor( { isHomeRoute = false } ) {
 		[]
 	);
 	const postWithTemplate = !! context?.postId;
-	useEditorTitle(
-		postWithTemplate ? context.postType : postType,
-		postWithTemplate ? context.postId : postId
-	);
+	const editorPostType = postWithTemplate ? context.postType : postType;
+	const editorPostId = postWithTemplate ? context.postId : postId;
+	useEditorTitle( editorPostType, editorPostId );
 	const _isPreviewingTheme = isPreviewingTheme();
 	const iframeProps = useEditorIframeProps();
 	const isEditMode = canvas === 'edit';
+	useRevisionsURLSync( isEditMode, editorPostType, editorPostId );
 	const loadingProgressId = useInstanceId(
 		CanvasLoader,
 		'edit-site-editor__loading-progress'

package/src/components/editor/site-preview.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';

package/src/components/editor/use-adapt-editor-to-canvas.js

@@ -1,15 +1,8 @@
-/**
- * WordPress dependencies
- */
 import { useDispatch, useSelect, useRegistry } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as editorStore } from '@wordpress/editor';
 import { useLayoutEffect } from '@wordpress/element';
 import { store as preferencesStore } from '@wordpress/preferences';
-
-/**
- * Internal dependencies
- */
 import { DEFAULT_DEVICE_TYPE } from '../block-editor/use-viewport-sync';
 
 export function useAdaptEditorToCanvas( canvas ) {

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

@@ -1,20 +1,15 @@
-/**
- * WordPress dependencies
- */
 import { _x, sprintf } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
+import {
+	store as coreStore,
+	privateApis as coreDataPrivateApis,
+} from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
-import { privateApis as editorPrivateApis } from '@wordpress/editor';
-
-/**
- * Internal dependencies
- */
 import useTitle from '../routes/use-title';
 import { POST_TYPE_LABELS, TEMPLATE_POST_TYPE } from '../../utils/constants';
 import { unlock } from '../../lock-unlock';
 
-const { getTemplateInfo } = unlock( editorPrivateApis );
+const { getTemplateInfo } = unlock( coreDataPrivateApis );
 
 function useEditorTitle( postType, postId ) {
 	const { title, isLoaded } = useSelect(

package/src/components/editor/use-resolve-edited-entity.js

@@ -1,14 +1,7 @@
-/**
- * WordPress dependencies
- */
 import { useEffect, useMemo, useRef } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreDataStore } from '@wordpress/core-data';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
-
-/**
- * Internal dependencies
- */
 import { store as editSiteStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 import {

package/src/components/editor/use-revisions-url-sync.js

@@ -0,0 +1,132 @@
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useEffect, useRef } from '@wordpress/element';
+import { store as editorStore } from '@wordpress/editor';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { addQueryArgs } from '@wordpress/url';
+import { unlock } from '../../lock-unlock';
+
+const { useHistory, useLocation } = unlock( routerPrivateApis );
+
+/**
+ * Safari throws after more than 100 History API calls in 30 seconds.
+ */
+const URL_WRITE_DEBOUNCE_MS = 300;
+
+export default function useRevisionsURLSync( enabled, postType, postId ) {
+	const location = useLocation();
+	const history = useHistory();
+	const { currentPostType, currentPostId, currentRevisionId } = useSelect(
+		( select ) => {
+			const editor = select( editorStore );
+			return {
+				currentPostType: editor.getCurrentPostType(),
+				currentPostId: editor.getCurrentPostId(),
+				currentRevisionId: unlock( editor ).getCurrentRevisionId(),
+			};
+		},
+		[]
+	);
+	const { openRevision, setCurrentRevisionId } = unlock(
+		useDispatch( editorStore )
+	);
+	const entityKey = postType && postId ? `${ postType }:${ postId }` : null;
+	const isCurrentEntity =
+		!! entityKey &&
+		currentPostType === postType &&
+		String( currentPostId ) === String( postId );
+
+	// The route can change before the editor store. Wait until both point to the
+	// same entity so a revision from the previous entity is not copied into the
+	// new URL.
+	const handledEntityKeyRef = useRef( null );
+	const lastURLWriteTimeRef = useRef( null );
+	useEffect( () => {
+		if ( ! enabled ) {
+			handledEntityKeyRef.current = null;
+			return;
+		}
+		if (
+			! isCurrentEntity ||
+			! entityKey ||
+			handledEntityKeyRef.current === entityKey
+		) {
+			return;
+		}
+
+		lastURLWriteTimeRef.current = null;
+		handledEntityKeyRef.current = entityKey;
+		const revision = Number( location.query.revision );
+		if ( Number.isInteger( revision ) && revision > 0 ) {
+			openRevision( revision );
+		} else if ( currentRevisionId ) {
+			setCurrentRevisionId( null );
+		}
+	}, [
+		enabled,
+		isCurrentEntity,
+		entityKey,
+		location.query.revision,
+		currentRevisionId,
+		openRevision,
+		setCurrentRevisionId,
+	] );
+
+	useEffect( () => {
+		if (
+			! enabled ||
+			! isCurrentEntity ||
+			! entityKey ||
+			handledEntityKeyRef.current !== entityKey
+		) {
+			return;
+		}
+		if ( lastURLWriteTimeRef.current === null ) {
+			lastURLWriteTimeRef.current = Date.now();
+		}
+		const revisionArg = currentRevisionId
+			? String( currentRevisionId )
+			: undefined;
+		if ( location.query.revision === revisionArg ) {
+			return;
+		}
+		const write = async () => {
+			// Route matching can lag behind the address bar. Writing the stale
+			// match back would undo the navigation.
+			const addressBarArg =
+				new URLSearchParams( window.location.search ).get(
+					'revision'
+				) ?? undefined;
+			if ( addressBarArg !== location.query.revision ) {
+				return;
+			}
+			lastURLWriteTimeRef.current = Date.now();
+			// Passing `undefined` removes `revision` without dropping the other
+			// query args.
+			try {
+				await history.navigate(
+					addQueryArgs( location.path, { revision: revisionArg } ),
+					{ replace: true }
+				);
+			} catch {
+				// Leave the URL unchanged. The effect can try again on the next
+				// state change.
+			}
+		};
+		if (
+			Date.now() - lastURLWriteTimeRef.current >=
+			URL_WRITE_DEBOUNCE_MS
+		) {
+			write();
+			return;
+		}
+		const timeoutId = setTimeout( write, URL_WRITE_DEBOUNCE_MS );
+		return () => clearTimeout( timeoutId );
+	}, [
+		enabled,
+		isCurrentEntity,
+		entityKey,
+		currentRevisionId,
+		location,
+		history,
+	] );
+}

package/src/components/layout/animation.js

@@ -1,11 +1,4 @@
-/**
- * External dependencies
- */
 import { Controller, easings } from '@react-spring/web';
-
-/**
- * WordPress dependencies
- */
 import { useLayoutEffect, useMemo, useRef } from '@wordpress/element';
 
 function getAbsolutePosition( element ) {

package/src/components/layout/hooks.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { useEffect, useState } from '@wordpress/element';
 import { select, subscribe } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';

package/src/components/layout/index.js

@@ -1,11 +1,4 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import { NavigableRegion, getAdminThemeColors } from '@wordpress/admin-ui';
 import {
 	__unstableMotion as motion,
@@ -34,10 +27,6 @@ import { SnackbarNotices, store as noticesStore } from '@wordpress/notices';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { Tooltip } from '@wordpress/ui';
-
-/**
- * Internal dependencies
- */
 import { SiteHubMobile } from '../site-hub';
 import ResizableFrame from '../resizable-frame';
 import { unlock } from '../../lock-unlock';
@@ -104,7 +93,6 @@ function Layout() {
 			{ canvas === 'view' && <SaveKeyboardShortcut /> }
 			<div
 				{ ...navigateRegionsProps }
-				ref={ navigateRegionsProps.ref }
 				className={ clsx(
 					'edit-site-layout',
 					navigateRegionsProps.className,

package/src/components/media/index.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { useEntityRecord } from '@wordpress/core-data';
 
 function Media( { id, size = [ 'large', 'medium', 'thumbnail' ], ...props } ) {

package/src/components/more-menu/index.js

@@ -1,11 +1,4 @@
-/**
- * WordPress dependencies
- */
 import { privateApis as editorPrivateApis } from '@wordpress/editor';
-
-/**
- * Internal dependencies
- */
 import SiteExport from './site-export';
 import WelcomeGuideMenuItem from './welcome-guide-menu-item';
 import { unlock } from '../../lock-unlock';

package/src/components/more-menu/site-export.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { __, _x } from '@wordpress/i18n';
 import { MenuItem } from '@wordpress/components';
 import apiFetch from '@wordpress/api-fetch';

package/src/components/more-menu/welcome-guide-menu-item.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { __ } from '@wordpress/i18n';
 import { useDispatch } from '@wordpress/data';
 import { MenuItem } from '@wordpress/components';

package/src/components/page-patterns/actions.js

@@ -1,13 +1,6 @@
-/**
- * WordPress dependencies
- */
 import { DropdownMenu, MenuGroup } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { moreVertical } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
 import AddNewPattern from '../add-new-pattern';
 import RenameCategoryMenuItem from './rename-category-menu-item';
 import DeleteCategoryMenuItem from './delete-category-menu-item';

package/src/components/page-patterns/delete-category-menu-item.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import {
 	MenuItem,
 	__experimentalConfirmDialog as ConfirmDialog,
@@ -12,10 +9,6 @@ import { decodeEntities } from '@wordpress/html-entities';
 import { __, _x, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
-
-/**
- * Internal dependencies
- */
 import { unlock } from '../../lock-unlock';
 import { PATTERN_TYPES, PATTERN_DEFAULT_CATEGORY } from '../../utils/constants';