@wordpress/edit-site 6.0.4 → 6.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "6.0.4",
+	"version": "6.2.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -29,45 +29,45 @@
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.0.1",
-		"@wordpress/api-fetch": "^7.0.1",
-		"@wordpress/blob": "^4.0.1",
-		"@wordpress/block-editor": "^13.0.3",
-		"@wordpress/block-library": "^9.0.4",
-		"@wordpress/blocks": "^13.0.3",
-		"@wordpress/commands": "^1.0.3",
-		"@wordpress/components": "^28.0.3",
-		"@wordpress/compose": "^7.0.1",
-		"@wordpress/core-commands": "^1.0.3",
-		"@wordpress/core-data": "^7.0.3",
-		"@wordpress/data": "^10.0.2",
-		"@wordpress/dataviews": "^2.0.3",
-		"@wordpress/date": "^5.0.1",
-		"@wordpress/deprecated": "^4.0.1",
-		"@wordpress/dom": "^4.0.1",
-		"@wordpress/editor": "^14.0.3",
-		"@wordpress/element": "^6.0.1",
-		"@wordpress/escape-html": "^3.0.1",
-		"@wordpress/hooks": "^4.0.1",
-		"@wordpress/html-entities": "^4.0.1",
-		"@wordpress/i18n": "^5.0.1",
-		"@wordpress/icons": "^10.0.2",
-		"@wordpress/keyboard-shortcuts": "^5.0.2",
-		"@wordpress/keycodes": "^4.0.1",
-		"@wordpress/notices": "^5.0.2",
-		"@wordpress/patterns": "^2.0.3",
-		"@wordpress/plugins": "^7.0.3",
-		"@wordpress/preferences": "^4.0.3",
-		"@wordpress/primitives": "^4.0.1",
-		"@wordpress/priority-queue": "^3.0.1",
-		"@wordpress/private-apis": "^1.0.2",
-		"@wordpress/reusable-blocks": "^5.0.3",
-		"@wordpress/router": "^1.0.2",
-		"@wordpress/style-engine": "^2.0.2",
-		"@wordpress/url": "^4.0.1",
-		"@wordpress/viewport": "^6.0.2",
-		"@wordpress/widgets": "^4.0.3",
-		"@wordpress/wordcount": "^4.0.1",
+		"@wordpress/a11y": "^4.2.0",
+		"@wordpress/api-fetch": "^7.2.0",
+		"@wordpress/blob": "^4.2.0",
+		"@wordpress/block-editor": "^13.2.0",
+		"@wordpress/block-library": "^9.2.0",
+		"@wordpress/blocks": "^13.2.0",
+		"@wordpress/commands": "^1.2.0",
+		"@wordpress/components": "^28.2.0",
+		"@wordpress/compose": "^7.2.0",
+		"@wordpress/core-commands": "^1.2.0",
+		"@wordpress/core-data": "^7.2.0",
+		"@wordpress/data": "^10.2.0",
+		"@wordpress/dataviews": "^2.2.0",
+		"@wordpress/date": "^5.2.0",
+		"@wordpress/deprecated": "^4.2.0",
+		"@wordpress/dom": "^4.2.0",
+		"@wordpress/editor": "^14.2.0",
+		"@wordpress/element": "^6.2.0",
+		"@wordpress/escape-html": "^3.2.0",
+		"@wordpress/hooks": "^4.2.0",
+		"@wordpress/html-entities": "^4.2.0",
+		"@wordpress/i18n": "^5.2.0",
+		"@wordpress/icons": "^10.2.0",
+		"@wordpress/keyboard-shortcuts": "^5.2.0",
+		"@wordpress/keycodes": "^4.2.0",
+		"@wordpress/notices": "^5.2.0",
+		"@wordpress/patterns": "^2.2.0",
+		"@wordpress/plugins": "^7.2.0",
+		"@wordpress/preferences": "^4.2.0",
+		"@wordpress/primitives": "^4.2.0",
+		"@wordpress/priority-queue": "^3.2.0",
+		"@wordpress/private-apis": "^1.2.0",
+		"@wordpress/reusable-blocks": "^5.2.0",
+		"@wordpress/router": "^1.2.0",
+		"@wordpress/style-engine": "^2.2.0",
+		"@wordpress/url": "^4.2.0",
+		"@wordpress/viewport": "^6.2.0",
+		"@wordpress/widgets": "^4.2.0",
+		"@wordpress/wordcount": "^4.2.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.9.2",
@@ -82,5 +82,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "9dd5f8dcfa4fc7242e5d48be20ee789ad087b432"
+	"gitHead": "aa5b14bb5bdbb8d8a02914e154c3bc1c2f18ace6"
 }

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

@@ -82,7 +82,12 @@ export default function AddNewPageModal( { onSave, onClose } ) {
 	}
 
 	return (
-		<Modal title={ __( 'Draft a new page' ) } onRequestClose={ onClose }>
+		<Modal
+			title={ __( 'Draft a new page' ) }
+			onRequestClose={ onClose }
+			focusOnMount="firstContentElement"
+			size="small"
+		>
 			<form onSubmit={ createPage }>
 				<VStack spacing={ 3 }>
 					<TextControl

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

@@ -55,6 +55,7 @@ export default function AddNewPattern() {
 				?.add_new_item,
 			addNewTemplatePartLabel: getPostType( TEMPLATE_PART_POST_TYPE )
 				?.labels?.add_new_item,
+			// Blocks refers to the wp_block post type, this checks the ability to create a post of that type.
 			canCreatePattern: canUser( 'create', 'blocks' ),
 			canCreateTemplatePart: canUser( 'create', 'template-parts' ),
 		};

package/src/components/app/index.js

@@ -17,10 +17,26 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
  */
 import Layout from '../layout';
 import { unlock } from '../../lock-unlock';
+import { useCommonCommands } from '../../hooks/commands/use-common-commands';
+import { useEditModeCommands } from '../../hooks/commands/use-edit-mode-commands';
+import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url';
+import useLayoutAreas from '../layout/router';
+import useSetCommandContext from '../../hooks/commands/use-set-command-context';
 
 const { RouterProvider } = unlock( routerPrivateApis );
 const { GlobalStylesProvider } = unlock( editorPrivateApis );
 
+function AppLayout() {
+	// This ensures the edited entity id and type are initialized properly.
+	useInitEditedEntityFromURL();
+	useEditModeCommands();
+	useCommonCommands();
+	useSetCommandContext();
+	const route = useLayoutAreas();
+
+	return <Layout route={ route } />;
+}
+
 export default function App() {
 	const { createErrorNotice } = useDispatch( noticesStore );
 
@@ -41,7 +57,7 @@ export default function App() {
 			<GlobalStylesProvider>
 				<UnsavedChangesWarning />
 				<RouterProvider>
-					<Layout />
+					<AppLayout />
 					<PluginArea onError={ onPluginAreaError } />
 				</RouterProvider>
 			</GlobalStylesProvider>

package/src/components/editor/index.js

@@ -31,13 +31,12 @@ import { store as editSiteStore } from '../../store';
 import { GlobalStylesRenderer } from '../global-styles-renderer';
 import CanvasLoader from '../canvas-loader';
 import { unlock } from '../../lock-unlock';
-import TemplatePartConverter from '../template-part-converter';
 import { useSpecificEditorSettings } from '../block-editor/use-site-editor-settings';
 import PluginTemplateSettingPanel from '../plugin-template-setting-panel';
 import GlobalStylesSidebar from '../global-styles-sidebar';
 import { isPreviewingTheme } from '../../utils/is-previewing-theme';
 import {
-	getEditorCanvasContainerTitle,
+	getEditorCanvasContainerTitleAndIcon,
 	useHasEditorCanvasContainer,
 } from '../editor-canvas-container';
 import SaveButton from '../save-button';
@@ -56,7 +55,6 @@ export default function EditSiteEditor( { isLoading } ) {
 		editedPostId,
 		contextPostType,
 		contextPostId,
-		editorMode,
 		canvasMode,
 		isEditingPage,
 		supportsGlobalStyles,
@@ -65,6 +63,7 @@ export default function EditSiteEditor( { isLoading } ) {
 		currentPostIsTrashed,
 	} = useSelect( ( select ) => {
 		const {
+			getEditorCanvasContainerView,
 			getEditedPostContext,
 			getCanvasMode,
 			isPage,
@@ -73,7 +72,6 @@ export default function EditSiteEditor( { isLoading } ) {
 		} = unlock( select( editSiteStore ) );
 		const { get } = select( preferencesStore );
 		const { getCurrentTheme } = select( coreDataStore );
-		const { getEditorMode } = select( editorStore );
 		const _context = getEditedPostContext();
 
 		// The currently selected entity to display.
@@ -83,14 +81,11 @@ export default function EditSiteEditor( { isLoading } ) {
 			editedPostId: getEditedPostId(),
 			contextPostType: _context?.postId ? _context.postType : undefined,
 			contextPostId: _context?.postId ? _context.postId : undefined,
-			editorMode: getEditorMode(),
 			canvasMode: getCanvasMode(),
 			isEditingPage: isPage(),
 			supportsGlobalStyles: getCurrentTheme()?.is_block_theme,
 			showIconLabels: get( 'core', 'showIconLabels' ),
-			editorCanvasView: unlock(
-				select( editSiteStore )
-			).getEditorCanvasContainerView(),
+			editorCanvasView: getEditorCanvasContainerView(),
 			currentPostIsTrashed:
 				select( editorStore ).getCurrentPostAttribute( 'status' ) ===
 				'trash',
@@ -100,9 +95,7 @@ export default function EditSiteEditor( { isLoading } ) {
 	const _isPreviewingTheme = isPreviewingTheme();
 	const hasDefaultEditorCanvasView = ! useHasEditorCanvasContainer();
 	const iframeProps = useEditorIframeProps();
-	const isViewMode = canvasMode === 'view';
 	const isEditMode = canvasMode === 'edit';
-	const showVisualEditor = isViewMode || editorMode === 'visual';
 	const postWithTemplate = !! contextPostId;
 	const loadingProgressId = useInstanceId(
 		CanvasLoader,
@@ -116,14 +109,12 @@ export default function EditSiteEditor( { isLoading } ) {
 			{
 				// Forming a "block formatting context" to prevent margin collapsing.
 				// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
-
-				css: `body{${
+				css:
 					canvasMode === 'view'
-						? `min-height: 100vh; ${
+						? `body{min-height: 100vh; ${
 								currentPostIsTrashed ? '' : 'cursor: pointer;'
-						  }`
-						: ''
-				}}}`,
+						  }}`
+						: undefined,
 			},
 		],
 		[ settings.styles, canvasMode, currentPostIsTrashed ]
@@ -179,6 +170,10 @@ export default function EditSiteEditor( { isLoading } ) {
 		[ history, createSuccessNotice ]
 	);
 
+	// Replace the title and icon displayed in the DocumentBar when there's an overlay visible.
+	const { title, icon } =
+		getEditorCanvasContainerTitleAndIcon( editorCanvasView );
+
 	const isReady = ! isLoading;
 
 	return (
@@ -186,7 +181,6 @@ export default function EditSiteEditor( { isLoading } ) {
 			<GlobalStylesRenderer />
 			<EditorKeyboardShortcutsRegister />
 			{ isEditMode && <BlockKeyboardShortcuts /> }
-			{ showVisualEditor && <TemplatePartConverter /> }
 			{ ! isReady ? <CanvasLoader id={ loadingProgressId } /> : null }
 			{ isEditMode && <WelcomeGuide /> }
 			{ isReady && (
@@ -206,11 +200,8 @@ export default function EditSiteEditor( { isLoading } ) {
 						_isPreviewingTheme && <SaveButton size="compact" />
 					}
 					forceDisableBlockTools={ ! hasDefaultEditorCanvasView }
-					title={
-						! hasDefaultEditorCanvasView
-							? getEditorCanvasContainerTitle( editorCanvasView )
-							: undefined
-					}
+					title={ title }
+					icon={ icon }
 					iframeProps={ iframeProps }
 					onActionPerformed={ onActionPerformed }
 					extraSidebarPanels={

package/src/components/editor-canvas-container/index.js

@@ -9,7 +9,7 @@ import {
 import { ESCAPE } from '@wordpress/keycodes';
 import { __ } from '@wordpress/i18n';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { closeSmall } from '@wordpress/icons';
+import { backup, closeSmall, seen } from '@wordpress/icons';
 import { useFocusOnMount, useFocusReturn } from '@wordpress/compose';
 import { store as preferencesStore } from '@wordpress/preferences';
 import {
@@ -30,17 +30,26 @@ const { EditorContentSlotFill, ResizableEditor } = unlock( editorPrivateApis );
  *
  * @param {string} view Editor canvas container view.
  *
- * @return {string} Translated string corresponding to value of view. Default is ''.
+ * @return {Object} Translated string for the view title and associated icon, both defaulting to ''.
  */
-function getEditorCanvasContainerTitle( view ) {
+function getEditorCanvasContainerTitleAndIcon( view ) {
 	switch ( view ) {
 		case 'style-book':
-			return __( 'Style Book' );
+			return {
+				title: __( 'Style Book' ),
+				icon: seen,
+			};
 		case 'global-styles-revisions':
 		case 'global-styles-revisions:style-book':
-			return __( 'Style Revisions' );
+			return {
+				title: __( 'Style Revisions' ),
+				icon: backup,
+			};
 		default:
-			return '';
+			return {
+				title: '',
+				icon: '',
+			};
 	}
 }
 
@@ -109,7 +118,9 @@ function EditorCanvasContainer( {
 		return null;
 	}
 
-	const title = getEditorCanvasContainerTitle( editorCanvasContainerView );
+	const { title } = getEditorCanvasContainerTitleAndIcon(
+		editorCanvasContainerView
+	);
 	const shouldShowCloseButton = onClose || closeButtonLabel;
 
 	return (
@@ -138,10 +149,11 @@ function EditorCanvasContainer( {
 		</EditorContentSlotFill.Fill>
 	);
 }
+
 function useHasEditorCanvasContainer() {
 	const fills = useSlotFills( EditorContentSlotFill.privateKey );
 	return !! fills?.length;
 }
 
 export default EditorCanvasContainer;
-export { useHasEditorCanvasContainer, getEditorCanvasContainerTitle };
+export { useHasEditorCanvasContainer, getEditorCanvasContainerTitleAndIcon };

package/src/components/global-styles/font-families.js

@@ -5,11 +5,9 @@ import { __ } from '@wordpress/i18n';
 import {
 	__experimentalItemGroup as ItemGroup,
 	__experimentalVStack as VStack,
-	__experimentalHStack as HStack,
 	Button,
 } from '@wordpress/components';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-import { settings } from '@wordpress/icons';
 import { useContext } from '@wordpress/element';
 
 /**
@@ -51,30 +49,41 @@ function FontFamilies() {
 			) }
 
 			<VStack spacing={ 2 }>
-				<HStack justify="space-between">
-					<Subtitle level={ 3 }>{ __( 'Fonts' ) }</Subtitle>
-					<Button
-						onClick={ () => setModalTabOpen( 'installed-fonts' ) }
-						label={ __( 'Manage fonts' ) }
-						icon={ settings }
-						size="small"
-					/>
-				</HStack>
+				<Subtitle level={ 3 }>{ __( 'Fonts' ) }</Subtitle>
 				{ hasFonts ? (
-					<ItemGroup isBordered isSeparated>
-						{ customFonts.map( ( font ) => (
-							<FontFamilyItem key={ font.slug } font={ font } />
-						) ) }
-						{ themeFonts.map( ( font ) => (
-							<FontFamilyItem key={ font.slug } font={ font } />
-						) ) }
-					</ItemGroup>
+					<>
+						<ItemGroup isBordered isSeparated>
+							{ customFonts.map( ( font ) => (
+								<FontFamilyItem
+									key={ font.slug }
+									font={ font }
+								/>
+							) ) }
+							{ themeFonts.map( ( font ) => (
+								<FontFamilyItem
+									key={ font.slug }
+									font={ font }
+								/>
+							) ) }
+						</ItemGroup>
+						<Button
+							className="edit-site-global-styles-font-families__manage-fonts"
+							variant="secondary"
+							__next40pxDefaultSize
+							onClick={ () =>
+								setModalTabOpen( 'installed-fonts' )
+							}
+						>
+							{ __( 'Manage fonts' ) }
+						</Button>
+					</>
 				) : (
 					<>
 						{ __( 'No fonts installed.' ) }
 						<Button
 							className="edit-site-global-styles-font-families__add-fonts"
 							variant="secondary"
+							__next40pxDefaultSize
 							onClick={ () => setModalTabOpen( 'upload-fonts' ) }
 						>
 							{ __( 'Add fonts' ) }

package/src/components/global-styles/font-library-modal/context.js

@@ -451,13 +451,13 @@ function FontLibraryProvider( { children } ) {
 		);
 
 		if ( isFaceActivated ) {
+			unloadFontFaceInBrowser( face, 'all' );
+		} else {
 			loadFontFaceInBrowser(
 				face,
 				getDisplaySrcFromFontFace( face?.src ),
 				'all'
 			);
-		} else {
-			unloadFontFaceInBrowser( face, 'all' );
 		}
 	};
 

package/src/components/global-styles/style.scss

@@ -23,11 +23,6 @@
 	overflow: hidden;
 }
 
-.edit-site-typography-panel__full-width-control {
-	grid-column: 1 / -1;
-	max-width: 100%;
-}
-
 .edit-site-global-styles-screen {
 	margin: $grid-unit-15 $grid-unit-20 $grid-unit-20;
 }
@@ -46,7 +41,8 @@
 	color: $gray-700;
 }
 
-.edit-site-global-styles-font-families__add-fonts {
+.edit-site-global-styles-font-families__add-fonts,
+.edit-site-global-styles-font-families__manage-fonts {
 	justify-content: center;
 }
 
@@ -84,8 +80,7 @@
 	color: $gray-800;
 	font-weight: 600;
 	line-height: 1.2;
-	padding: $grid-unit-20;
-	padding-bottom: 0;
+	padding: $grid-unit-20 $grid-unit-20 0;
 	margin: 0;
 }
 

package/src/components/global-styles/variations/variation.js

@@ -6,6 +6,7 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
+import { Tooltip } from '@wordpress/components';
 import { useMemo, useContext, useState } from '@wordpress/element';
 import { ENTER } from '@wordpress/keycodes';
 import { __, sprintf } from '@wordpress/i18n';
@@ -23,7 +24,13 @@ const { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock(
 	blockEditorPrivateApis
 );
 
-export default function Variation( { variation, children, isPill, property } ) {
+export default function Variation( {
+	variation,
+	children,
+	isPill,
+	property,
+	showTooltip,
+} ) {
 	const [ isFocused, setIsFocused ] = useState( false );
 	const { base, user, setUserConfig } = useContext( GlobalStylesContext );
 
@@ -64,30 +71,38 @@ export default function Variation( { variation, children, isPill, property } ) {
 		);
 	}
 
-	return (
-		<GlobalStylesContext.Provider value={ context }>
+	const content = (
+		<div
+			className={ clsx( 'edit-site-global-styles-variations_item', {
+				'is-active': isActive,
+			} ) }
+			role="button"
+			onClick={ selectVariation }
+			onKeyDown={ selectOnEnter }
+			tabIndex="0"
+			aria-label={ label }
+			aria-current={ isActive }
+			onFocus={ () => setIsFocused( true ) }
+			onBlur={ () => setIsFocused( false ) }
+		>
 			<div
-				className={ clsx( 'edit-site-global-styles-variations_item', {
-					'is-active': isActive,
-				} ) }
-				role="button"
-				onClick={ selectVariation }
-				onKeyDown={ selectOnEnter }
-				tabIndex="0"
-				aria-label={ label }
-				aria-current={ isActive }
-				onFocus={ () => setIsFocused( true ) }
-				onBlur={ () => setIsFocused( false ) }
+				className={ clsx(
+					'edit-site-global-styles-variations_item-preview',
+					{ 'is-pill': isPill }
+				) }
 			>
-				<div
-					className={ clsx(
-						'edit-site-global-styles-variations_item-preview',
-						{ 'is-pill': isPill }
-					) }
-				>
-					{ children( isFocused ) }
-				</div>
+				{ children( isFocused ) }
 			</div>
+		</div>
+	);
+
+	return (
+		<GlobalStylesContext.Provider value={ context }>
+			{ showTooltip ? (
+				<Tooltip text={ variation?.title }>{ content }</Tooltip>
+			) : (
+				content
+			) }
 		</GlobalStylesContext.Provider>
 	);
 }

package/src/components/global-styles/variations/variations-color.js

@@ -32,6 +32,7 @@ export default function ColorVariations( { title, gap = 2 } ) {
 						variation={ variation }
 						isPill
 						property="color"
+						showTooltip
 					>
 						{ () => <StylesPreviewColors /> }
 					</Variation>

package/src/components/global-styles/variations/variations-typography.js

@@ -39,6 +39,7 @@ export default function TypographyVariations( { title, gap = 2 } ) {
 							key={ index }
 							variation={ variation }
 							property="typography"
+							showTooltip
 						>
 							{ ( isFocused ) => (
 								<PreviewIframe

package/src/components/global-styles-sidebar/style.scss

@@ -47,7 +47,6 @@
 	font-weight: 500;
 }
 
-.edit-site-typography-panel,
 .edit-site-global-styles-sidebar .block-editor-panel-color-gradient-settings {
 	border: 0;
 }