@wordpress/edit-site 5.27.1 → 5.28.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "5.27.1",
+	"version": "5.28.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,46 +27,46 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.50.0",
-		"@wordpress/api-fetch": "^6.47.0",
-		"@wordpress/blob": "^3.50.0",
-		"@wordpress/block-editor": "^12.18.1",
-		"@wordpress/block-library": "^8.27.1",
-		"@wordpress/blocks": "^12.27.1",
-		"@wordpress/commands": "^0.21.0",
-		"@wordpress/components": "^25.16.0",
-		"@wordpress/compose": "^6.27.0",
-		"@wordpress/core-commands": "^0.19.1",
-		"@wordpress/core-data": "^6.27.1",
-		"@wordpress/data": "^9.20.0",
-		"@wordpress/dataviews": "^0.4.0",
-		"@wordpress/date": "^4.50.0",
-		"@wordpress/deprecated": "^3.50.0",
-		"@wordpress/dom": "^3.50.0",
-		"@wordpress/editor": "^13.27.1",
-		"@wordpress/element": "^5.27.0",
-		"@wordpress/escape-html": "^2.50.0",
-		"@wordpress/hooks": "^3.50.0",
-		"@wordpress/html-entities": "^3.50.0",
-		"@wordpress/i18n": "^4.50.0",
-		"@wordpress/icons": "^9.41.0",
-		"@wordpress/interface": "^5.27.0",
-		"@wordpress/keyboard-shortcuts": "^4.27.0",
-		"@wordpress/keycodes": "^3.50.0",
-		"@wordpress/media-utils": "^4.41.0",
-		"@wordpress/notices": "^4.18.0",
-		"@wordpress/patterns": "^1.11.1",
-		"@wordpress/plugins": "^6.18.0",
-		"@wordpress/preferences": "^3.27.0",
-		"@wordpress/primitives": "^3.48.0",
-		"@wordpress/private-apis": "^0.32.0",
-		"@wordpress/reusable-blocks": "^4.27.1",
-		"@wordpress/router": "^0.19.0",
-		"@wordpress/style-engine": "^1.33.1",
-		"@wordpress/url": "^3.51.0",
-		"@wordpress/viewport": "^5.27.0",
-		"@wordpress/widgets": "^3.27.1",
-		"@wordpress/wordcount": "^3.50.0",
+		"@wordpress/a11y": "^3.51.0",
+		"@wordpress/api-fetch": "^6.48.0",
+		"@wordpress/blob": "^3.51.0",
+		"@wordpress/block-editor": "^12.19.0",
+		"@wordpress/block-library": "^8.28.0",
+		"@wordpress/blocks": "^12.28.0",
+		"@wordpress/commands": "^0.22.0",
+		"@wordpress/components": "^26.0.0",
+		"@wordpress/compose": "^6.28.0",
+		"@wordpress/core-commands": "^0.20.0",
+		"@wordpress/core-data": "^6.28.0",
+		"@wordpress/data": "^9.21.0",
+		"@wordpress/dataviews": "^0.5.0",
+		"@wordpress/date": "^4.51.0",
+		"@wordpress/deprecated": "^3.51.0",
+		"@wordpress/dom": "^3.51.0",
+		"@wordpress/editor": "^13.28.0",
+		"@wordpress/element": "^5.28.0",
+		"@wordpress/escape-html": "^2.51.0",
+		"@wordpress/hooks": "^3.51.0",
+		"@wordpress/html-entities": "^3.51.0",
+		"@wordpress/i18n": "^4.51.0",
+		"@wordpress/icons": "^9.42.0",
+		"@wordpress/interface": "^5.28.0",
+		"@wordpress/keyboard-shortcuts": "^4.28.0",
+		"@wordpress/keycodes": "^3.51.0",
+		"@wordpress/media-utils": "^4.42.0",
+		"@wordpress/notices": "^4.19.0",
+		"@wordpress/patterns": "^1.12.0",
+		"@wordpress/plugins": "^6.19.0",
+		"@wordpress/preferences": "^3.28.0",
+		"@wordpress/primitives": "^3.49.0",
+		"@wordpress/private-apis": "^0.33.0",
+		"@wordpress/reusable-blocks": "^4.28.0",
+		"@wordpress/router": "^0.20.0",
+		"@wordpress/style-engine": "^1.34.0",
+		"@wordpress/url": "^3.52.0",
+		"@wordpress/viewport": "^5.28.0",
+		"@wordpress/widgets": "^3.28.0",
+		"@wordpress/wordcount": "^3.51.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.9.2",
@@ -85,5 +85,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "c2f6d07ffab7d68b9ac3c423ce7e11af91f6e45e"
+	"gitHead": "eb796371e9630636a4a8837033807b0c4a06ed67"
 }

package/src/components/add-new-template/style.scss

@@ -21,18 +21,6 @@
 		}
 	}
 
-	.components-search-control {
-		input[type="search"].components-search-control__input {
-			background: $white;
-			border: 1px solid $gray-300;
-
-			&:focus {
-				border-color: var(--wp-admin-theme-color);
-				box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
-			}
-		}
-	}
-
 	@include break-medium() {
 		width: 456px;
 	}

package/src/components/block-editor/site-editor-canvas.js

@@ -11,7 +11,6 @@ import { useViewportMatch, useResizeObserver } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
-import BackButton from './back-button';
 import ResizableEditor from './resizable-editor';
 import EditorCanvas from './editor-canvas';
 import EditorCanvasContainer from '../editor-canvas-container';
@@ -20,24 +19,32 @@ import { store as editSiteStore } from '../../store';
 import {
 	FOCUSABLE_ENTITIES,
 	NAVIGATION_POST_TYPE,
+	TEMPLATE_POST_TYPE,
 } from '../../utils/constants';
 import { unlock } from '../../lock-unlock';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
-export default function SiteEditorCanvas() {
-	const { templateType, isFocusMode, isViewMode } = useSelect( ( select ) => {
-		const { getEditedPostType, getCanvasMode } = unlock(
-			select( editSiteStore )
-		);
+const { useLocation } = unlock( routerPrivateApis );
 
-		const _templateType = getEditedPostType();
+export default function SiteEditorCanvas() {
+	const location = useLocation();
+	const { templateType, isFocusableEntity, isViewMode } = useSelect(
+		( select ) => {
+			const { getEditedPostType, getCanvasMode } = unlock(
+				select( editSiteStore )
+			);
 
-		return {
-			templateType: _templateType,
-			isFocusMode: FOCUSABLE_ENTITIES.includes( _templateType ),
-			isViewMode: getCanvasMode() === 'view',
-		};
-	}, [] );
+			const _templateType = getEditedPostType();
 
+			return {
+				templateType: _templateType,
+				isFocusableEntity: FOCUSABLE_ENTITIES.includes( _templateType ),
+				isViewMode: getCanvasMode() === 'view',
+			};
+		},
+		[]
+	);
+	const isFocusMode = location.params.focusMode || isFocusableEntity;
 	const [ resizeObserver, sizes ] = useResizeObserver();
 
 	const settings = useSiteEditorSettings();
@@ -47,7 +54,9 @@ export default function SiteEditorCanvas() {
 		isFocusMode &&
 		! isViewMode &&
 		// Disable resizing in mobile viewport.
-		! isMobileViewport;
+		! isMobileViewport &&
+		// Disable resizing when editing a template in focus mode.
+		templateType !== TEMPLATE_POST_TYPE;
 
 	const isTemplateTypeNavigation = templateType === NAVIGATION_POST_TYPE;
 	const isNavigationFocusMode = isTemplateTypeNavigation && isFocusMode;
@@ -67,7 +76,6 @@ export default function SiteEditorCanvas() {
 							'is-view-mode': isViewMode,
 						} ) }
 					>
-						<BackButton />
 						<ResizableEditor
 							enableResizing={ enableResizing }
 							height={

package/src/components/block-editor/style.scss

@@ -23,7 +23,7 @@
 	height: 100%;
 	display: block;
 	overflow: hidden;
-	background-color: $gray-900;
+	background-color: $gray-300;
 	// Centralize the editor horizontally (flex-direction is column).
 	align-items: center;
 
@@ -45,7 +45,7 @@
 
 	&.is-focus-mode {
 		.edit-site-layout.is-full-canvas & {
-			padding: $grid-unit-60;
+			padding: $grid-unit-30;
 		}
 
 		.edit-site-visual-editor__editor-canvas {
@@ -71,24 +71,6 @@
 	}
 }
 
-.edit-site-visual-editor__back-button {
-	position: absolute;
-	top: $grid-unit-10;
-	left: $grid-unit-10;
-	color: $white;
-
-	&:active:not([aria-disabled="true"]),
-	&:focus:not([aria-disabled="true"]),
-	&:hover {
-		color: $gray-100;
-	}
-}
-
-// The toolbar header in distraction mode sits over the back button, which renders it unreachable.
-.is-distraction-free .edit-site-visual-editor__back-button {
-	display: none;
-}
-
 .resizable-editor__drag-handle {
 	position: absolute;
 	top: 0;

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

@@ -0,0 +1,25 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const { useHistory } = unlock( routerPrivateApis );
+
+export default function useNavigateToEntityRecord() {
+	const history = useHistory();
+
+	const onNavigateToEntityRecord = useCallback(
+		( params ) => {
+			history.push( { ...params, focusMode: true, canvas: 'edit' } );
+		},
+		[ history ]
+	);
+
+	return onNavigateToEntityRecord;
+}

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

@@ -5,15 +5,19 @@ import { useSelect } from '@wordpress/data';
 import { useMemo } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
 import { privateApis as editorPrivateApis } from '@wordpress/editor';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { usePrevious } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import { store as editSiteStore } from '../../store';
 import { unlock } from '../../lock-unlock';
-import { usePostLinkProps } from './use-post-link-props';
+import useNavigateToEntityRecord from './use-navigate-to-entity-record';
+import { FOCUSABLE_ENTITIES } from '../../utils/constants';
 
 const { useBlockEditorSettings } = unlock( editorPrivateApis );
+const { useLocation, useHistory } = unlock( routerPrivateApis );
 
 function useArchiveLabel( templateSlug ) {
 	const taxonomyMatches = templateSlug?.match(
@@ -87,8 +91,31 @@ function useArchiveLabel( templateSlug ) {
 	);
 }
 
+function useNavigateToPreviousEntityRecord() {
+	const location = useLocation();
+	const previousLocation = usePrevious( location );
+	const history = useHistory();
+	const goBack = useMemo( () => {
+		const isFocusMode =
+			location.params.focusMode ||
+			( location.params.postId &&
+				FOCUSABLE_ENTITIES.includes( location.params.postType ) );
+		const didComeFromEditorCanvas =
+			previousLocation?.params.postId &&
+			previousLocation?.params.postType &&
+			previousLocation?.params.canvas === 'edit';
+		const showBackButton = isFocusMode && didComeFromEditorCanvas;
+		return showBackButton ? () => history.back() : undefined;
+		// Disable reason: previousLocation changes when the component updates for any reason, not
+		// just when location changes. Until this is fixed we can't add it to deps. See
+		// https://github.com/WordPress/gutenberg/pull/58710#discussion_r1479219465.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [ location, history ] );
+	return goBack;
+}
+
 export function useSpecificEditorSettings() {
-	const getPostLinkProps = usePostLinkProps();
+	const onNavigateToEntityRecord = useNavigateToEntityRecord();
 	const { templateSlug, canvasMode, settings, postWithTemplate } = useSelect(
 		( select ) => {
 			const {
@@ -118,6 +145,8 @@ export function useSpecificEditorSettings() {
 	);
 	const archiveLabels = useArchiveLabel( templateSlug );
 	const defaultRenderingMode = postWithTemplate ? 'template-locked' : 'all';
+	const onNavigateToPreviousEntityRecord =
+		useNavigateToPreviousEntityRecord();
 	const defaultEditorSettings = useMemo( () => {
 		return {
 			...settings,
@@ -126,7 +155,8 @@ export function useSpecificEditorSettings() {
 			supportsTemplateMode: true,
 			focusMode: canvasMode !== 'view',
 			defaultRenderingMode,
-			getPostLinkProps,
+			onNavigateToEntityRecord,
+			onNavigateToPreviousEntityRecord,
 			// I wonder if they should be set in the post editor too
 			__experimentalArchiveTitleTypeLabel: archiveLabels.archiveTypeLabel,
 			__experimentalArchiveTitleNameLabel: archiveLabels.archiveNameLabel,
@@ -135,7 +165,8 @@ export function useSpecificEditorSettings() {
 		settings,
 		canvasMode,
 		defaultRenderingMode,
-		getPostLinkProps,
+		onNavigateToEntityRecord,
+		onNavigateToPreviousEntityRecord,
 		archiveLabels.archiveTypeLabel,
 		archiveLabels.archiveNameLabel,
 	] );

package/src/components/editor/index.js

@@ -84,6 +84,9 @@ const blockRemovalRules = {
 	'core/post-template': __(
 		'Post Template displays each post or page in a Query Loop.'
 	),
+	'bindings/core/pattern-overrides': __(
+		'Blocks from synced patterns that can have overriden content.'
+	),
 };
 
 export default function Editor( { isLoading } ) {
@@ -102,13 +105,14 @@ export default function Editor( { isLoading } ) {
 		contextPost,
 		editorMode,
 		canvasMode,
-		renderingMode,
 		blockEditorMode,
 		isRightSidebarOpen,
 		isInserterOpen,
 		isListViewOpen,
+		isDistractionFree,
 		showIconLabels,
 		showBlockBreadcrumbs,
+		postTypeLabel,
 	} = useSelect( ( select ) => {
 		const { get } = select( preferencesStore );
 		const { getEditedPostContext, getEditorMode, getCanvasMode } = unlock(
@@ -117,7 +121,7 @@ export default function Editor( { isLoading } ) {
 		const { __unstableGetEditorMode } = select( blockEditorStore );
 		const { getActiveComplementaryArea } = select( interfaceStore );
 		const { getEntityRecord } = select( coreDataStore );
-		const { getRenderingMode, isInserterOpened, isListViewOpened } =
+		const { isInserterOpened, isListViewOpened, getPostTypeLabel } =
 			select( editorStore );
 		const _context = getEditedPostContext();
 
@@ -134,15 +138,16 @@ export default function Editor( { isLoading } ) {
 				: undefined,
 			editorMode: getEditorMode(),
 			canvasMode: getCanvasMode(),
-			renderingMode: getRenderingMode(),
 			blockEditorMode: __unstableGetEditorMode(),
 			isInserterOpen: isInserterOpened(),
 			isListViewOpen: isListViewOpened(),
 			isRightSidebarOpen: getActiveComplementaryArea(
 				editSiteStore.name
 			),
+			isDistractionFree: get( 'core', 'distractionFree' ),
 			showBlockBreadcrumbs: get( 'core', 'showBlockBreadcrumbs' ),
 			showIconLabels: get( 'core', 'showIconLabels' ),
+			postTypeLabel: getPostTypeLabel(),
 		};
 	}, [] );
 
@@ -150,6 +155,7 @@ export default function Editor( { isLoading } ) {
 	const isEditMode = canvasMode === 'edit';
 	const showVisualEditor = isViewMode || editorMode === 'visual';
 	const shouldShowBlockBreadcrumbs =
+		! isDistractionFree &&
 		showBlockBreadcrumbs &&
 		isEditMode &&
 		showVisualEditor &&
@@ -210,7 +216,7 @@ export default function Editor( { isLoading } ) {
 					<SidebarComplementaryAreaFills />
 					{ isEditMode && <StartTemplateOptions /> }
 					<InterfaceSkeleton
-						isDistractionFree={ true }
+						isDistractionFree={ isDistractionFree }
 						enableRegionNavigation={ false }
 						className={ classnames(
 							'edit-site-editor__interface-skeleton',
@@ -267,12 +273,7 @@ export default function Editor( { isLoading } ) {
 						footer={
 							shouldShowBlockBreadcrumbs && (
 								<BlockBreadcrumb
-									rootLabelText={
-										postWithTemplate &&
-										renderingMode !== 'template-only'
-											? __( 'Page' )
-											: __( 'Template' )
-									}
+									rootLabelText={ postTypeLabel }
 								/>
 							)
 						}

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

@@ -9,7 +9,7 @@ import {
 	Button,
 	Tooltip,
 } from '@wordpress/components';
-import { typography } from '@wordpress/icons';
+import { settings } from '@wordpress/icons';
 import { useContext } from '@wordpress/element';
 
 /**
@@ -33,7 +33,7 @@ function FontFamilies() {
 			{ !! modalTabOpen && (
 				<FontLibraryModal
 					onRequestClose={ () => toggleModal() }
-					initialTabName={ modalTabOpen }
+					initialTabId={ modalTabOpen }
 				/>
 			) }
 
@@ -47,7 +47,7 @@ function FontFamilies() {
 									toggleModal( 'installed-fonts' )
 								}
 								aria-label={ __( 'Manage fonts' ) }
-								icon={ typography }
+								icon={ settings }
 								size={ 'small' }
 							/>
 						</Tooltip>
@@ -63,7 +63,16 @@ function FontFamilies() {
 						) ) }
 					</ItemGroup>
 				) : (
-					<>{ __( 'No fonts installed.' ) }</>
+					<>
+						{ __( 'No fonts installed.' ) }
+						<Button
+							className="edit-site-global-styles-font-families__add-fonts"
+							variant="secondary"
+							onClick={ () => toggleModal( 'upload-fonts' ) }
+						>
+							{ __( 'Add fonts' ) }
+						</Button>
+					</>
 				) }
 			</VStack>
 		</>

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

@@ -35,21 +35,23 @@ function CollectionFontVariant( {
 	);
 
 	return (
-		<label
-			className="font-library-modal__library-font-variant"
-			htmlFor={ checkboxId }
-		>
-			<Flex justify="space-between" align="center" gap="1rem">
-				<FontFaceDemo fontFace={ face } text={ displayName } />
+		<div className="font-library-modal__library-font-variant">
+			<Flex justify="flex-start" align="center" gap="1rem">
 				<CheckboxControl
 					checked={ selected }
 					onChange={ handleToggleActivation }
 					__nextHasNoMarginBottom={ true }
 					id={ checkboxId }
-					label={ false }
 				/>
+				<label htmlFor={ checkboxId }>
+					<FontFaceDemo
+						fontFace={ face }
+						text={ displayName }
+						onClick={ handleToggleActivation }
+					/>
+				</label>
 			</Flex>
-		</label>
+		</div>
 	);
 }
 

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

@@ -55,11 +55,21 @@ function FontLibraryProvider( { children } ) {
 
 	const [ isInstalling, setIsInstalling ] = useState( false );
 	const [ refreshKey, setRefreshKey ] = useState( 0 );
+	const [ notice, setNotice ] = useState( null );
 
 	const refreshLibrary = () => {
 		setRefreshKey( Date.now() );
 	};
 
+	// Reset notice on dismiss.
+	useEffect( () => {
+		if ( notice ) {
+			notice.onRemove = () => {
+				setNotice( null );
+			};
+		}
+	}, [ notice, setNotice ] );
+
 	const {
 		records: libraryPosts = [],
 		isResolving: isResolvingLibrary,
@@ -134,6 +144,8 @@ function FontLibraryProvider( { children } ) {
 	}, [ modalTabOpen ] );
 
 	const handleSetLibraryFontSelected = ( font ) => {
+		setNotice( null );
+
 		// If font is null, reset the selected font
 		if ( ! font ) {
 			setLibraryFontSelected( null );
@@ -471,6 +483,8 @@ function FontLibraryProvider( { children } ) {
 				modalTabOpen,
 				toggleModal,
 				refreshLibrary,
+				notice,
+				setNotice,
 				saveFontFamilies,
 				fontFamiliesHasChanges,
 				isResolvingLibrary,

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

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { _n } from '@wordpress/i18n';
+import { _n, sprintf } from '@wordpress/i18n';
 import {
 	__experimentalText as Text,
 	Button,
@@ -58,9 +58,15 @@ function FontCard( { font, onClick, variantsText } ) {
 					<FlexItem>
 						<Text className="font-library-modal__font-card__count">
 							{ variantsText ||
-								variantsCount +
-									' ' +
-									_n( 'variant', 'variants', variantsCount ) }
+								sprintf(
+									/* translators: %d: Number of font variants. */
+									_n(
+										'%d variant',
+										'%d variants',
+										variantsCount
+									),
+									variantsCount
+								) }
 						</Text>
 					</FlexItem>
 					<FlexItem>