@wordpress/edit-site 7.1.0 → 7.3.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,22 +1,14 @@
-/**
- * WordPress dependencies
- */
-import { useSelect, useRegistry } from '@wordpress/data';
+import { 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';
+import { isValidViewport } from './viewport';
 
 const { useHistory, useLocation } = unlock( routerPrivateApis );
 
-const VALID_VIEWPORTS = [ 'desktop', 'tablet', 'mobile' ];
 /**
  * Hook to handle navigation to entity records.
  *
@@ -27,10 +19,6 @@ export default function useNavigateToEntityRecord() {
 	const location = useLocation();
 	const { query, path } = location;
 	const registry = useRegistry();
-	const currentDeviceType = useSelect(
-		( select ) => select( editorStore ).getDeviceType(),
-		[]
-	);
 
 	const onNavigateToEntityRecord = useCallback(
 		( params ) => {
@@ -56,37 +44,21 @@ export default function useNavigateToEntityRecord() {
 			// Store the selected block in the URL for restoration when navigating back.
 			if ( externalClientId ) {
 				urlUpdates.selectedBlock = externalClientId;
+				history.navigate( addQueryArgs( path, urlUpdates ), {
+					replace: true,
+				} );
 			}
 
-			// Save the current viewport for when we navigate back (e.g. from overlay editor).
-			// Omit viewport from URL when it's the default to keep URLs clean.
+			// The width an entity is asked to be edited at is where it opens,
+			// not something the entity being left carries away: a width set from
+			// the device preview is view state, and an entity that asks for none
+			// opens at the default.
 			const requestedViewport =
 				typeof params.viewport === 'string'
 					? params.viewport.toLowerCase()
 					: undefined;
 			const isValidRequestedViewport =
-				VALID_VIEWPORTS.includes( requestedViewport );
-
-			if ( isValidRequestedViewport ) {
-				const currentViewportLower = (
-					currentDeviceType || DEFAULT_DEVICE_TYPE
-				).toLowerCase();
-				if (
-					currentViewportLower === DEFAULT_DEVICE_TYPE.toLowerCase()
-				) {
-					delete urlUpdates.viewport;
-				} else {
-					urlUpdates.viewport = currentViewportLower;
-				}
-			}
-
-			const hasUpdatesToSave =
-				externalClientId || isValidRequestedViewport;
-			if ( hasUpdatesToSave ) {
-				history.navigate( addQueryArgs( path, urlUpdates ), {
-					replace: true,
-				} );
-			}
+				isValidViewport( requestedViewport );
 
 			// Navigate to the new entity record
 			const queryArgs = {
@@ -103,7 +75,7 @@ export default function useNavigateToEntityRecord() {
 
 			history.navigate( url );
 		},
-		[ history, path, query, registry, currentDeviceType ]
+		[ history, path, query, registry ]
 	);
 
 	return onNavigateToEntityRecord;

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';
@@ -98,7 +91,6 @@ export function useSpecificEditorSettings() {
 			__experimentalFeatures: globalSettings,
 			richEditingEnabled: true,
 			supportsTemplateMode: true,
-			focusMode: canvas !== 'view',
 			onNavigateToEntityRecord,
 			onNavigateToPreviousEntityRecord,
 			isPreviewMode: canvas === 'view',

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

@@ -0,0 +1,34 @@
+export const DEFAULT_DEVICE_TYPE = 'Desktop';
+
+/*
+ * Lowercase in the URL, PascalCase in the editor store. Duplicated in
+ * packages/boot/src/components/canvas/viewport.ts, in the editor's
+ * preview-dropdown choices, and in the block editor's block-visibility
+ * constants. Update all four when adding a viewport type.
+ */
+const VALID_VIEWPORTS = [ 'desktop', 'tablet', 'mobile' ];
+
+/**
+ * Whether a viewport is one an entity can be asked to be edited at.
+ *
+ * @param {string} [viewport] Viewport, as written in the URL.
+ * @return {boolean} Whether the editor has a width for it.
+ */
+export function isValidViewport( viewport ) {
+	return !! viewport && VALID_VIEWPORTS.includes( viewport.toLowerCase() );
+}
+
+/**
+ * The device type a `viewport` query param names.
+ *
+ * @param {string} [viewport] Viewport, as written in the URL.
+ * @return {string} Device type, Desktop for a viewport the editor has no width for.
+ */
+export function getDeviceType( viewport ) {
+	if ( ! isValidViewport( viewport ) ) {
+		return DEFAULT_DEVICE_TYPE;
+	}
+
+	const value = viewport.toLowerCase();
+	return value.charAt( 0 ).toUpperCase() + value.slice( 1 );
+}

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

@@ -1,14 +1,7 @@
-/**
- * WordPress dependencies
- */
 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 { useStyle } = unlock( editorPrivateApis );

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,17 +1,12 @@
-/**
- * WordPress dependencies
- */
 import { useDispatch, useSelect } from '@wordpress/data';
 import { Button } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
 import {
-	EditorKeyboardShortcutsRegister,
 	privateApis as editorPrivateApis,
 	store as editorStore,
 } from '@wordpress/editor';
 import { __, isRTL, sprintf } from '@wordpress/i18n';
 import { store as coreDataStore } from '@wordpress/core-data';
-import { privateApis as blockLibraryPrivateApis } from '@wordpress/block-library';
 import { useCallback } from '@wordpress/element';
 import { store as noticesStore } from '@wordpress/notices';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
@@ -19,10 +14,7 @@ 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 { store as preferencesStore } from '@wordpress/preferences';
 import WelcomeGuide from '../welcome-guide';
 import CanvasLoader from '../canvas-loader';
 import { unlock } from '../../lock-unlock';
@@ -33,8 +25,9 @@ import SaveButton from '../save-button';
 import SavePanel from '../save-panel';
 import SiteEditorMoreMenu from '../more-menu';
 import useEditorIframeProps from '../block-editor/use-editor-iframe-props';
-import { ViewportSync } from '../block-editor/use-viewport-sync';
+import { getDeviceType } from '../block-editor/viewport';
 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 {
@@ -45,7 +38,6 @@ import SitePreview from './site-preview';
 
 const { Editor, BackButton } = unlock( editorPrivateApis );
 const { useHistory, useLocation } = unlock( routerPrivateApis );
-const { BlockKeyboardShortcuts } = unlock( blockLibraryPrivateApis );
 
 function getListPathForPostType( postType ) {
 	switch ( postType ) {
@@ -79,7 +71,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 } ) {
@@ -96,14 +88,19 @@ export default function EditSiteEditor( { isHomeRoute = false } ) {
 		( select ) => select( coreDataStore ).getCurrentTheme()?.is_block_theme,
 		[]
 	);
-	const postWithTemplate = !! context?.postId;
-	useEditorTitle(
-		postWithTemplate ? context.postType : postType,
-		postWithTemplate ? context.postId : postId
+	const showIconLabels = useSelect(
+		( select ) =>
+			select( preferencesStore ).get( 'core', 'showIconLabels' ),
+		[]
 	);
+	const postWithTemplate = !! context?.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'
@@ -173,8 +170,6 @@ export default function EditSiteEditor( { isHomeRoute = false } ) {
 		<SitePreview />
 	) : (
 		<>
-			<EditorKeyboardShortcutsRegister />
-			{ isEditMode && <BlockKeyboardShortcuts /> }
 			{ ! isReady ? <CanvasLoader id={ loadingProgressId } /> : null }
 			{ isEditMode && isReady && (
 				<WelcomeGuide
@@ -194,13 +189,17 @@ export default function EditSiteEditor( { isHomeRoute = false } ) {
 					customSavePanel={ _isPreviewingTheme && <SavePanel /> }
 					iframeProps={ iframeProps }
 					onActionPerformed={ onActionPerformed }
+					initialViewport={
+						isEditMode
+							? getDeviceType( location.query.viewport )
+							: undefined
+					}
 					extraSidebarPanels={
 						! postWithTemplate && (
 							<PluginTemplateSettingPanel.Slot />
 						)
 					}
 				>
-					{ isEditMode && <ViewportSync /> }
 					{ isEditMode && (
 						<BackButton>
 							{ ( { length } ) =>
@@ -208,7 +207,7 @@ export default function EditSiteEditor( { isHomeRoute = false } ) {
 									<Button
 										size="compact"
 										label={ __( 'Open Navigation' ) }
-										showTooltip
+										showTooltip={ ! showIconLabels }
 										tooltipPosition="middle right"
 										onClick={ () => {
 											resetZoomLevel();

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,16 +1,9 @@
-/**
- * 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';
+import { DEFAULT_DEVICE_TYPE } from '../block-editor/viewport';
 
 export function useAdaptEditorToCanvas( canvas ) {
 	const { clearSelectedBlock } = useDispatch( blockEditorStore );

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

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { _x, sprintf } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import {
@@ -8,10 +5,6 @@ import {
 	privateApis as coreDataPrivateApis,
 } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
-
-/**
- * Internal dependencies
- */
 import useTitle from '../routes/use-title';
 import { POST_TYPE_LABELS, TEMPLATE_POST_TYPE } from '../../utils/constants';
 import { unlock } from '../../lock-unlock';

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';