@wordpress/edit-site 6.2.0 → 6.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "6.2.0",
+	"version": "6.4.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.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",
+		"@wordpress/a11y": "^4.4.0",
+		"@wordpress/api-fetch": "^7.4.0",
+		"@wordpress/blob": "^4.4.0",
+		"@wordpress/block-editor": "^13.4.0",
+		"@wordpress/block-library": "^9.4.0",
+		"@wordpress/blocks": "^13.4.0",
+		"@wordpress/commands": "^1.4.0",
+		"@wordpress/components": "^28.4.0",
+		"@wordpress/compose": "^7.4.0",
+		"@wordpress/core-commands": "^1.4.0",
+		"@wordpress/core-data": "^7.4.0",
+		"@wordpress/data": "^10.4.0",
+		"@wordpress/dataviews": "^4.0.0",
+		"@wordpress/date": "^5.4.0",
+		"@wordpress/deprecated": "^4.4.0",
+		"@wordpress/dom": "^4.4.0",
+		"@wordpress/editor": "^14.4.0",
+		"@wordpress/element": "^6.4.0",
+		"@wordpress/escape-html": "^3.4.0",
+		"@wordpress/hooks": "^4.4.0",
+		"@wordpress/html-entities": "^4.4.0",
+		"@wordpress/i18n": "^5.4.0",
+		"@wordpress/icons": "^10.4.0",
+		"@wordpress/keyboard-shortcuts": "^5.4.0",
+		"@wordpress/keycodes": "^4.4.0",
+		"@wordpress/notices": "^5.4.0",
+		"@wordpress/patterns": "^2.4.0",
+		"@wordpress/plugins": "^7.4.0",
+		"@wordpress/preferences": "^4.4.0",
+		"@wordpress/primitives": "^4.4.0",
+		"@wordpress/priority-queue": "^3.4.0",
+		"@wordpress/private-apis": "^1.4.0",
+		"@wordpress/reusable-blocks": "^5.4.0",
+		"@wordpress/router": "^1.4.0",
+		"@wordpress/style-engine": "^2.4.0",
+		"@wordpress/url": "^4.4.0",
+		"@wordpress/viewport": "^6.4.0",
+		"@wordpress/widgets": "^4.4.0",
+		"@wordpress/wordcount": "^4.4.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.9.2",
@@ -82,5 +82,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "aa5b14bb5bdbb8d8a02914e154c3bc1c2f18ace6"
+	"gitHead": "363edb39b8dda8727f652e42cbb8497732693ed2"
 }

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

@@ -56,8 +56,14 @@ export default function AddNewPattern() {
 			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' ),
+			canCreatePattern: canUser( 'create', {
+				kind: 'postType',
+				name: PATTERN_TYPES.user,
+			} ),
+			canCreateTemplatePart: canUser( 'create', {
+				kind: 'postType',
+				name: TEMPLATE_PART_POST_TYPE,
+			} ),
 		};
 	}, [] );
 

package/src/components/{add-new-page → add-new-post}/index.js

@@ -9,15 +9,19 @@ import {
 	TextControl,
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
-import { useDispatch, useRegistry } 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 );
@@ -25,29 +29,30 @@ export default function AddNewPageModal( { onSave, onClose } ) {
 		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 pagePostType =
-				await resolveSelect( coreStore ).getPostType( 'page' );
+			const postTypeObject =
+				await resolveSelect( coreStore ).getPostType( postType );
 			const newPage = await saveEntityRecord(
 				'postType',
-				'page',
+				postType,
 				{
 					status: 'draft',
 					title,
 					slug: title || __( 'No title' ),
 					content:
-						!! pagePostType.template && pagePostType.template.length
+						!! postTypeObject.template &&
+						postTypeObject.template.length
 							? serialize(
 									synchronizeBlocksWithTemplate(
 										[],
-										pagePostType.template
+										postTypeObject.template
 									)
 							  )
 							: undefined,
@@ -59,40 +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' ) }
+			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={ createPage }>
+			<form onSubmit={ createPost }>
 				<VStack spacing={ 3 }>
 					<TextControl
 						__next40pxDefaultSize
-						label={ __( 'Page title' ) }
+						label={ __( 'Title' ) }
 						onChange={ setTitle }
 						placeholder={ __( 'No title' ) }
 						value={ title }
@@ -109,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/add-new-template/index.js

@@ -19,6 +19,7 @@ import { decodeEntities } from '@wordpress/html-entities';
 import { useState, memo } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
+import { useViewportMatch } from '@wordpress/compose';
 import {
 	archive,
 	blockMeta,
@@ -161,6 +162,8 @@ function NewTemplateModal( { onClose } ) {
 	const { createErrorNotice, createSuccessNotice } =
 		useDispatch( noticesStore );
 
+	const isMobile = useViewportMatch( 'medium', '<' );
+
 	const { homeUrl } = useSelect( ( select ) => {
 		const {
 			getUnstableBase, // Site index.
@@ -266,7 +269,7 @@ function NewTemplateModal( { onClose } ) {
 		>
 			{ modalContent === modalContentMap.templatesList && (
 				<Grid
-					columns={ 3 }
+					columns={ isMobile ? 2 : 3 }
 					gap={ 4 }
 					align="flex-start"
 					justify="center"

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

@@ -97,13 +97,12 @@
 }
 
 .edit-site-add-new-template__modal {
-	max-width: $grid-unit-80 * 13;
-	width: calc(100% - #{$grid-unit-80});
-	margin-top: $grid-unit-80;
-	max-height: calc(100% - #{$grid-unit-80 * 2});
 
 	@include break-large() {
+		max-width: $grid-unit-80 * 13;
+		margin-top: $grid-unit-80;
 		width: calc(100% - #{$grid-unit-80 * 2});
+		max-height: calc(100% - #{$grid-unit-80 * 2});
 	}
 
 	.edit-site-add-new-template__template-button,
@@ -175,8 +174,7 @@
 
 	.edit-site-add-new-template__custom-template-button,
 	.edit-site-add-new-template__template-list__prompt {
-		grid-column-start: 1;
-		grid-column-end: 4;
+		grid-column: 1 / -1;
 	}
 }
 

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

@@ -3,7 +3,6 @@
  */
 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';
@@ -19,78 +18,6 @@ import { FOCUSABLE_ENTITIES } from '../../utils/constants';
 const { useBlockEditorSettings } = unlock( editorPrivateApis );
 const { useLocation, useHistory } = unlock( routerPrivateApis );
 
-function useArchiveLabel( templateSlug ) {
-	const taxonomyMatches = templateSlug?.match(
-		/^(category|tag|taxonomy-([^-]+))$|^(((category|tag)|taxonomy-([^-]+))-(.+))$/
-	);
-	let taxonomy;
-	let term;
-	let isAuthor = false;
-	let authorSlug;
-	if ( taxonomyMatches ) {
-		// If is for a all taxonomies of a type
-		if ( taxonomyMatches[ 1 ] ) {
-			taxonomy = taxonomyMatches[ 2 ]
-				? taxonomyMatches[ 2 ]
-				: taxonomyMatches[ 1 ];
-		}
-		// If is for a all taxonomies of a type
-		else if ( taxonomyMatches[ 3 ] ) {
-			taxonomy = taxonomyMatches[ 6 ]
-				? taxonomyMatches[ 6 ]
-				: taxonomyMatches[ 4 ];
-			term = taxonomyMatches[ 7 ];
-		}
-		taxonomy = taxonomy === 'tag' ? 'post_tag' : taxonomy;
-
-		//getTaxonomy( 'category' );
-		//wp.data.select('core').getEntityRecords( 'taxonomy', 'category', {slug: 'newcat'} );
-	} else {
-		const authorMatches = templateSlug?.match( /^(author)$|^author-(.+)$/ );
-		if ( authorMatches ) {
-			isAuthor = true;
-			if ( authorMatches[ 2 ] ) {
-				authorSlug = authorMatches[ 2 ];
-			}
-		}
-	}
-	return useSelect(
-		( select ) => {
-			const { getEntityRecords, getTaxonomy, getAuthors } =
-				select( coreStore );
-			let archiveTypeLabel;
-			let archiveNameLabel;
-			if ( taxonomy ) {
-				archiveTypeLabel =
-					getTaxonomy( taxonomy )?.labels?.singular_name;
-			}
-			if ( term ) {
-				const records = getEntityRecords( 'taxonomy', taxonomy, {
-					slug: term,
-					per_page: 1,
-				} );
-				if ( records && records[ 0 ] ) {
-					archiveNameLabel = records[ 0 ].name;
-				}
-			}
-			if ( isAuthor ) {
-				archiveTypeLabel = 'Author';
-				if ( authorSlug ) {
-					const authorRecords = getAuthors( { slug: authorSlug } );
-					if ( authorRecords && authorRecords[ 0 ] ) {
-						archiveNameLabel = authorRecords[ 0 ].name;
-					}
-				}
-			}
-			return {
-				archiveTypeLabel,
-				archiveNameLabel,
-			};
-		},
-		[ authorSlug, isAuthor, taxonomy, term ]
-	);
-}
-
 function useNavigateToPreviousEntityRecord() {
 	const location = useLocation();
 	const previousLocation = usePrevious( location );
@@ -114,35 +41,22 @@ 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 { canvasMode, settings, shouldUseTemplateAsDefaultRenderingMode } =
+		useSelect( ( select ) => {
+			const { getEditedPostContext, getCanvasMode, getSettings } = unlock(
+				select( editSiteStore )
 			);
 			const _context = getEditedPostContext();
 			return {
-				templateSlug: _record.slug,
 				canvasMode: getCanvasMode(),
 				settings: getSettings(),
-				postWithTemplate: _context?.postId,
+				// 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 =
@@ -157,9 +71,6 @@ export function useSpecificEditorSettings() {
 			defaultRenderingMode,
 			onNavigateToEntityRecord,
 			onNavigateToPreviousEntityRecord,
-			// I wonder if they should be set in the post editor too
-			__experimentalArchiveTitleTypeLabel: archiveLabels.archiveTypeLabel,
-			__experimentalArchiveTitleNameLabel: archiveLabels.archiveNameLabel,
 			__unstableIsPreviewMode: canvasMode === 'view',
 		};
 	}, [
@@ -168,8 +79,6 @@ export function useSpecificEditorSettings() {
 		defaultRenderingMode,
 		onNavigateToEntityRecord,
 		onNavigateToPreviousEntityRecord,
-		archiveLabels.archiveTypeLabel,
-		archiveLabels.archiveNameLabel,
 	] );
 
 	return defaultEditorSettings;

package/src/components/editor/index.js

@@ -40,16 +40,20 @@ import {
 	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,
@@ -199,6 +203,7 @@ export default function EditSiteEditor( { isLoading } ) {
 					customSaveButton={
 						_isPreviewingTheme && <SaveButton size="compact" />
 					}
+					customSavePanel={ _isPreviewingTheme && <SavePanel /> }
 					forceDisableBlockTools={ ! hasDefaultEditorCanvasView }
 					title={ title }
 					icon={ icon }
@@ -215,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/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' ] }
 		/>
 	);

package/src/components/global-styles/block-preview-panel.js

@@ -32,8 +32,15 @@ const BlockPreviewPanel = ( { name, variation = '' } ) => {
 		return getBlockFromExample( name, example );
 	}, [ name, blockExample, variation ] );
 
-	const viewportWidth = blockExample?.viewportWidth ?? null;
-	const previewHeight = 150;
+	const viewportWidth = blockExample?.viewportWidth ?? 500;
+	// Same as height of InserterPreviewPanel.
+	const previewHeight = 144;
+	const sidebarWidth = 235;
+	const scale = sidebarWidth / viewportWidth;
+	const minHeight =
+		scale !== 0 && scale < 1 && previewHeight
+			? previewHeight / scale
+			: previewHeight;
 
 	if ( ! blockExample ) {
 		return null;
@@ -49,16 +56,22 @@ const BlockPreviewPanel = ( { name, variation = '' } ) => {
 					blocks={ blocks }
 					viewportWidth={ viewportWidth }
 					minHeight={ previewHeight }
-					additionalStyles={ [
-						{
-							css: `
+					additionalStyles={
+						//We want this CSS to be in sync with the one in InserterPreviewPanel.
+						[
+							{
+								css: `
 								body{
-									min-height:${ previewHeight }px;
-									display:flex;align-items:center;justify-content:center;
+									padding: 24px;
+									min-height:${ Math.round( minHeight ) }px;
+									display:flex;
+									align-items:center;
 								}
+								.is-root-container { width: 100%; }
 							`,
-						},
-					] }
+							},
+						]
+					}
 				/>
 			</div>
 		</Spacer>