@wordpress/edit-site 3.0.10 → 3.0.14

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.10",
+	"version": "3.0.14",
 	"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.4",
-		"@wordpress/block-library": "^6.0.8",
+		"@wordpress/block-editor": "^8.0.8",
+		"@wordpress/block-library": "^6.0.12",
 		"@wordpress/blocks": "^11.1.4",
-		"@wordpress/components": "^19.0.4",
+		"@wordpress/components": "^19.1.2",
 		"@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.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.6",
+		"@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",
 		"classnames": "^2.3.1",
 		"downloadjs": "^1.4.7",
 		"file-saver": "^2.0.2",
@@ -61,5 +63,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "ca22e8852fcc91889510e417bdaa180ad60f8dac"
+	"gitHead": "34b76b2f9397215e5afb8443f5b3073c83913102"
 }

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,32 +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.search = addQueryArgs( '', {
-			page: 'gutenberg-edit-site',
-			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,28 +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.search = addQueryArgs( '', {
-			page: 'gutenberg-edit-site',
-			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>
 	);
 }

package/src/components/editor/index.js

@@ -26,7 +26,10 @@ import {
 } from '@wordpress/editor';
 import { __ } from '@wordpress/i18n';
 import { PluginArea } from '@wordpress/plugins';
-import { ShortcutProvider } from '@wordpress/keyboard-shortcuts';
+import {
+	ShortcutProvider,
+	store as keyboardShortcutsStore,
+} from '@wordpress/keyboard-shortcuts';
 
 /**
  * Internal dependencies
@@ -62,6 +65,8 @@ function Editor( { initialSettings, onError } ) {
 		template,
 		templateResolved,
 		isNavigationOpen,
+		previousShortcut,
+		nextShortcut,
 	} = useSelect( ( select ) => {
 		const {
 			isInserterOpened,
@@ -98,6 +103,12 @@ function Editor( { initialSettings, onError } ) {
 				: false,
 			entityId: postId,
 			isNavigationOpen: isNavigationOpened(),
+			previousShortcut: select(
+				keyboardShortcutsStore
+			).getAllShortcutKeyCombinations( 'core/edit-site/previous-region' ),
+			nextShortcut: select(
+				keyboardShortcutsStore
+			).getAllShortcutKeyCombinations( 'core/edit-site/next-region' ),
 		};
 	}, [] );
 	const { updateEditorSettings } = useDispatch( editorStore );
@@ -208,11 +219,7 @@ function Editor( { initialSettings, onError } ) {
 														<ComplementaryArea.Slot scope="core/edit-site" />
 													)
 												}
-												drawer={
-													<NavigationSidebar
-														defaultIsOpen={ false }
-													/>
-												}
+												drawer={ <NavigationSidebar /> }
 												header={
 													<Header
 														openEntitiesSavedStates={
@@ -282,6 +289,10 @@ function Editor( { initialSettings, onError } ) {
 													</>
 												}
 												footer={ <BlockBreadcrumb /> }
+												shortcuts={ {
+													previous: previousShortcut,
+													next: nextShortcut,
+												} }
 											/>
 											<WelcomeGuide />
 											<Popover.Slot />

package/src/components/global-styles/color-palette-panel.js

@@ -1,7 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { __experimentalColorEdit as ColorEdit } from '@wordpress/components';
+import {
+	__experimentalPaletteEdit as PaletteEdit,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -9,14 +13,67 @@ import { __experimentalColorEdit as ColorEdit } from '@wordpress/components';
 import { useSetting } from './hooks';
 
 export default function ColorPalettePanel( { name } ) {
-	const [ userColors, setColors ] = useSetting(
-		'color.palette',
+	const [ themeColors, setThemeColors ] = useSetting(
+		'color.palette.theme',
+		name
+	);
+	const [ baseThemeColors ] = useSetting(
+		'color.palette.theme',
+		name,
+		'base'
+	);
+	const [ defaultColors, setDefaultColors ] = useSetting(
+		'color.palette.default',
+		name
+	);
+	const [ baseDefaultColors ] = useSetting(
+		'color.palette.default',
 		name,
-		'user'
+		'base'
+	);
+	const [ customColors, setCustomColors ] = useSetting(
+		'color.palette.custom',
+		name
+	);
+
+	const [ defaultPaletteEnabled ] = useSetting(
+		'color.defaultPalette',
+		name
 	);
 	return (
-		<div className="edit-site-global-styles-color-palette-panel">
-			<ColorEdit colors={ userColors } onChange={ setColors } />
-		</div>
+		<VStack
+			className="edit-site-global-styles-color-palette-panel"
+			spacing={ 10 }
+		>
+			{ !! themeColors && !! themeColors.length && (
+				<PaletteEdit
+					canReset={ themeColors !== baseThemeColors }
+					canOnlyChangeValues
+					colors={ themeColors }
+					onChange={ setThemeColors }
+					paletteLabel={ __( 'Theme' ) }
+				/>
+			) }
+			{ !! defaultColors &&
+				!! defaultColors.length &&
+				!! defaultPaletteEnabled && (
+					<PaletteEdit
+						canReset={ defaultColors !== baseDefaultColors }
+						canOnlyChangeValues
+						colors={ defaultColors }
+						onChange={ setDefaultColors }
+						paletteLabel={ __( 'Default' ) }
+					/>
+				) }
+			<PaletteEdit
+				colors={ customColors }
+				onChange={ setCustomColors }
+				paletteLabel={ __( 'Custom' ) }
+				emptyMessage={ __(
+					'Custom colors are empty! Add some colors to create your own color palette.'
+				) }
+				slugPrefix="custom-"
+			/>
+		</VStack>
 	);
 }

package/src/components/global-styles/global-styles-provider.js

@@ -2,9 +2,6 @@
  * External dependencies
  */
 import {
-	get,
-	cloneDeep,
-	set,
 	mergeWith,
 	pickBy,
 	isEmpty,
@@ -23,7 +20,6 @@ import { store as coreStore } from '@wordpress/core-data';
 /**
  * Internal dependencies
  */
-import { PRESET_METADATA } from './utils';
 import { GlobalStylesContext } from './context';
 
 function mergeTreesCustomizer( _, srcValue ) {
@@ -39,29 +35,6 @@ function mergeBaseAndUserConfigs( base, user ) {
 	return mergeWith( {}, base, user, mergeTreesCustomizer );
 }
 
-function addUserOriginToSettings( settingsToAdd ) {
-	const newSettings = cloneDeep( settingsToAdd );
-	PRESET_METADATA.forEach( ( { path } ) => {
-		const presetData = get( newSettings, path );
-		if ( presetData ) {
-			set( newSettings, path, {
-				user: presetData,
-			} );
-		}
-	} );
-	return newSettings;
-}
-
-function removeUserOriginFromSettings( settingsToRemove ) {
-	const newSettings = cloneDeep( settingsToRemove );
-	PRESET_METADATA.forEach( ( { path } ) => {
-		const presetData = get( newSettings, path );
-		if ( presetData ) {
-			set( newSettings, path, ( presetData ?? {} ).user );
-		}
-	} );
-	return newSettings;
-}
 const cleanEmptyObject = ( object ) => {
 	if ( ! isObject( object ) || Array.isArray( object ) ) {
 		return object;
@@ -97,7 +70,7 @@ function useGlobalStylesUserConfig() {
 
 	const config = useMemo( () => {
 		return {
-			settings: addUserOriginToSettings( settings ?? {} ),
+			settings: settings ?? {},
 			styles: styles ?? {},
 		};
 	}, [ settings, styles ] );
@@ -111,15 +84,12 @@ function useGlobalStylesUserConfig() {
 			);
 			const currentConfig = {
 				styles: record?.styles ?? {},
-				settings: addUserOriginToSettings( record?.settings ?? {} ),
+				settings: record?.settings ?? {},
 			};
 			const updatedConfig = callback( currentConfig );
 			editEntityRecord( 'root', 'globalStyles', globalStylesId, {
 				styles: cleanEmptyObject( updatedConfig.styles ) || {},
-				settings:
-					cleanEmptyObject(
-						removeUserOriginFromSettings( updatedConfig.settings )
-					) || {},
+				settings: cleanEmptyObject( updatedConfig.settings ) || {},
 			} );
 		},
 		[ globalStylesId ]