@wordpress/edit-site 3.0.7 → 3.0.11

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

@@ -0,0 +1,116 @@
+/**
+ * External dependencies
+ */
+import { filter, find, includes, map } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	DropdownMenu,
+	MenuGroup,
+	MenuItem,
+	NavigableMenu,
+} from '@wordpress/components';
+import { useSelect } 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';
+
+const DEFAULT_TEMPLATE_SLUGS = [
+	'front-page',
+	'single-post',
+	'page',
+	'archive',
+	'search',
+	'404',
+	'index',
+];
+
+export default function NewTemplate( { postType } ) {
+	const { templates, defaultTemplateTypes } = useSelect(
+		( select ) => ( {
+			templates: select( coreStore ).getEntityRecords(
+				'postType',
+				'wp_template'
+			),
+			defaultTemplateTypes: select(
+				editorStore
+			).__experimentalGetDefaultTemplateTypes(),
+		} ),
+		[]
+	);
+
+	async function createTemplate( { slug } ) {
+		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,
+			},
+		} );
+
+		// Navigate to the created template editor.
+		window.location.href = addQueryArgs( window.location.href, {
+			postId: template.id,
+			postType: 'wp_template',
+		} );
+	}
+
+	const existingTemplateSlugs = map( templates, 'slug' );
+
+	const missingTemplates = filter(
+		defaultTemplateTypes,
+		( template ) =>
+			includes( DEFAULT_TEMPLATE_SLUGS, template.slug ) &&
+			! includes( existingTemplateSlugs, template.slug )
+	);
+
+	if ( ! missingTemplates.length ) {
+		return null;
+	}
+
+	return (
+		<DropdownMenu
+			className="edit-site-new-template-dropdown"
+			icon={ null }
+			text={ postType.labels.add_new }
+			label={ postType.labels.add_new_item }
+			popoverProps={ {
+				noArrow: false,
+			} }
+			toggleProps={ {
+				variant: 'primary',
+			} }
+		>
+			{ () => (
+				<NavigableMenu className="edit-site-new-template-dropdown__popover">
+					<MenuGroup label={ postType.labels.add_new_item }>
+						{ map(
+							missingTemplates,
+							( { title, description, slug } ) => (
+								<MenuItem
+									info={ description }
+									key={ slug }
+									onClick={ () => {
+										createTemplate( { slug } );
+										// We will be navigated way so no need to close the dropdown.
+									} }
+								>
+									{ title }
+								</MenuItem>
+							)
+						) }
+					</MenuGroup>
+				</NavigableMenu>
+			) }
+		</DropdownMenu>
+	);
+}

package/src/components/add-new-template/style.scss

@@ -0,0 +1,11 @@
+.edit-site-new-template-dropdown {
+	.components-dropdown-menu__toggle {
+		padding: 6px 12px;
+	}
+
+	.edit-site-new-template-dropdown__popover {
+		@include break-small() {
+			min-width: 300px;
+		}
+	}
+}

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

@@ -0,0 +1,132 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import {
+	Icon,
+	BaseControl,
+	TextControl,
+	Flex,
+	FlexItem,
+	FlexBlock,
+	Button,
+	Modal,
+	__experimentalRadioGroup as RadioGroup,
+	__experimentalRadio as Radio,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
+import { useInstanceId } from '@wordpress/compose';
+import { store as editorStore } from '@wordpress/editor';
+import { check } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { TEMPLATE_PART_AREA_GENERAL } from '../../store/constants';
+
+export default function CreateTemplatePartModal( { closeModal, onCreate } ) {
+	const [ title, setTitle ] = useState( '' );
+	const [ area, setArea ] = useState( TEMPLATE_PART_AREA_GENERAL );
+	const [ isSubmitting, setIsSubmitting ] = useState( false );
+	const instanceId = useInstanceId( CreateTemplatePartModal );
+
+	const templatePartAreas = useSelect(
+		( select ) =>
+			select( editorStore ).__experimentalGetDefaultTemplatePartAreas(),
+		[]
+	);
+
+	return (
+		<Modal
+			title={ __( 'Create a template part' ) }
+			closeLabel={ __( 'Close' ) }
+			onRequestClose={ closeModal }
+			overlayClassName="edit-site-create-template-part-modal"
+		>
+			<form
+				onSubmit={ async ( event ) => {
+					event.preventDefault();
+					if ( ! title ) {
+						return;
+					}
+					setIsSubmitting( true );
+					await onCreate( { title, area } );
+					setIsSubmitting( false );
+					closeModal();
+				} }
+			>
+				<TextControl
+					label={ __( 'Name' ) }
+					value={ title }
+					onChange={ setTitle }
+					required
+				/>
+				<BaseControl
+					label={ __( 'Area' ) }
+					id={ `edit-site-create-template-part-modal__area-selection-${ instanceId }` }
+					className="edit-site-create-template-part-modal__area-base-control"
+				>
+					<RadioGroup
+						label={ __( 'Area' ) }
+						className="edit-site-create-template-part-modal__area-radio-group"
+						id={ `edit-site-create-template-part-modal__area-selection-${ instanceId }` }
+						onChange={ setArea }
+						checked={ area }
+					>
+						{ templatePartAreas.map(
+							( { icon, label, area: value, description } ) => (
+								<Radio
+									key={ label }
+									value={ value }
+									className="edit-site-create-template-part-modal__area-radio"
+								>
+									<Flex align="start" justify="start">
+										<FlexItem>
+											<Icon icon={ icon } />
+										</FlexItem>
+										<FlexBlock className="edit-site-create-template-part-modal__option-label">
+											{ label }
+											<div>{ description }</div>
+										</FlexBlock>
+
+										<FlexItem className="edit-site-create-template-part-modal__checkbox">
+											{ area === value && (
+												<Icon icon={ check } />
+											) }
+										</FlexItem>
+									</Flex>
+								</Radio>
+							)
+						) }
+					</RadioGroup>
+				</BaseControl>
+				<Flex
+					className="edit-site-create-template-part-modal__modal-actions"
+					justify="flex-end"
+				>
+					<FlexItem>
+						<Button
+							variant="secondary"
+							onClick={ () => {
+								closeModal();
+							} }
+						>
+							{ __( 'Cancel' ) }
+						</Button>
+					</FlexItem>
+					<FlexItem>
+						<Button
+							variant="primary"
+							type="submit"
+							disabled={ ! title }
+							isBusy={ isSubmitting }
+						>
+							{ __( 'Create' ) }
+						</Button>
+					</FlexItem>
+				</Flex>
+			</form>
+		</Modal>
+	);
+}

package/src/components/{template-part-converter → create-template-part-modal}/style.scss

@@ -1,5 +1,5 @@
-.edit-site-template-part-converter__modal {
-	z-index: z-index(".edit-site-template-part-converter__modal");
+.edit-site-create-template-part-modal {
+	z-index: z-index(".edit-site-create-template-part-modal");
 
 	.components-modal__frame {
 		@include break-small {
@@ -9,21 +9,21 @@
 }
 
 
-.edit-site-template-part-converter__convert-modal-actions {
+.edit-site-create-template-part-modal__modal-actions {
 	padding-top: $grid-unit-15;
 }
 
-.edit-site-template-part-converter__area-base-control .components-base-control__label {
+.edit-site-create-template-part-modal__area-base-control .components-base-control__label {
 	margin: $grid-unit-20 0 $grid-unit-10;
 	cursor: auto;
 }
 
-.edit-site-template-part-converter__area-radio-group {
+.edit-site-create-template-part-modal__area-radio-group {
 	width: 100%;
 	border: $border-width solid $gray-700;
 	border-radius: 2px;
 
-	.components-button.edit-site-template-part-converter__area-radio {
+	.components-button.edit-site-create-template-part-modal__area-radio {
 		display: block;
 		width: 100%;
 		height: 100%;
@@ -56,12 +56,12 @@
 			color: $gray-900;
 			cursor: auto;
 
-			.edit-site-template-part-converter__option-label div {
+			.edit-site-create-template-part-modal__option-label div {
 				color: $gray-600;
 			}
 		}
 
-		.edit-site-template-part-converter__option-label {
+		.edit-site-create-template-part-modal__option-label {
 			padding-top: $grid-unit-05;
 			white-space: normal;
 
@@ -71,7 +71,7 @@
 			}
 		}
 
-		.edit-site-template-part-converter__checkbox {
+		.edit-site-create-template-part-modal__checkbox {
 			margin-left: auto;
 			min-width: $grid-unit-30;
 		}

package/src/components/editor/index.js

@@ -26,25 +26,31 @@ 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
  */
 import Header from '../header';
 import { SidebarComplementaryAreaFills } from '../sidebar';
+import NavigationSidebar from '../navigation-sidebar';
 import BlockEditor from '../block-editor';
 import KeyboardShortcuts from '../keyboard-shortcuts';
 import URLQueryController from '../url-query-controller';
 import InserterSidebar from '../secondary-sidebar/inserter-sidebar';
 import ListViewSidebar from '../secondary-sidebar/list-view-sidebar';
 import ErrorBoundary from '../error-boundary';
+import WelcomeGuide from '../welcome-guide';
 import { store as editSiteStore } from '../../store';
 import { GlobalStylesRenderer } from './global-styles-renderer';
 import { GlobalStylesProvider } from '../global-styles/global-styles-provider';
 
 const interfaceLabels = {
 	secondarySidebar: __( 'Block Library' ),
+	drawer: __( 'Navigation Sidebar' ),
 };
 
 function Editor( { initialSettings, onError } ) {
@@ -59,6 +65,8 @@ function Editor( { initialSettings, onError } ) {
 		template,
 		templateResolved,
 		isNavigationOpen,
+		previousShortcut,
+		nextShortcut,
 	} = useSelect( ( select ) => {
 		const {
 			isInserterOpened,
@@ -95,13 +103,19 @@ 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 );
 	const { setPage, setIsInserterOpened, updateSettings } = useDispatch(
 		editSiteStore
 	);
-	const { enableComplementaryArea } = useDispatch( interfaceStore );
+
 	useEffect( () => {
 		updateSettings( initialSettings );
 	}, [] );
@@ -159,19 +173,6 @@ function Editor( { initialSettings, onError } ) {
 		}
 	}, [ isNavigationOpen ] );
 
-	useEffect(
-		function openGlobalStylesOnLoad() {
-			const searchParams = new URLSearchParams( window.location.search );
-			if ( searchParams.get( 'styles' ) === 'open' ) {
-				enableComplementaryArea(
-					'core/edit-site',
-					'edit-site/global-styles'
-				);
-			}
-		},
-		[ enableComplementaryArea ]
-	);
-
 	// Don't render the Editor until the settings are set and loaded
 	const isReady =
 		settings?.siteUrl &&
@@ -218,6 +219,7 @@ function Editor( { initialSettings, onError } ) {
 														<ComplementaryArea.Slot scope="core/edit-site" />
 													)
 												}
+												drawer={ <NavigationSidebar /> }
 												header={
 													<Header
 														openEntitiesSavedStates={
@@ -287,7 +289,12 @@ function Editor( { initialSettings, onError } ) {
 													</>
 												}
 												footer={ <BlockBreadcrumb /> }
+												shortcuts={ {
+													previous: previousShortcut,
+													next: nextShortcut,
+												} }
 											/>
+											<WelcomeGuide />
 											<Popover.Slot />
 											<PluginArea />
 										</ErrorBoundary>

package/src/components/editor/style.scss

@@ -1,3 +1,11 @@
+html #wpadminbar {
+	display: none;
+}
+
+html.wp-toolbar {
+	padding-top: 0;
+}
+
 .edit-site-editor__toggle-save-panel {
 	z-index: z-index(".edit-site-editor__toggle-save-panel");
 	position: fixed !important; // Need to override the default relative positioning

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 ]
@@ -135,7 +105,7 @@ function useGlobalStylesBaseConfig() {
 		).__experimentalGetCurrentThemeBaseGlobalStyles();
 	}, [] );
 
-	return baseConfig;
+	return [ !! baseConfig, baseConfig ];
 }
 
 function useGlobalStylesContext() {
@@ -144,7 +114,7 @@ function useGlobalStylesContext() {
 		userConfig,
 		setUserConfig,
 	] = useGlobalStylesUserConfig();
-	const baseConfig = useGlobalStylesBaseConfig();
+	const [ isBaseConfigReady, baseConfig ] = useGlobalStylesBaseConfig();
 	const mergedConfig = useMemo( () => {
 		if ( ! baseConfig || ! userConfig ) {
 			return {};
@@ -153,7 +123,7 @@ function useGlobalStylesContext() {
 	}, [ userConfig, baseConfig ] );
 	const context = useMemo( () => {
 		return {
-			isReady: isUserConfigReady,
+			isReady: isUserConfigReady && isBaseConfigReady,
 			user: userConfig,
 			base: baseConfig,
 			merged: mergedConfig,
@@ -165,6 +135,7 @@ function useGlobalStylesContext() {
 		baseConfig,
 		setUserConfig,
 		isUserConfigReady,
+		isBaseConfigReady,
 	] );
 
 	return context;