@wordpress/edit-site 5.1.0 → 5.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "5.1.0",
+	"version": "5.3.0",
 	"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.24.0",
-		"@wordpress/api-fetch": "^6.21.0",
-		"@wordpress/block-editor": "^11.1.0",
-		"@wordpress/block-library": "^8.1.0",
-		"@wordpress/blocks": "^12.1.0",
-		"@wordpress/components": "^23.1.0",
-		"@wordpress/compose": "^6.1.0",
-		"@wordpress/core-data": "^6.1.0",
-		"@wordpress/data": "^8.1.0",
-		"@wordpress/deprecated": "^3.24.0",
-		"@wordpress/editor": "^13.1.0",
-		"@wordpress/element": "^5.1.0",
-		"@wordpress/hooks": "^3.24.0",
-		"@wordpress/html-entities": "^3.24.0",
-		"@wordpress/i18n": "^4.24.0",
-		"@wordpress/icons": "^9.15.0",
-		"@wordpress/interface": "^5.1.0",
-		"@wordpress/keyboard-shortcuts": "^4.1.0",
-		"@wordpress/keycodes": "^3.24.0",
-		"@wordpress/media-utils": "^4.15.0",
-		"@wordpress/notices": "^3.24.0",
-		"@wordpress/plugins": "^5.1.0",
-		"@wordpress/preferences": "^3.1.0",
-		"@wordpress/reusable-blocks": "^4.1.0",
-		"@wordpress/style-engine": "^1.7.0",
-		"@wordpress/url": "^3.25.0",
-		"@wordpress/viewport": "^5.1.0",
-		"@wordpress/widgets": "^3.1.0",
+		"@wordpress/a11y": "^3.26.0",
+		"@wordpress/api-fetch": "^6.23.0",
+		"@wordpress/block-editor": "^11.3.0",
+		"@wordpress/block-library": "^8.3.0",
+		"@wordpress/blocks": "^12.3.0",
+		"@wordpress/components": "^23.3.0",
+		"@wordpress/compose": "^6.3.0",
+		"@wordpress/core-data": "^6.3.0",
+		"@wordpress/data": "^8.3.0",
+		"@wordpress/deprecated": "^3.26.0",
+		"@wordpress/editor": "^13.3.0",
+		"@wordpress/element": "^5.3.0",
+		"@wordpress/experiments": "^0.8.0",
+		"@wordpress/hooks": "^3.26.0",
+		"@wordpress/html-entities": "^3.26.0",
+		"@wordpress/i18n": "^4.26.0",
+		"@wordpress/icons": "^9.17.0",
+		"@wordpress/interface": "^5.3.0",
+		"@wordpress/keyboard-shortcuts": "^4.3.0",
+		"@wordpress/keycodes": "^3.26.0",
+		"@wordpress/media-utils": "^4.17.0",
+		"@wordpress/notices": "^3.26.0",
+		"@wordpress/plugins": "^5.3.0",
+		"@wordpress/preferences": "^3.3.0",
+		"@wordpress/reusable-blocks": "^4.3.0",
+		"@wordpress/style-engine": "^1.9.0",
+		"@wordpress/url": "^3.27.0",
+		"@wordpress/viewport": "^5.3.0",
+		"@wordpress/widgets": "^3.3.0",
 		"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": "200bee7b06b15f6fa655e25b6ab69cbd6b49a357"
+	"gitHead": "cab6ebe2b4c5dbacfd753dcae4a2406559c4813c"
 }

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,6 +15,11 @@ import { plus } from '@wordpress/icons';
 import { useHistory } from '../routes';
 import { store as editSiteStore } from '../../store';
 import CreateTemplatePartModal from '../create-template-part-modal';
+import {
+	useExistingTemplateParts,
+	getUniqueTemplatePartTitle,
+	getCleanTemplatePartSlug,
+} from '../../utils/template-part-create';
 
 export default function NewTemplatePart( {
 	postType,
@@ -31,6 +31,7 @@ export default function NewTemplatePart( {
 	const { createErrorNotice } = useDispatch( noticesStore );
 	const { saveEntityRecord } = useDispatch( coreStore );
 	const { __unstableSetCanvasMode } = useDispatch( editSiteStore );
+	const existingTemplateParts = useExistingTemplateParts();
 
 	async function createTemplatePart( { title, area } ) {
 		if ( ! title ) {
@@ -41,18 +42,18 @@ export default function NewTemplatePart( {
 		}
 
 		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,
+					title: uniqueTitle,
 					content: '',
 					area,
 				},

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/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

@@ -53,7 +53,6 @@ function EditorCanvas( { enableResizing, settings, children, ...props } ) {
 					) }
 				</>
 			}
-			assets={ settings.__unstableResolvedAssets }
 			ref={ mouseMoveTypingRef }
 			name="editor-canvas"
 			className="edit-site-visual-editor__editor-canvas"

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

@@ -7,24 +7,17 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useCallback, useMemo, useRef, Fragment } 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,
-	__unstableBlockToolbarLastItem,
-	__unstableBlockSettingsMenuFirstItem,
+	__unstableUseClipboardHandler as useClipboardHandler,
 	__unstableUseTypingObserver as useTypingObserver,
 	BlockEditorKeyboardShortcuts,
 	store as blockEditorStore,
-	__unstableBlockNameContext,
+	experiments as blockEditorExperiments,
 } from '@wordpress/block-editor';
 import {
 	useMergeRefs,
@@ -32,22 +25,21 @@ import {
 	useResizeObserver,
 } from '@wordpress/compose';
 import { ReusableBlocksMenuItems } from '@wordpress/reusable-blocks';
-import { listView } from '@wordpress/icons';
-import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
 
 /**
  * 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 BlockInspectorButton from './block-inspector-button';
 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',
@@ -55,19 +47,20 @@ const LAYOUT = {
 	alignments: [],
 };
 
-export default function BlockEditor( { setIsInserterOpen } ) {
+export default function BlockEditor() {
+	const { setIsInserterOpened } = useDispatch( editSiteStore );
 	const { storedSettings, templateType, canvasMode } = useSelect(
 		( select ) => {
 			const { getSettings, getEditedPostType, __unstableGetCanvasMode } =
 				select( editSiteStore );
 
 			return {
-				storedSettings: getSettings( setIsInserterOpen ),
+				storedSettings: getSettings( setIsInserterOpened ),
 				templateType: getEditedPostType(),
 				canvasMode: __unstableGetCanvasMode(),
 			};
 		},
-		[ setIsInserterOpen ]
+		[ setIsInserterOpened ]
 	);
 
 	const settingsBlockPatterns =
@@ -127,7 +120,7 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 
 		return {
 			...restStoredSettings,
-			__unstableFetchMedia: fetchMedia,
+			inserterMediaCategories,
 			__experimentalBlockPatterns: blockPatterns,
 			__experimentalBlockPatternCategories: blockPatternCategories,
 		};
@@ -137,10 +130,13 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 		'postType',
 		templateType
 	);
-	const { setPage } = useDispatch( editSiteStore );
 
 	const contentRef = useRef();
-	const mergedRefs = useMergeRefs( [ contentRef, useTypingObserver() ] );
+	const mergedRefs = useMergeRefs( [
+		contentRef,
+		useClipboardHandler(),
+		useTypingObserver(),
+	] );
 	const isMobileViewport = useViewportMatch( 'small', '<' );
 	const { clearSelectedBlock } = useDispatch( blockEditorStore );
 	const [ resizeObserver, sizes ] = useResizeObserver();
@@ -156,35 +152,8 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 	const showBlockAppender =
 		( isTemplatePart && hasBlocks ) || isViewMode ? false : undefined;
 
-	// eslint-disable-next-line @wordpress/data-no-store-string-literals
-	const { enableComplementaryArea } = useDispatch( 'core/interface' );
-
-	const NavMenuSidebarToggle = () => (
-		<ToolbarGroup>
-			<ToolbarButton
-				className="components-toolbar__control"
-				label={ __( 'Open navigation list view' ) }
-				onClick={ () =>
-					enableComplementaryArea(
-						'core/edit-site',
-						'edit-site/block-inspector'
-					)
-				}
-				icon={ listView }
-			/>
-		</ToolbarGroup>
-	);
-
-	let MaybeNavMenuSidebarToggle = Fragment;
-	const isOffCanvasNavigationEditorEnabled =
-		window?.__experimentalEnableOffCanvasNavigationEditor === true;
-
-	if ( isOffCanvasNavigationEditorEnabled ) {
-		MaybeNavMenuSidebarToggle = NavMenuSidebarToggle;
-	}
-
 	return (
-		<BlockEditorProvider
+		<ExperimentalBlockEditorProvider
 			settings={ settings }
 			value={ blocks }
 			onInput={ onInput }
@@ -192,17 +161,6 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 			useSubRegistry={ false }
 		>
 			<TemplatePartConverter />
-			<__experimentalLinkControl.ViewerFill>
-				{ useCallback(
-					( fillProps ) => (
-						<NavigateToLink
-							{ ...fillProps }
-							onActivePageChange={ setPage }
-						/>
-					),
-					[]
-				) }
-			</__experimentalLinkControl.ViewerFill>
 			<SidebarInspectorFill>
 				<BlockInspector />
 			</SidebarInspectorFill>
@@ -233,7 +191,7 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 							<BackButton />
 							<ResizableEditor
 								enableResizing={ enableResizing }
-								height={ sizes.height }
+								height={ sizes.height ?? '100%' }
 							>
 								<EditorCanvas
 									enableResizing={ enableResizing }
@@ -249,25 +207,11 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 									/>
 								</EditorCanvas>
 							</ResizableEditor>
-							<__unstableBlockSettingsMenuFirstItem>
-								{ ( { onClose } ) => (
-									<BlockInspectorButton onClick={ onClose } />
-								) }
-							</__unstableBlockSettingsMenuFirstItem>
-							<__unstableBlockToolbarLastItem>
-								<__unstableBlockNameContext.Consumer>
-									{ ( blockName ) =>
-										blockName === 'core/navigation' && (
-											<MaybeNavMenuSidebarToggle />
-										)
-									}
-								</__unstableBlockNameContext.Consumer>
-							</__unstableBlockToolbarLastItem>
 						</BlockTools>
 					)
 				}
 			</StyleBook.Slot>
 			<ReusableBlocksMenuItems />
-		</BlockEditorProvider>
+		</ExperimentalBlockEditorProvider>
 	);
 }