@wordpress/edit-site 5.2.0 → 5.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "5.2.0",
+	"version": "5.3.1",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,40 +27,42 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.25.0",
-		"@wordpress/api-fetch": "^6.22.0",
-		"@wordpress/block-editor": "^11.2.0",
-		"@wordpress/block-library": "^8.2.0",
-		"@wordpress/blocks": "^12.2.0",
-		"@wordpress/components": "^23.2.0",
-		"@wordpress/compose": "^6.2.0",
-		"@wordpress/core-data": "^6.2.0",
-		"@wordpress/data": "^8.2.0",
-		"@wordpress/deprecated": "^3.25.0",
-		"@wordpress/editor": "^13.2.0",
-		"@wordpress/element": "^5.2.0",
-		"@wordpress/hooks": "^3.25.0",
-		"@wordpress/html-entities": "^3.25.0",
-		"@wordpress/i18n": "^4.25.0",
-		"@wordpress/icons": "^9.16.0",
-		"@wordpress/interface": "^5.2.0",
-		"@wordpress/keyboard-shortcuts": "^4.2.0",
-		"@wordpress/keycodes": "^3.25.0",
-		"@wordpress/media-utils": "^4.16.0",
-		"@wordpress/notices": "^3.25.0",
-		"@wordpress/plugins": "^5.2.0",
-		"@wordpress/preferences": "^3.2.0",
-		"@wordpress/reusable-blocks": "^4.2.0",
-		"@wordpress/style-engine": "^1.8.0",
-		"@wordpress/url": "^3.26.0",
-		"@wordpress/viewport": "^5.2.0",
-		"@wordpress/widgets": "^3.2.0",
+		"@wordpress/a11y": "^3.26.1",
+		"@wordpress/api-fetch": "^6.23.1",
+		"@wordpress/block-editor": "^11.3.1",
+		"@wordpress/block-library": "^8.3.1",
+		"@wordpress/blocks": "^12.3.1",
+		"@wordpress/components": "^23.3.1",
+		"@wordpress/compose": "^6.3.1",
+		"@wordpress/core-data": "^6.3.1",
+		"@wordpress/data": "^8.3.1",
+		"@wordpress/deprecated": "^3.26.1",
+		"@wordpress/editor": "^13.3.1",
+		"@wordpress/element": "^5.3.1",
+		"@wordpress/experiments": "^0.8.1",
+		"@wordpress/hooks": "^3.26.1",
+		"@wordpress/html-entities": "^3.26.1",
+		"@wordpress/i18n": "^4.26.1",
+		"@wordpress/icons": "^9.17.1",
+		"@wordpress/interface": "^5.3.1",
+		"@wordpress/keyboard-shortcuts": "^4.3.1",
+		"@wordpress/keycodes": "^3.26.1",
+		"@wordpress/media-utils": "^4.17.1",
+		"@wordpress/notices": "^3.26.1",
+		"@wordpress/plugins": "^5.3.1",
+		"@wordpress/preferences": "^3.3.1",
+		"@wordpress/reusable-blocks": "^4.3.1",
+		"@wordpress/style-engine": "^1.9.1",
+		"@wordpress/url": "^3.27.1",
+		"@wordpress/viewport": "^5.3.1",
+		"@wordpress/widgets": "^3.3.1",
 		"classnames": "^2.3.1",
 		"colord": "^2.9.2",
 		"downloadjs": "^1.4.7",
 		"fast-deep-equal": "^3.1.3",
 		"history": "^5.1.0",
 		"lodash": "^4.17.21",
+		"memize": "^1.1.0",
 		"react-autosize-textarea": "^7.1.0",
 		"rememo": "^4.0.0"
 	},
@@ -71,5 +73,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "204c880ff65295768e9695dfee6c7a9fee1fdd05"
+	"gitHead": "e9ff92d836928aba65dde94d9d193bc401a934d7"
 }

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

@@ -10,10 +10,10 @@ import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import {
 	Button,
-	Flex,
-	FlexItem,
 	Modal,
 	TextControl,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
 } from '@wordpress/components';
 
 /**
@@ -52,7 +52,6 @@ function AddCustomGenericTemplateModal( {
 	return (
 		<Modal
 			title={ __( 'Create custom template' ) }
-			closeLabel={ __( 'Close' ) }
 			onRequestClose={ () => {
 				onClose();
 			} }
@@ -60,27 +59,22 @@ function AddCustomGenericTemplateModal( {
 		>
 			{ isCreatingTemplate && <TemplateActionsLoadingScreen /> }
 			<form onSubmit={ onCreateTemplate }>
-				<Flex align="flex-start" gap={ 8 }>
-					<FlexItem>
-						<TextControl
-							label={ __( 'Name' ) }
-							value={ title }
-							onChange={ setTitle }
-							placeholder={ defaultTitle }
-							disabled={ isBusy }
-							help={ __(
-								'Describe the template, e.g. "Post with sidebar".'
-							) }
-						/>
-					</FlexItem>
-				</Flex>
-
-				<Flex
-					className="edit-site-custom-generic-template__modal-actions"
-					justify="flex-end"
-					expanded={ false }
-				>
-					<FlexItem>
+				<VStack spacing={ 6 }>
+					<TextControl
+						__nextHasNoMarginBottom
+						label={ __( 'Name' ) }
+						value={ title }
+						onChange={ setTitle }
+						placeholder={ defaultTitle }
+						disabled={ isBusy }
+						help={ __(
+							'Describe the template, e.g. "Post with sidebar".'
+						) }
+					/>
+					<HStack
+						className="edit-site-custom-generic-template__modal-actions"
+						justify="right"
+					>
 						<Button
 							variant="tertiary"
 							onClick={ () => {
@@ -89,8 +83,6 @@ function AddCustomGenericTemplateModal( {
 						>
 							{ __( 'Cancel' ) }
 						</Button>
-					</FlexItem>
-					<FlexItem>
 						<Button
 							variant="primary"
 							type="submit"
@@ -99,8 +91,8 @@ function AddCustomGenericTemplateModal( {
 						>
 							{ __( 'Create' ) }
 						</Button>
-					</FlexItem>
-				</Flex>
+					</HStack>
+				</VStack>
 			</form>
 		</Modal>
 	);

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

@@ -184,7 +184,6 @@ function AddCustomTemplateModal( {
 				entityForSuggestions.labels.singular_name
 			) }
 			className={ baseCssClass }
-			closeLabel={ __( 'Close' ) }
 			onRequestClose={ onClose }
 		>
 			{ isCreatingTemplate && <TemplateActionsLoadingScreen /> }

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

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { kebabCase } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -20,7 +15,12 @@ import { plus } from '@wordpress/icons';
 import { useHistory } from '../routes';
 import { store as editSiteStore } from '../../store';
 import CreateTemplatePartModal from '../create-template-part-modal';
-import { useExistingTemplateParts } from './utils';
+import {
+	useExistingTemplateParts,
+	getUniqueTemplatePartTitle,
+	getCleanTemplatePartSlug,
+} from '../../utils/template-part-create';
+import { unlock } from '../../experiments';
 
 export default function NewTemplatePart( {
 	postType,
@@ -31,7 +31,7 @@ export default function NewTemplatePart( {
 	const [ isModalOpen, setIsModalOpen ] = useState( false );
 	const { createErrorNotice } = useDispatch( noticesStore );
 	const { saveEntityRecord } = useDispatch( coreStore );
-	const { __unstableSetCanvasMode } = useDispatch( editSiteStore );
+	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 	const existingTemplateParts = useExistingTemplateParts();
 
 	async function createTemplatePart( { title, area } ) {
@@ -42,39 +42,19 @@ export default function NewTemplatePart( {
 			return;
 		}
 
-		const uniqueTitle = () => {
-			const lowercaseTitle = title.toLowerCase();
-			const existingTitles = existingTemplateParts.map(
-				( templatePart ) => templatePart.title.rendered.toLowerCase()
-			);
-
-			if ( ! existingTitles.includes( lowercaseTitle ) ) {
-				return title;
-			}
-
-			let suffix = 2;
-			while (
-				existingTitles.includes( `${ lowercaseTitle } ${ suffix }` )
-			) {
-				suffix++;
-			}
-
-			return `${ title } ${ suffix }`;
-		};
-
 		try {
-			// Currently template parts only allow latin chars.
-			// Fallback slug will receive suffix by default.
-			const cleanSlug =
-				kebabCase( title ).replace( /[^\w-]+/g, '' ) ||
-				'wp-custom-part';
+			const uniqueTitle = getUniqueTemplatePartTitle(
+				title,
+				existingTemplateParts
+			);
+			const cleanSlug = getCleanTemplatePartSlug( uniqueTitle );
 
 			const templatePart = await saveEntityRecord(
 				'postType',
 				'wp_template_part',
 				{
 					slug: cleanSlug,
-					title: uniqueTitle(),
+					title: uniqueTitle,
 					content: '',
 					area,
 				},
@@ -84,7 +64,7 @@ export default function NewTemplatePart( {
 			setIsModalOpen( false );
 
 			// Switch to edit mode.
-			__unstableSetCanvasMode( 'edit' );
+			setCanvasMode( 'edit' );
 
 			// Navigate to the created template part editor.
 			history.push( {

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

@@ -48,6 +48,7 @@ import AddCustomGenericTemplateModal from './add-custom-generic-template-modal';
 import TemplateActionsLoadingScreen from './template-actions-loading-screen';
 import { useHistory } from '../routes';
 import { store as editSiteStore } from '../../store';
+import { unlock } from '../../experiments';
 
 const DEFAULT_TEMPLATE_SLUGS = [
 	'front-page',
@@ -98,8 +99,9 @@ export default function NewTemplate( {
 	const { saveEntityRecord } = useDispatch( coreStore );
 	const { createErrorNotice, createSuccessNotice } =
 		useDispatch( noticesStore );
-	const { setTemplate, __unstableSetCanvasMode } =
-		useDispatch( editSiteStore );
+	const { setTemplate, setCanvasMode } = unlock(
+		useDispatch( editSiteStore )
+	);
 
 	async function createTemplate( template, isWPSuggestion = true ) {
 		if ( isCreatingTemplate ) {
@@ -140,7 +142,7 @@ export default function NewTemplate( {
 			setTemplate( newTemplate.id, newTemplate.slug );
 
 			// Switch to edit mode.
-			__unstableSetCanvasMode( 'edit' );
+			setCanvasMode( 'edit' );
 
 			// Navigate to the created template editor.
 			history.push( {

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

@@ -151,10 +151,6 @@
 	}
 }
 
-.edit-site-custom-generic-template__modal-actions {
-	margin-top: $grid-unit-15;
-}
-
 .edit-site-template-actions-loading-screen-modal {
 	backdrop-filter: none;
 	background-color: transparent;

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

@@ -52,20 +52,6 @@ export const useExistingTemplates = () => {
 	);
 };
 
-export const useExistingTemplateParts = () => {
-	return useSelect(
-		( select ) =>
-			select( coreStore ).getEntityRecords(
-				'postType',
-				'wp_template_part',
-				{
-					per_page: -1,
-				}
-			),
-		[]
-	);
-};
-
 export const useDefaultTemplateTypes = () => {
 	return useSelect(
 		( select ) =>

package/src/components/app/index.js

@@ -15,7 +15,7 @@ import { PluginArea } from '@wordpress/plugins';
 import { Routes } from '../routes';
 import Layout from '../layout';
 
-export default function App( { reboot } ) {
+export default function App() {
 	const { createErrorNotice } = useDispatch( noticesStore );
 
 	function onPluginAreaError( name ) {
@@ -37,7 +37,7 @@ export default function App( { reboot } ) {
 				<UnsavedChangesWarning />
 
 				<Routes>
-					<Layout onError={ reboot } />
+					<Layout />
 					<PluginArea onError={ onPluginAreaError } />
 				</Routes>
 			</SlotFillProvider>

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

@@ -8,24 +8,27 @@ import {
 	__unstableUseMouseMoveTypingReset as useMouseMoveTypingReset,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
+import { unlock } from '../../experiments';
 import { store as editSiteStore } from '../../store';
 
 function EditorCanvas( { enableResizing, settings, children, ...props } ) {
-	const { deviceType, isZoomOutMode } = useSelect(
+	const { canvasMode, deviceType, isZoomOutMode } = useSelect(
 		( select ) => ( {
 			deviceType:
 				select( editSiteStore ).__experimentalGetPreviewDeviceType(),
 			isZoomOutMode:
 				select( blockEditorStore ).__unstableGetEditorMode() ===
 				'zoom-out',
+			canvasMode: unlock( select( editSiteStore ) ).getCanvasMode(),
 		} ),
 		[]
 	);
+	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 	const deviceStyles = useResizeCanvas( deviceType );
 	const mouseMoveTypingRef = useMouseMoveTypingReset();
 	return (
@@ -57,6 +60,13 @@ function EditorCanvas( { enableResizing, settings, children, ...props } ) {
 			name="editor-canvas"
 			className="edit-site-visual-editor__editor-canvas"
 			{ ...props }
+			role={ canvasMode === 'view' ? 'button' : undefined }
+			onClick={
+				canvasMode === 'view'
+					? () => setCanvasMode( 'edit' )
+					: undefined
+			}
+			readonly={ canvasMode === 'view' }
 		>
 			{ /* Filters need to be rendered before children to avoid Safari rendering issues. */ }
 			{ settings.svgFilters }

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

@@ -7,22 +7,17 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useCallback, useMemo, useRef } from '@wordpress/element';
-import {
-	useEntityBlockEditor,
-	__experimentalFetchMedia as fetchMedia,
-	store as coreStore,
-} from '@wordpress/core-data';
+import { useMemo, useRef } from '@wordpress/element';
+import { useEntityBlockEditor, store as coreStore } from '@wordpress/core-data';
 import {
 	BlockList,
-	BlockEditorProvider,
-	__experimentalLinkControl,
 	BlockInspector,
 	BlockTools,
 	__unstableUseClipboardHandler as useClipboardHandler,
 	__unstableUseTypingObserver as useTypingObserver,
 	BlockEditorKeyboardShortcuts,
 	store as blockEditorStore,
+	experiments as blockEditorExperiments,
 } from '@wordpress/block-editor';
 import {
 	useMergeRefs,
@@ -34,14 +29,17 @@ import { ReusableBlocksMenuItems } from '@wordpress/reusable-blocks';
 /**
  * Internal dependencies
  */
+import inserterMediaCategories from './inserter-media-categories';
 import TemplatePartConverter from '../template-part-converter';
-import NavigateToLink from '../navigate-to-link';
 import { SidebarInspectorFill } from '../sidebar-edit-mode';
 import { store as editSiteStore } from '../../store';
 import BackButton from './back-button';
 import ResizableEditor from './resizable-editor';
 import EditorCanvas from './editor-canvas';
 import StyleBook from '../style-book';
+import { unlock } from '../../experiments';
+
+const { ExperimentalBlockEditorProvider } = unlock( blockEditorExperiments );
 
 const LAYOUT = {
 	type: 'default',
@@ -50,16 +48,17 @@ const LAYOUT = {
 };
 
 export default function BlockEditor() {
-	const { setPage, setIsInserterOpened } = useDispatch( editSiteStore );
+	const { setIsInserterOpened } = useDispatch( editSiteStore );
 	const { storedSettings, templateType, canvasMode } = useSelect(
 		( select ) => {
-			const { getSettings, getEditedPostType, __unstableGetCanvasMode } =
-				select( editSiteStore );
+			const { getSettings, getEditedPostType, getCanvasMode } = unlock(
+				select( editSiteStore )
+			);
 
 			return {
 				storedSettings: getSettings( setIsInserterOpened ),
 				templateType: getEditedPostType(),
-				canvasMode: __unstableGetCanvasMode(),
+				canvasMode: getCanvasMode(),
 			};
 		},
 		[ setIsInserterOpened ]
@@ -122,7 +121,7 @@ export default function BlockEditor() {
 
 		return {
 			...restStoredSettings,
-			__unstableFetchMedia: fetchMedia,
+			inserterMediaCategories,
 			__experimentalBlockPatterns: blockPatterns,
 			__experimentalBlockPatternCategories: blockPatternCategories,
 		};
@@ -155,7 +154,7 @@ export default function BlockEditor() {
 		( isTemplatePart && hasBlocks ) || isViewMode ? false : undefined;
 
 	return (
-		<BlockEditorProvider
+		<ExperimentalBlockEditorProvider
 			settings={ settings }
 			value={ blocks }
 			onInput={ onInput }
@@ -163,17 +162,6 @@ export default function BlockEditor() {
 			useSubRegistry={ false }
 		>
 			<TemplatePartConverter />
-			<__experimentalLinkControl.ViewerFill>
-				{ useCallback(
-					( fillProps ) => (
-						<NavigateToLink
-							{ ...fillProps }
-							onActivePageChange={ setPage }
-						/>
-					),
-					[]
-				) }
-			</__experimentalLinkControl.ViewerFill>
 			<SidebarInspectorFill>
 				<BlockInspector />
 			</SidebarInspectorFill>
@@ -204,7 +192,7 @@ export default function BlockEditor() {
 							<BackButton />
 							<ResizableEditor
 								enableResizing={ enableResizing }
-								height={ sizes.height }
+								height={ sizes.height ?? '100%' }
 							>
 								<EditorCanvas
 									enableResizing={ enableResizing }
@@ -225,6 +213,6 @@ export default function BlockEditor() {
 				}
 			</StyleBook.Slot>
 			<ReusableBlocksMenuItems />
-		</BlockEditorProvider>
+		</ExperimentalBlockEditorProvider>
 	);
 }