@wordpress/editor 13.35.0 → 14.0.1

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

@@ -0,0 +1,205 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import {
+	Icon,
+	BaseControl,
+	TextControl,
+	Flex,
+	FlexItem,
+	FlexBlock,
+	Button,
+	Modal,
+	__experimentalRadioGroup as RadioGroup,
+	__experimentalRadio as Radio,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
+import { useInstanceId } from '@wordpress/compose';
+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 { store as editorStore } from '../../store';
+import {
+	TEMPLATE_PART_POST_TYPE,
+	TEMPLATE_PART_AREA_DEFAULT_CATEGORY,
+} from '../../store/constants';
+import {
+	useExistingTemplateParts,
+	getUniqueTemplatePartTitle,
+	getCleanTemplatePartSlug,
+} from './utils';
+
+export default function CreateTemplatePartModal( {
+	modalTitle,
+	...restProps
+} ) {
+	const defaultModalTitle = useSelect(
+		( select ) =>
+			select( coreStore ).getPostType( TEMPLATE_PART_POST_TYPE )?.labels
+				?.add_new_item,
+		[]
+	);
+	return (
+		<Modal
+			title={ modalTitle || defaultModalTitle }
+			onRequestClose={ restProps.closeModal }
+			overlayClassName="editor-create-template-part-modal"
+		>
+			<CreateTemplatePartModalContents { ...restProps } />
+		</Modal>
+	);
+}
+
+export function CreateTemplatePartModalContents( {
+	defaultArea = TEMPLATE_PART_AREA_DEFAULT_CATEGORY,
+	blocks = [],
+	confirmLabel = __( 'Add' ),
+	closeModal,
+	onCreate,
+	onError,
+	defaultTitle = '',
+} ) {
+	const { createErrorNotice } = useDispatch( noticesStore );
+	const { saveEntityRecord } = useDispatch( coreStore );
+	const existingTemplateParts = useExistingTemplateParts();
+
+	const [ title, setTitle ] = useState( defaultTitle );
+	const [ area, setArea ] = useState( defaultArea );
+	const [ isSubmitting, setIsSubmitting ] = useState( false );
+	const instanceId = useInstanceId( CreateTemplatePartModal );
+
+	const templatePartAreas = useSelect(
+		( select ) =>
+			select( editorStore ).__experimentalGetDefaultTemplatePartAreas(),
+		[]
+	);
+	async function createTemplatePart() {
+		if ( ! title || isSubmitting ) {
+			return;
+		}
+
+		try {
+			setIsSubmitting( true );
+			const uniqueTitle = getUniqueTemplatePartTitle(
+				title,
+				existingTemplateParts
+			);
+			const cleanSlug = getCleanTemplatePartSlug( uniqueTitle );
+
+			const templatePart = await saveEntityRecord(
+				'postType',
+				TEMPLATE_PART_POST_TYPE,
+				{
+					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?.();
+		} finally {
+			setIsSubmitting( false );
+		}
+	}
+	return (
+		<form
+			onSubmit={ async ( event ) => {
+				event.preventDefault();
+				await createTemplatePart();
+			} }
+		>
+			<VStack spacing="4">
+				<TextControl
+					__next40pxDefaultSize
+					__nextHasNoMarginBottom
+					label={ __( 'Name' ) }
+					value={ title }
+					onChange={ setTitle }
+					required
+				/>
+				<BaseControl
+					label={ __( 'Area' ) }
+					id={ `editor-create-template-part-modal__area-selection-${ instanceId }` }
+					className="editor-create-template-part-modal__area-base-control"
+				>
+					<RadioGroup
+						label={ __( 'Area' ) }
+						className="editor-create-template-part-modal__area-radio-group"
+						id={ `editor-create-template-part-modal__area-selection-${ instanceId }` }
+						onChange={ setArea }
+						checked={ area }
+					>
+						{ templatePartAreas.map(
+							( { icon, label, area: value, description } ) => (
+								<Radio
+									key={ label }
+									value={ value }
+									className="editor-create-template-part-modal__area-radio"
+								>
+									<Flex align="start" justify="start">
+										<FlexItem>
+											<Icon icon={ icon } />
+										</FlexItem>
+										<FlexBlock className="editor-create-template-part-modal__option-label">
+											{ label }
+											<div>{ description }</div>
+										</FlexBlock>
+
+										<FlexItem className="editor-create-template-part-modal__checkbox">
+											{ area === value && (
+												<Icon icon={ check } />
+											) }
+										</FlexItem>
+									</Flex>
+								</Radio>
+							)
+						) }
+					</RadioGroup>
+				</BaseControl>
+				<HStack justify="right">
+					<Button
+						__next40pxDefaultSize
+						variant="tertiary"
+						onClick={ () => {
+							closeModal();
+						} }
+					>
+						{ __( 'Cancel' ) }
+					</Button>
+					<Button
+						__next40pxDefaultSize
+						variant="primary"
+						type="submit"
+						aria-disabled={ ! title || isSubmitting }
+						isBusy={ isSubmitting }
+					>
+						{ confirmLabel }
+					</Button>
+				</HStack>
+			</VStack>
+		</form>
+	);
+}

package/src/components/create-template-part-modal/style.scss

@@ -0,0 +1,69 @@
+.editor-create-template-part-modal {
+	z-index: z-index(".editor-create-template-part-modal");
+
+	.components-modal__frame {
+		@include break-small {
+			max-width: 500px;
+		}
+	}
+}
+
+.editor-create-template-part-modal__area-radio-group {
+	width: 100%;
+	border: $border-width solid $gray-700;
+	border-radius: 2px;
+
+	.components-button.editor-create-template-part-modal__area-radio {
+		display: block;
+		width: 100%;
+		height: 100%;
+		text-align: left;
+		padding: $grid-unit-15;
+
+		&,
+		&.is-secondary:hover,
+		&.is-primary:hover {
+			margin: 0;
+			background-color: inherit;
+			border-bottom: $border-width solid $gray-700;
+			border-radius: 0;
+
+			&:not(:focus) {
+				box-shadow: none;
+			}
+
+			&:focus {
+				border-bottom: $border-width solid $white;
+			}
+
+			&:last-of-type {
+				border-bottom: none;
+			}
+		}
+
+		&:not(:hover),
+		&[aria-checked="true"] {
+			color: $gray-900;
+			cursor: auto;
+
+			.editor-create-template-part-modal__option-label div {
+				color: $gray-600;
+			}
+		}
+
+		.editor-create-template-part-modal__option-label {
+			padding-top: $grid-unit-05;
+			white-space: normal;
+
+			div {
+				padding-top: $grid-unit-05;
+				font-size: $helptext-font-size;
+			}
+		}
+
+		.editor-create-template-part-modal__checkbox {
+			margin-left: auto;
+			min-width: $grid-unit-30;
+		}
+	}
+}

package/src/components/create-template-part-modal/test/utils.js

@@ -0,0 +1,60 @@
+/**
+ * Internal dependencies
+ */
+import { getUniqueTemplatePartTitle, getCleanTemplatePartSlug } from '../utils';
+
+describe( 'getUniqueTemplatePartTitle', () => {
+	it( 'should return the title if it is unique', () => {
+		const title = 'My Template Part';
+		const templateParts = [
+			{
+				title: {
+					rendered: 'Template Part With Another Title',
+				},
+			},
+		];
+
+		expect( getUniqueTemplatePartTitle( title, templateParts ) ).toBe(
+			title
+		);
+	} );
+
+	it( 'should return the title with a suffix if it is not unique', () => {
+		const title = 'My Template Part';
+		const templateParts = [
+			{
+				title: {
+					rendered: 'My Template Part',
+				},
+			},
+			{
+				title: {
+					rendered: 'My Template Part 2',
+				},
+			},
+		];
+
+		expect( getUniqueTemplatePartTitle( title, templateParts ) ).toBe(
+			'My Template Part 3'
+		);
+	} );
+} );
+
+describe( 'getCleanTemplatePartSlug', () => {
+	it( 'should return a slug with only latin chars', () => {
+		const title = 'Myɶ Template Partɮ';
+		expect( getCleanTemplatePartSlug( title ) ).toBe( 'my-template-part' );
+	} );
+
+	it( 'should return a slug with only latin chars and numbers', () => {
+		const title = 'My Template Part 2';
+		expect( getCleanTemplatePartSlug( title ) ).toBe(
+			'my-template-part-2'
+		);
+	} );
+
+	it( 'should default the slug to wp-custom-part', () => {
+		const title = '';
+		expect( getCleanTemplatePartSlug( title ) ).toBe( 'wp-custom-part' );
+	} );
+} );

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

@@ -0,0 +1,67 @@
+/**
+ * External dependencies
+ */
+import { paramCase as kebabCase } from 'change-case';
+
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import { TEMPLATE_PART_POST_TYPE } from '../../store/constants';
+
+export const useExistingTemplateParts = () => {
+	return useSelect(
+		( select ) =>
+			select( coreStore ).getEntityRecords(
+				'postType',
+				TEMPLATE_PART_POST_TYPE,
+				{
+					per_page: -1,
+				}
+			),
+		[]
+	);
+};
+
+/**
+ * Return a unique template part title based on
+ * the given title and existing template parts.
+ *
+ * @param {string} title         The original template part title.
+ * @param {Object} templateParts The array of template part entities.
+ * @return {string} A unique template part title.
+ */
+export const getUniqueTemplatePartTitle = ( title, templateParts ) => {
+	const lowercaseTitle = title.toLowerCase();
+	const existingTitles = templateParts.map( ( templatePart ) =>
+		templatePart.title.rendered.toLowerCase()
+	);
+
+	if ( ! existingTitles.includes( lowercaseTitle ) ) {
+		return title;
+	}
+
+	let suffix = 2;
+	while ( existingTitles.includes( `${ lowercaseTitle } ${ suffix }` ) ) {
+		suffix++;
+	}
+
+	return `${ title } ${ suffix }`;
+};
+
+/**
+ * Get a valid slug for a template part.
+ * Currently template parts only allow latin chars.
+ * The fallback slug will receive suffix by default.
+ *
+ * @param {string} title The template part title.
+ * @return {string} A valid template part slug.
+ */
+export const getCleanTemplatePartSlug = ( title ) => {
+	return kebabCase( title ).replace( /[^\w-]+/g, '' ) || 'wp-custom-part';
+};

package/src/components/document-bar/index.js

@@ -21,10 +21,12 @@ import { store as coreStore } from '@wordpress/core-data';
 import { store as commandsStore } from '@wordpress/commands';
 import { useRef, useEffect } from '@wordpress/element';
 import { useReducedMotion } from '@wordpress/compose';
+import { decodeEntities } from '@wordpress/html-entities';
 
 /**
  * Internal dependencies
  */
+import { TEMPLATE_POST_TYPES, GLOBAL_POST_TYPES } from '../../store/constants';
 import { store as editorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 
@@ -39,21 +41,26 @@ const TYPE_LABELS = {
 	wp_template_part: __( 'Editing template part: %s' ),
 };
 
-const TEMPLATE_POST_TYPES = [ 'wp_template', 'wp_template_part' ];
-
-const GLOBAL_POST_TYPES = [
-	...TEMPLATE_POST_TYPES,
-	'wp_block',
-	'wp_navigation',
-];
-
 const MotionButton = motion( Button );
 
+/**
+ * This component renders a navigation bar at the top of the editor. It displays the title of the current document,
+ * a back button (if applicable), and a command center button. It also handles different states of the document,
+ * such as "not found" or "unsynced".
+ *
+ * @example
+ * ```jsx
+ * <DocumentBar />
+ * ```
+ *
+ * @return {JSX.Element} The rendered DocumentBar component.
+ */
 export default function DocumentBar() {
 	const {
 		postType,
-		document,
-		isResolving,
+		documentTitle,
+		isNotFound,
+		isUnsyncedPattern,
 		templateIcon,
 		templateTitle,
 		onNavigateToPreviousEntityRecord,
@@ -76,13 +83,16 @@ export default function DocumentBar() {
 		const _templateInfo = getTemplateInfo( _document );
 		return {
 			postType: _postType,
-			document: _document,
-			isResolving: isResolvingSelector(
-				'getEditedEntityRecord',
-				'postType',
-				_postType,
-				_postId
-			),
+			documentTitle: _document.title,
+			isNotFound:
+				! _document &&
+				! isResolvingSelector(
+					'getEditedEntityRecord',
+					'postType',
+					_postType,
+					_postId
+				),
+			isUnsyncedPattern: _document?.wp_pattern_sync_status === 'unsynced',
 			templateIcon: unlock( select( editorStore ) ).getPostIcon(
 				_postType,
 				{
@@ -98,11 +108,10 @@ export default function DocumentBar() {
 	const { open: openCommandCenter } = useDispatch( commandsStore );
 	const isReducedMotion = useReducedMotion();
 
-	const isNotFound = ! document && ! isResolving;
 	const isTemplate = TEMPLATE_POST_TYPES.includes( postType );
 	const isGlobalEntity = GLOBAL_POST_TYPES.includes( postType );
 	const hasBackButton = !! onNavigateToPreviousEntityRecord;
-	const title = isTemplate ? templateTitle : document.title;
+	const title = isTemplate ? templateTitle : documentTitle;
 
 	const mounted = useRef( false );
 	useEffect( () => {
@@ -113,7 +122,7 @@ export default function DocumentBar() {
 		<div
 			className={ clsx( 'editor-document-bar', {
 				'has-back-button': hasBackButton,
-				'is-global': isGlobalEntity,
+				'is-global': isGlobalEntity && ! isUnsyncedPattern,
 			} ) }
 		>
 			<AnimatePresence>
@@ -182,7 +191,9 @@ export default function DocumentBar() {
 									: undefined
 							}
 						>
-							{ title }
+							{ title
+								? decodeEntities( title )
+								: __( 'No Title' ) }
 						</Text>
 					</motion.div>
 					<span className="editor-document-bar__shortcut">

package/src/components/document-tools/index.js

@@ -32,12 +32,7 @@ const preventDefault = ( event ) => {
 	event.preventDefault();
 };
 
-function DocumentTools( {
-	className,
-	disableBlockTools = false,
-	// This is a temporary prop until the list view is fully unified between post and site editors.
-	listViewLabel = __( 'Document Overview' ),
-} ) {
+function DocumentTools( { className, disableBlockTools = false } ) {
 	const { setIsInserterOpened, setIsListViewOpened } =
 		useDispatch( editorStore );
 	const {
@@ -164,7 +159,7 @@ function DocumentTools( {
 								disabled={ disableBlockTools }
 								isPressed={ isListViewOpen }
 								/* translators: button label text should, if possible, be under 16 characters. */
-								label={ listViewLabel }
+								label={ __( 'Document Overview' ) }
 								onClick={ toggleListView }
 								shortcut={ listViewShortcut }
 								showTooltip={ ! showIconLabels }

package/src/components/editor/index.js

@@ -0,0 +1,93 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { Notice } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { TEMPLATE_POST_TYPE } from '../../store/constants';
+import EditorInterface from '../editor-interface';
+import { ExperimentalEditorProvider } from '../provider';
+import Sidebar from '../sidebar';
+
+function Editor( {
+	postType,
+	postId,
+	templateId,
+	settings,
+	children,
+
+	// This could be part of the settings.
+	onActionPerformed,
+
+	// The following abstractions are not ideal but necessary
+	// to account for site editor and post editor differences for now.
+	className,
+	styles,
+	customSaveButton,
+	forceDisableBlockTools,
+	title,
+	iframeProps,
+	extraSidebarPanels,
+	enableRegionNavigation = true,
+} ) {
+	const { post, template, hasLoadedPost } = useSelect(
+		( select ) => {
+			const { getEntityRecord, hasFinishedResolution } =
+				select( coreStore );
+			return {
+				post: getEntityRecord( 'postType', postType, postId ),
+				template: templateId
+					? getEntityRecord(
+							'postType',
+							TEMPLATE_POST_TYPE,
+							templateId
+					  )
+					: undefined,
+				hasLoadedPost: hasFinishedResolution( 'getEntityRecord', [
+					'postType',
+					postType,
+					postId,
+				] ),
+			};
+		},
+		[ postType, postId, templateId ]
+	);
+
+	return (
+		<ExperimentalEditorProvider
+			post={ post }
+			__unstableTemplate={ template }
+			settings={ settings }
+			useSubRegistry={ false }
+		>
+			{ hasLoadedPost && ! post && (
+				<Notice status="warning" isDismissible={ false }>
+					{ __(
+						"You attempted to edit an item that doesn't exist. Perhaps it was deleted?"
+					) }
+				</Notice>
+			) }
+			<EditorInterface
+				className={ className }
+				styles={ styles }
+				enableRegionNavigation={ enableRegionNavigation }
+				customSaveButton={ customSaveButton }
+				forceDisableBlockTools={ forceDisableBlockTools }
+				title={ title }
+				iframeProps={ iframeProps }
+			/>
+			<Sidebar
+				onActionPerformed={ onActionPerformed }
+				extraPanels={ extraSidebarPanels }
+			/>
+			{ children }
+		</ExperimentalEditorProvider>
+	);
+}
+
+export default Editor;

package/src/components/editor-help/help-get-support-button.native.js

@@ -28,7 +28,7 @@ const HelpGetSupportButton = ( { onPress, title } ) => {
 		<Pressable
 			style={ buttonStyle }
 			onPress={ onPress }
-			accessibilityRole={ 'button' }
+			accessibilityRole="button"
 		>
 			<Text style={ textStyle }>{ title }</Text>
 		</Pressable>

package/src/components/editor-interface/content-slot-fill.js

@@ -0,0 +1,15 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const { createPrivateSlotFill } = unlock( componentsPrivateApis );
+const SLOT_FILL_NAME = 'EditCanvasContainerSlot';
+const EditorContentSlotFill = createPrivateSlotFill( SLOT_FILL_NAME );
+
+export default EditorContentSlotFill;