@wordpress/edit-site 3.0.6 → 3.0.10

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

@@ -0,0 +1,67 @@
+/**
+ * External dependencies
+ */
+import { kebabCase } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+import { Button } from '@wordpress/components';
+import { addQueryArgs } from '@wordpress/url';
+import apiFetch from '@wordpress/api-fetch';
+
+/**
+ * Internal dependencies
+ */
+import CreateTemplatePartModal from '../create-template-part-modal';
+
+export default function NewTemplatePart( { postType } ) {
+	const [ isModalOpen, setIsModalOpen ] = useState( false );
+
+	async function createTemplatePart( { title, area } ) {
+		if ( ! title ) {
+			return;
+		}
+
+		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',
+		} );
+
+		// Wait for async navigation to happen before closing the modal.
+		await new Promise( () => {} );
+	}
+
+	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,117 @@
+/**
+ * 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.search = addQueryArgs( '', {
+			page: 'gutenberg-edit-site',
+			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

@@ -33,18 +33,21 @@ import { ShortcutProvider } from '@wordpress/keyboard-shortcuts';
  */
 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 } ) {
@@ -101,7 +104,7 @@ function Editor( { initialSettings, onError } ) {
 	const { setPage, setIsInserterOpened, updateSettings } = useDispatch(
 		editSiteStore
 	);
-	const { enableComplementaryArea } = useDispatch( interfaceStore );
+
 	useEffect( () => {
 		updateSettings( initialSettings );
 	}, [] );
@@ -159,19 +162,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 +208,11 @@ function Editor( { initialSettings, onError } ) {
 														<ComplementaryArea.Slot scope="core/edit-site" />
 													)
 												}
+												drawer={
+													<NavigationSidebar
+														defaultIsOpen={ false }
+													/>
+												}
 												header={
 													<Header
 														openEntitiesSavedStates={
@@ -288,6 +283,7 @@ function Editor( { initialSettings, onError } ) {
 												}
 												footer={ <BlockBreadcrumb /> }
 											/>
+											<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/global-styles-provider.js

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

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

@@ -6,7 +6,7 @@ import { get, cloneDeep, set, isEqual, has } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { _x } from '@wordpress/i18n';
 import { useContext, useCallback, useMemo } from '@wordpress/element';
 import {
 	getBlockType,
@@ -65,7 +65,7 @@ export function useSetting( path, blockName, source = 'all' ) {
 		const getSettingValue = ( configToUse ) => {
 			const result = get( configToUse, currentPath );
 			if ( PATHS_WITH_MERGE[ path ] ) {
-				return result?.user ?? result?.theme ?? result?.core;
+				return result?.user ?? result?.theme ?? result?.default;
 			}
 			return result;
 		};
@@ -218,57 +218,89 @@ export function getSupportedGlobalStylesPanels( name ) {
 }
 
 export function useColorsPerOrigin( name ) {
-	const [ userColors ] = useSetting( 'color.palette.user', name );
+	const [ customColors ] = useSetting( 'color.palette.user', name );
 	const [ themeColors ] = useSetting( 'color.palette.theme', name );
-	const [ coreColors ] = useSetting( 'color.palette.core', name );
+	const [ defaultColors ] = useSetting( 'color.palette.default', name );
+	const [ shouldDisplayDefaultColors ] = useSetting( 'color.defaultPalette' );
+
 	return useMemo( () => {
 		const result = [];
-		if ( coreColors && coreColors.length ) {
+		if ( themeColors && themeColors.length ) {
 			result.push( {
-				name: __( 'Core' ),
-				colors: coreColors,
+				name: _x(
+					'Theme',
+					'Indicates this palette comes from the theme.'
+				),
+				colors: themeColors,
 			} );
 		}
-		if ( themeColors && themeColors.length ) {
+		if (
+			shouldDisplayDefaultColors &&
+			defaultColors &&
+			defaultColors.length
+		) {
 			result.push( {
-				name: __( 'Theme' ),
-				colors: themeColors,
+				name: _x(
+					'Default',
+					'Indicates this palette comes from WordPress.'
+				),
+				colors: defaultColors,
 			} );
 		}
-		if ( userColors && userColors.length ) {
+		if ( customColors && customColors.length ) {
 			result.push( {
-				name: __( 'User' ),
-				colors: userColors,
+				name: _x(
+					'Custom',
+					'Indicates this palette is created by the user.'
+				),
+				colors: customColors,
 			} );
 		}
 		return result;
-	}, [ userColors, themeColors, coreColors ] );
+	}, [ customColors, themeColors, defaultColors ] );
 }
 
 export function useGradientsPerOrigin( name ) {
-	const [ userGradients ] = useSetting( 'color.gradients.user', name );
+	const [ customGradients ] = useSetting( 'color.gradients.user', name );
 	const [ themeGradients ] = useSetting( 'color.gradients.theme', name );
-	const [ coreGradients ] = useSetting( 'color.gradients.core', name );
+	const [ defaultGradients ] = useSetting( 'color.gradients.default', name );
+	const [ shouldDisplayDefaultGradients ] = useSetting(
+		'color.defaultGradients'
+	);
+
 	return useMemo( () => {
 		const result = [];
-		if ( coreGradients && coreGradients.length ) {
+		if ( themeGradients && themeGradients.length ) {
 			result.push( {
-				name: __( 'Core' ),
-				gradients: coreGradients,
+				name: _x(
+					'Theme',
+					'Indicates this palette comes from the theme.'
+				),
+				gradients: themeGradients,
 			} );
 		}
-		if ( themeGradients && themeGradients.length ) {
+		if (
+			shouldDisplayDefaultGradients &&
+			defaultGradients &&
+			defaultGradients.length
+		) {
 			result.push( {
-				name: __( 'Theme' ),
-				gradients: themeGradients,
+				name: _x(
+					'Default',
+					'Indicates this palette comes from WordPress.'
+				),
+				gradients: defaultGradients,
 			} );
 		}
-		if ( userGradients && userGradients.length ) {
+		if ( customGradients && customGradients.length ) {
 			result.push( {
-				name: __( 'User' ),
-				gradients: userGradients,
+				name: _x(
+					'Custom',
+					'Indicates this palette is created by the user.'
+				),
+				gradients: customGradients,
 			} );
 		}
 		return result;
-	}, [ userGradients, themeGradients, coreGradients ] );
+	}, [ customGradients, themeGradients, defaultGradients ] );
 }

package/src/components/global-styles/screen-block-list.js

@@ -3,6 +3,11 @@
  */
 import { getBlockTypes } from '@wordpress/blocks';
 import { __ } from '@wordpress/i18n';
+import {
+	FlexItem,
+	__experimentalHStack as HStack,
+} from '@wordpress/components';
+import { BlockIcon } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -29,7 +34,12 @@ function BlockMenuItem( { block } ) {
 
 	return (
 		<NavigationButton path={ '/blocks/' + block.name }>
-			{ block.title }
+			<HStack justify="flex-start">
+				<FlexItem>
+					<BlockIcon icon={ block.icon } />
+				</FlexItem>
+				<FlexItem>{ block.title }</FlexItem>
+			</HStack>
 		</NavigationButton>
 	);
 }

package/src/components/global-styles/test/use-global-styles-output.js

@@ -268,7 +268,7 @@ describe( 'global styles renderer', () => {
 				settings: {
 					color: {
 						palette: {
-							core: [
+							default: [
 								{
 									name: 'White',
 									slug: 'white',
@@ -286,7 +286,7 @@ describe( 'global styles renderer', () => {
 						'core/heading': {
 							color: {
 								palette: {
-									core: [
+									default: [
 										{
 											name: 'Blue',
 											slug: 'blue',