@wordpress/edit-site 5.32.0 → 5.34.0

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

@@ -96,28 +96,6 @@
 	}
 }
 
-.edit-site-template-actions-loading-screen-modal {
-	backdrop-filter: none;
-	background-color: transparent;
-
-	&.is-full-screen {
-		background-color: $white;
-		box-shadow: 0 0 0 transparent;
-		min-width: 100%;
-		min-height: 100%;
-	}
-
-	&__content {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		height: 100%;
-		position: absolute;
-		left: 50%;
-		transform: translateX(-50%);
-	}
-}
-
 .edit-site-add-new-template__modal {
 	max-width: $grid-unit-80 * 13;
 	width: calc(100% - #{$grid-unit-80});

package/src/components/add-new-template/utils.js

@@ -14,6 +14,8 @@ import { blockMeta, post, archive } from '@wordpress/icons';
  */
 import { TEMPLATE_POST_TYPE } from '../../utils/constants';
 
+const EMPTY_OBJECT = {};
+
 /**
  * @typedef IHasNameAndId
  * @property {string|number} id   The entity's id.
@@ -99,13 +101,15 @@ const usePublicTaxonomies = () => {
 };
 
 function usePostTypeNeedsUniqueIdentifier( publicPostTypes ) {
-	const postTypeLabels = useMemo( () =>
-		publicPostTypes?.reduce( ( accumulator, { labels } ) => {
-			const singularName = labels.singular_name.toLowerCase();
-			accumulator[ singularName ] =
-				( accumulator[ singularName ] || 0 ) + 1;
-			return accumulator;
-		}, {} )
+	const postTypeLabels = useMemo(
+		() =>
+			publicPostTypes?.reduce( ( accumulator, { labels } ) => {
+				const singularName = labels.singular_name.toLowerCase();
+				accumulator[ singularName ] =
+					( accumulator[ singularName ] || 0 ) + 1;
+				return accumulator;
+			}, {} ),
+		[ publicPostTypes ]
 	);
 	return useCallback(
 		( { labels, slug } ) => {
@@ -622,14 +626,14 @@ const useTemplatesToExclude = (
 const useEntitiesInfo = (
 	entityName,
 	templatePrefixes,
-	additionalQueryParameters = {}
+	additionalQueryParameters = EMPTY_OBJECT
 ) => {
 	const recordsToExcludePerEntity = useTemplatesToExclude(
 		entityName,
 		templatePrefixes,
 		additionalQueryParameters
 	);
-	const entitiesInfo = useSelect(
+	const entitiesHasRecords = useSelect(
 		( select ) => {
 			return Object.keys( templatePrefixes || {} ).reduce(
 				( accumulator, slug ) => {
@@ -637,26 +641,42 @@ const useEntitiesInfo = (
 						recordsToExcludePerEntity?.[ slug ]?.map(
 							( { id } ) => id
 						) || [];
-					accumulator[ slug ] = {
-						hasEntities: !! select( coreStore ).getEntityRecords(
-							entityName,
-							slug,
-							{
-								per_page: 1,
-								_fields: 'id',
-								context: 'view',
-								exclude: existingEntitiesIds,
-								...additionalQueryParameters[ slug ],
-							}
-						)?.length,
-						existingEntitiesIds,
-					};
+					accumulator[ slug ] = !! select(
+						coreStore
+					).getEntityRecords( entityName, slug, {
+						per_page: 1,
+						_fields: 'id',
+						context: 'view',
+						exclude: existingEntitiesIds,
+						...additionalQueryParameters[ slug ],
+					} )?.length;
 					return accumulator;
 				},
 				{}
 			);
 		},
-		[ templatePrefixes, recordsToExcludePerEntity ]
+		[
+			templatePrefixes,
+			recordsToExcludePerEntity,
+			entityName,
+			additionalQueryParameters,
+		]
 	);
+	const entitiesInfo = useMemo( () => {
+		return Object.keys( templatePrefixes || {} ).reduce(
+			( accumulator, slug ) => {
+				const existingEntitiesIds =
+					recordsToExcludePerEntity?.[ slug ]?.map(
+						( { id } ) => id
+					) || [];
+				accumulator[ slug ] = {
+					hasEntities: entitiesHasRecords[ slug ],
+					existingEntitiesIds,
+				};
+				return accumulator;
+			},
+			{}
+		);
+	}, [ templatePrefixes, recordsToExcludePerEntity, entitiesHasRecords ] );
 	return entitiesInfo;
 };

package/src/components/async/index.js

@@ -0,0 +1,43 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useState, flushSync } from '@wordpress/element';
+import { createQueue } from '@wordpress/priority-queue';
+
+const blockPreviewQueue = createQueue();
+
+/**
+ * Renders a component at the next idle time.
+ * @param {*} props
+ */
+export function Async( { children, placeholder } ) {
+	const [ shouldRender, setShouldRender ] = useState( false );
+
+	// In the future, we could try to use startTransition here, but currently
+	// react will batch all transitions, which means all previews will be
+	// rendered at the same time.
+	// https://react.dev/reference/react/startTransition#caveats
+	// > If there are multiple ongoing Transitions, React currently batches them
+	// > together. This is a limitation that will likely be removed in a future
+	// > release.
+
+	useEffect( () => {
+		const context = {};
+		blockPreviewQueue.add( context, () => {
+			// Synchronously run all renders so it consumes timeRemaining.
+			// See https://github.com/WordPress/gutenberg/pull/48238
+			flushSync( () => {
+				setShouldRender( true );
+			} );
+		} );
+		return () => {
+			blockPreviewQueue.cancel( context );
+		};
+	}, [] );
+
+	if ( ! shouldRender ) {
+		return placeholder;
+	}
+
+	return children;
+}

package/src/components/block-editor/block-inspector-button.js

@@ -5,28 +5,26 @@ import { __ } from '@wordpress/i18n';
 import { speak } from '@wordpress/a11y';
 import { MenuItem } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { store as interfaceStore } from '@wordpress/interface';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
-import { store as editSiteStore } from '../../store';
-import { STORE_NAME } from '../../store/constants';
-import { SIDEBAR_BLOCK } from '../sidebar-edit-mode/constants';
+import { unlock } from '../../lock-unlock';
+
+const { interfaceStore } = unlock( editorPrivateApis );
 
 export default function BlockInspectorButton( { onClick = () => {} } ) {
 	const { shortcut, isBlockInspectorOpen } = useSelect(
 		( select ) => ( {
 			shortcut: select(
 				keyboardShortcutsStore
-			).getShortcutRepresentation(
-				'core/edit-site/toggle-block-settings-sidebar'
-			),
+			).getShortcutRepresentation( 'core/editor/toggle-sidebar' ),
 			isBlockInspectorOpen:
 				select( interfaceStore ).getActiveComplementaryArea(
-					editSiteStore.name
-				) === SIDEBAR_BLOCK,
+					'core'
+				) === 'edit-post/block',
 		} ),
 		[]
 	);
@@ -41,10 +39,10 @@ export default function BlockInspectorButton( { onClick = () => {} } ) {
 		<MenuItem
 			onClick={ () => {
 				if ( isBlockInspectorOpen ) {
-					disableComplementaryArea( STORE_NAME );
+					disableComplementaryArea( 'core' );
 					speak( __( 'Block settings closed' ) );
 				} else {
-					enableComplementaryArea( STORE_NAME, SIDEBAR_BLOCK );
+					enableComplementaryArea( 'core', 'edit-post/block' );
 					speak(
 						__(
 							'Additional settings are now available in the Editor block settings sidebar'

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

@@ -11,7 +11,10 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { ENTER, SPACE } from '@wordpress/keycodes';
 import { useState, useEffect, useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { privateApis as editorPrivateApis } from '@wordpress/editor';
+import {
+	store as editorStore,
+	privateApis as editorPrivateApis,
+} from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -33,23 +36,32 @@ function EditorCanvas( {
 	onClick,
 	...props
 } ) {
-	const { hasBlocks, isFocusMode, templateType, canvasMode, isZoomOutMode } =
-		useSelect( ( select ) => {
-			const { getBlockCount, __unstableGetEditorMode } =
-				select( blockEditorStore );
-			const { getEditedPostType, getCanvasMode } = unlock(
-				select( editSiteStore )
-			);
-			const _templateType = getEditedPostType();
+	const {
+		hasBlocks,
+		isFocusMode,
+		templateType,
+		canvasMode,
+		isZoomOutMode,
+		currentPostIsTrashed,
+	} = useSelect( ( select ) => {
+		const { getBlockCount, __unstableGetEditorMode } =
+			select( blockEditorStore );
+		const { getEditedPostType, getCanvasMode } = unlock(
+			select( editSiteStore )
+		);
+		const _templateType = getEditedPostType();
 
-			return {
-				templateType: _templateType,
-				isFocusMode: FOCUSABLE_ENTITIES.includes( _templateType ),
-				isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
-				canvasMode: getCanvasMode(),
-				hasBlocks: !! getBlockCount(),
-			};
-		}, [] );
+		return {
+			templateType: _templateType,
+			isFocusMode: FOCUSABLE_ENTITIES.includes( _templateType ),
+			isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
+			canvasMode: getCanvasMode(),
+			hasBlocks: !! getBlockCount(),
+			currentPostIsTrashed:
+				select( editorStore ).getCurrentPostAttribute( 'status' ) ===
+				'trash',
+		};
+	}, [] );
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 	const [ isFocused, setIsFocused ] = useState( false );
 
@@ -63,6 +75,7 @@ function EditorCanvas( {
 	// to switch to edit mode, with a meaningful label and no title attribute.
 	const viewModeIframeProps = {
 		'aria-label': __( 'Edit' ),
+		'aria-disabled': currentPostIsTrashed,
 		title: null,
 		role: 'button',
 		tabIndex: 0,
@@ -70,7 +83,10 @@ function EditorCanvas( {
 		onBlur: () => setIsFocused( false ),
 		onKeyDown: ( event ) => {
 			const { keyCode } = event;
-			if ( keyCode === ENTER || keyCode === SPACE ) {
+			if (
+				( keyCode === ENTER || keyCode === SPACE ) &&
+				! currentPostIsTrashed
+			) {
 				event.preventDefault();
 				setCanvasMode( 'edit' );
 			}
@@ -82,6 +98,12 @@ function EditorCanvas( {
 				setCanvasMode( 'edit' );
 			}
 		},
+		onClickCapture: ( event ) => {
+			if ( currentPostIsTrashed ) {
+				event.preventDefault();
+				event.stopPropagation();
+			}
+		},
 		readonly: true,
 	};
 	const isTemplateTypeNavigation = templateType === NAVIGATION_POST_TYPE;
@@ -107,12 +129,14 @@ function EditorCanvas( {
 					enableResizing ? 'min-height:0!important;' : ''
 				}}body{position:relative; ${
 					canvasMode === 'view'
-						? 'cursor: pointer; min-height: 100vh;'
+						? `min-height: 100vh; ${
+								currentPostIsTrashed ? '' : 'cursor: pointer;'
+						  }`
 						: ''
 				}}}`,
 			},
 		],
-		[ settings.styles, enableResizing, canvasMode ]
+		[ settings.styles, enableResizing, canvasMode, currentPostIsTrashed ]
 	);
 
 	const frameSize = isZoomOutMode ? 20 : undefined;
@@ -120,7 +144,7 @@ function EditorCanvas( {
 	const scale = isZoomOutMode
 		? ( contentWidth ) =>
 				computeIFrameScale(
-					{ width: 1000, scale: 0.45 },
+					{ width: 1000, scale: 0.55 },
 					{ width: 400, scale: 0.9 },
 					contentWidth
 				)

package/src/components/block-editor/resize-handle.js

@@ -3,7 +3,11 @@
  */
 import { __ } from '@wordpress/i18n';
 import { LEFT, RIGHT } from '@wordpress/keycodes';
-import { VisuallyHidden } from '@wordpress/components';
+import {
+	VisuallyHidden,
+	Tooltip,
+	__unstableMotion as motion,
+} from '@wordpress/components';
 
 const DELTA_DISTANCE = 20; // The distance to resize per keydown in pixels.
 
@@ -28,18 +32,33 @@ export default function ResizeHandle( {
 		}
 	}
 
+	const resizeHandleVariants = {
+		active: {
+			opacity: 1,
+			scaleY: 1.3,
+		},
+	};
+
+	const resizableHandleHelpId = `resizable-editor__resize-help-${ direction }`;
+
 	return (
 		<>
-			<button
-				className={ `resizable-editor__drag-handle is-${ direction } is-variation-${ variation }` }
-				aria-label={ __( 'Drag to resize' ) }
-				aria-describedby={ `resizable-editor__resize-help-${ direction }` }
-				onKeyDown={ handleKeyDown }
-				type="button"
-			/>
-			<VisuallyHidden
-				id={ `resizable-editor__resize-help-${ direction }` }
-			>
+			<Tooltip text={ __( 'Drag to resize' ) }>
+				<motion.button
+					className={ `resizable-editor__drag-handle is-${ direction } is-variation-${ variation }` }
+					aria-label={ __( 'Drag to resize' ) }
+					aria-describedby={ resizableHandleHelpId }
+					onKeyDown={ handleKeyDown }
+					variants={ resizeHandleVariants }
+					whileFocus="active"
+					whileHover="active"
+					whileTap="active"
+					key="handle"
+					role="separator"
+					aria-orientation="vertical"
+				/>
+			</Tooltip>
+			<VisuallyHidden id={ resizableHandleHelpId }>
 				{ __( 'Use left and right arrow keys to resize the canvas.' ) }
 			</VisuallyHidden>
 		</>

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

@@ -91,7 +91,12 @@ export default function SiteEditorCanvas( { onClick } ) {
 								settings={ settings }
 								onClick={ onClick }
 							>
-								{ resizeObserver }
+								{
+									// Avoid resize listeners when not needed,
+									// these will trigger unnecessary re-renders
+									// when animating the iframe width.
+									enableResizing && resizeObserver
+								}
 							</EditorCanvas>
 						</ResizableEditor>
 					</div>

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

@@ -31,7 +31,6 @@
 		display: block;
 		width: 100%;
 		height: 100%;
-		background: $white;
 	}
 
 	.edit-site-visual-editor__editor-canvas {
@@ -106,39 +105,35 @@
 
 	&::after {
 		position: absolute;
-		top: $grid-unit-30;
+		top: $grid-unit-20;
 		left: $grid-unit-05;
 		right: 0;
-		bottom: $grid-unit-30;
+		bottom: $grid-unit-20;
 		content: "";
 		width: $grid-unit-05;
-		background: $gray-600;
+		background-color: rgba($gray-700, 0.4);
 		border-radius: $radius-block-ui;
 	}
 
 	&.is-left {
-		left: -$grid-unit-20;
+		// Subtract half of the handle width to properly center.
+		left: -$grid-unit-20 - math.div($grid-unit-05, 2);
 	}
 
 	&.is-right {
-		right: -$grid-unit-20;
+		// Subtract half of the handle width to properly center.
+		right: -$grid-unit-20 - math.div($grid-unit-05, 2);
 	}
 
 	&:hover,
+	&:focus,
 	&:active {
 		opacity: 1;
-		&.is-variation-default::after {
-			background: $gray-400;
-		}
-		&.is-variation-separator::after {
-			background: var(--wp-admin-theme-color);
+		&::after {
+			background-color: var(--wp-admin-theme-color);
 		}
 	}
 
-	&:focus::after {
-		box-shadow: 0 0 0 1px $gray-800, 0 0 0 calc(var(--wp-admin-border-width-focus) + 1px) var(--wp-admin-theme-color);
-	}
-
 	&.is-variation-separator:focus::after {
 		border-radius: $radius-block-ui;
 		box-shadow: inset 0 0 0 2px var(--wp-admin-theme-color);

package/src/components/create-template-part-modal/index.js

@@ -127,6 +127,7 @@ export function CreateTemplatePartModalContents( {
 		>
 			<VStack spacing="4">
 				<TextControl
+					__next40pxDefaultSize
 					__nextHasNoMarginBottom
 					label={ __( 'Name' ) }
 					value={ title }
@@ -174,6 +175,7 @@ export function CreateTemplatePartModalContents( {
 				</BaseControl>
 				<HStack justify="right">
 					<Button
+						__next40pxDefaultSize
 						variant="tertiary"
 						onClick={ () => {
 							closeModal();
@@ -182,6 +184,7 @@ export function CreateTemplatePartModalContents( {
 						{ __( 'Cancel' ) }
 					</Button>
 					<Button
+						__next40pxDefaultSize
 						variant="primary"
 						type="submit"
 						aria-disabled={ ! title || isSubmitting }