@wordpress/edit-site 5.33.0 → 5.35.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "5.33.0",
+	"version": "5.35.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -28,53 +28,51 @@
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^3.56.0",
-		"@wordpress/api-fetch": "^6.53.0",
-		"@wordpress/blob": "^3.56.0",
-		"@wordpress/block-editor": "^12.24.0",
-		"@wordpress/block-library": "^8.33.0",
-		"@wordpress/blocks": "^12.33.0",
-		"@wordpress/commands": "^0.27.0",
-		"@wordpress/components": "^27.4.0",
-		"@wordpress/compose": "^6.33.0",
-		"@wordpress/core-commands": "^0.25.0",
-		"@wordpress/core-data": "^6.33.0",
-		"@wordpress/data": "^9.26.0",
-		"@wordpress/dataviews": "^1.0.0",
-		"@wordpress/date": "^4.56.0",
-		"@wordpress/deprecated": "^3.56.0",
-		"@wordpress/dom": "^3.56.0",
-		"@wordpress/editor": "^13.33.0",
-		"@wordpress/element": "^5.33.0",
-		"@wordpress/escape-html": "^2.56.0",
-		"@wordpress/hooks": "^3.56.0",
-		"@wordpress/html-entities": "^3.56.0",
-		"@wordpress/i18n": "^4.56.0",
-		"@wordpress/icons": "^9.47.0",
-		"@wordpress/keyboard-shortcuts": "^4.33.0",
-		"@wordpress/keycodes": "^3.56.0",
-		"@wordpress/media-utils": "^4.47.0",
-		"@wordpress/notices": "^4.24.0",
-		"@wordpress/patterns": "^1.17.0",
-		"@wordpress/plugins": "^6.24.0",
-		"@wordpress/preferences": "^3.33.0",
-		"@wordpress/primitives": "^3.54.0",
-		"@wordpress/priority-queue": "^2.56.0",
-		"@wordpress/private-apis": "^0.38.0",
-		"@wordpress/reusable-blocks": "^4.33.0",
-		"@wordpress/router": "^0.25.0",
-		"@wordpress/style-engine": "^1.39.0",
-		"@wordpress/url": "^3.57.0",
-		"@wordpress/viewport": "^5.33.0",
-		"@wordpress/widgets": "^3.33.0",
-		"@wordpress/wordcount": "^3.56.0",
+		"@wordpress/a11y": "^3.58.0",
+		"@wordpress/api-fetch": "^6.55.0",
+		"@wordpress/blob": "^3.58.0",
+		"@wordpress/block-editor": "^12.26.0",
+		"@wordpress/block-library": "^8.35.0",
+		"@wordpress/blocks": "^12.35.0",
+		"@wordpress/commands": "^0.29.0",
+		"@wordpress/components": "^27.6.0",
+		"@wordpress/compose": "^6.35.0",
+		"@wordpress/core-commands": "^0.27.0",
+		"@wordpress/core-data": "^6.35.0",
+		"@wordpress/data": "^9.28.0",
+		"@wordpress/dataviews": "^1.2.0",
+		"@wordpress/date": "^4.58.0",
+		"@wordpress/deprecated": "^3.58.0",
+		"@wordpress/dom": "^3.58.0",
+		"@wordpress/editor": "^13.35.0",
+		"@wordpress/element": "^5.35.0",
+		"@wordpress/escape-html": "^2.58.0",
+		"@wordpress/hooks": "^3.58.0",
+		"@wordpress/html-entities": "^3.58.0",
+		"@wordpress/i18n": "^4.58.0",
+		"@wordpress/icons": "^9.49.0",
+		"@wordpress/keyboard-shortcuts": "^4.35.0",
+		"@wordpress/keycodes": "^3.58.0",
+		"@wordpress/media-utils": "^4.49.0",
+		"@wordpress/notices": "^4.26.0",
+		"@wordpress/patterns": "^1.19.0",
+		"@wordpress/plugins": "^6.26.0",
+		"@wordpress/preferences": "^3.35.0",
+		"@wordpress/primitives": "^3.56.0",
+		"@wordpress/priority-queue": "^2.58.0",
+		"@wordpress/private-apis": "^0.40.0",
+		"@wordpress/reusable-blocks": "^4.35.0",
+		"@wordpress/router": "^0.27.0",
+		"@wordpress/style-engine": "^1.41.0",
+		"@wordpress/url": "^3.59.0",
+		"@wordpress/viewport": "^5.35.0",
+		"@wordpress/widgets": "^3.35.0",
+		"@wordpress/wordcount": "^3.58.0",
 		"change-case": "^4.1.2",
-		"classnames": "^2.3.1",
 		"client-zip": "^2.4.4",
+		"clsx": "^2.1.1",
 		"colord": "^2.9.2",
-		"deepmerge": "^4.3.0",
 		"fast-deep-equal": "^3.1.3",
-		"is-plain-object": "^5.0.0",
 		"memize": "^2.1.0",
 		"react-autosize-textarea": "^7.1.0"
 	},
@@ -85,5 +83,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "280403b4c1cf6cc2c55a6c4d56f9ef91145e4191"
+	"gitHead": "42f38f287506a6b3ed8ccba839b18ad066821044"
 }

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

@@ -72,16 +72,22 @@ export default function AddNewPageModal( { onSave, onClose } ) {
 			<form onSubmit={ createPage }>
 				<VStack spacing={ 3 }>
 					<TextControl
+						__next40pxDefaultSize
 						label={ __( 'Page title' ) }
 						onChange={ setTitle }
 						placeholder={ __( 'No title' ) }
 						value={ title }
 					/>
 					<HStack spacing={ 2 } justify="end">
-						<Button variant="tertiary" onClick={ onClose }>
+						<Button
+							__next40pxDefaultSize
+							variant="tertiary"
+							onClick={ onClose }
+						>
 							{ __( 'Cancel' ) }
 						</Button>
 						<Button
+							__next40pxDefaultSize
 							variant="primary"
 							type="submit"
 							isBusy={ isCreatingPage }

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

@@ -11,8 +11,8 @@ import {
 	privateApis as editPatternsPrivateApis,
 	store as patternsStore,
 } from '@wordpress/patterns';
-import { store as coreStore } from '@wordpress/core-data';
 import { store as noticesStore } from '@wordpress/notices';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -37,13 +37,14 @@ export default function AddNewPattern() {
 	const [ showPatternModal, setShowPatternModal ] = useState( false );
 	const [ showTemplatePartModal, setShowTemplatePartModal ] =
 		useState( false );
-	const isBlockBasedTheme = useSelect( ( select ) => {
-		return select( coreStore ).getCurrentTheme()?.is_block_theme;
-	}, [] );
 	const { createPatternFromFile } = unlock( useDispatch( patternsStore ) );
 	const { createSuccessNotice, createErrorNotice } =
 		useDispatch( noticesStore );
 	const patternUploadInputRef = useRef();
+	const isBlockBasedTheme = useSelect(
+		( select ) => select( coreStore ).getCurrentTheme()?.is_block_theme,
+		[]
+	);
 
 	function handleCreatePattern( { pattern, categoryId } ) {
 		setShowPatternModal( false );
@@ -73,13 +74,13 @@ export default function AddNewPattern() {
 		setShowTemplatePartModal( false );
 	}
 
-	const controls = [
-		{
-			icon: symbol,
-			onClick: () => setShowPatternModal( true ),
-			title: __( 'Create pattern' ),
-		},
-	];
+	const controls = [];
+
+	controls.push( {
+		icon: symbol,
+		onClick: () => setShowPatternModal( true ),
+		title: __( 'Create pattern' ),
+	} );
 
 	if ( isBlockBasedTheme ) {
 		controls.push( {
@@ -131,7 +132,9 @@ export default function AddNewPattern() {
 				ref={ patternUploadInputRef }
 				onChange={ async ( event ) => {
 					const file = event.target.files?.[ 0 ];
-					if ( ! file ) return;
+					if ( ! file ) {
+						return;
+					}
 					try {
 						let currentCategoryId;
 						// When we're not handling template parts, we should

package/src/components/add-new-template/add-custom-generic-template-modal-content.js

@@ -43,6 +43,7 @@ function AddCustomGenericTemplateModalContent( { onClose, createTemplate } ) {
 		<form onSubmit={ onCreateTemplate }>
 			<VStack spacing={ 6 }>
 				<TextControl
+					__next40pxDefaultSize
 					__nextHasNoMarginBottom
 					label={ __( 'Name' ) }
 					value={ title }
@@ -58,6 +59,7 @@ function AddCustomGenericTemplateModalContent( { onClose, createTemplate } ) {
 					justify="right"
 				>
 					<Button
+						__next40pxDefaultSize
 						variant="tertiary"
 						onClick={ () => {
 							onClose();
@@ -66,6 +68,7 @@ function AddCustomGenericTemplateModalContent( { onClose, createTemplate } ) {
 						{ __( 'Cancel' ) }
 					</Button>
 					<Button
+						__next40pxDefaultSize
 						variant="primary"
 						type="submit"
 						isBusy={ isBusy }

package/src/components/add-new-template/add-custom-template-modal-content.js

@@ -99,7 +99,9 @@ function useSearchSuggestions( entityForSuggestions, search ) {
 		);
 	const [ suggestions, setSuggestions ] = useState( EMPTY_ARRAY );
 	useEffect( () => {
-		if ( ! searchHasResolved ) return;
+		if ( ! searchHasResolved ) {
+			return;
+		}
 		let newSuggestions = EMPTY_ARRAY;
 		if ( searchResults?.length ) {
 			newSuggestions = searchResults;

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -250,7 +250,7 @@ function NewTemplateModal( { onClose } ) {
 	return (
 		<Modal
 			title={ modalTitle }
-			className={ classnames( 'edit-site-add-new-template__modal', {
+			className={ clsx( 'edit-site-add-new-template__modal', {
 				'edit-site-add-new-template__modal_template_list':
 					modalContent === modalContentMap.templatesList,
 				'edit-site-custom-template-modal':

package/src/components/app/index.js

@@ -2,7 +2,10 @@
  * WordPress dependencies
  */
 import { SlotFillProvider } from '@wordpress/components';
-import { UnsavedChangesWarning } from '@wordpress/editor';
+import {
+	UnsavedChangesWarning,
+	privateApis as editorPrivateApis,
+} from '@wordpress/editor';
 import { store as noticesStore } from '@wordpress/notices';
 import { useDispatch } from '@wordpress/data';
 import { __, sprintf } from '@wordpress/i18n';
@@ -13,10 +16,10 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
  * Internal dependencies
  */
 import Layout from '../layout';
-import { GlobalStylesProvider } from '../global-styles/global-styles-provider';
 import { unlock } from '../../lock-unlock';
 
 const { RouterProvider } = unlock( routerPrivateApis );
+const { GlobalStylesProvider } = unlock( editorPrivateApis );
 
 export default function App() {
 	const { createErrorNotice } = useDispatch( noticesStore );

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -25,7 +25,6 @@ import {
 	FOCUSABLE_ENTITIES,
 	NAVIGATION_POST_TYPE,
 } from '../../utils/constants';
-import { computeIFrameScale } from '../../utils/math';
 
 const { EditorCanvas: EditorCanvasRoot } = unlock( editorPrivateApis );
 
@@ -41,11 +40,9 @@ function EditorCanvas( {
 		isFocusMode,
 		templateType,
 		canvasMode,
-		isZoomOutMode,
 		currentPostIsTrashed,
 	} = useSelect( ( select ) => {
-		const { getBlockCount, __unstableGetEditorMode } =
-			select( blockEditorStore );
+		const { getBlockCount } = select( blockEditorStore );
 		const { getEditedPostType, getCanvasMode } = unlock(
 			select( editSiteStore )
 		);
@@ -54,7 +51,6 @@ function EditorCanvas( {
 		return {
 			templateType: _templateType,
 			isFocusMode: FOCUSABLE_ENTITIES.includes( _templateType ),
-			isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
 			canvasMode: getCanvasMode(),
 			hasBlocks: !! getBlockCount(),
 			currentPostIsTrashed:
@@ -139,33 +135,17 @@ function EditorCanvas( {
 		[ settings.styles, enableResizing, canvasMode, currentPostIsTrashed ]
 	);
 
-	const frameSize = isZoomOutMode ? 20 : undefined;
-
-	const scale = isZoomOutMode
-		? ( contentWidth ) =>
-				computeIFrameScale(
-					{ width: 1000, scale: 0.55 },
-					{ width: 400, scale: 0.9 },
-					contentWidth
-				)
-		: undefined;
-
 	return (
 		<EditorCanvasRoot
-			className={ classnames( 'edit-site-editor-canvas__block-list', {
+			className={ clsx( 'edit-site-editor-canvas__block-list', {
 				'is-navigation-block': isTemplateTypeNavigation,
 			} ) }
 			renderAppender={ showBlockAppender }
 			styles={ styles }
 			iframeProps={ {
-				scale,
-				frameSize,
-				className: classnames(
-					'edit-site-visual-editor__editor-canvas',
-					{
-						'is-focused': isFocused && canvasMode === 'view',
-					}
-				),
+				className: clsx( 'edit-site-visual-editor__editor-canvas', {
+					'is-focused': isFocused && canvasMode === 'view',
+				} ),
 				...props,
 				...( canvasMode === 'view' ? viewModeIframeProps : {} ),
 			} }

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
@@ -73,7 +73,7 @@ export default function SiteEditorCanvas( { onClick } ) {
 					</div>
 				) : (
 					<div
-						className={ classnames( 'edit-site-visual-editor', {
+						className={ clsx( 'edit-site-visual-editor', {
 							'is-focus-mode': isFocusMode || !! editorCanvasView,
 							'is-view-mode': isViewMode,
 						} ) }

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

@@ -21,6 +21,7 @@
 .edit-site-visual-editor {
 	position: relative;
 	height: 100%;
+	overflow: hidden;
 	display: block;
 	background-color: $gray-300;
 	// Centralize the editor horizontally (flex-direction is column).
@@ -31,7 +32,6 @@
 		display: block;
 		width: 100%;
 		height: 100%;
-		background: $white;
 	}
 
 	.edit-site-visual-editor__editor-canvas {
@@ -48,7 +48,6 @@
 		}
 
 		.edit-site-visual-editor__editor-canvas {
-			border-radius: $radius-block-ui;
 			max-height: 100%;
 		}
 
@@ -59,7 +58,7 @@
 		}
 	}
 
-	.components-resizable-box__container {
+	& > .components-resizable-box__container {
 		margin: 0 auto;
 	}
 
@@ -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 }

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

@@ -0,0 +1,38 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { edit } from '@wordpress/icons';
+import { useMemo } from '@wordpress/element';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const { useHistory } = unlock( routerPrivateApis );
+
+export const useEditPostAction = () => {
+	const history = useHistory();
+	return useMemo(
+		() => ( {
+			id: 'edit-post',
+			label: __( 'Edit' ),
+			isPrimary: true,
+			icon: edit,
+			isEligible( { status } ) {
+				return status !== 'trash';
+			},
+			callback( items ) {
+				const post = items[ 0 ];
+				history.push( {
+					postId: post.id,
+					postType: post.type,
+					canvas: 'edit',
+				} );
+			},
+		} ),
+		[ history ]
+	);
+};