@wordpress/edit-site 5.12.0 → 5.12.2

package/src/components/create-pattern-modal/index.js

@@ -0,0 +1,134 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	TextControl,
+	Button,
+	Modal,
+	ToggleControl,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { store as coreStore } from '@wordpress/core-data';
+import { __ } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
+import { store as noticesStore } from '@wordpress/notices';
+import { useDispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { SYNC_TYPES, USER_PATTERN_CATEGORY } from '../page-library/utils';
+
+export default function CreatePatternModal( {
+	closeModal,
+	onCreate,
+	onError,
+} ) {
+	const [ name, setName ] = useState( '' );
+	const [ syncType, setSyncType ] = useState( SYNC_TYPES.full );
+	const [ isSubmitting, setIsSubmitting ] = useState( false );
+
+	const onSyncChange = () => {
+		setSyncType(
+			syncType === SYNC_TYPES.full ? SYNC_TYPES.unsynced : SYNC_TYPES.full
+		);
+	};
+
+	const { createErrorNotice } = useDispatch( noticesStore );
+	const { saveEntityRecord } = useDispatch( coreStore );
+
+	async function createPattern() {
+		if ( ! name ) {
+			createErrorNotice( __( 'Please enter a pattern name.' ), {
+				type: 'snackbar',
+			} );
+			return;
+		}
+
+		try {
+			const pattern = await saveEntityRecord(
+				'postType',
+				'wp_block',
+				{
+					title: name || __( 'Untitled Pattern' ),
+					content: '',
+					status: 'publish',
+					meta: { sync_status: syncType },
+				},
+				{ throwOnError: true }
+			);
+
+			onCreate( { pattern, categoryId: USER_PATTERN_CATEGORY } );
+		} catch ( error ) {
+			const errorMessage =
+				error.message && error.code !== 'unknown_error'
+					? error.message
+					: __( 'An error occurred while creating the pattern.' );
+
+			createErrorNotice( errorMessage, { type: 'snackbar' } );
+			onError();
+		}
+	}
+
+	return (
+		<Modal
+			title={ __( 'Create pattern' ) }
+			onRequestClose={ closeModal }
+			overlayClassName="edit-site-create-pattern-modal"
+		>
+			<p>{ __( 'Turn this block into a pattern to reuse later' ) }</p>
+
+			<form
+				onSubmit={ async ( event ) => {
+					event.preventDefault();
+					if ( ! name ) {
+						return;
+					}
+					setIsSubmitting( true );
+					await createPattern();
+				} }
+			>
+				<VStack spacing="4">
+					<TextControl
+						className="edit-site-create-pattern-modal__input"
+						label={ __( 'Name' ) }
+						onChange={ setName }
+						placeholder={ __( 'My pattern' ) }
+						required
+						value={ name }
+						__nextHasNoMarginBottom
+					/>
+					<ToggleControl
+						label={ __( 'Synced' ) }
+						onChange={ onSyncChange }
+						help={
+							syncType === SYNC_TYPES.full
+								? __( 'Content is synced' )
+								: __( 'Content is not synced' )
+						}
+						checked={ syncType === SYNC_TYPES.full }
+					/>
+					<HStack justify="right">
+						<Button
+							variant="tertiary"
+							onClick={ () => {
+								closeModal();
+							} }
+						>
+							{ __( 'Cancel' ) }
+						</Button>
+						<Button
+							variant="primary"
+							type="submit"
+							disabled={ ! name }
+							isBusy={ isSubmitting }
+						>
+							{ __( 'Create' ) }
+						</Button>
+					</HStack>
+				</VStack>
+			</form>
+		</Modal>
+	);
+}

package/src/components/create-pattern-modal/style.scss

@@ -0,0 +1,3 @@
+.edit-site-create-pattern-modal__input input {
+	height: 40px;
+}

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

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import {
 	Icon,
 	BaseControl,
@@ -20,14 +20,31 @@ import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
 import { useInstanceId } from '@wordpress/compose';
 import { store as editorStore } from '@wordpress/editor';
+import { store as noticesStore } from '@wordpress/notices';
+import { store as coreStore } from '@wordpress/core-data';
 import { check } from '@wordpress/icons';
+import { serialize } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
 import { TEMPLATE_PART_AREA_GENERAL } from '../../store/constants';
+import {
+	useExistingTemplateParts,
+	getUniqueTemplatePartTitle,
+	getCleanTemplatePartSlug,
+} from '../../utils/template-part-create';
+
+export default function CreateTemplatePartModal( {
+	closeModal,
+	blocks = [],
+	onCreate,
+	onError,
+} ) {
+	const { createErrorNotice } = useDispatch( noticesStore );
+	const { saveEntityRecord } = useDispatch( coreStore );
+	const existingTemplateParts = useExistingTemplateParts();
 
-export default function CreateTemplatePartModal( { closeModal, onCreate } ) {
 	const [ title, setTitle ] = useState( '' );
 	const [ area, setArea ] = useState( TEMPLATE_PART_AREA_GENERAL );
 	const [ isSubmitting, setIsSubmitting ] = useState( false );
@@ -39,9 +56,52 @@ export default function CreateTemplatePartModal( { closeModal, onCreate } ) {
 		[]
 	);
 
+	async function createTemplatePart() {
+		if ( ! title ) {
+			createErrorNotice( __( 'Please enter a title.' ), {
+				type: 'snackbar',
+			} );
+			return;
+		}
+
+		try {
+			const uniqueTitle = getUniqueTemplatePartTitle(
+				title,
+				existingTemplateParts
+			);
+			const cleanSlug = getCleanTemplatePartSlug( uniqueTitle );
+
+			const templatePart = await saveEntityRecord(
+				'postType',
+				'wp_template_part',
+				{
+					slug: cleanSlug,
+					title: uniqueTitle,
+					content: serialize( blocks ),
+					area,
+				},
+				{ throwOnError: true }
+			);
+			await onCreate( templatePart );
+
+			// TODO: Add a success notice?
+		} catch ( error ) {
+			const errorMessage =
+				error.message && error.code !== 'unknown_error'
+					? error.message
+					: __(
+							'An error occurred while creating the template part.'
+					  );
+
+			createErrorNotice( errorMessage, { type: 'snackbar' } );
+
+			onError?.();
+		}
+	}
+
 	return (
 		<Modal
-			title={ __( 'Create a template part' ) }
+			title={ __( 'Create template part' ) }
 			onRequestClose={ closeModal }
 			overlayClassName="edit-site-create-template-part-modal"
 		>
@@ -52,7 +112,7 @@ export default function CreateTemplatePartModal( { closeModal, onCreate } ) {
 						return;
 					}
 					setIsSubmitting( true );
-					await onCreate( { title, area } );
+					await createTemplatePart();
 				} }
 			>
 				<VStack spacing="4">

package/src/components/editor/index.js

@@ -15,6 +15,7 @@ import {
 	BlockContextProvider,
 	BlockBreadcrumb,
 	store as blockEditorStore,
+	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import {
 	InterfaceSkeleton,
@@ -39,10 +40,12 @@ import { store as editSiteStore } from '../../store';
 import { GlobalStylesRenderer } from '../global-styles-renderer';
 import useTitle from '../routes/use-title';
 import CanvasSpinner from '../canvas-spinner';
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 import useEditedEntityRecord from '../use-edited-entity-record';
 import { SidebarFixedBottomSlot } from '../sidebar-edit-mode/sidebar-fixed-bottom';
 
+const { BlockRemovalWarningModal } = unlock( blockEditorPrivateApis );
+
 const interfaceLabels = {
 	/* translators: accessibility text for the editor content landmark region. */
 	body: __( 'Editor content' ),
@@ -54,6 +57,12 @@ const interfaceLabels = {
 	footer: __( 'Editor footer' ),
 };
 
+const typeLabels = {
+	wp_template: __( 'Template Part' ),
+	wp_template_part: __( 'Template Part' ),
+	wp_block: __( 'Pattern' ),
+};
+
 export default function Editor( { isLoading } ) {
 	const {
 		record: editedPost,
@@ -73,7 +82,7 @@ export default function Editor( { isLoading } ) {
 		isListViewOpen,
 		showIconLabels,
 		showBlockBreadcrumbs,
-		hasPageContentLock,
+		hasPageContentFocus,
 	} = useSelect( ( select ) => {
 		const {
 			getEditedPostContext,
@@ -81,7 +90,7 @@ export default function Editor( { isLoading } ) {
 			getCanvasMode,
 			isInserterOpened,
 			isListViewOpened,
-			hasPageContentLock: _hasPageContentLock,
+			hasPageContentFocus: _hasPageContentFocus,
 		} = unlock( select( editSiteStore ) );
 		const { __unstableGetEditorMode } = select( blockEditorStore );
 		const { getActiveComplementaryArea } = select( interfaceStore );
@@ -106,7 +115,7 @@ export default function Editor( { isLoading } ) {
 				'core/edit-site',
 				'showBlockBreadcrumbs'
 			),
-			hasPageContentLock: _hasPageContentLock(),
+			hasPageContentFocus: _hasPageContentFocus(),
 		};
 	}, [] );
 	const { setEditedPostContext } = useDispatch( editSiteStore );
@@ -114,7 +123,7 @@ export default function Editor( { isLoading } ) {
 	const isViewMode = canvasMode === 'view';
 	const isEditMode = canvasMode === 'edit';
 	const showVisualEditor = isViewMode || editorMode === 'visual';
-	const shouldShowBlockBreakcrumbs =
+	const shouldShowBlockBreadcrumbs =
 		showBlockBreadcrumbs &&
 		isEditMode &&
 		showVisualEditor &&
@@ -127,7 +136,7 @@ export default function Editor( { isLoading } ) {
 	const blockContext = useMemo( () => {
 		const { postType, postId, ...nonPostFields } = context ?? {};
 		return {
-			...( hasPageContentLock ? context : nonPostFields ),
+			...( hasPageContentFocus ? context : nonPostFields ),
 			queryContext: [
 				context?.queryContext || { page: 1 },
 				( newQueryContext ) =>
@@ -140,14 +149,11 @@ export default function Editor( { isLoading } ) {
 					} ),
 			],
 		};
-	}, [ hasPageContentLock, context, setEditedPostContext ] );
+	}, [ hasPageContentFocus, context, setEditedPostContext ] );
 
 	let title;
 	if ( hasLoadedPost ) {
-		const type =
-			editedPostType === 'wp_template'
-				? __( 'Template' )
-				: __( 'Template Part' );
+		const type = typeLabels[ editedPostType ] ?? __( 'Template' );
 		title = sprintf(
 			// translators: A breadcrumb trail in browser tab. %1$s: title of template being edited, %2$s: type of template (Template or Template Part).
 			__( '%1$s ‹ %2$s ‹ Editor' ),
@@ -157,7 +163,7 @@ export default function Editor( { isLoading } ) {
 	}
 
 	// Only announce the title once the editor is ready to prevent "Replace"
-	// action in <URlQueryController> from double-announcing.
+	// action in <URLQueryController> from double-announcing.
 	useTitle( hasLoadedPost && title );
 
 	return (
@@ -174,6 +180,7 @@ export default function Editor( { isLoading } ) {
 						<SidebarComplementaryAreaFills />
 						{ isEditMode && <StartTemplateOptions /> }
 						<InterfaceSkeleton
+							isDistractionFree={ true }
 							enableRegionNavigation={ false }
 							className={ classnames(
 								'edit-site-editor__interface-skeleton',
@@ -188,7 +195,10 @@ export default function Editor( { isLoading } ) {
 									<GlobalStylesRenderer />
 									{ isEditMode && <EditorNotices /> }
 									{ showVisualEditor && editedPost && (
-										<BlockEditor />
+										<>
+											<BlockEditor />
+											<BlockRemovalWarningModal />
+										</>
 									) }
 									{ editorMode === 'text' &&
 										editedPost &&
@@ -227,10 +237,10 @@ export default function Editor( { isLoading } ) {
 								)
 							}
 							footer={
-								shouldShowBlockBreakcrumbs && (
+								shouldShowBlockBreadcrumbs && (
 									<BlockBreadcrumb
 										rootLabelText={
-											hasPageContentLock
+											hasPageContentFocus
 												? __( 'Page' )
 												: __( 'Template' )
 										}

package/src/components/editor/style.scss

@@ -6,6 +6,10 @@
 	&.is-loading {
 		opacity: 0;
 	}
+
+	.interface-interface-skeleton__header {
+		border: 0;
+	}
 }
 
 .edit-site-editor__toggle-save-panel {

package/src/components/editor-canvas-container/index.js

@@ -12,11 +12,12 @@ import { __ } from '@wordpress/i18n';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { closeSmall } from '@wordpress/icons';
 import { useFocusOnMount, useFocusReturn } from '@wordpress/compose';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
  */
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
 import ResizableEditor from '../block-editor/resizable-editor';
 
@@ -53,9 +54,22 @@ function EditorCanvasContainer( {
 	onClose,
 	enableResizing = false,
 } ) {
-	const editorCanvasContainerView = useSelect(
-		( select ) =>
-			unlock( select( editSiteStore ) ).getEditorCanvasContainerView(),
+	const { editorCanvasContainerView, showListViewByDefault } = useSelect(
+		( select ) => {
+			const _editorCanvasContainerView = unlock(
+				select( editSiteStore )
+			).getEditorCanvasContainerView();
+
+			const _showListViewByDefault = select( preferencesStore ).get(
+				'core/edit-site',
+				'showListViewByDefault'
+			);
+
+			return {
+				editorCanvasContainerView: _editorCanvasContainerView,
+				showListViewByDefault: _showListViewByDefault,
+			};
+		},
 		[]
 	);
 	const [ isClosed, setIsClosed ] = useState( false );
@@ -69,10 +83,13 @@ function EditorCanvasContainer( {
 		[ editorCanvasContainerView ]
 	);
 
+	const { setIsListViewOpened } = useDispatch( editSiteStore );
+
 	function onCloseContainer() {
 		if ( typeof onClose === 'function' ) {
 			onClose();
 		}
+		setIsListViewOpened( showListViewByDefault );
 		setEditorCanvasContainerView( undefined );
 		setIsClosed( true );
 	}

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

@@ -12,7 +12,7 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 /**
  * Internal dependencies
  */
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 
 const { useGlobalSetting } = unlock( blockEditorPrivateApis );
 const mobilePopoverProps = { placement: 'bottom-start', offset: 8 };

package/src/components/global-styles/dimensions-panel.js

@@ -7,7 +7,7 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 
 const {
 	useGlobalStyle,

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

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { mergeWith } from 'lodash';
+import deepmerge from 'deepmerge';
+import { isPlainObject } from 'is-plain-object';
 
 /**
  * WordPress dependencies
@@ -14,24 +15,19 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 /**
  * Internal dependencies
  */
-import CanvasSpinner from '../canvas-spinner';
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 
 const { GlobalStylesContext, cleanEmptyObject } = unlock(
 	blockEditorPrivateApis
 );
 
-function mergeTreesCustomizer( _, srcValue ) {
-	// We only pass as arrays the presets,
-	// in which case we want the new array of values
-	// to override the old array (no merging).
-	if ( Array.isArray( srcValue ) ) {
-		return srcValue;
-	}
-}
-
 export function mergeBaseAndUserConfigs( base, user ) {
-	return mergeWith( {}, base, user, mergeTreesCustomizer );
+	return deepmerge( base, user, {
+		// We only pass as arrays the presets,
+		// in which case we want the new array of values
+		// to override the old array (no merging).
+		isMergeableObject: isPlainObject,
+	} );
 }
 
 function useGlobalStylesUserConfig() {
@@ -155,7 +151,7 @@ function useGlobalStylesContext() {
 export function GlobalStylesProvider( { children } ) {
 	const context = useGlobalStylesContext();
 	if ( ! context.isReady ) {
-		return <CanvasSpinner />;
+		return null;
 	}
 
 	return (

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

@@ -15,7 +15,7 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
  * Internal dependencies
  */
 import Subtitle from './subtitle';
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 
 const { useGlobalSetting } = unlock( blockEditorPrivateApis );
 const mobilePopoverProps = { placement: 'bottom-start', offset: 8 };

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

@@ -13,7 +13,7 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 /**
  * Internal dependencies
  */
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 import { useSelect } from '@wordpress/data';
 
 const { useGlobalSetting } = unlock( blockEditorPrivateApis );

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

@@ -22,7 +22,7 @@ import Subtitle from './subtitle';
 import { NavigationButtonAsItem } from './navigation-button';
 import { useColorRandomizer } from './hooks';
 import ColorIndicatorWrapper from './color-indicator-wrapper';
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 
 const { useGlobalSetting } = unlock( blockEditorPrivateApis );
 
@@ -91,7 +91,7 @@ function Palette( { name } ) {
 					</HStack>
 				</NavigationButtonAsItem>
 			</ItemGroup>
-			{ randomizeThemeColors && (
+			{ themeColors?.length > 0 && (
 				<Button
 					variant="secondary"
 					icon={ shuffle }

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

@@ -17,7 +17,7 @@ import { useState, useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 
 const { useGlobalSetting, useGlobalStyle, useGlobalStylesOutput } = unlock(
 	blockEditorPrivateApis

package/src/components/global-styles/root-menu.js

@@ -10,7 +10,7 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
  * Internal dependencies
  */
 import { NavigationButtonAsItem } from './navigation-button';
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 
 const {
 	useHasDimensionsPanel,

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

@@ -23,7 +23,7 @@ import { speak } from '@wordpress/a11y';
 import { useBlockVariations } from './variations-panel';
 import ScreenHeader from './header';
 import { NavigationButtonAsItem } from './navigation-button';
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 
 const {
 	useHasDimensionsPanel,

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

@@ -18,7 +18,7 @@ import { __, sprintf } from '@wordpress/i18n';
  */
 import ScreenHeader from './header';
 import BlockPreviewPanel from './block-preview-panel';
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 import Subtitle from './subtitle';
 import { useBlockVariations, VariationsPanel } from './variations-panel';
 

package/src/components/global-styles/screen-colors.js

@@ -11,7 +11,7 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import ScreenHeader from './header';
 import Palette from './palette';
 import BlockPreviewPanel from './block-preview-panel';
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 
 const {
 	useGlobalStyle,

package/src/components/global-styles/screen-css.js

@@ -8,7 +8,7 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 /**
  * Internal dependencies
  */
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 import ScreenHeader from './header';
 
 const { useGlobalStyle, AdvancedPanel: StylesAdvancedPanel } = unlock(

package/src/components/global-styles/screen-layout.js

@@ -10,7 +10,7 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import DimensionsPanel from './dimensions-panel';
 import ScreenHeader from './header';
 import BlockPreviewPanel from './block-preview-panel';
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 
 const { useHasDimensionsPanel, useGlobalSetting, useSettingsForBlockElement } =
 	unlock( blockEditorPrivateApis );

package/src/components/global-styles/screen-revisions/index.js

@@ -19,7 +19,7 @@ import {
  * Internal dependencies
  */
 import ScreenHeader from '../header';
-import { unlock } from '../../../private-apis';
+import { unlock } from '../../../lock-unlock';
 import Revisions from '../../revisions';
 import SidebarFixedBottom from '../../sidebar-edit-mode/sidebar-fixed-bottom';
 import { store as editSiteStore } from '../../../store';

package/src/components/global-styles/screen-revisions/use-global-styles-revisions.js

@@ -9,7 +9,7 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 /**
  * Internal dependencies
  */
-import { unlock } from '../../../private-apis';
+import { unlock } from '../../../lock-unlock';
 
 const SITE_EDITOR_AUTHORS_QUERY = {
 	per_page: -1,

package/src/components/global-styles/screen-root.js

@@ -25,7 +25,7 @@ import { IconWithCurrentColor } from './icon-with-current-color';
 import { NavigationButtonAsItem } from './navigation-button';
 import RootMenu from './root-menu';
 import StylesPreview from './preview';
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 
 function ScreenRoot() {
 	const { useGlobalStyle } = unlock( blockEditorPrivateApis );

package/src/components/global-styles/screen-typography.js

@@ -17,7 +17,7 @@ import ScreenHeader from './header';
 import { NavigationButtonAsItem } from './navigation-button';
 import Subtitle from './subtitle';
 import BlockPreviewPanel from './block-preview-panel';
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 
 const { useGlobalStyle } = unlock( blockEditorPrivateApis );
 

package/src/components/global-styles/stories/index.js

@@ -9,7 +9,7 @@ import { useMemo, useState } from '@wordpress/element';
  */
 import { mergeBaseAndUserConfigs } from '../global-styles-provider';
 import { default as GlobalStylesUIComponent } from '../ui';
-import { unlock } from '../../../private-apis';
+import { unlock } from '../../../lock-unlock';
 
 const { GlobalStylesContext, ExperimentalBlockEditorProvider } = unlock(
 	blockEditorPrivateApis