@wordpress/edit-site 5.14.0 → 5.15.0

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

@@ -88,7 +88,7 @@ function EditorCanvas( { enableResizing, settings, children, ...props } ) {
 					enableResizing ? 'min-height:0!important;' : ''
 				}}body{position:relative; ${
 					canvasMode === 'view'
-						? 'cursor: pointer; height: 100vh'
+						? 'cursor: pointer; min-height: 100vh;'
 						: ''
 				}}}`
 			}</style>

package/src/components/block-editor/index.js

@@ -1,7 +1,3 @@
-/**
- * External dependencies
- */
-
 /**
  * WordPress dependencies
  */

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

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { useMemo } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
 /**
@@ -11,16 +11,73 @@ import { store as editSiteStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 import inserterMediaCategories from './inserter-media-categories';
 
-export default function useSiteEditorSettings( templateType ) {
-	const { storedSettings, canvasMode } = useSelect( ( select ) => {
-		const { getSettings, getCanvasMode } = unlock(
-			select( editSiteStore )
-		);
-		return {
-			storedSettings: getSettings(),
-			canvasMode: getCanvasMode(),
-		};
-	}, [] );
+function useArchiveLabel( templateSlug ) {
+	const taxonomyMatches = templateSlug?.match(
+		/^(category|tag|taxonomy-([^-]+))$|^(((category|tag)|taxonomy-([^-]+))-(.+))$/
+	);
+	let taxonomy;
+	let term;
+	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'} );
+	}
+	return useSelect(
+		( select ) => {
+			const { getEntityRecords, getTaxonomy } = 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;
+				}
+			}
+			return {
+				archiveTypeLabel,
+				archiveNameLabel,
+			};
+		},
+		[ taxonomy, term ]
+	);
+}
+
+export default function useSiteEditorSettings() {
+	const { setIsInserterOpened } = useDispatch( editSiteStore );
+	const { storedSettings, canvasMode, templateType } = useSelect(
+		( select ) => {
+			const { getSettings, getCanvasMode, getEditedPostType } = unlock(
+				select( editSiteStore )
+			);
+			return {
+				storedSettings: getSettings( setIsInserterOpened ),
+				canvasMode: getCanvasMode(),
+				templateType: getEditedPostType(),
+			};
+		},
+		[ setIsInserterOpened ]
+	);
 
 	const settingsBlockPatterns =
 		storedSettings.__experimentalAdditionalBlockPatterns ?? // WP 6.0
@@ -29,14 +86,27 @@ export default function useSiteEditorSettings( templateType ) {
 		storedSettings.__experimentalAdditionalBlockPatternCategories ?? // WP 6.0
 		storedSettings.__experimentalBlockPatternCategories; // WP 5.9
 
-	const { restBlockPatterns, restBlockPatternCategories } = useSelect(
-		( select ) => ( {
-			restBlockPatterns: select( coreStore ).getBlockPatterns(),
-			restBlockPatternCategories:
-				select( coreStore ).getBlockPatternCategories(),
-		} ),
-		[]
-	);
+	const { restBlockPatterns, restBlockPatternCategories, templateSlug } =
+		useSelect( ( select ) => {
+			const { getEditedPostType, getEditedPostId } =
+				select( editSiteStore );
+			const { getEditedEntityRecord } = select( coreStore );
+			const usedPostType = getEditedPostType();
+			const usedPostId = getEditedPostId();
+			const _record = getEditedEntityRecord(
+				'postType',
+				usedPostType,
+				usedPostId
+			);
+			return {
+				restBlockPatterns: select( coreStore ).getBlockPatterns(),
+				restBlockPatternCategories:
+					select( coreStore ).getBlockPatternCategories(),
+				templateSlug: _record.slug,
+			};
+		}, [] );
+	const archiveLabels = useArchiveLabel( templateSlug );
+
 	const blockPatterns = useMemo(
 		() =>
 			[
@@ -82,6 +152,15 @@ export default function useSiteEditorSettings( templateType ) {
 			__experimentalBlockPatterns: blockPatterns,
 			__experimentalBlockPatternCategories: blockPatternCategories,
 			focusMode: canvasMode === 'view' && focusMode ? false : focusMode,
+			__experimentalArchiveTitleTypeLabel: archiveLabels.archiveTypeLabel,
+			__experimentalArchiveTitleNameLabel: archiveLabels.archiveNameLabel,
 		};
-	}, [ storedSettings, blockPatterns, blockPatternCategories, canvasMode ] );
+	}, [
+		storedSettings,
+		blockPatterns,
+		blockPatternCategories,
+		canvasMode,
+		archiveLabels.archiveTypeLabel,
+		archiveLabels.archiveNameLabel,
+	] );
 }

package/src/components/canvas-spinner/style.scss

@@ -2,10 +2,24 @@
 	width: 100%;
 	height: 100%;
 	display: flex;
+	opacity: 0;
 	align-items: center;
 	justify-content: center;
 
+	animation: 0.5s ease 1s edit-site-canvas-spinner__fade-in-animation;
+	animation-fill-mode: forwards;
+	@include reduce-motion("animation");
+
 	circle {
 		stroke: rgba($black, 0.3);
 	}
 }
+
+@keyframes edit-site-canvas-spinner__fade-in-animation {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}

package/src/components/code-editor/index.js

@@ -1,50 +1,56 @@
+/**
+ * External dependencies
+ */
+import Textarea from 'react-autosize-textarea';
+
 /**
  * WordPress dependencies
  */
-import { parse, __unstableSerializeAndClean } from '@wordpress/blocks';
-import { useEntityBlockEditor, useEntityProp } from '@wordpress/core-data';
+import { __unstableSerializeAndClean } from '@wordpress/blocks';
+import { store as coreStore } from '@wordpress/core-data';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import { __ } from '@wordpress/i18n';
-import { Button } from '@wordpress/components';
+import { Button, VisuallyHidden } from '@wordpress/components';
+import { useMemo } from '@wordpress/element';
+import { useInstanceId } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import { store as editSiteStore } from '../../store';
-import CodeEditorTextArea from './code-editor-text-area';
 
 export default function CodeEditor() {
-	const { templateType, shortcut } = useSelect( ( select ) => {
-		const { getEditedPostType } = select( editSiteStore );
+	const instanceId = useInstanceId( CodeEditor );
+	const { shortcut, content, blocks, type, id } = useSelect( ( select ) => {
+		const { getEditedEntityRecord } = select( coreStore );
+		const { getEditedPostType, getEditedPostId } = select( editSiteStore );
 		const { getShortcutRepresentation } = select( keyboardShortcutsStore );
+		const _type = getEditedPostType();
+		const _id = getEditedPostId();
+		const editedRecord = getEditedEntityRecord( 'postType', _type, _id );
+
 		return {
-			templateType: getEditedPostType(),
 			shortcut: getShortcutRepresentation( 'core/edit-site/toggle-mode' ),
+			content: editedRecord?.content,
+			blocks: editedRecord?.blocks,
+			type: _type,
+			id: _id,
 		};
 	}, [] );
-	const [ contentStructure, setContent ] = useEntityProp(
-		'postType',
-		templateType,
-		'content'
-	);
-	const [ blocks, , onChange ] = useEntityBlockEditor(
-		'postType',
-		templateType
-	);
-
+	const { editEntityRecord } = useDispatch( coreStore );
 	// Replicates the logic found in getEditedPostContent().
-	let content;
-	if ( contentStructure instanceof Function ) {
-		content = contentStructure( { blocks } );
-	} else if ( blocks ) {
-		// If we have parsed blocks already, they should be our source of truth.
-		// Parsing applies block deprecations and legacy block conversions that
-		// unparsed content will not have.
-		content = __unstableSerializeAndClean( blocks );
-	} else {
-		content = contentStructure;
-	}
+	const realContent = useMemo( () => {
+		if ( content instanceof Function ) {
+			return content( { blocks } );
+		} else if ( blocks ) {
+			// If we have parsed blocks already, they should be our source of truth.
+			// Parsing applies block deprecations and legacy block conversions that
+			// unparsed content will not have.
+			return __unstableSerializeAndClean( blocks );
+		}
+		return content;
+	}, [ content, blocks ] );
 
 	const { switchEditorMode } = useDispatch( editSiteStore );
 	return (
@@ -60,14 +66,26 @@ export default function CodeEditor() {
 				</Button>
 			</div>
 			<div className="edit-site-code-editor__body">
-				<CodeEditorTextArea
-					value={ content }
-					onChange={ ( newContent ) => {
-						onChange( parse( newContent ), {
+				<VisuallyHidden
+					as="label"
+					htmlFor={ `code-editor-text-area-${ instanceId }` }
+				>
+					{ __( 'Type text or HTML' ) }
+				</VisuallyHidden>
+				<Textarea
+					autoComplete="off"
+					dir="auto"
+					value={ realContent }
+					onChange={ ( event ) => {
+						editEntityRecord( 'postType', type, id, {
+							content: event.target.value,
+							blocks: undefined,
 							selection: undefined,
 						} );
 					} }
-					onInput={ setContent }
+					className="edit-site-code-editor-text-area"
+					id={ `code-editor-text-area-${ instanceId }` }
+					placeholder={ __( 'Start writing with text or HTML' ) }
 				/>
 			</div>
 		</div>

package/src/components/create-pattern-modal/index.js

@@ -14,6 +14,7 @@ import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
 import { store as noticesStore } from '@wordpress/notices';
 import { useDispatch } from '@wordpress/data';
+import { serialize } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -21,9 +22,11 @@ import { useDispatch } from '@wordpress/data';
 import { SYNC_TYPES, USER_PATTERN_CATEGORY } from '../page-patterns/utils';
 
 export default function CreatePatternModal( {
+	blocks = [],
 	closeModal,
 	onCreate,
 	onError,
+	title,
 } ) {
 	const [ name, setName ] = useState( '' );
 	const [ syncType, setSyncType ] = useState( SYNC_TYPES.unsynced );
@@ -52,7 +55,7 @@ export default function CreatePatternModal( {
 				'wp_block',
 				{
 					title: name || __( 'Untitled Pattern' ),
-					content: '',
+					content: blocks?.length ? serialize( blocks ) : '',
 					status: 'publish',
 					meta:
 						syncType === SYNC_TYPES.unsynced
@@ -76,7 +79,7 @@ export default function CreatePatternModal( {
 
 	return (
 		<Modal
-			title={ __( 'Create pattern' ) }
+			title={ title || __( 'Create pattern' ) }
 			onRequestClose={ closeModal }
 			overlayClassName="edit-site-create-pattern-modal"
 		>

package/src/components/editor/index.js

@@ -70,8 +70,8 @@ const blockRemovalRules = {
 	'core/post-content': __(
 		'Post Content displays the content of a post or page.'
 	),
-	'core/footnotes': __(
-		'The Footnotes block displays all footnotes found in the content. Note that any footnotes in the content will persist after removing this block.'
+	'core/post-template': __(
+		'Post Template displays each post or page in a Query Loop.'
 	),
 };
 

package/src/components/header-edit-mode/document-actions/style.scss

@@ -40,6 +40,10 @@
 	overflow: hidden;
 	grid-column: 2 / 3;
 
+	.block-editor-block-icon {
+		min-width: $grid-unit-30;
+	}
+
 	h1 {
 		white-space: nowrap;
 		overflow: hidden;

package/src/components/header-edit-mode/index.js

@@ -66,6 +66,7 @@ export default function HeaderEditMode() {
 		homeUrl,
 		showIconLabels,
 		editorCanvasView,
+		hasFixedToolbar,
 	} = useSelect( ( select ) => {
 		const {
 			__experimentalGetPreviewDeviceType,
@@ -83,6 +84,8 @@ export default function HeaderEditMode() {
 			getUnstableBase, // Site index.
 		} = select( coreStore );
 
+		const { get: getPreference } = select( preferencesStore );
+
 		return {
 			deviceType: __experimentalGetPreviewDeviceType(),
 			templateType: postType,
@@ -94,23 +97,24 @@ export default function HeaderEditMode() {
 			isVisualMode: getEditorMode() === 'visual',
 			blockEditorMode: __unstableGetEditorMode(),
 			homeUrl: getUnstableBase()?.home,
-			showIconLabels: select( preferencesStore ).get(
-				'core/edit-site',
+			showIconLabels: getPreference(
+				editSiteStore.name,
 				'showIconLabels'
 			),
 			editorCanvasView: unlock(
 				select( editSiteStore )
 			).getEditorCanvasContainerView(),
-			isDistractionFree: select( preferencesStore ).get(
-				'core/edit-site',
+			isDistractionFree: getPreference(
+				editSiteStore.name,
 				'distractionFree'
 			),
+			hasFixedToolbar: getPreference(
+				editSiteStore.name,
+				'fixedToolbar'
+			),
 		};
 	}, [] );
 
-	const { get: getPreference } = useSelect( preferencesStore );
-	const hasFixedToolbar = getPreference( editSiteStore.name, 'fixedToolbar' );
-
 	const {
 		__experimentalSetPreviewDeviceType: setPreviewDeviceType,
 		setIsInserterOpened,
@@ -319,21 +323,24 @@ export default function HeaderEditMode() {
 								setDeviceType={ setPreviewDeviceType }
 								label={ __( 'View' ) }
 							>
-								<MenuGroup>
-									<MenuItem
-										href={ homeUrl }
-										target="_blank"
-										icon={ external }
-									>
-										{ __( 'View site' ) }
-										<VisuallyHidden as="span">
-											{
-												/* translators: accessibility text */
-												__( '(opens in a new tab)' )
-											}
-										</VisuallyHidden>
-									</MenuItem>
-								</MenuGroup>
+								{ ( { onClose } ) => (
+									<MenuGroup>
+										<MenuItem
+											href={ homeUrl }
+											target="_blank"
+											icon={ external }
+											onClick={ onClose }
+										>
+											{ __( 'View site' ) }
+											<VisuallyHidden as="span">
+												{
+													/* translators: accessibility text */
+													__( '(opens in a new tab)' )
+												}
+											</VisuallyHidden>
+										</MenuItem>
+									</MenuGroup>
+								) }
 							</PreviewOptions>
 						</div>
 					) }

package/src/components/layout/index.js

@@ -121,6 +121,8 @@ export default function Layout() {
 	const [ fullResizer ] = useResizeObserver();
 	const [ isResizing ] = useState( false );
 	const isEditorLoading = useIsSiteEditorLoading();
+	const [ isResizableFrameOversized, setIsResizableFrameOversized ] =
+		useState( false );
 
 	// This determines which animation variant should apply to the header.
 	// There is also a `isDistractionFreeHovering` state that gets priority
@@ -218,6 +220,7 @@ export default function Layout() {
 							edit: { x: 0 },
 						} }
 						ref={ hubRef }
+						isTransparent={ isResizableFrameOversized }
 						className="edit-site-layout__hub"
 					/>
 
@@ -315,7 +318,13 @@ export default function Layout() {
 											}
 											initial={ false }
 											layout="position"
-											className="edit-site-layout__canvas"
+											className={ classnames(
+												'edit-site-layout__canvas',
+												{
+													'is-right-aligned':
+														isResizableFrameOversized,
+												}
+											) }
 											transition={ {
 												type: 'tween',
 												duration:
@@ -331,7 +340,12 @@ export default function Layout() {
 														! isEditorLoading
 													}
 													isFullWidth={ isEditing }
-													oversizedClassName="edit-site-layout__resizable-frame-oversized"
+													isOversized={
+														isResizableFrameOversized
+													}
+													setIsOversized={
+														setIsResizableFrameOversized
+													}
 													innerContentStyle={ {
 														background:
 															gradientValue ??

package/src/components/layout/style.scss

@@ -61,6 +61,7 @@
 .edit-site-layout__sidebar {
 	z-index: z-index(".edit-site-layout__sidebar");
 	width: 100vw;
+	flex-shrink: 0;
 
 	@include break-medium {
 		width: $nav-sidebar-width;
@@ -120,7 +121,7 @@
 	justify-content: center;
 	align-items: center;
 
-	&:has(.edit-site-layout__resizable-frame-oversized) {
+	&.is-right-aligned {
 		justify-content: flex-end;
 	}
 

package/src/components/page-actions/index.js

@@ -8,7 +8,7 @@ import { moreVertical } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import DeletePageMenuItem from './delete-page-menu-item';
+import TrashPageMenuItem from './trash-page-menu-item';
 
 export default function PageActions( {
 	postId,
@@ -25,7 +25,7 @@ export default function PageActions( {
 		>
 			{ () => (
 				<MenuGroup>
-					<DeletePageMenuItem
+					<TrashPageMenuItem
 						postId={ postId }
 						onRemove={ onRemove }
 					/>

package/src/components/page-actions/{delete-page-menu-item.js → trash-page-menu-item.js}

@@ -3,17 +3,12 @@
  */
 import { useDispatch, useSelect } from '@wordpress/data';
 import { decodeEntities } from '@wordpress/html-entities';
-import { useState } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
 import { __, sprintf } from '@wordpress/i18n';
-import {
-	MenuItem,
-	__experimentalConfirmDialog as ConfirmDialog,
-} from '@wordpress/components';
+import { MenuItem } from '@wordpress/components';
 import { store as noticesStore } from '@wordpress/notices';
 
-export default function DeletePageMenuItem( { postId, onRemove } ) {
-	const [ isModalOpen, setIsModalOpen ] = useState( false );
+export default function TrashPageMenuItem( { postId, onRemove } ) {
 	const { createSuccessNotice, createErrorNotice } =
 		useDispatch( noticesStore );
 	const { deleteEntityRecord } = useDispatch( coreStore );
@@ -34,12 +29,12 @@ export default function DeletePageMenuItem( { postId, onRemove } ) {
 			createSuccessNotice(
 				sprintf(
 					/* translators: The page's title. */
-					__( '"%s" deleted.' ),
+					__( '"%s" moved to the Trash.' ),
 					decodeEntities( page.title.rendered )
 				),
 				{
 					type: 'snackbar',
-					id: 'edit-site-page-removed',
+					id: 'edit-site-page-trashed',
 				}
 			);
 			onRemove?.();
@@ -47,26 +42,18 @@ export default function DeletePageMenuItem( { postId, onRemove } ) {
 			const errorMessage =
 				error.message && error.code !== 'unknown_error'
 					? error.message
-					: __( 'An error occurred while deleting the page.' );
+					: __(
+							'An error occurred while moving the page to the trash.'
+					  );
 
 			createErrorNotice( errorMessage, { type: 'snackbar' } );
-		} finally {
-			setIsModalOpen( false );
 		}
 	}
 	return (
 		<>
-			<MenuItem onClick={ () => setIsModalOpen( true ) } isDestructive>
-				{ __( 'Delete' ) }
+			<MenuItem onClick={ () => removePage() } isDestructive>
+				{ __( 'Move to Trash' ) }
 			</MenuItem>
-			<ConfirmDialog
-				isOpen={ isModalOpen }
-				onConfirm={ removePage }
-				onCancel={ () => setIsModalOpen( false ) }
-				confirmButtonText={ __( 'Delete' ) }
-			>
-				{ __( 'Are you sure you want to delete this page?' ) }
-			</ConfirmDialog>
 		</>
 	);
 }

package/src/components/page-content-focus-manager/disable-non-page-content-blocks.js

@@ -10,16 +10,22 @@ import { useEffect } from '@wordpress/element';
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
-import { PAGE_CONTENT_BLOCK_TYPES } from './constants';
 
 const { useBlockEditingMode } = unlock( blockEditorPrivateApis );
 
+const PAGE_CONTENT_BLOCK_TYPES = [
+	'core/post-title',
+	'core/post-featured-image',
+	'core/post-content',
+];
+
 /**
  * Component that when rendered, makes it so that the site editor allows only
  * page content to be edited.
  */
 export default function DisableNonPageContentBlocks() {
 	useDisableNonPageContentBlocks();
+	return null;
 }
 
 /**
@@ -43,8 +49,11 @@ export function useDisableNonPageContentBlocks() {
 
 const withDisableNonPageContentBlocks = createHigherOrderComponent(
 	( BlockEdit ) => ( props ) => {
-		const isContent = PAGE_CONTENT_BLOCK_TYPES.includes( props.name );
-		const mode = isContent ? 'contentOnly' : undefined;
+		const isDescendentOfQueryLoop = !! props.context.queryId;
+		const isPageContent =
+			PAGE_CONTENT_BLOCK_TYPES.includes( props.name ) &&
+			! isDescendentOfQueryLoop;
+		const mode = isPageContent ? 'contentOnly' : undefined;
 		useBlockEditingMode( mode );
 		return <BlockEdit { ...props } />;
 	},