@wordpress/edit-site 3.0.8 → 3.0.12

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

@@ -0,0 +1,30 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import NewTemplate from './new-template';
+import NewTemplatePart from './new-template-part';
+
+export default function AddNewTemplate( { templateType = 'wp_template' } ) {
+	const postType = useSelect(
+		( select ) => select( coreStore ).getPostType( templateType ),
+		[ templateType ]
+	);
+
+	if ( ! postType ) {
+		return null;
+	}
+
+	if ( templateType === 'wp_template' ) {
+		return <NewTemplate postType={ postType } />;
+	} else if ( templateType === 'wp_template_part' ) {
+		return <NewTemplatePart postType={ postType } />;
+	}
+
+	return null;
+}

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

@@ -0,0 +1,81 @@
+/**
+ * External dependencies
+ */
+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
+ */
+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;
+		}
+
+		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',
+			} );
+		} catch ( error ) {
+			const errorMessage =
+				error.message && error.code !== 'unknown_error'
+					? error.message
+					: __(
+							'An error occurred while creating the template part.'
+					  );
+
+			createErrorNotice( errorMessage, { type: 'snackbar' } );
+		}
+	}
+
+	return (
+		<>
+			<Button
+				variant="primary"
+				onClick={ () => {
+					setIsModalOpen( true );
+				} }
+			>
+				{ postType.labels.add_new }
+			</Button>
+			{ isModalOpen && (
+				<CreateTemplatePartModal
+					closeModal={ () => setIsModalOpen( false ) }
+					onCreate={ createTemplatePart }
+				/>
+			) }
+		</>
+	);
+}

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

@@ -0,0 +1,136 @@
+/**
+ * External dependencies
+ */
+import { filter, find, includes, map } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	DropdownMenu,
+	MenuGroup,
+	MenuItem,
+	NavigableMenu,
+} from '@wordpress/components';
+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',
+	'single-post',
+	'page',
+	'archive',
+	'search',
+	'404',
+	'index',
+];
+
+export default function NewTemplate( { postType } ) {
+	const { templates, defaultTemplateTypes } = useSelect(
+		( select ) => ( {
+			templates: select( coreStore ).getEntityRecords(
+				'postType',
+				'wp_template',
+				{ per_page: -1 }
+			),
+			defaultTemplateTypes: select(
+				editorStore
+			).__experimentalGetDefaultTemplateTypes(),
+		} ),
+		[]
+	);
+	const { createErrorNotice } = useDispatch( noticesStore );
+
+	async function createTemplate( { 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,
+				},
+			} );
+
+			// 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' );
+
+	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/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/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 {
+	__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>
 	);
 }