@wordpress/edit-site 3.0.11 → 3.0.15

package/build-style/style-rtl.css

@@ -535,6 +535,30 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   padding: 0;
 }
 
+.edit-site-typography-panel__preview {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100px;
+  margin-bottom: 16px;
+  background: #f0f0f0;
+  border-radius: 2px;
+}
+
+.edit-site-global-styles-screen-typography {
+  margin: 16px;
+}
+
+.edit-site-global-styles-screen-typography__indicator {
+  height: 24px;
+  width: 24px;
+  font-size: 14px;
+  display: flex !important;
+  align-items: center;
+  justify-content: center;
+  border-radius: 2px;
+}
+
 .edit-site-global-styles-screen-colors {
   margin: 16px;
 }
@@ -542,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 {
@@ -561,6 +583,23 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   font-weight: 500;
 }
 
+.edit-site-screen-color-palette-toggle.edit-site-screen-color-palette-toggle {
+  margin-left: 16px;
+  margin-right: 16px;
+  width: unset;
+}
+.edit-site-screen-color-palette-toggle.edit-site-screen-color-palette-toggle .components-toggle-group-control {
+  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;
@@ -1099,12 +1138,14 @@ body.is-fullscreen-mode .edit-site-list-header {
 
 .edit-site-list-table {
   width: 100%;
-  border: 1px solid #e0e0e0;
+  border: 1px solid #ddd;
   border-radius: 2px;
   margin: 0;
   overflow: hidden;
+  border-spacing: 0;
+  max-width: 960px;
 }
-.edit-site-list-table li {
+.edit-site-list-table tr {
   display: flex;
   align-items: center;
   padding: 16px;
@@ -1112,36 +1153,119 @@ body.is-fullscreen-mode .edit-site-list-header {
   border-top: 1px solid #f0f0f0;
   margin: 0;
 }
+.edit-site-list-table tr:first-child {
+  border-top: 0;
+}
 @media (min-width: 782px) {
-  .edit-site-list-table li {
+  .edit-site-list-table tr {
     padding: 24px 32px;
   }
 }
-.edit-site-list-table li .edit-site-list-table-column:nth-child(1) {
-  width: calc(60% - 36px);
+.edit-site-list-table tr .edit-site-list-table-column:nth-child(1) {
+  width: calc(60% - 18px);
+  padding-left: 24px;
 }
-.edit-site-list-table li .edit-site-list-table-column:nth-child(1) a {
-  display: block;
+.edit-site-list-table tr .edit-site-list-table-column:nth-child(1) a {
+  display: inline-block;
   text-decoration: none;
   font-weight: 500;
   margin-bottom: 4px;
 }
-.edit-site-list-table li .edit-site-list-table-column:nth-child(2) {
-  width: calc(40% - 36px);
+.edit-site-list-table tr .edit-site-list-table-column:nth-child(2) {
+  width: calc(40% - 18px);
 }
-.edit-site-list-table li .edit-site-list-table-column:nth-child(3) {
+.edit-site-list-table tr .edit-site-list-table-column:nth-child(3) {
   min-width: 36px;
+  flex-shrink: 0;
 }
-.edit-site-list-table li.edit-site-list-table-head {
-  border-bottom: 1px solid #e0e0e0;
+.edit-site-list-table tr.edit-site-list-table-head {
   font-size: 16px;
-  font-weight: 500;
+  font-weight: 600;
   text-align: right;
-  color: #000;
+  color: #1e1e1e;
   border-top: none;
+  border-bottom: 1px solid #ddd;
 }
-.edit-site-list-table li.edit-site-list-table-head + li {
-  border-top: 0;
+.edit-site-list-table tr.edit-site-list-table-head th {
+  font-weight: inherit;
+}
+
+@media (min-width: 782px) {
+  .edit-site-list.is-navigation-open .components-snackbar-list {
+    margin-right: 300px;
+  }
+}
+
+@media (min-width: 782px) {
+  .edit-site-list__rename-modal .components-base-control {
+    width: 320px;
+  }
+}
+.edit-site-list__rename-modal .components-modal__header {
+  border-bottom: none;
+}
+.edit-site-list__rename-modal .components-modal__content::before {
+  margin-bottom: 4px;
+}
+
+.edit-site-list__rename-modal-actions {
+  margin-top: 12px;
+}
+
+.edit-site-template__actions button:not(:last-child) {
+  margin-left: 8px;
+}
+
+.edit-site-list-added-by__icon {
+  display: flex;
+  flex-shrink: 0;
+  position: relative;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  background: #2f2f2f;
+  border-radius: 100%;
+}
+.edit-site-list-added-by__icon svg {
+  fill: #fff;
+}
+.edit-site-list-added-by__icon.is-customized::after {
+  position: absolute;
+  content: "";
+  background: var(--wp-admin-theme-color);
+  height: 8px;
+  width: 8px;
+  outline: 2px solid #fff;
+  border-radius: 100%;
+  top: -1px;
+  left: -1px;
+}
+
+.edit-site-list-added-by__avatar {
+  flex-shrink: 0;
+  overflow: hidden;
+  border-radius: 100%;
+  background: #2f2f2f;
+  width: 32px;
+  height: 32px;
+}
+.edit-site-list-added-by__avatar img {
+  width: 32px;
+  height: 32px;
+  -o-object-fit: cover;
+     object-fit: cover;
+  opacity: 0;
+  transition: opacity 0.1s linear;
+}
+@media (prefers-reduced-motion: reduce) {
+  .edit-site-list-added-by__avatar img {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
+}
+.edit-site-list-added-by__avatar.is-loaded img {
+  opacity: 1;
 }
 
 .edit-site-new-template-dropdown .components-dropdown-menu__toggle {
@@ -1212,7 +1336,8 @@ body.is-fullscreen-mode .edit-site-list-header {
   padding: 0 16px;
 }
 
-.edit-site-global-styles-color-palette-panel {
+.edit-site-global-styles-color-palette-panel,
+.edit-site-global-styles-gradient-palette-panel {
   padding: 16px;
 }
 

package/build-style/style.css

@@ -535,6 +535,30 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   padding: 0;
 }
 
+.edit-site-typography-panel__preview {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100px;
+  margin-bottom: 16px;
+  background: #f0f0f0;
+  border-radius: 2px;
+}
+
+.edit-site-global-styles-screen-typography {
+  margin: 16px;
+}
+
+.edit-site-global-styles-screen-typography__indicator {
+  height: 24px;
+  width: 24px;
+  font-size: 14px;
+  display: flex !important;
+  align-items: center;
+  justify-content: center;
+  border-radius: 2px;
+}
+
 .edit-site-global-styles-screen-colors {
   margin: 16px;
 }
@@ -542,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 {
@@ -561,6 +583,23 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   font-weight: 500;
 }
 
+.edit-site-screen-color-palette-toggle.edit-site-screen-color-palette-toggle {
+  margin-right: 16px;
+  margin-left: 16px;
+  width: unset;
+}
+.edit-site-screen-color-palette-toggle.edit-site-screen-color-palette-toggle .components-toggle-group-control {
+  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;
@@ -1099,12 +1138,14 @@ body.is-fullscreen-mode .edit-site-list-header {
 
 .edit-site-list-table {
   width: 100%;
-  border: 1px solid #e0e0e0;
+  border: 1px solid #ddd;
   border-radius: 2px;
   margin: 0;
   overflow: hidden;
+  border-spacing: 0;
+  max-width: 960px;
 }
-.edit-site-list-table li {
+.edit-site-list-table tr {
   display: flex;
   align-items: center;
   padding: 16px;
@@ -1112,36 +1153,119 @@ body.is-fullscreen-mode .edit-site-list-header {
   border-top: 1px solid #f0f0f0;
   margin: 0;
 }
+.edit-site-list-table tr:first-child {
+  border-top: 0;
+}
 @media (min-width: 782px) {
-  .edit-site-list-table li {
+  .edit-site-list-table tr {
     padding: 24px 32px;
   }
 }
-.edit-site-list-table li .edit-site-list-table-column:nth-child(1) {
-  width: calc(60% - 36px);
+.edit-site-list-table tr .edit-site-list-table-column:nth-child(1) {
+  width: calc(60% - 18px);
+  padding-right: 24px;
 }
-.edit-site-list-table li .edit-site-list-table-column:nth-child(1) a {
-  display: block;
+.edit-site-list-table tr .edit-site-list-table-column:nth-child(1) a {
+  display: inline-block;
   text-decoration: none;
   font-weight: 500;
   margin-bottom: 4px;
 }
-.edit-site-list-table li .edit-site-list-table-column:nth-child(2) {
-  width: calc(40% - 36px);
+.edit-site-list-table tr .edit-site-list-table-column:nth-child(2) {
+  width: calc(40% - 18px);
 }
-.edit-site-list-table li .edit-site-list-table-column:nth-child(3) {
+.edit-site-list-table tr .edit-site-list-table-column:nth-child(3) {
   min-width: 36px;
+  flex-shrink: 0;
 }
-.edit-site-list-table li.edit-site-list-table-head {
-  border-bottom: 1px solid #e0e0e0;
+.edit-site-list-table tr.edit-site-list-table-head {
   font-size: 16px;
-  font-weight: 500;
+  font-weight: 600;
   text-align: left;
-  color: #000;
+  color: #1e1e1e;
   border-top: none;
+  border-bottom: 1px solid #ddd;
 }
-.edit-site-list-table li.edit-site-list-table-head + li {
-  border-top: 0;
+.edit-site-list-table tr.edit-site-list-table-head th {
+  font-weight: inherit;
+}
+
+@media (min-width: 782px) {
+  .edit-site-list.is-navigation-open .components-snackbar-list {
+    margin-left: 300px;
+  }
+}
+
+@media (min-width: 782px) {
+  .edit-site-list__rename-modal .components-base-control {
+    width: 320px;
+  }
+}
+.edit-site-list__rename-modal .components-modal__header {
+  border-bottom: none;
+}
+.edit-site-list__rename-modal .components-modal__content::before {
+  margin-bottom: 4px;
+}
+
+.edit-site-list__rename-modal-actions {
+  margin-top: 12px;
+}
+
+.edit-site-template__actions button:not(:last-child) {
+  margin-right: 8px;
+}
+
+.edit-site-list-added-by__icon {
+  display: flex;
+  flex-shrink: 0;
+  position: relative;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  background: #2f2f2f;
+  border-radius: 100%;
+}
+.edit-site-list-added-by__icon svg {
+  fill: #fff;
+}
+.edit-site-list-added-by__icon.is-customized::after {
+  position: absolute;
+  content: "";
+  background: var(--wp-admin-theme-color);
+  height: 8px;
+  width: 8px;
+  outline: 2px solid #fff;
+  border-radius: 100%;
+  top: -1px;
+  right: -1px;
+}
+
+.edit-site-list-added-by__avatar {
+  flex-shrink: 0;
+  overflow: hidden;
+  border-radius: 100%;
+  background: #2f2f2f;
+  width: 32px;
+  height: 32px;
+}
+.edit-site-list-added-by__avatar img {
+  width: 32px;
+  height: 32px;
+  -o-object-fit: cover;
+     object-fit: cover;
+  opacity: 0;
+  transition: opacity 0.1s linear;
+}
+@media (prefers-reduced-motion: reduce) {
+  .edit-site-list-added-by__avatar img {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
+}
+.edit-site-list-added-by__avatar.is-loaded img {
+  opacity: 1;
 }
 
 .edit-site-new-template-dropdown .components-dropdown-menu__toggle {
@@ -1212,7 +1336,8 @@ body.is-fullscreen-mode .edit-site-list-header {
   padding: 0 16px;
 }
 
-.edit-site-global-styles-color-palette-panel {
+.edit-site-global-styles-color-palette-panel,
+.edit-site-global-styles-gradient-palette-panel {
   padding: 16px;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "3.0.11",
+	"version": "3.0.15",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -29,28 +29,30 @@
 		"@babel/runtime": "^7.16.0",
 		"@wordpress/a11y": "^3.2.4",
 		"@wordpress/api-fetch": "^5.2.6",
-		"@wordpress/block-editor": "^8.0.5",
-		"@wordpress/block-library": "^6.0.9",
+		"@wordpress/block-editor": "^8.0.9",
+		"@wordpress/block-library": "^6.0.13",
 		"@wordpress/blocks": "^11.1.4",
-		"@wordpress/components": "^19.0.5",
+		"@wordpress/components": "^19.1.3",
 		"@wordpress/compose": "^5.0.6",
-		"@wordpress/core-data": "^4.0.7",
+		"@wordpress/core-data": "^4.0.8",
 		"@wordpress/data": "^6.1.4",
 		"@wordpress/data-controls": "^2.2.7",
-		"@wordpress/editor": "^12.0.8",
+		"@wordpress/editor": "^12.0.12",
 		"@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.7",
+		"@wordpress/interface": "^4.1.11",
 		"@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.15",
 		"@wordpress/url": "^3.3.1",
+		"@wordpress/viewport": "^4.0.6",
 		"classnames": "^2.3.1",
 		"downloadjs": "^1.4.7",
 		"file-saver": "^2.0.2",
@@ -61,5 +63,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "518e7a279a0f596612232c55c83a351460f8816d"
+	"gitHead": "f8c50499a12f926661103acfaeea6780d85b947b"
 }

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

@@ -7,9 +7,12 @@ import { kebabCase } from 'lodash';
  * WordPress dependencies
  */
 import { useState } from '@wordpress/element';
+import { 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';
 
 /**
  * Internal dependencies
@@ -18,31 +21,43 @@ import CreateTemplatePartModal from '../create-template-part-modal';
 
 export default function NewTemplatePart( { postType } ) {
 	const [ isModalOpen, setIsModalOpen ] = useState( false );
+	const { createErrorNotice } = useDispatch( noticesStore );
 
 	async function createTemplatePart( { title, area } ) {
 		if ( ! title ) {
+			createErrorNotice( __( 'Title is not defined.' ), {
+				type: 'snackbar',
+			} );
 			return;
 		}
 
-		const templatePart = await apiFetch( {
-			path: '/wp/v2/template-parts',
-			method: 'POST',
-			data: {
-				slug: kebabCase( title ),
-				title,
-				content: '',
-				area,
-			},
-		} );
+		try {
+			const templatePart = await apiFetch( {
+				path: '/wp/v2/template-parts',
+				method: 'POST',
+				data: {
+					slug: kebabCase( title ),
+					title,
+					content: '',
+					area,
+				},
+			} );
 
-		// Navigate to the created template part editor.
-		window.location.href = addQueryArgs( window.location.href, {
-			postId: templatePart.id,
-			postType: 'wp_template_part',
-		} );
+			// Navigate to the created template part editor.
+			window.location.href = addQueryArgs( window.location.href, {
+				postId: templatePart.id,
+				postType: 'wp_template_part',
+			} );
+		} catch ( error ) {
+			const errorMessage =
+				error.message && error.code !== 'unknown_error'
+					? error.message
+					: __(
+							'An error occurred while creating the template part.'
+					  );
 
-		// Wait for async navigation to happen before closing the modal.
-		await new Promise( () => {} );
+			createErrorNotice( errorMessage, { type: 'snackbar' } );
+		}
 	}
 
 	return (

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

@@ -12,11 +12,13 @@ import {
 	MenuItem,
 	NavigableMenu,
 } from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
+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';
 
 const DEFAULT_TEMPLATE_SLUGS = [
 	'front-page',
@@ -33,7 +35,8 @@ export default function NewTemplate( { postType } ) {
 		( select ) => ( {
 			templates: select( coreStore ).getEntityRecords(
 				'postType',
-				'wp_template'
+				'wp_template',
+				{ per_page: -1 }
 			),
 			defaultTemplateTypes: select(
 				editorStore
@@ -41,27 +44,44 @@ export default function NewTemplate( { postType } ) {
 		} ),
 		[]
 	);
+	const { createErrorNotice } = useDispatch( noticesStore );
 
 	async function createTemplate( { slug } ) {
-		const { title, description } = find( defaultTemplateTypes, { slug } );
+		try {
+			const { title, description } = find( defaultTemplateTypes, {
+				slug,
+			} );
 
-		const template = await apiFetch( {
-			path: '/wp/v2/templates',
-			method: 'POST',
-			data: {
-				excerpt: description,
-				// Slugs need to be strings, so this is for template `404`
-				slug: slug.toString(),
-				status: 'publish',
-				title,
-			},
-		} );
+			const template = await apiFetch( {
+				path: '/wp/v2/templates',
+				method: 'POST',
+				data: {
+					excerpt: description,
+					// Slugs need to be strings, so this is for template `404`
+					slug: slug.toString(),
+					status: 'publish',
+					title,
+				},
+			} );
 
-		// Navigate to the created template editor.
-		window.location.href = addQueryArgs( window.location.href, {
-			postId: template.id,
-			postType: 'wp_template',
-		} );
+			// Navigate to the created template editor.
+			window.location.href = addQueryArgs( window.location.href, {
+				postId: template.id,
+				postType: 'wp_template',
+			} );
+
+			// Wait for async navigation to happen before closing the modal.
+			await new Promise( () => {} );
+		} catch ( error ) {
+			const errorMessage =
+				error.message && error.code !== 'unknown_error'
+					? error.message
+					: __( 'An error occurred while creating the template.' );
+
+			createErrorNotice( errorMessage, {
+				type: 'snackbar',
+			} );
+		}
 	}
 
 	const existingTemplateSlugs = map( templates, 'slug' );

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

@@ -20,6 +20,7 @@ import {
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useMergeRefs, useViewportMatch } from '@wordpress/compose';
+import { ReusableBlocksMenuItems } from '@wordpress/reusable-blocks';
 
 /**
  * Internal dependencies
@@ -132,6 +133,7 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 					) }
 				</__unstableBlockSettingsMenuFirstItem>
 			</BlockTools>
+			<ReusableBlocksMenuItems />
 		</BlockEditorProvider>
 	);
 }