@wordpress/edit-site 3.0.14 → 3.0.18-next.33ec3857e2.0

package/build-style/style-rtl.css

@@ -468,10 +468,6 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   border-radius: 2px;
 }
 
-.edit-site-visual-editor__editor-canvas {
-  border-radius: 2px 2px 0 0;
-}
-
 .edit-site-visual-editor__back-button {
   position: absolute;
   top: 8px;
@@ -492,28 +488,24 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   bottom: 0;
   padding: 0;
   margin: auto 0;
-  width: 8px;
+  width: 4px;
   height: 100px;
   -webkit-appearance: none;
           appearance: none;
-  cursor: grab;
+  cursor: ew-resize;
   outline: none;
-  background: #757575;
-  border-radius: 4px;
+  background: #949494;
+  border-radius: 2px;
   border: 0;
 }
 .resizable-editor__drag-handle.is-left {
-  right: -28px;
+  right: -16px;
 }
 .resizable-editor__drag-handle.is-right {
-  left: -28px;
-}
-.resizable-editor__drag-handle:hover {
-  background: #949494;
+  left: -16px;
 }
-.resizable-editor__drag-handle:active {
-  cursor: grabbing;
-  background: #949494;
+.resizable-editor__drag-handle:hover, .resizable-editor__drag-handle:active {
+  background: #ccc;
 }
 .resizable-editor__drag-handle:focus {
   box-shadow: 0 0 0 1px #2f2f2f, 0 0 0 calc(var(--wp-admin-border-width-focus) + 1px) var(--wp-admin-theme-color);
@@ -526,14 +518,6 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   min-height: 152px;
   line-height: 1;
 }
-.edit-site-global-styles-preview .component-color-indicator {
-  border-radius: 50%;
-  border: 0;
-  height: 36px;
-  width: 36px;
-  margin-right: 0;
-  padding: 0;
-}
 
 .edit-site-typography-panel__preview {
   display: flex;
@@ -563,13 +547,6 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   margin: 16px;
 }
 .edit-site-global-styles-screen-colors .component-color-indicator {
-  margin-right: 0;
-  display: block;
-  border-radius: 50%;
-  height: 24px;
-  width: 24px;
-  padding: 0;
-  border: 1px solid #ddd;
   background: linear-gradient(45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
 }
 
@@ -600,6 +577,12 @@ h2.edit-site-global-styles-gradient-palette-panel__duotone-heading.components-he
   margin-bottom: 8px;
 }
 
+.edit-site-screen-text-color__control,
+.edit-site-screen-link-color__control,
+.edit-site-screen-background-color__control {
+  padding: 16px;
+}
+
 .edit-site-header {
   align-items: center;
   background-color: #fff;
@@ -628,6 +611,8 @@ body.is-fullscreen-mode .edit-site-header {
   display: flex;
   align-items: center;
   height: 100%;
+  flex-grow: 1;
+  justify-content: center;
   min-width: 0;
 }
 .edit-site-header .edit-site-header_end {
@@ -705,7 +690,6 @@ body.is-navigation-sidebar-open .edit-site-header .edit-site-header_end .compone
 .edit-site-header__actions {
   display: inline-flex;
   align-items: center;
-  flex-wrap: wrap;
   padding-left: 4px;
 }
 .edit-site-header__actions .interface-pinned-items {
@@ -760,6 +744,7 @@ body.is-navigation-sidebar-open .edit-site-header .edit-site-header_end .compone
   display: flex;
   flex-direction: column;
   justify-content: center;
+  padding: 0 8px;
   height: 100%;
   min-width: 0;
 }
@@ -786,17 +771,6 @@ body.is-navigation-sidebar-open .edit-site-header .edit-site-header_end .compone
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  max-width: 120px;
-}
-@media (min-width: 782px) {
-  .edit-site-document-actions .edit-site-document-actions__title {
-    max-width: 75px;
-  }
-}
-@media (min-width: 1080px) {
-  .edit-site-document-actions .edit-site-document-actions__title {
-    max-width: 180px;
-  }
 }
 .edit-site-document-actions .edit-site-document-actions__secondary-item {
   white-space: nowrap;
@@ -1122,16 +1096,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;
   }
 }
@@ -1293,6 +1262,20 @@ body.is-fullscreen-mode .edit-site-list-header {
   margin: 0;
 }
 
+.edit-site-global-styles-sidebar {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+.edit-site-global-styles-sidebar__panel, .edit-site-global-styles-sidebar__navigator-provider {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+.edit-site-global-styles-sidebar__navigator-screen {
+  flex: 1;
+}
+
 .edit-site-global-styles-sidebar .interface-complementary-area-header .components-button.has-icon {
   margin-right: 0;
 }
@@ -1301,18 +1284,6 @@ body.is-fullscreen-mode .edit-site-list-header {
   margin-right: auto;
 }
 
-.edit-site-global-styles-sidebar__border-controls-row {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 12px;
-}
-.edit-site-global-styles-sidebar__border-controls-row > * {
-  width: calc(50% - 8px);
-}
-.edit-site-global-styles-sidebar__border-controls-row .components-border-style-control__buttons {
-  margin-bottom: 0;
-}
-
 .edit-site-global-styles-sidebar .components-navigation__menu-title-heading {
   font-size: 15.6px;
   font-weight: 500;
@@ -1327,6 +1298,10 @@ body.is-fullscreen-mode .edit-site-list-header {
   border: 0;
 }
 
+.edit-site-global-styles-sidebar .components-tools-panel-item.single-column {
+  grid-column: span 1;
+}
+
 .edit-site-global-styles-sidebar__blocks-group {
   padding-top: 24px;
   border-top: 1px solid #e0e0e0;

package/build-style/style.css

@@ -468,10 +468,6 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   border-radius: 2px;
 }
 
-.edit-site-visual-editor__editor-canvas {
-  border-radius: 2px 2px 0 0;
-}
-
 .edit-site-visual-editor__back-button {
   position: absolute;
   top: 8px;
@@ -492,28 +488,24 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   bottom: 0;
   padding: 0;
   margin: auto 0;
-  width: 8px;
+  width: 4px;
   height: 100px;
   -webkit-appearance: none;
           appearance: none;
-  cursor: grab;
+  cursor: ew-resize;
   outline: none;
-  background: #757575;
-  border-radius: 4px;
+  background: #949494;
+  border-radius: 2px;
   border: 0;
 }
 .resizable-editor__drag-handle.is-left {
-  left: -28px;
+  left: -16px;
 }
 .resizable-editor__drag-handle.is-right {
-  right: -28px;
-}
-.resizable-editor__drag-handle:hover {
-  background: #949494;
+  right: -16px;
 }
-.resizable-editor__drag-handle:active {
-  cursor: grabbing;
-  background: #949494;
+.resizable-editor__drag-handle:hover, .resizable-editor__drag-handle:active {
+  background: #ccc;
 }
 .resizable-editor__drag-handle:focus {
   box-shadow: 0 0 0 1px #2f2f2f, 0 0 0 calc(var(--wp-admin-border-width-focus) + 1px) var(--wp-admin-theme-color);
@@ -526,14 +518,6 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   min-height: 152px;
   line-height: 1;
 }
-.edit-site-global-styles-preview .component-color-indicator {
-  border-radius: 50%;
-  border: 0;
-  height: 36px;
-  width: 36px;
-  margin-left: 0;
-  padding: 0;
-}
 
 .edit-site-typography-panel__preview {
   display: flex;
@@ -563,13 +547,6 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   margin: 16px;
 }
 .edit-site-global-styles-screen-colors .component-color-indicator {
-  margin-left: 0;
-  display: block;
-  border-radius: 50%;
-  height: 24px;
-  width: 24px;
-  padding: 0;
-  border: 1px solid #ddd;
   background: linear-gradient(-45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
 }
 
@@ -600,6 +577,12 @@ h2.edit-site-global-styles-gradient-palette-panel__duotone-heading.components-he
   margin-bottom: 8px;
 }
 
+.edit-site-screen-text-color__control,
+.edit-site-screen-link-color__control,
+.edit-site-screen-background-color__control {
+  padding: 16px;
+}
+
 .edit-site-header {
   align-items: center;
   background-color: #fff;
@@ -628,6 +611,8 @@ body.is-fullscreen-mode .edit-site-header {
   display: flex;
   align-items: center;
   height: 100%;
+  flex-grow: 1;
+  justify-content: center;
   min-width: 0;
 }
 .edit-site-header .edit-site-header_end {
@@ -705,7 +690,6 @@ body.is-navigation-sidebar-open .edit-site-header .edit-site-header_end .compone
 .edit-site-header__actions {
   display: inline-flex;
   align-items: center;
-  flex-wrap: wrap;
   padding-right: 4px;
 }
 .edit-site-header__actions .interface-pinned-items {
@@ -760,6 +744,7 @@ body.is-navigation-sidebar-open .edit-site-header .edit-site-header_end .compone
   display: flex;
   flex-direction: column;
   justify-content: center;
+  padding: 0 8px;
   height: 100%;
   min-width: 0;
 }
@@ -786,17 +771,6 @@ body.is-navigation-sidebar-open .edit-site-header .edit-site-header_end .compone
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  max-width: 120px;
-}
-@media (min-width: 782px) {
-  .edit-site-document-actions .edit-site-document-actions__title {
-    max-width: 75px;
-  }
-}
-@media (min-width: 1080px) {
-  .edit-site-document-actions .edit-site-document-actions__title {
-    max-width: 180px;
-  }
 }
 .edit-site-document-actions .edit-site-document-actions__secondary-item {
   white-space: nowrap;
@@ -1122,16 +1096,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;
   }
 }
@@ -1293,6 +1262,20 @@ body.is-fullscreen-mode .edit-site-list-header {
   margin: 0;
 }
 
+.edit-site-global-styles-sidebar {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+.edit-site-global-styles-sidebar__panel, .edit-site-global-styles-sidebar__navigator-provider {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+.edit-site-global-styles-sidebar__navigator-screen {
+  flex: 1;
+}
+
 .edit-site-global-styles-sidebar .interface-complementary-area-header .components-button.has-icon {
   margin-left: 0;
 }
@@ -1301,18 +1284,6 @@ body.is-fullscreen-mode .edit-site-list-header {
   margin-left: auto;
 }
 
-.edit-site-global-styles-sidebar__border-controls-row {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 12px;
-}
-.edit-site-global-styles-sidebar__border-controls-row > * {
-  width: calc(50% - 8px);
-}
-.edit-site-global-styles-sidebar__border-controls-row .components-border-style-control__buttons {
-  margin-bottom: 0;
-}
-
 .edit-site-global-styles-sidebar .components-navigation__menu-title-heading {
   font-size: 15.6px;
   font-weight: 500;
@@ -1327,6 +1298,10 @@ body.is-fullscreen-mode .edit-site-list-header {
   border: 0;
 }
 
+.edit-site-global-styles-sidebar .components-tools-panel-item.single-column {
+  grid-column: span 1;
+}
+
 .edit-site-global-styles-sidebar__blocks-group {
   padding-top: 24px;
   border-top: 1px solid #e0e0e0;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "3.0.14",
+	"version": "3.0.18-next.33ec3857e2.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,35 +27,36 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.2.4",
-		"@wordpress/api-fetch": "^5.2.6",
-		"@wordpress/block-editor": "^8.0.8",
-		"@wordpress/block-library": "^6.0.12",
-		"@wordpress/blocks": "^11.1.4",
-		"@wordpress/components": "^19.1.2",
-		"@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.11",
-		"@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.10",
-		"@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.14",
-		"@wordpress/url": "^3.3.1",
-		"@wordpress/viewport": "^4.0.6",
+		"@wordpress/a11y": "^3.2.5-next.33ec3857e2.0",
+		"@wordpress/api-fetch": "^5.2.7-next.33ec3857e2.0",
+		"@wordpress/block-editor": "^8.0.12-next.33ec3857e2.0",
+		"@wordpress/block-library": "^6.0.17-next.33ec3857e2.0",
+		"@wordpress/blocks": "^11.1.5-next.33ec3857e2.0",
+		"@wordpress/components": "^19.2.1-next.33ec3857e2.0",
+		"@wordpress/compose": "^5.0.7-next.33ec3857e2.0",
+		"@wordpress/core-data": "^4.0.10-next.33ec3857e2.0",
+		"@wordpress/data": "^6.1.6-next.33ec3857e2.0",
+		"@wordpress/data-controls": "^2.2.8-next.33ec3857e2.0",
+		"@wordpress/editor": "^12.0.15-next.33ec3857e2.0",
+		"@wordpress/element": "^4.0.6-next.33ec3857e2.0",
+		"@wordpress/hooks": "^3.2.3-next.33ec3857e2.0",
+		"@wordpress/html-entities": "^3.2.4-next.33ec3857e2.0",
+		"@wordpress/i18n": "^4.2.5-next.33ec3857e2.0",
+		"@wordpress/icons": "^6.1.2-next.33ec3857e2.0",
+		"@wordpress/interface": "^4.1.14-next.33ec3857e2.0",
+		"@wordpress/keyboard-shortcuts": "^3.0.7-next.33ec3857e2.0",
+		"@wordpress/keycodes": "^3.2.5-next.33ec3857e2.0",
+		"@wordpress/media-utils": "^3.0.6-next.33ec3857e2.0",
+		"@wordpress/notices": "^3.2.8-next.33ec3857e2.0",
+		"@wordpress/plugins": "^4.0.7-next.33ec3857e2.0",
+		"@wordpress/primitives": "^3.0.5-next.33ec3857e2.0",
+		"@wordpress/reusable-blocks": "^3.0.18-next.33ec3857e2.0",
+		"@wordpress/url": "^3.3.2-next.33ec3857e2.0",
+		"@wordpress/viewport": "^4.0.7-next.33ec3857e2.0",
 		"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": "34b76b2f9397215e5afb8443f5b3073c83913102"
+	"gitHead": "51c7917ea7fac72953702f24d6daac87d99e7617"
 }

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>
+	);
+}