@wordpress/edit-site 6.1.0 → 6.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "6.1.0",
+	"version": "6.3.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.3.0",
+		"@wordpress/api-fetch": "^7.3.0",
+		"@wordpress/blob": "^4.3.0",
+		"@wordpress/block-editor": "^13.3.0",
+		"@wordpress/block-library": "^9.3.0",
+		"@wordpress/blocks": "^13.3.0",
+		"@wordpress/commands": "^1.3.0",
+		"@wordpress/components": "^28.3.0",
+		"@wordpress/compose": "^7.3.0",
+		"@wordpress/core-commands": "^1.3.0",
+		"@wordpress/core-data": "^7.3.0",
+		"@wordpress/data": "^10.3.0",
+		"@wordpress/dataviews": "^3.0.0",
+		"@wordpress/date": "^5.3.0",
+		"@wordpress/deprecated": "^4.3.0",
+		"@wordpress/dom": "^4.3.0",
+		"@wordpress/editor": "^14.3.0",
+		"@wordpress/element": "^6.3.0",
+		"@wordpress/escape-html": "^3.3.0",
+		"@wordpress/hooks": "^4.3.0",
+		"@wordpress/html-entities": "^4.3.0",
+		"@wordpress/i18n": "^5.3.0",
+		"@wordpress/icons": "^10.3.0",
+		"@wordpress/keyboard-shortcuts": "^5.3.0",
+		"@wordpress/keycodes": "^4.3.0",
+		"@wordpress/notices": "^5.3.0",
+		"@wordpress/patterns": "^2.3.0",
+		"@wordpress/plugins": "^7.3.0",
+		"@wordpress/preferences": "^4.3.0",
+		"@wordpress/primitives": "^4.3.0",
+		"@wordpress/priority-queue": "^3.3.0",
+		"@wordpress/private-apis": "^1.3.0",
+		"@wordpress/reusable-blocks": "^5.3.0",
+		"@wordpress/router": "^1.3.0",
+		"@wordpress/style-engine": "^2.3.0",
+		"@wordpress/url": "^4.3.0",
+		"@wordpress/viewport": "^6.3.0",
+		"@wordpress/widgets": "^4.3.0",
+		"@wordpress/wordcount": "^4.3.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.9.2",
@@ -82,5 +82,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "66d3bf12e67d16deddc4b4a9ec42e1d0bed3479a"
+	"gitHead": "122867d355ca4edc63d3a3bbd9411d3a2e1458df"
 }

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/{add-new-page → add-new-post}/index.js

@@ -9,35 +9,53 @@ import {
 	TextControl,
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useRegistry, useSelect } 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 );
+export default function AddNewPostModal( { postType, onSave, onClose } ) {
+	const labels = useSelect(
+		( select ) => select( coreStore ).getPostType( postType )?.labels,
+		[ postType ]
+	);
+	const [ isCreatingPost, setIsCreatingPost ] = useState( false );
 	const [ title, setTitle ] = useState( '' );
 
 	const { saveEntityRecord } = useDispatch( coreStore );
 	const { createErrorNotice, createSuccessNotice } =
 		useDispatch( noticesStore );
+	const { resolveSelect } = useRegistry();
 
-	async function createPage( event ) {
+	async function createPost( event ) {
 		event.preventDefault();
 
-		if ( isCreatingPage ) {
+		if ( isCreatingPost ) {
 			return;
 		}
-		setIsCreatingPage( true );
+		setIsCreatingPost( true );
 		try {
+			const postTypeObject =
+				await resolveSelect( coreStore ).getPostType( postType );
 			const newPage = await saveEntityRecord(
 				'postType',
-				'page',
+				postType,
 				{
 					status: 'draft',
 					title,
 					slug: title || __( 'No title' ),
+					content:
+						!! postTypeObject.template &&
+						postTypeObject.template.length
+							? serialize(
+									synchronizeBlocksWithTemplate(
+										[],
+										postTypeObject.template
+									)
+							  )
+							: undefined,
 				},
 				{ throwOnError: true }
 			);
@@ -46,35 +64,41 @@ export default function AddNewPageModal( { onSave, onClose } ) {
 
 			createSuccessNotice(
 				sprintf(
-					// translators: %s: Title of the created template e.g: "Category".
+					// translators: %s: Title of the created post e.g: "Hello world".
 					__( '"%s" successfully created.' ),
 					decodeEntities( newPage.title?.rendered || title )
 				),
-				{
-					type: 'snackbar',
-				}
+				{ type: 'snackbar' }
 			);
 		} catch ( error ) {
 			const errorMessage =
 				error.message && error.code !== 'unknown_error'
 					? error.message
-					: __( 'An error occurred while creating the page.' );
+					: __( 'An error occurred while creating the item.' );
 
 			createErrorNotice( errorMessage, {
 				type: 'snackbar',
 			} );
 		} finally {
-			setIsCreatingPage( false );
+			setIsCreatingPost( false );
 		}
 	}
 
 	return (
-		<Modal title={ __( 'Draft a new page' ) } onRequestClose={ onClose }>
-			<form onSubmit={ createPage }>
+		<Modal
+			title={
+				// translators: %s: post type singular_name label e.g: "Page".
+				sprintf( __( 'Draft new: %s' ), labels?.singular_name )
+			}
+			onRequestClose={ onClose }
+			focusOnMount="firstContentElement"
+			size="small"
+		>
+			<form onSubmit={ createPost }>
 				<VStack spacing={ 3 }>
 					<TextControl
 						__next40pxDefaultSize
-						label={ __( 'Page title' ) }
+						label={ __( 'Title' ) }
 						onChange={ setTitle }
 						placeholder={ __( 'No title' ) }
 						value={ title }
@@ -91,8 +115,8 @@ export default function AddNewPageModal( { onSave, onClose } ) {
 							__next40pxDefaultSize
 							variant="primary"
 							type="submit"
-							isBusy={ isCreatingPage }
-							aria-disabled={ isCreatingPage }
+							isBusy={ isCreatingPost }
+							aria-disabled={ isCreatingPost }
 						>
 							{ __( 'Create draft' ) }
 						</Button>

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/block-editor/use-site-editor-settings.js

@@ -114,35 +114,40 @@ function useNavigateToPreviousEntityRecord() {
 
 export function useSpecificEditorSettings() {
 	const onNavigateToEntityRecord = useNavigateToEntityRecord();
-	const { templateSlug, canvasMode, settings, postWithTemplate } = useSelect(
-		( select ) => {
-			const {
-				getEditedPostType,
-				getEditedPostId,
-				getEditedPostContext,
-				getCanvasMode,
-				getSettings,
-			} = unlock( select( editSiteStore ) );
-			const { getEditedEntityRecord } = select( coreStore );
-			const usedPostType = getEditedPostType();
-			const usedPostId = getEditedPostId();
-			const _record = getEditedEntityRecord(
-				'postType',
-				usedPostType,
-				usedPostId
-			);
-			const _context = getEditedPostContext();
-			return {
-				templateSlug: _record.slug,
-				canvasMode: getCanvasMode(),
-				settings: getSettings(),
-				postWithTemplate: _context?.postId,
-			};
-		},
-		[]
-	);
+	const {
+		templateSlug,
+		canvasMode,
+		settings,
+		shouldUseTemplateAsDefaultRenderingMode,
+	} = useSelect( ( select ) => {
+		const {
+			getEditedPostType,
+			getEditedPostId,
+			getEditedPostContext,
+			getCanvasMode,
+			getSettings,
+		} = unlock( select( editSiteStore ) );
+		const { getEditedEntityRecord } = select( coreStore );
+		const usedPostType = getEditedPostType();
+		const usedPostId = getEditedPostId();
+		const _record = getEditedEntityRecord(
+			'postType',
+			usedPostType,
+			usedPostId
+		);
+		const _context = getEditedPostContext();
+		return {
+			templateSlug: _record.slug,
+			canvasMode: getCanvasMode(),
+			settings: getSettings(),
+			// TODO: The `postType` check should be removed when the default rendering mode per post type is merged.
+			// @see https://github.com/WordPress/gutenberg/pull/62304/
+			shouldUseTemplateAsDefaultRenderingMode:
+				_context?.postId && _context?.postType !== 'post',
+		};
+	}, [] );
 	const archiveLabels = useArchiveLabel( templateSlug );
-	const defaultRenderingMode = postWithTemplate
+	const defaultRenderingMode = shouldUseTemplateAsDefaultRenderingMode
 		? 'template-locked'
 		: 'post-only';
 	const onNavigateToPreviousEntityRecord =

package/src/components/editor/index.js

@@ -36,20 +36,24 @@ 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';
+import SavePanel from '../save-panel';
 import SiteEditorMoreMenu from '../more-menu';
 import SiteIcon from '../site-icon';
 import useEditorIframeProps from '../block-editor/use-editor-iframe-props';
 import useEditorTitle from './use-editor-title';
+import { useIsSiteEditorLoading } from '../layout/hooks';
 
 const { Editor, BackButton } = unlock( editorPrivateApis );
-const { useHistory } = unlock( routerPrivateApis );
+const { useHistory, useLocation } = unlock( routerPrivateApis );
 const { BlockKeyboardShortcuts } = unlock( blockLibraryPrivateApis );
 
-export default function EditSiteEditor( { isLoading } ) {
+export default function EditSiteEditor( { isPostsList = false } ) {
+	const { params } = useLocation();
+	const isLoading = useIsSiteEditorLoading();
 	const {
 		editedPostType,
 		editedPostId,
@@ -63,6 +67,7 @@ export default function EditSiteEditor( { isLoading } ) {
 		currentPostIsTrashed,
 	} = useSelect( ( select ) => {
 		const {
+			getEditorCanvasContainerView,
 			getEditedPostContext,
 			getCanvasMode,
 			isPage,
@@ -84,9 +89,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 +113,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 +174,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 (
@@ -198,12 +203,10 @@ export default function EditSiteEditor( { isLoading } ) {
 					customSaveButton={
 						_isPreviewingTheme && <SaveButton size="compact" />
 					}
+					customSavePanel={ _isPreviewingTheme && <SavePanel /> }
 					forceDisableBlockTools={ ! hasDefaultEditorCanvasView }
-					title={
-						! hasDefaultEditorCanvasView
-							? getEditorCanvasContainerTitle( editorCanvasView )
-							: undefined
-					}
+					title={ title }
+					icon={ icon }
 					iframeProps={ iframeProps }
 					onActionPerformed={ onActionPerformed }
 					extraSidebarPanels={
@@ -217,9 +220,20 @@ export default function EditSiteEditor( { isLoading } ) {
 									<Button
 										label={ __( 'Open Navigation' ) }
 										className="edit-site-layout__view-mode-toggle"
-										onClick={ () =>
-											setCanvasMode( 'view' )
-										}
+										onClick={ () => {
+											setCanvasMode( 'view' );
+											// TODO: this is a temporary solution to navigate to the posts list if we are
+											// come here through `posts list` and are in focus mode editing a template, template part etc..
+											if (
+												isPostsList &&
+												params?.focusMode
+											) {
+												history.push( {
+													page: 'gutenberg-posts-dashboard',
+													postType: 'post',
+												} );
+											}
+										} }
 									>
 										<SiteIcon className="edit-site-layout__view-mode-toggle-icon" />
 									</Button>

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/background-panel.js

@@ -45,13 +45,6 @@ export default function BackgroundPanel() {
 	const _links = useGlobalStyleLinks();
 	const [ settings ] = useGlobalSetting( '' );
 
-	const defaultControls = {
-		backgroundImage: true,
-		backgroundSize:
-			hasBackgroundImageValue( style ) ||
-			hasBackgroundImageValue( inheritedStyle ),
-	};
-
 	return (
 		<StylesBackgroundPanel
 			inheritedValue={ inheritedStyle }
@@ -59,7 +52,6 @@ export default function BackgroundPanel() {
 			onChange={ setStyle }
 			settings={ settings }
 			defaultValues={ BACKGROUND_DEFAULT_VALUES }
-			defaultControls={ defaultControls }
 			themeFileURIs={ _links?.[ 'wp:theme-file' ] }
 		/>
 	);