@wordpress/edit-site 3.0.12 → 3.0.16

package/build-module/utils/get-is-list-page.js

@@ -0,0 +1,16 @@
+/**
+ * Returns if the params match the list page route.
+ *
+ * @param {Object} params          The search params.
+ * @param {string} params.postId   The post ID.
+ * @param {string} params.postType The post type.
+ * @return {boolean} Is list page or not.
+ */
+export default function getIsListPage(_ref) {
+  let {
+    postId,
+    postType
+  } = _ref;
+  return !!(!postId && postType);
+}
+//# sourceMappingURL=get-is-list-page.js.map

package/build-module/utils/get-is-list-page.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/edit-site/src/utils/get-is-list-page.js"],"names":["getIsListPage","postId","postType"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,SAASA,aAAT,OAA+C;AAAA,MAAvB;AAAEC,IAAAA,MAAF;AAAUC,IAAAA;AAAV,GAAuB;AAC7D,SAAO,CAAC,EAAI,CAAED,MAAF,IAAYC,QAAhB,CAAR;AACA","sourcesContent":["/**\n * Returns if the params match the list page route.\n *\n * @param {Object} params          The search params.\n * @param {string} params.postId   The post ID.\n * @param {string} params.postType The post type.\n * @return {boolean} Is list page or not.\n */\nexport default function getIsListPage( { postId, postType } ) {\n\treturn !! ( ! postId && postType );\n}\n"]}

package/build-module/utils/history.js

@@ -0,0 +1,25 @@
+/**
+ * External dependencies
+ */
+import { createBrowserHistory } from 'history';
+/**
+ * WordPress dependencies
+ */
+
+import { addQueryArgs } from '@wordpress/url';
+const history = createBrowserHistory();
+const originalHistoryPush = history.push;
+const originalHistoryReplace = history.replace;
+
+function push(params, state) {
+  return originalHistoryPush.call(history, addQueryArgs(window.location.href, params), state);
+}
+
+function replace(params, state) {
+  return originalHistoryReplace.call(history, addQueryArgs(window.location.href, params), state);
+}
+
+history.push = push;
+history.replace = replace;
+export default history;
+//# sourceMappingURL=history.js.map

package/build-module/utils/history.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/edit-site/src/utils/history.js"],"names":["createBrowserHistory","addQueryArgs","history","originalHistoryPush","push","originalHistoryReplace","replace","params","state","call","window","location","href"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,oBAAT,QAAqC,SAArC;AAEA;AACA;AACA;;AACA,SAASC,YAAT,QAA6B,gBAA7B;AAEA,MAAMC,OAAO,GAAGF,oBAAoB,EAApC;AAEA,MAAMG,mBAAmB,GAAGD,OAAO,CAACE,IAApC;AACA,MAAMC,sBAAsB,GAAGH,OAAO,CAACI,OAAvC;;AAEA,SAASF,IAAT,CAAeG,MAAf,EAAuBC,KAAvB,EAA+B;AAC9B,SAAOL,mBAAmB,CAACM,IAApB,CACNP,OADM,EAEND,YAAY,CAAES,MAAM,CAACC,QAAP,CAAgBC,IAAlB,EAAwBL,MAAxB,CAFN,EAGNC,KAHM,CAAP;AAKA;;AAED,SAASF,OAAT,CAAkBC,MAAlB,EAA0BC,KAA1B,EAAkC;AACjC,SAAOH,sBAAsB,CAACI,IAAvB,CACNP,OADM,EAEND,YAAY,CAAES,MAAM,CAACC,QAAP,CAAgBC,IAAlB,EAAwBL,MAAxB,CAFN,EAGNC,KAHM,CAAP;AAKA;;AAEDN,OAAO,CAACE,IAAR,GAAeA,IAAf;AACAF,OAAO,CAACI,OAAR,GAAkBA,OAAlB;AAEA,eAAeJ,OAAf","sourcesContent":["/**\n * External dependencies\n */\nimport { createBrowserHistory } from 'history';\n\n/**\n * WordPress dependencies\n */\nimport { addQueryArgs } from '@wordpress/url';\n\nconst history = createBrowserHistory();\n\nconst originalHistoryPush = history.push;\nconst originalHistoryReplace = history.replace;\n\nfunction push( params, state ) {\n\treturn originalHistoryPush.call(\n\t\thistory,\n\t\taddQueryArgs( window.location.href, params ),\n\t\tstate\n\t);\n}\n\nfunction replace( params, state ) {\n\treturn originalHistoryReplace.call(\n\t\thistory,\n\t\taddQueryArgs( window.location.href, params ),\n\t\tstate\n\t);\n}\n\nhistory.push = push;\nhistory.replace = replace;\n\nexport default history;\n"]}

package/build-style/style-rtl.css

@@ -566,13 +566,11 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   margin-right: 0;
   display: block;
   border-radius: 50%;
-  border: 0;
   height: 24px;
   width: 24px;
   padding: 0;
-  background-image: repeating-linear-gradient(-45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%, #e0e0e0), repeating-linear-gradient(-45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%, #e0e0e0);
-  background-position: 100% 0, 25px 25px;
-  background-size: calc(2 * 5px) calc(2 * 5px);
+  border: 1px solid #ddd;
+  background: linear-gradient(45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
 }
 
 .edit-site-global-styles-header__description {
@@ -594,6 +592,14 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   min-height: 32px;
 }
 
+h2.edit-site-global-styles-gradient-palette-panel__duotone-heading.components-heading {
+  text-transform: uppercase;
+  line-height: 24px;
+  font-weight: 500;
+  font-size: 11px;
+  margin-bottom: 8px;
+}
+
 .edit-site-header {
   align-items: center;
   background-color: #fff;
@@ -1116,16 +1122,11 @@ body.is-fullscreen-mode .edit-site-list-header {
 }
 .edit-site .edit-site-list .interface-interface-skeleton__content {
   background: #fff;
-}
-
-.edit-site-list-main {
-  display: flex;
   align-items: center;
-  justify-content: center;
   padding: 16px;
 }
 @media (min-width: 782px) {
-  .edit-site-list-main {
+  .edit-site .edit-site-list .interface-interface-skeleton__content {
     padding: 72px;
   }
 }

package/build-style/style.css

@@ -566,13 +566,11 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   margin-left: 0;
   display: block;
   border-radius: 50%;
-  border: 0;
   height: 24px;
   width: 24px;
   padding: 0;
-  background-image: repeating-linear-gradient(45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%, #e0e0e0), repeating-linear-gradient(45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%, #e0e0e0);
-  background-position: 0 0, 25px 25px;
-  background-size: calc(2 * 5px) calc(2 * 5px);
+  border: 1px solid #ddd;
+  background: linear-gradient(-45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
 }
 
 .edit-site-global-styles-header__description {
@@ -594,6 +592,14 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   min-height: 32px;
 }
 
+h2.edit-site-global-styles-gradient-palette-panel__duotone-heading.components-heading {
+  text-transform: uppercase;
+  line-height: 24px;
+  font-weight: 500;
+  font-size: 11px;
+  margin-bottom: 8px;
+}
+
 .edit-site-header {
   align-items: center;
   background-color: #fff;
@@ -1116,16 +1122,11 @@ body.is-fullscreen-mode .edit-site-list-header {
 }
 .edit-site .edit-site-list .interface-interface-skeleton__content {
   background: #fff;
-}
-
-.edit-site-list-main {
-  display: flex;
   align-items: center;
-  justify-content: center;
   padding: 16px;
 }
 @media (min-width: 782px) {
-  .edit-site-list-main {
+  .edit-site .edit-site-list .interface-interface-skeleton__content {
     padding: 72px;
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "3.0.12",
+	"version": "3.0.16",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -29,33 +29,34 @@
 		"@babel/runtime": "^7.16.0",
 		"@wordpress/a11y": "^3.2.4",
 		"@wordpress/api-fetch": "^5.2.6",
-		"@wordpress/block-editor": "^8.0.6",
-		"@wordpress/block-library": "^6.0.10",
+		"@wordpress/block-editor": "^8.0.10",
+		"@wordpress/block-library": "^6.0.14",
 		"@wordpress/blocks": "^11.1.4",
-		"@wordpress/components": "^19.1.0",
+		"@wordpress/components": "^19.1.4",
 		"@wordpress/compose": "^5.0.6",
 		"@wordpress/core-data": "^4.0.8",
 		"@wordpress/data": "^6.1.4",
 		"@wordpress/data-controls": "^2.2.7",
-		"@wordpress/editor": "^12.0.9",
+		"@wordpress/editor": "^12.0.13",
 		"@wordpress/element": "^4.0.4",
 		"@wordpress/hooks": "^3.2.2",
 		"@wordpress/html-entities": "^3.2.3",
 		"@wordpress/i18n": "^4.2.4",
 		"@wordpress/icons": "^6.1.1",
-		"@wordpress/interface": "^4.1.8",
+		"@wordpress/interface": "^4.1.12",
 		"@wordpress/keyboard-shortcuts": "^3.0.6",
 		"@wordpress/keycodes": "^3.2.4",
 		"@wordpress/media-utils": "^3.0.5",
 		"@wordpress/notices": "^3.2.7",
 		"@wordpress/plugins": "^4.0.6",
 		"@wordpress/primitives": "^3.0.4",
-		"@wordpress/reusable-blocks": "^3.0.12",
+		"@wordpress/reusable-blocks": "^3.0.16",
 		"@wordpress/url": "^3.3.1",
 		"@wordpress/viewport": "^4.0.6",
 		"classnames": "^2.3.1",
 		"downloadjs": "^1.4.7",
 		"file-saver": "^2.0.2",
+		"history": "^5.1.0",
 		"jszip": "^3.2.2",
 		"lodash": "^4.17.21",
 		"rememo": "^3.0.0"
@@ -63,5 +64,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "6d3bd917064b4b194677233ee426f5988fa441b9"
+	"gitHead": "3826b68f8c5b5026b318463af647f6fb19b534d2"
 }

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

@@ -7,21 +7,24 @@ import { kebabCase } from 'lodash';
  * WordPress dependencies
  */
 import { useState } from '@wordpress/element';
-import { useDispatch } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { Button } from '@wordpress/components';
-import { addQueryArgs } from '@wordpress/url';
-import apiFetch from '@wordpress/api-fetch';
 import { __ } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
  */
+import { useHistory } from '../routes';
 import CreateTemplatePartModal from '../create-template-part-modal';
 
 export default function NewTemplatePart( { postType } ) {
+	const history = useHistory();
 	const [ isModalOpen, setIsModalOpen ] = useState( false );
 	const { createErrorNotice } = useDispatch( noticesStore );
+	const { saveEntityRecord } = useDispatch( coreStore );
+	const { getLastEntitySaveError } = useSelect( coreStore );
 
 	async function createTemplatePart( { title, area } ) {
 		if ( ! title ) {
@@ -32,22 +35,35 @@ export default function NewTemplatePart( { postType } ) {
 		}
 
 		try {
-			const templatePart = await apiFetch( {
-				path: '/wp/v2/template-parts',
-				method: 'POST',
-				data: {
+			const templatePart = await saveEntityRecord(
+				'postType',
+				'wp_template_part',
+				{
 					slug: kebabCase( title ),
 					title,
 					content: '',
 					area,
-				},
-			} );
+				}
+			);
+
+			const lastEntitySaveError = getLastEntitySaveError(
+				'postType',
+				'wp_template_part',
+				templatePart.id
+			);
+			if ( lastEntitySaveError ) {
+				throw lastEntitySaveError;
+			}
+
+			setIsModalOpen( false );
 
 			// Navigate to the created template part editor.
-			window.location.href = addQueryArgs( window.location.href, {
+			history.push( {
 				postId: templatePart.id,
-				postType: 'wp_template_part',
+				postType: templatePart.type,
 			} );
+
+			// TODO: Add a success notice?
 		} catch ( error ) {
 			const errorMessage =
 				error.message && error.code !== 'unknown_error'
@@ -57,6 +73,8 @@ export default function NewTemplatePart( { postType } ) {
 					  );
 
 			createErrorNotice( errorMessage, { type: 'snackbar' } );
+
+			setIsModalOpen( false );
 		}
 	}
 

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

@@ -15,11 +15,14 @@ import {
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as editorStore } from '@wordpress/editor';
-import { addQueryArgs } from '@wordpress/url';
-import apiFetch from '@wordpress/api-fetch';
 import { __ } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
 
+/**
+ * Internal dependencies
+ */
+import { useHistory } from '../routes';
+
 const DEFAULT_TEMPLATE_SLUGS = [
 	'front-page',
 	'single-post',
@@ -31,6 +34,7 @@ const DEFAULT_TEMPLATE_SLUGS = [
 ];
 
 export default function NewTemplate( { postType } ) {
+	const history = useHistory();
 	const { templates, defaultTemplateTypes } = useSelect(
 		( select ) => ( {
 			templates: select( coreStore ).getEntityRecords(
@@ -44,7 +48,9 @@ export default function NewTemplate( { postType } ) {
 		} ),
 		[]
 	);
+	const { saveEntityRecord } = useDispatch( coreStore );
 	const { createErrorNotice } = useDispatch( noticesStore );
+	const { getLastEntitySaveError } = useSelect( coreStore );
 
 	async function createTemplate( { slug } ) {
 		try {
@@ -52,26 +58,34 @@ export default function NewTemplate( { postType } ) {
 				slug,
 			} );
 
-			const template = await apiFetch( {
-				path: '/wp/v2/templates',
-				method: 'POST',
-				data: {
+			const template = await saveEntityRecord(
+				'postType',
+				'wp_template',
+				{
 					excerpt: description,
 					// Slugs need to be strings, so this is for template `404`
 					slug: slug.toString(),
 					status: 'publish',
 					title,
-				},
-			} );
+				}
+			);
+
+			const lastEntitySaveError = getLastEntitySaveError(
+				'postType',
+				'wp_template',
+				template.id
+			);
+			if ( lastEntitySaveError ) {
+				throw lastEntitySaveError;
+			}
 
 			// Navigate to the created template editor.
-			window.location.href = addQueryArgs( window.location.href, {
+			history.push( {
 				postId: template.id,
-				postType: 'wp_template',
+				postType: template.type,
 			} );
 
-			// Wait for async navigation to happen before closing the modal.
-			await new Promise( () => {} );
+			// TODO: Add a success notice?
 		} catch ( error ) {
 			const errorMessage =
 				error.message && error.code !== 'unknown_error'

package/src/components/app/index.js

@@ -0,0 +1,47 @@
+/**
+ * WordPress dependencies
+ */
+import { SlotFillProvider } from '@wordpress/components';
+import { UnsavedChangesWarning } from '@wordpress/editor';
+
+/**
+ * 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';
+
+export default function EditSiteApp( { reboot } ) {
+	return (
+		<SlotFillProvider>
+			<UnsavedChangesWarning />
+
+			<Routes>
+				{ ( { params } ) => {
+					const isListPage = getIsListPage( params );
+
+					return (
+						<>
+							{ isListPage ? (
+								<List />
+							) : (
+								<Editor onError={ reboot } />
+							) }
+							{ /* 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 : undefined
+								}
+							/>
+						</>
+					);
+				} }
+			</Routes>
+		</SlotFillProvider>
+	);
+}

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

@@ -3,26 +3,18 @@
  */
 import { Button } from '@wordpress/components';
 import { arrowLeft } from '@wordpress/icons';
-import { useSelect, useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import { store as editSiteStore } from '../../store';
+import { useLocation, useHistory } from '../routes';
 
 function BackButton() {
-	const { isTemplatePart, previousTemplateId } = useSelect( ( select ) => {
-		const { getEditedPostType, getPreviousEditedPostId } = select(
-			editSiteStore
-		);
-
-		return {
-			isTemplatePart: getEditedPostType() === 'wp_template_part',
-			previousTemplateId: getPreviousEditedPostId(),
-		};
-	}, [] );
-	const { goBack } = useDispatch( editSiteStore );
+	const location = useLocation();
+	const history = useHistory();
+	const isTemplatePart = location.params.postType === 'wp_template_part';
+	const previousTemplateId = location.state?.fromTemplateId;
 
 	if ( ! isTemplatePart || ! previousTemplateId ) {
 		return null;
@@ -33,7 +25,7 @@ function BackButton() {
 			className="edit-site-visual-editor__back-button"
 			icon={ arrowLeft }
 			onClick={ () => {
-				goBack();
+				history.back();
 			} }
 		>
 			{ __( 'Back' ) }

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

@@ -124,6 +124,7 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 					<BlockList
 						className="edit-site-block-editor__block-list wp-site-blocks"
 						__experimentalLayout={ LAYOUT }
+						renderAppender={ isTemplatePart ? false : undefined }
 					/>
 				</ResizableEditor>
 

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

@@ -52,8 +52,6 @@ export default function CreateTemplatePartModal( { closeModal, onCreate } ) {
 					}
 					setIsSubmitting( true );
 					await onCreate( { title, area } );
-					setIsSubmitting( false );
-					closeModal();
 				} }
 			>
 				<TextControl

package/src/components/edit-template-part-menu-button/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import {
 	store as blockEditorStore,
 	BlockSettingsMenuControls,
@@ -14,7 +14,8 @@ import { __, sprintf } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { store as editSiteStore } from '../../store';
+import { useLocation } from '../routes';
+import { useLink } from '../routes/link';
 
 export default function EditTemplatePartMenuButton() {
 	return (
@@ -30,6 +31,7 @@ export default function EditTemplatePartMenuButton() {
 }
 
 function EditTemplatePartMenuItem( { selectedClientId, onClose } ) {
+	const { params } = useLocation();
 	const selectedTemplatePart = useSelect(
 		( select ) => {
 			const block = select( blockEditorStore ).getBlock(
@@ -50,7 +52,15 @@ function EditTemplatePartMenuItem( { selectedClientId, onClose } ) {
 		[ selectedClientId ]
 	);
 
-	const { pushTemplatePart } = useDispatch( editSiteStore );
+	const linkProps = useLink(
+		{
+			postId: selectedTemplatePart?.id,
+			postType: selectedTemplatePart?.type,
+		},
+		{
+			fromTemplateId: params.postId,
+		}
+	);
 
 	if ( ! selectedTemplatePart ) {
 		return null;
@@ -58,8 +68,9 @@ function EditTemplatePartMenuItem( { selectedClientId, onClose } ) {
 
 	return (
 		<MenuItem
-			onClick={ () => {
-				pushTemplatePart( selectedTemplatePart.id );
+			{ ...linkProps }
+			onClick={ ( event ) => {
+				linkProps.onClick( event );
 				onClose();
 			} }
 		>