@wordpress/edit-site 4.18.0 → 5.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "4.18.0",
+	"version": "5.0.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,46 +27,48 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.21.0",
-		"@wordpress/api-fetch": "^6.18.0",
-		"@wordpress/block-editor": "^10.4.0",
-		"@wordpress/block-library": "^7.18.0",
-		"@wordpress/blocks": "^11.20.0",
-		"@wordpress/components": "^22.0.0",
-		"@wordpress/compose": "^5.19.0",
-		"@wordpress/core-data": "^5.4.0",
-		"@wordpress/data": "^7.5.0",
-		"@wordpress/deprecated": "^3.21.0",
-		"@wordpress/editor": "^12.20.0",
-		"@wordpress/element": "^4.19.0",
-		"@wordpress/hooks": "^3.21.0",
-		"@wordpress/html-entities": "^3.21.0",
-		"@wordpress/i18n": "^4.21.0",
-		"@wordpress/icons": "^9.12.0",
-		"@wordpress/interface": "^4.20.0",
-		"@wordpress/keyboard-shortcuts": "^3.19.0",
-		"@wordpress/keycodes": "^3.21.0",
-		"@wordpress/media-utils": "^4.12.0",
-		"@wordpress/notices": "^3.21.0",
-		"@wordpress/plugins": "^4.19.0",
-		"@wordpress/preferences": "^2.13.0",
-		"@wordpress/reusable-blocks": "^3.19.0",
-		"@wordpress/style-engine": "^1.4.0",
-		"@wordpress/url": "^3.22.0",
-		"@wordpress/viewport": "^4.19.0",
+		"@wordpress/a11y": "^3.23.0",
+		"@wordpress/api-fetch": "^6.20.0",
+		"@wordpress/block-editor": "^11.0.0",
+		"@wordpress/block-library": "^8.0.0",
+		"@wordpress/blocks": "^12.0.0",
+		"@wordpress/components": "^23.0.0",
+		"@wordpress/compose": "^6.0.0",
+		"@wordpress/core-data": "^6.0.0",
+		"@wordpress/data": "^8.0.0",
+		"@wordpress/deprecated": "^3.23.0",
+		"@wordpress/editor": "^13.0.0",
+		"@wordpress/element": "^5.0.0",
+		"@wordpress/hooks": "^3.23.0",
+		"@wordpress/html-entities": "^3.23.0",
+		"@wordpress/i18n": "^4.23.0",
+		"@wordpress/icons": "^9.14.0",
+		"@wordpress/interface": "^5.0.0",
+		"@wordpress/keyboard-shortcuts": "^4.0.0",
+		"@wordpress/keycodes": "^3.23.0",
+		"@wordpress/media-utils": "^4.14.0",
+		"@wordpress/notices": "^3.23.0",
+		"@wordpress/plugins": "^5.0.0",
+		"@wordpress/preferences": "^3.0.0",
+		"@wordpress/reusable-blocks": "^4.0.0",
+		"@wordpress/style-engine": "^1.6.0",
+		"@wordpress/url": "^3.24.0",
+		"@wordpress/viewport": "^5.0.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",
 		"react-autosize-textarea": "^7.1.0",
 		"rememo": "^4.0.0"
 	},
 	"peerDependencies": {
-		"react": "^17.0.0",
-		"react-dom": "^17.0.0"
+		"react": "^18.0.0",
+		"react-dom": "^18.0.0"
 	},
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "511f4cc1f0138641bc4394bc1cf36e833109c791"
+	"gitHead": "1eb65aabe6738097f4c062e78f69ae8f05879848"
 }

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

@@ -17,6 +17,7 @@ import {
 } from '@wordpress/components';
 import { useDebounce } from '@wordpress/compose';
 import { useEntityRecords } from '@wordpress/core-data';
+import { decodeEntities } from '@wordpress/html-entities';
 
 /**
  * Internal dependencies
@@ -50,7 +51,10 @@ function SuggestionListItem( {
 			}
 		>
 			<span className={ `${ baseCssClass }__title` }>
-				<TextHighlight text={ suggestion.name } highlight={ search } />
+				<TextHighlight
+					text={ decodeEntities( suggestion.name ) }
+					highlight={ search }
+				/>
 			</span>
 			{ suggestion.link && (
 				<span className={ `${ baseCssClass }__info` }>
@@ -127,6 +131,7 @@ function SuggestionList( { entityForSuggestions, onSelect } ) {
 		<>
 			{ showSearchControl && (
 				<SearchControl
+					__nextHasNoMarginBottom
 					onChange={ setSearch }
 					value={ search }
 					label={ labels.search_items }

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

@@ -10,7 +10,10 @@ import { store as coreStore } from '@wordpress/core-data';
 import NewTemplate from './new-template';
 import NewTemplatePart from './new-template-part';
 
-export default function AddNewTemplate( { templateType = 'wp_template' } ) {
+export default function AddNewTemplate( {
+	templateType = 'wp_template',
+	...props
+} ) {
 	const postType = useSelect(
 		( select ) => select( coreStore ).getPostType( templateType ),
 		[ templateType ]
@@ -21,9 +24,9 @@ export default function AddNewTemplate( { templateType = 'wp_template' } ) {
 	}
 
 	if ( templateType === 'wp_template' ) {
-		return <NewTemplate postType={ postType } />;
+		return <NewTemplate { ...props } postType={ postType } />;
 	} else if ( templateType === 'wp_template_part' ) {
-		return <NewTemplatePart postType={ postType } />;
+		return <NewTemplatePart { ...props } postType={ postType } />;
 	}
 
 	return null;

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

@@ -12,18 +12,25 @@ import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
 import { store as coreStore } from '@wordpress/core-data';
+import { plus } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
 import { useHistory } from '../routes';
+import { store as editSiteStore } from '../../store';
 import CreateTemplatePartModal from '../create-template-part-modal';
 
-export default function NewTemplatePart( { postType } ) {
+export default function NewTemplatePart( {
+	postType,
+	showIcon = true,
+	toggleProps,
+} ) {
 	const history = useHistory();
 	const [ isModalOpen, setIsModalOpen ] = useState( false );
 	const { createErrorNotice } = useDispatch( noticesStore );
 	const { saveEntityRecord } = useDispatch( coreStore );
+	const { __unstableSetCanvasMode } = useDispatch( editSiteStore );
 
 	async function createTemplatePart( { title, area } ) {
 		if ( ! title ) {
@@ -54,6 +61,9 @@ export default function NewTemplatePart( { postType } ) {
 
 			setIsModalOpen( false );
 
+			// Switch to edit mode.
+			__unstableSetCanvasMode( 'edit' );
+
 			// Navigate to the created template part editor.
 			history.push( {
 				postId: templatePart.id,
@@ -78,12 +88,14 @@ export default function NewTemplatePart( { postType } ) {
 	return (
 		<>
 			<Button
-				variant="primary"
+				{ ...toggleProps }
 				onClick={ () => {
 					setIsModalOpen( true );
 				} }
+				icon={ showIcon ? plus : null }
+				label={ postType.labels.add_new }
 			>
-				{ postType.labels.add_new }
+				{ showIcon ? null : postType.labels.add_new }
 			</Button>
 			{ isModalOpen && (
 				<CreateTemplatePartModal

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

@@ -21,6 +21,7 @@ import {
 	media,
 	notFound,
 	page,
+	plus,
 	post,
 	postAuthor,
 	postDate,
@@ -79,7 +80,11 @@ const TEMPLATE_ICONS = {
 	attachment: media,
 };
 
-export default function NewTemplate( { postType } ) {
+export default function NewTemplate( {
+	postType,
+	toggleProps,
+	showIcon = true,
+} ) {
 	const [ showCustomTemplateModal, setShowCustomTemplateModal ] =
 		useState( false );
 	const [
@@ -93,7 +98,8 @@ export default function NewTemplate( { postType } ) {
 	const { saveEntityRecord } = useDispatch( coreStore );
 	const { createErrorNotice, createSuccessNotice } =
 		useDispatch( noticesStore );
-	const { setTemplate } = useDispatch( editSiteStore );
+	const { setTemplate, __unstableSetCanvasMode } =
+		useDispatch( editSiteStore );
 
 	async function createTemplate( template, isWPSuggestion = true ) {
 		if ( isCreatingTemplate ) {
@@ -133,6 +139,9 @@ export default function NewTemplate( { postType } ) {
 			// Set template before navigating away to avoid initial stale value.
 			setTemplate( newTemplate.id, newTemplate.slug );
 
+			// Switch to edit mode.
+			__unstableSetCanvasMode( 'edit' );
+
 			// Navigate to the created template editor.
 			history.push( {
 				postId: newTemplate.id,
@@ -173,15 +182,13 @@ export default function NewTemplate( { postType } ) {
 		<>
 			<DropdownMenu
 				className="edit-site-new-template-dropdown"
-				icon={ null }
-				text={ postType.labels.add_new }
+				icon={ showIcon ? plus : null }
+				text={ showIcon ? null : postType.labels.add_new }
 				label={ postType.labels.add_new_item }
 				popoverProps={ {
 					noArrow: false,
 				} }
-				toggleProps={ {
-					variant: 'primary',
-				} }
+				toggleProps={ toggleProps }
 			>
 				{ () => (
 					<>

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

@@ -1,8 +1,4 @@
 .edit-site-new-template-dropdown {
-	.components-dropdown-menu__toggle {
-		padding: 6px 12px;
-	}
-
 	.edit-site-new-template-dropdown__popover {
 		@include break-small() {
 			min-width: 300px;

package/src/components/app/index.js

@@ -1,8 +1,9 @@
 /**
  * WordPress dependencies
  */
-import { SlotFillProvider } from '@wordpress/components';
+import { SlotFillProvider, Popover } from '@wordpress/components';
 import { UnsavedChangesWarning } from '@wordpress/editor';
+import { ShortcutProvider } from '@wordpress/keyboard-shortcuts';
 import { store as noticesStore } from '@wordpress/notices';
 import { useDispatch } from '@wordpress/data';
 import { __, sprintf } from '@wordpress/i18n';
@@ -12,12 +13,9 @@ import { PluginArea } from '@wordpress/plugins';
  * Internal dependencies
  */
 import { Routes } from '../routes';
-import Editor from '../editor';
-import List from '../list';
-import NavigationSidebar from '../navigation-sidebar';
-import getIsListPage from '../../utils/get-is-list-page';
+import Layout from '../layout';
 
-export default function EditSiteApp( { reboot, homeTemplate } ) {
+export default function App( { reboot } ) {
 	const { createErrorNotice } = useDispatch( noticesStore );
 
 	function onPluginAreaError( name ) {
@@ -33,43 +31,16 @@ export default function EditSiteApp( { reboot, homeTemplate } ) {
 	}
 
 	return (
-		<SlotFillProvider>
-			<UnsavedChangesWarning />
+		<ShortcutProvider style={ { height: '100%' } }>
+			<SlotFillProvider>
+				<Popover.Slot />
+				<UnsavedChangesWarning />
 
-			<Routes>
-				{ ( { params } ) => {
-					const isListPage = getIsListPage( params );
-
-					// The existence of a 'front-page' supersedes every other setting.
-					const homeTemplateType =
-						params.postId?.includes( 'front-page' ) ||
-						params.postId === homeTemplate?.postId
-							? 'site-editor'
-							: undefined;
-
-					return (
-						<>
-							{ isListPage ? (
-								<List />
-							) : (
-								<Editor onError={ reboot } />
-							) }
-							<PluginArea onError={ onPluginAreaError } />
-							{ /* Keep the instance of the sidebar to ensure focus will not be lost
-							 * when navigating to other pages. */ }
-							<NavigationSidebar
-								// Open the navigation sidebar by default when in the list page.
-								isDefaultOpen={ !! isListPage }
-								activeTemplateType={
-									isListPage
-										? params.postType
-										: homeTemplateType
-								}
-							/>
-						</>
-					);
-				} }
-			</Routes>
-		</SlotFillProvider>
+				<Routes>
+					<Layout onError={ reboot } />
+					<PluginArea onError={ onPluginAreaError } />
+				</Routes>
+			</SlotFillProvider>
+		</ShortcutProvider>
 	);
 }

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

@@ -0,0 +1,69 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalUseResizeCanvas as useResizeCanvas,
+	__unstableEditorStyles as EditorStyles,
+	__unstableIframe as Iframe,
+	__unstableUseMouseMoveTypingReset as useMouseMoveTypingReset,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
+
+function EditorCanvas( { enableResizing, settings, children, ...props } ) {
+	const { deviceType, isZoomOutMode } = useSelect(
+		( select ) => ( {
+			deviceType:
+				select( editSiteStore ).__experimentalGetPreviewDeviceType(),
+			isZoomOutMode:
+				select( blockEditorStore ).__unstableGetEditorMode() ===
+				'zoom-out',
+		} ),
+		[]
+	);
+	const deviceStyles = useResizeCanvas( deviceType );
+	const mouseMoveTypingRef = useMouseMoveTypingReset();
+	return (
+		<Iframe
+			scale={ ( isZoomOutMode && 0.45 ) || undefined }
+			frameSize={ isZoomOutMode ? 100 : undefined }
+			style={ enableResizing ? {} : deviceStyles }
+			head={
+				<>
+					<EditorStyles styles={ settings.styles } />
+					<style>{
+						// Forming a "block formatting context" to prevent margin collapsing.
+						// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
+						`.is-root-container { display: flow-root; }
+							body { position: relative; }`
+					}</style>
+					{ enableResizing && (
+						<style>
+							{
+								// Some themes will have `min-height: 100vh` for the root container,
+								// which isn't a requirement in auto resize mode.
+								`.is-root-container { min-height: 0 !important; }`
+							}
+						</style>
+					) }
+				</>
+			}
+			assets={ settings.__unstableResolvedAssets }
+			ref={ mouseMoveTypingRef }
+			name="editor-canvas"
+			className="edit-site-visual-editor__editor-canvas"
+			{ ...props }
+		>
+			{ /* Filters need to be rendered before children to avoid Safari rendering issues. */ }
+			{ settings.svgFilters }
+			{ children }
+		</Iframe>
+	);
+}
+
+export default EditorCanvas;