@wordpress/edit-site 6.1.0 → 6.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "6.1.0",
+	"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.1.0",
-		"@wordpress/api-fetch": "^7.1.0",
-		"@wordpress/blob": "^4.1.0",
-		"@wordpress/block-editor": "^13.1.0",
-		"@wordpress/block-library": "^9.1.0",
-		"@wordpress/blocks": "^13.1.0",
-		"@wordpress/commands": "^1.1.0",
-		"@wordpress/components": "^28.1.0",
-		"@wordpress/compose": "^7.1.0",
-		"@wordpress/core-commands": "^1.1.0",
-		"@wordpress/core-data": "^7.1.0",
-		"@wordpress/data": "^10.1.0",
-		"@wordpress/dataviews": "^2.1.0",
-		"@wordpress/date": "^5.1.0",
-		"@wordpress/deprecated": "^4.1.0",
-		"@wordpress/dom": "^4.1.0",
-		"@wordpress/editor": "^14.1.0",
-		"@wordpress/element": "^6.1.0",
-		"@wordpress/escape-html": "^3.1.0",
-		"@wordpress/hooks": "^4.1.0",
-		"@wordpress/html-entities": "^4.1.0",
-		"@wordpress/i18n": "^5.1.0",
-		"@wordpress/icons": "^10.1.0",
-		"@wordpress/keyboard-shortcuts": "^5.1.0",
-		"@wordpress/keycodes": "^4.1.0",
-		"@wordpress/notices": "^5.1.0",
-		"@wordpress/patterns": "^2.1.0",
-		"@wordpress/plugins": "^7.1.0",
-		"@wordpress/preferences": "^4.1.0",
-		"@wordpress/primitives": "^4.1.0",
-		"@wordpress/priority-queue": "^3.1.0",
-		"@wordpress/private-apis": "^1.1.0",
-		"@wordpress/reusable-blocks": "^5.1.0",
-		"@wordpress/router": "^1.1.0",
-		"@wordpress/style-engine": "^2.1.0",
-		"@wordpress/url": "^4.1.0",
-		"@wordpress/viewport": "^6.1.0",
-		"@wordpress/widgets": "^4.1.0",
-		"@wordpress/wordcount": "^4.1.0",
+		"@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": "66d3bf12e67d16deddc4b4a9ec42e1d0bed3479a"
+	"gitHead": "aa5b14bb5bdbb8d8a02914e154c3bc1c2f18ace6"
 }

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

@@ -9,11 +9,12 @@ import {
 	TextControl,
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useRegistry } from '@wordpress/data';
 import { useState } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as noticesStore } from '@wordpress/notices';
 import { decodeEntities } from '@wordpress/html-entities';
+import { serialize, synchronizeBlocksWithTemplate } from '@wordpress/blocks';
 
 export default function AddNewPageModal( { onSave, onClose } ) {
 	const [ isCreatingPage, setIsCreatingPage ] = useState( false );
@@ -22,6 +23,7 @@ export default function AddNewPageModal( { onSave, onClose } ) {
 	const { saveEntityRecord } = useDispatch( coreStore );
 	const { createErrorNotice, createSuccessNotice } =
 		useDispatch( noticesStore );
+	const { resolveSelect } = useRegistry();
 
 	async function createPage( event ) {
 		event.preventDefault();
@@ -31,6 +33,8 @@ export default function AddNewPageModal( { onSave, onClose } ) {
 		}
 		setIsCreatingPage( true );
 		try {
+			const pagePostType =
+				await resolveSelect( coreStore ).getPostType( 'page' );
 			const newPage = await saveEntityRecord(
 				'postType',
 				'page',
@@ -38,6 +42,15 @@ export default function AddNewPageModal( { onSave, onClose } ) {
 					status: 'draft',
 					title,
 					slug: title || __( 'No title' ),
+					content:
+						!! pagePostType.template && pagePostType.template.length
+							? serialize(
+									synchronizeBlocksWithTemplate(
+										[],
+										pagePostType.template
+									)
+							  )
+							: undefined,
 				},
 				{ throwOnError: true }
 			);
@@ -69,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

@@ -36,21 +36,30 @@ export default function AddNewPattern() {
 	const [ showPatternModal, setShowPatternModal ] = useState( false );
 	const [ showTemplatePartModal, setShowTemplatePartModal ] =
 		useState( false );
+	// eslint-disable-next-line @wordpress/no-unused-vars-before-return
 	const { createPatternFromFile } = unlock( useDispatch( patternsStore ) );
 	const { createSuccessNotice, createErrorNotice } =
 		useDispatch( noticesStore );
 	const patternUploadInputRef = useRef();
-	const { isBlockBasedTheme, addNewPatternLabel, addNewTemplatePartLabel } =
-		useSelect( ( select ) => {
-			const { getCurrentTheme, getPostType } = select( coreStore );
-			return {
-				isBlockBasedTheme: getCurrentTheme()?.is_block_theme,
-				addNewPatternLabel: getPostType( PATTERN_TYPES.user )?.labels
-					?.add_new_item,
-				addNewTemplatePartLabel: getPostType( TEMPLATE_PART_POST_TYPE )
-					?.labels?.add_new_item,
-			};
-		}, [] );
+	const {
+		isBlockBasedTheme,
+		addNewPatternLabel,
+		addNewTemplatePartLabel,
+		canCreatePattern,
+		canCreateTemplatePart,
+	} = useSelect( ( select ) => {
+		const { getCurrentTheme, getPostType, canUser } = select( coreStore );
+		return {
+			isBlockBasedTheme: getCurrentTheme()?.is_block_theme,
+			addNewPatternLabel: getPostType( PATTERN_TYPES.user )?.labels
+				?.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' ),
+		};
+	}, [] );
 
 	function handleCreatePattern( { pattern } ) {
 		setShowPatternModal( false );
@@ -78,15 +87,16 @@ export default function AddNewPattern() {
 		setShowTemplatePartModal( false );
 	}
 
-	const controls = [
-		{
+	const controls = [];
+	if ( canCreatePattern ) {
+		controls.push( {
 			icon: symbol,
 			onClick: () => setShowPatternModal( true ),
 			title: addNewPatternLabel,
-		},
-	];
+		} );
+	}
 
-	if ( isBlockBasedTheme ) {
+	if ( isBlockBasedTheme && canCreateTemplatePart ) {
 		controls.push( {
 			icon: symbolFilled,
 			onClick: () => setShowTemplatePartModal( true ),
@@ -94,15 +104,20 @@ export default function AddNewPattern() {
 		} );
 	}
 
-	controls.push( {
-		icon: upload,
-		onClick: () => {
-			patternUploadInputRef.current.click();
-		},
-		title: __( 'Import pattern from JSON' ),
-	} );
+	if ( canCreatePattern ) {
+		controls.push( {
+			icon: upload,
+			onClick: () => {
+				patternUploadInputRef.current.click();
+			},
+			title: __( 'Import pattern from JSON' ),
+		} );
+	}
 
 	const { categoryMap, findOrCreateTerm } = useAddPatternCategory();
+	if ( controls.length === 0 ) {
+		return null;
+	}
 	return (
 		<>
 			{ addNewPatternLabel && (

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

@@ -1,15 +1,4 @@
-/* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
-::view-transition-old(frame),
-::view-transition-new(frame) {
-  animation-duration: 0;
-}
-/* stylelint-enable */
-
 .edit-site-visual-editor__editor-canvas {
-	/* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
-	view-transition-name: frame;
-	/* stylelint-enable */
-
 	&.is-focused {
 		outline: calc(2 * var(--wp-admin-border-width-focus)) solid var(--wp-admin-theme-color);
 		outline-offset: calc(-2 * var(--wp-admin-border-width-focus));

package/src/components/editor/index.js

@@ -36,7 +36,7 @@ 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';
@@ -63,6 +63,7 @@ export default function EditSiteEditor( { isLoading } ) {
 		currentPostIsTrashed,
 	} = useSelect( ( select ) => {
 		const {
+			getEditorCanvasContainerView,
 			getEditedPostContext,
 			getCanvasMode,
 			isPage,
@@ -84,9 +85,7 @@ export default function EditSiteEditor( { isLoading } ) {
 			isEditingPage: isPage(),
 			supportsGlobalStyles: getCurrentTheme()?.is_block_theme,
 			showIconLabels: get( 'core', 'showIconLabels' ),
-			editorCanvasView: unlock(
-				select( editSiteStore )
-			).getEditorCanvasContainerView(),
+			editorCanvasView: getEditorCanvasContainerView(),
 			currentPostIsTrashed:
 				select( editorStore ).getCurrentPostAttribute( 'status' ) ===
 				'trash',
@@ -110,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 ]
@@ -173,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 (
@@ -199,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

@@ -41,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;
 }
 

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