@wordpress/editor 13.35.0 → 14.0.0

package/src/bindings/index.js

@@ -12,7 +12,4 @@ import postMeta from './post-meta';
 
 const { registerBlockBindingsSource } = unlock( dispatch( blocksStore ) );
 registerBlockBindingsSource( postMeta );
-
-if ( process.env.IS_GUTENBERG_PLUGIN ) {
-	registerBlockBindingsSource( patternOverrides );
-}
+registerBlockBindingsSource( patternOverrides );

package/src/bindings/pattern-overrides.js

@@ -89,5 +89,5 @@ export default {
 				},
 			} );
 	},
-	lockAttributesEditing: false,
+	canUserEditValue: () => true,
 };

package/src/bindings/post-meta.js

@@ -16,13 +16,53 @@ export default {
 		return args.key;
 	},
 	getValue( { registry, context, args } ) {
-		const postType = context.postType
-			? context.postType
-			: registry.select( editorStore ).getCurrentPostType();
-
 		return registry
 			.select( coreDataStore )
-			.getEditedEntityRecord( 'postType', postType, context.postId )
-			.meta?.[ args.key ];
+			.getEditedEntityRecord(
+				'postType',
+				context?.postType,
+				context?.postId
+			).meta?.[ args.key ];
+	},
+	setValue( { registry, context, args, value } ) {
+		registry
+			.dispatch( coreDataStore )
+			.editEntityRecord( 'postType', context?.postType, context?.postId, {
+				meta: {
+					[ args.key ]: value,
+				},
+			} );
+	},
+	canUserEditValue( { select, context, args } ) {
+		const postType =
+			context?.postType || select( editorStore ).getCurrentPostType();
+
+		// Check that editing is happening in the post editor and not a template.
+		if ( postType === 'wp_template' ) {
+			return false;
+		}
+
+		// Check that the custom field is not protected and available in the REST API.
+		const isFieldExposed = !! select( coreDataStore ).getEntityRecord(
+			'postType',
+			postType,
+			context?.postId
+		)?.meta?.[ args.key ];
+
+		if ( ! isFieldExposed ) {
+			return false;
+		}
+
+		// Check that the user has the capability to edit post meta.
+		const canUserEdit = select( coreDataStore ).canUserEditEntityRecord(
+			'postType',
+			context?.postType,
+			context?.postId
+		);
+		if ( ! canUserEdit ) {
+			return false;
+		}
+
+		return true;
 	},
 };

package/src/components/blog-title/index.js

@@ -0,0 +1,124 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { debounce } from '@wordpress/compose';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { decodeEntities } from '@wordpress/html-entities';
+import {
+	Button,
+	Dropdown,
+	__experimentalInputControl as InputControl,
+} from '@wordpress/components';
+import { useState, useMemo } from '@wordpress/element';
+import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { TEMPLATE_POST_TYPE } from '../../store/constants';
+import PostPanelRow from '../post-panel-row';
+import { store as editorStore } from '../../store';
+
+const EMPTY_OBJECT = {};
+
+export default function BlogTitle() {
+	const { editEntityRecord } = useDispatch( coreStore );
+	const { postsPageTitle, postsPageId, isTemplate, postSlug } = useSelect(
+		( select ) => {
+			const { getEntityRecord, getEditedEntityRecord } =
+				select( coreStore );
+			const siteSettings = getEntityRecord( 'root', 'site' );
+			const _postsPageRecord = siteSettings?.page_for_posts
+				? getEditedEntityRecord(
+						'postType',
+						'page',
+						siteSettings?.page_for_posts
+				  )
+				: EMPTY_OBJECT;
+			const { getEditedPostAttribute, getCurrentPostType } =
+				select( editorStore );
+			return {
+				postsPageId: _postsPageRecord?.id,
+				postsPageTitle: _postsPageRecord?.title,
+				isTemplate: getCurrentPostType() === TEMPLATE_POST_TYPE,
+				postSlug: getEditedPostAttribute( 'slug' ),
+			};
+		},
+		[]
+	);
+	// Use internal state instead of a ref to make sure that the component
+	// re-renders when the popover's anchor updates.
+	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
+	// Memoize popoverProps to avoid returning a new object every time.
+	const popoverProps = useMemo(
+		() => ( {
+			// Anchor the popover to the middle of the entire row so that it doesn't
+			// move around when the label changes.
+			anchor: popoverAnchor,
+			placement: 'left-start',
+			offset: 36,
+			shift: true,
+		} ),
+		[ popoverAnchor ]
+	);
+
+	if (
+		! isTemplate ||
+		! [ 'home', 'index' ].includes( postSlug ) ||
+		! postsPageId
+	) {
+		return null;
+	}
+
+	const setPostsPageTitle = ( newValue ) => {
+		editEntityRecord( 'postType', 'page', postsPageId, {
+			title: newValue,
+		} );
+	};
+	const decodedTitle = decodeEntities( postsPageTitle );
+	return (
+		<PostPanelRow label={ __( 'Blog title' ) } ref={ setPopoverAnchor }>
+			<Dropdown
+				popoverProps={ popoverProps }
+				contentClassName="editor-blog-title-dropdown__content"
+				focusOnMount
+				renderToggle={ ( { isOpen, onToggle } ) => (
+					<Button
+						size="compact"
+						variant="tertiary"
+						aria-expanded={ isOpen }
+						aria-label={ sprintf(
+							// translators: %s: Current post link.
+							__( 'Change blog title: %s' ),
+							decodedTitle
+						) }
+						onClick={ onToggle }
+					>
+						{ decodedTitle }
+					</Button>
+				) }
+				renderContent={ ( { onClose } ) => (
+					<>
+						<InspectorPopoverHeader
+							title={ __( 'Blog title' ) }
+							onClose={ onClose }
+						/>
+						<InputControl
+							placeholder={ __( 'No Title' ) }
+							size="__unstable-large"
+							value={ postsPageTitle }
+							onChange={ debounce( setPostsPageTitle, 300 ) }
+							label={ __( 'Blog title' ) }
+							help={ __(
+								'Set the Posts Page title. Appears in search results, and when the page is shared on social media.'
+							) }
+							hideLabelFromVision
+						/>
+					</>
+				) }
+			/>
+		</PostPanelRow>
+	);
+}

package/src/components/blog-title/style.scss

@@ -0,0 +1,4 @@
+.editor-blog-title-dropdown__content .components-popover__content {
+	min-width: 320px;
+	padding: $grid-unit-20;
+}

package/src/components/commands/index.js

@@ -2,8 +2,19 @@
  * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
-import { code, listView, external, keyboard } from '@wordpress/icons';
+import { __, isRTL } from '@wordpress/i18n';
+import {
+	blockDefault,
+	code,
+	drawerLeft,
+	drawerRight,
+	edit,
+	formatListBullets,
+	listView,
+	external,
+	keyboard,
+	symbol,
+} from '@wordpress/icons';
 import { useCommandLoader } from '@wordpress/commands';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { store as noticesStore } from '@wordpress/notices';
@@ -15,6 +26,9 @@ import { store as interfaceStore } from '@wordpress/interface';
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
+import { PATTERN_POST_TYPE } from '../../store/constants';
+import { modalName as patternRenameModalName } from '../pattern-rename-modal';
+import { modalName as patternDuplicateModalName } from '../pattern-duplicate-modal';
 
 function useEditorCommandLoader() {
 	const {
@@ -28,6 +42,7 @@ function useEditorCommandLoader() {
 		isViewable,
 		isCodeEditingEnabled,
 		isRichEditingEnabled,
+		isPublishSidebarEnabled,
 	} = useSelect( ( select ) => {
 		const { get } = select( preferencesStore );
 		const { isListViewOpened, getCurrentPostType, getEditorSettings } =
@@ -46,8 +61,11 @@ function useEditorCommandLoader() {
 			isViewable: getPostType( getCurrentPostType() )?.viewable ?? false,
 			isCodeEditingEnabled: getEditorSettings().codeEditingEnabled,
 			isRichEditingEnabled: getEditorSettings().richEditingEnabled,
+			isPublishSidebarEnabled:
+				select( editorStore ).isPublishSidebarEnabled(),
 		};
 	}, [] );
+	const { getActiveComplementaryArea } = useSelect( interfaceStore );
 	const { toggle } = useDispatch( preferencesStore );
 	const { createInfoNotice } = useDispatch( noticesStore );
 	const {
@@ -56,7 +74,8 @@ function useEditorCommandLoader() {
 		switchEditorMode,
 		toggleDistractionFree,
 	} = useDispatch( editorStore );
-	const { openModal } = useDispatch( interfaceStore );
+	const { openModal, enableComplementaryArea, disableComplementaryArea } =
+		useDispatch( interfaceStore );
 	const { getCurrentPostId } = useSelect( editorStore );
 	const allowSwitchEditorMode = isCodeEditingEnabled && isRichEditingEnabled;
 
@@ -201,6 +220,57 @@ function useEditorCommandLoader() {
 		},
 	} );
 
+	commands.push( {
+		name: 'core/open-settings-sidebar',
+		label: __( 'Toggle settings sidebar' ),
+		icon: isRTL() ? drawerLeft : drawerRight,
+		callback: ( { close } ) => {
+			const activeSidebar = getActiveComplementaryArea( 'core' );
+			close();
+			if ( activeSidebar === 'edit-post/document' ) {
+				disableComplementaryArea( 'core' );
+			} else {
+				enableComplementaryArea( 'core', 'edit-post/document' );
+			}
+		},
+	} );
+
+	commands.push( {
+		name: 'core/open-block-inspector',
+		label: __( 'Toggle block inspector' ),
+		icon: blockDefault,
+		callback: ( { close } ) => {
+			const activeSidebar = getActiveComplementaryArea( 'core' );
+			close();
+			if ( activeSidebar === 'edit-post/block' ) {
+				disableComplementaryArea( 'core' );
+			} else {
+				enableComplementaryArea( 'core', 'edit-post/block' );
+			}
+		},
+	} );
+
+	commands.push( {
+		name: 'core/toggle-publish-sidebar',
+		label: isPublishSidebarEnabled
+			? __( 'Disable pre-publish checks' )
+			: __( 'Enable pre-publish checks' ),
+		icon: formatListBullets,
+		callback: ( { close } ) => {
+			close();
+			toggle( 'core', 'isPublishSidebarEnabled' );
+			createInfoNotice(
+				isPublishSidebarEnabled
+					? __( 'Pre-publish checks disabled.' )
+					: __( 'Pre-publish checks enabled.' ),
+				{
+					id: 'core/editor/publish-sidebar/notice',
+					type: 'snackbar',
+				}
+			);
+		},
+	} );
+
 	if ( isViewable ) {
 		commands.push( {
 			name: 'core/preview-link',
@@ -221,9 +291,49 @@ function useEditorCommandLoader() {
 	};
 }
 
+function useEditedEntityContextualCommands() {
+	const { postType } = useSelect( ( select ) => {
+		const { getCurrentPostType } = select( editorStore );
+		return {
+			postType: getCurrentPostType(),
+		};
+	}, [] );
+	const { openModal } = useDispatch( interfaceStore );
+	const commands = [];
+
+	if ( postType === PATTERN_POST_TYPE ) {
+		commands.push( {
+			name: 'core/rename-pattern',
+			label: __( 'Rename pattern' ),
+			icon: edit,
+			callback: ( { close } ) => {
+				openModal( patternRenameModalName );
+				close();
+			},
+		} );
+		commands.push( {
+			name: 'core/duplicate-pattern',
+			label: __( 'Duplicate pattern' ),
+			icon: symbol,
+			callback: ( { close } ) => {
+				openModal( patternDuplicateModalName );
+				close();
+			},
+		} );
+	}
+
+	return { isLoading: false, commands };
+}
+
 export default function useCommands() {
 	useCommandLoader( {
 		name: 'core/editor/edit-ui',
 		hook: useEditorCommandLoader,
 	} );
+
+	useCommandLoader( {
+		name: 'core/editor/contextual-commands',
+		hook: useEditedEntityContextualCommands,
+		context: 'entity-edit',
+	} );
 }

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' );
+	} );
+} );