@wordpress/edit-site 3.0.10 → 3.0.11

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "3.0.10",
+	"version": "3.0.11",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -29,21 +29,21 @@
 		"@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.5",
+		"@wordpress/block-library": "^6.0.9",
 		"@wordpress/blocks": "^11.1.4",
-		"@wordpress/components": "^19.0.4",
+		"@wordpress/components": "^19.0.5",
 		"@wordpress/compose": "^5.0.6",
 		"@wordpress/core-data": "^4.0.7",
 		"@wordpress/data": "^6.1.4",
 		"@wordpress/data-controls": "^2.2.7",
-		"@wordpress/editor": "^12.0.7",
+		"@wordpress/editor": "^12.0.8",
 		"@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.7",
 		"@wordpress/keyboard-shortcuts": "^3.0.6",
 		"@wordpress/keycodes": "^3.2.4",
 		"@wordpress/media-utils": "^3.0.5",
@@ -61,5 +61,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "ca22e8852fcc91889510e417bdaa180ad60f8dac"
+	"gitHead": "518e7a279a0f596612232c55c83a351460f8816d"
 }

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

@@ -36,8 +36,7 @@ export default function NewTemplatePart( { postType } ) {
 		} );
 
 		// Navigate to the created template part editor.
-		window.location.search = addQueryArgs( '', {
-			page: 'gutenberg-edit-site',
+		window.location.href = addQueryArgs( window.location.href, {
 			postId: templatePart.id,
 			postType: 'wp_template_part',
 		} );

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

@@ -58,8 +58,7 @@ export default function NewTemplate( { postType } ) {
 		} );
 
 		// Navigate to the created template editor.
-		window.location.search = addQueryArgs( '', {
-			page: 'gutenberg-edit-site',
+		window.location.href = addQueryArgs( window.location.href, {
 			postId: template.id,
 			postType: 'wp_template',
 		} );

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 {
+	__experimentalColorEdit as ColorEdit,
+	__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.user',
+		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 && (
+				<ColorEdit
+					canReset={ themeColors !== baseThemeColors }
+					canOnlyChangeValues
+					colors={ themeColors }
+					onChange={ setThemeColors }
+					paletteLabel={ __( 'Theme' ) }
+				/>
+			) }
+			{ !! defaultColors &&
+				!! defaultColors.length &&
+				!! defaultPaletteEnabled && (
+					<ColorEdit
+						canReset={ defaultColors !== baseDefaultColors }
+						canOnlyChangeValues
+						colors={ defaultColors }
+						onChange={ setDefaultColors }
+						paletteLabel={ __( 'Default' ) }
+					/>
+				) }
+			<ColorEdit
+				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 ]

package/src/components/keyboard-shortcuts/index.js

@@ -136,6 +136,38 @@ function KeyboardShortcutsRegister() {
 				character: ',',
 			},
 		} );
+
+		registerShortcut( {
+			name: 'core/edit-site/next-region',
+			category: 'global',
+			description: __( 'Navigate to the next part of the editor.' ),
+			keyCombination: {
+				modifier: 'ctrl',
+				character: '`',
+			},
+			aliases: [
+				{
+					modifier: 'access',
+					character: 'n',
+				},
+			],
+		} );
+
+		registerShortcut( {
+			name: 'core/edit-site/previous-region',
+			category: 'global',
+			description: __( 'Navigate to the previous part of the editor.' ),
+			keyCombination: {
+				modifier: 'ctrlShift',
+				character: '`',
+			},
+			aliases: [
+				{
+					modifier: 'access',
+					character: 'p',
+				},
+			],
+		} );
 	}, [ registerShortcut ] );
 
 	return null;

package/src/components/list/index.js

@@ -1,31 +1,69 @@
 /**
  * WordPress dependencies
  */
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
 import { InterfaceSkeleton } from '@wordpress/interface';
-import { __ } from '@wordpress/i18n';
-import { useViewportMatch } from '@wordpress/compose';
+import { __, sprintf } from '@wordpress/i18n';
+import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 
 /**
  * Internal dependencies
  */
+import useRegisterShortcuts from './use-register-shortcuts';
 import Header from './header';
 import NavigationSidebar from '../navigation-sidebar';
 import Table from './table';
 
 export default function List( { templateType } ) {
-	const isDesktopViewport = useViewportMatch( 'medium' );
+	useRegisterShortcuts();
+
+	const { previousShortcut, nextShortcut } = useSelect( ( select ) => {
+		return {
+			previousShortcut: select(
+				keyboardShortcutsStore
+			).getAllShortcutKeyCombinations( 'core/edit-site/previous-region' ),
+			nextShortcut: select(
+				keyboardShortcutsStore
+			).getAllShortcutKeyCombinations( 'core/edit-site/next-region' ),
+		};
+	}, [] );
+
+	const postType = useSelect(
+		( select ) => select( coreStore ).getPostType( templateType ),
+		[ templateType ]
+	);
+
+	// `postType` could load in asynchronously. Only provide the detailed region labels if
+	// the postType has loaded, otherwise `InterfaceSkeleton` will fallback to the defaults.
+	const itemsListLabel = postType?.labels?.items_list;
+	const detailedRegionLabels = postType
+		? {
+				header: sprintf(
+					// translators: %s - the name of the page, 'Header' as in the header area of that page.
+					__( '%s - Header' ),
+					itemsListLabel
+				),
+				body: sprintf(
+					// translators: %s - the name of the page, 'Content' as in the content area of that page.
+					__( '%s - Content' ),
+					itemsListLabel
+				),
+		  }
+		: undefined;
 
 	return (
 		<InterfaceSkeleton
 			className="edit-site-list"
 			labels={ {
 				drawer: __( 'Navigation Sidebar' ),
+				...detailedRegionLabels,
 			} }
 			header={ <Header templateType={ templateType } /> }
 			drawer={
 				<NavigationSidebar
-					defaultIsOpen={ isDesktopViewport }
 					activeTemplateType={ templateType }
+					isDefaultOpen
 				/>
 			}
 			content={
@@ -33,6 +71,10 @@ export default function List( { templateType } ) {
 					<Table templateType={ templateType } />
 				</main>
 			}
+			shortcuts={ {
+				previous: previousShortcut,
+				next: nextShortcut,
+			} }
 		/>
 	);
 }

package/src/components/list/table.js

@@ -95,8 +95,7 @@ export default function Table( { templateType } ) {
 					<HStack className="edit-site-list-table-row">
 						<FlexItem className="edit-site-list-table-column">
 							<a
-								href={ addQueryArgs( '', {
-									page: 'gutenberg-edit-site',
+								href={ addQueryArgs( window.location.href, {
 									postId: template.id,
 									postType: template.type,
 								} ) }

package/src/components/list/use-register-shortcuts.js

@@ -0,0 +1,45 @@
+/**
+ * WordPress dependencies
+ */
+
+import { useDispatch } from '@wordpress/data';
+import { useEffect } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+
+export default function useRegisterShortcuts() {
+	const { registerShortcut } = useDispatch( keyboardShortcutsStore );
+	useEffect( () => {
+		registerShortcut( {
+			name: 'core/edit-site/next-region',
+			category: 'global',
+			description: __( 'Navigate to the next part of the editor.' ),
+			keyCombination: {
+				modifier: 'ctrl',
+				character: '`',
+			},
+			aliases: [
+				{
+					modifier: 'access',
+					character: 'n',
+				},
+			],
+		} );
+
+		registerShortcut( {
+			name: 'core/edit-site/previous-region',
+			category: 'global',
+			description: __( 'Navigate to the previous part of the editor.' ),
+			keyCombination: {
+				modifier: 'ctrlShift',
+				character: '`',
+			},
+			aliases: [
+				{
+					modifier: 'access',
+					character: 'p',
+				},
+			],
+		} );
+	}, [] );
+}

package/src/components/navigation-sidebar/index.js

@@ -1,8 +1,9 @@
 /**
  * WordPress dependencies
  */
-import { useState } from '@wordpress/element';
+import { useEffect, useState } from '@wordpress/element';
 import { createSlotFill } from '@wordpress/components';
+import { useViewportMatch } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -16,10 +17,25 @@ export const {
 } = createSlotFill( 'EditSiteNavigationPanelPreview' );
 
 export default function NavigationSidebar( {
-	defaultIsOpen = false,
+	isDefaultOpen = false,
 	activeTemplateType,
 } ) {
-	const [ isNavigationOpen, setIsNavigationOpen ] = useState( defaultIsOpen );
+	const isDesktopViewport = useViewportMatch( 'medium' );
+	const [ isNavigationOpen, setIsNavigationOpen ] = useState(
+		isDefaultOpen && isDesktopViewport
+	);
+
+	useEffect( () => {
+		// When transitioning to desktop open the navigation if `isDefaultOpen` is true.
+		if ( isDefaultOpen && isDesktopViewport ) {
+			setIsNavigationOpen( true );
+		}
+
+		// When transitioning to mobile/tablet, close the navigation.
+		if ( ! isDesktopViewport ) {
+			setIsNavigationOpen( false );
+		}
+	}, [ isDefaultOpen, isDesktopViewport ] );
 
 	return (
 		<>

package/src/components/navigation-sidebar/navigation-panel/index.js

@@ -82,23 +82,24 @@ const NavigationPanel = ( { isOpen, setIsOpen, activeTemplateType } ) => {
 							<NavigationGroup title={ __( 'Editor' ) }>
 								<NavigationItem
 									title={ __( 'Site' ) }
-									href={ addQueryArgs( '', {
-										page: 'gutenberg-edit-site',
+									href={ addQueryArgs( window.location.href, {
+										postId: undefined,
+										postType: undefined,
 									} ) }
 								/>
 								<NavigationItem
 									title={ __( 'Templates' ) }
 									item="wp_template"
-									href={ addQueryArgs( '', {
-										page: 'gutenberg-edit-site',
+									href={ addQueryArgs( window.location.href, {
+										postId: undefined,
 										postType: 'wp_template',
 									} ) }
 								/>
 								<NavigationItem
 									title={ __( 'Template Parts' ) }
 									item="wp_template_part"
-									href={ addQueryArgs( '', {
-										page: 'gutenberg-edit-site',
+									href={ addQueryArgs( window.location.href, {
+										postId: undefined,
 										postType: 'wp_template_part',
 									} ) }
 								/>

package/src/components/template-details/index.js

@@ -90,9 +90,9 @@ export default function TemplateDetails( { template, onClose } ) {
 
 			<Button
 				className="edit-site-template-details__show-all-button"
-				href={ addQueryArgs( '', {
-					page: 'gutenberg-edit-site',
+				href={ addQueryArgs( window.location.href, {
 					// TODO: We should update this to filter by template part's areas as well.
+					postId: undefined,
 					postType: template.type,
 				} ) }
 			>