@wordpress/editor 13.35.0 → 14.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/editor",
-	"version": "13.35.0",
+	"version": "14.0.1",
 	"description": "Enhanced block editor for WordPress posts.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -19,7 +19,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
@@ -31,42 +32,45 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.58.0",
-		"@wordpress/api-fetch": "^6.55.0",
-		"@wordpress/blob": "^3.58.0",
-		"@wordpress/block-editor": "^12.26.0",
-		"@wordpress/blocks": "^12.35.0",
-		"@wordpress/commands": "^0.29.0",
-		"@wordpress/components": "^27.6.0",
-		"@wordpress/compose": "^6.35.0",
-		"@wordpress/core-data": "^6.35.0",
-		"@wordpress/data": "^9.28.0",
-		"@wordpress/date": "^4.58.0",
-		"@wordpress/deprecated": "^3.58.0",
-		"@wordpress/dom": "^3.58.0",
-		"@wordpress/element": "^5.35.0",
-		"@wordpress/hooks": "^3.58.0",
-		"@wordpress/html-entities": "^3.58.0",
-		"@wordpress/i18n": "^4.58.0",
-		"@wordpress/icons": "^9.49.0",
-		"@wordpress/interface": "^5.35.0",
-		"@wordpress/keyboard-shortcuts": "^4.35.0",
-		"@wordpress/keycodes": "^3.58.0",
-		"@wordpress/media-utils": "^4.49.0",
-		"@wordpress/notices": "^4.26.0",
-		"@wordpress/patterns": "^1.19.0",
-		"@wordpress/plugins": "^6.26.0",
-		"@wordpress/preferences": "^3.35.0",
-		"@wordpress/private-apis": "^0.40.0",
-		"@wordpress/reusable-blocks": "^4.35.0",
-		"@wordpress/rich-text": "^6.35.0",
-		"@wordpress/server-side-render": "^4.35.0",
-		"@wordpress/url": "^3.59.0",
-		"@wordpress/warning": "^2.58.0",
-		"@wordpress/wordcount": "^3.58.0",
+		"@wordpress/a11y": "^4.0.1",
+		"@wordpress/api-fetch": "^7.0.1",
+		"@wordpress/blob": "^4.0.1",
+		"@wordpress/block-editor": "^13.0.1",
+		"@wordpress/blocks": "^13.0.1",
+		"@wordpress/commands": "^1.0.1",
+		"@wordpress/components": "^28.0.1",
+		"@wordpress/compose": "^7.0.1",
+		"@wordpress/core-data": "^7.0.1",
+		"@wordpress/data": "^10.0.1",
+		"@wordpress/date": "^5.0.1",
+		"@wordpress/deprecated": "^4.0.1",
+		"@wordpress/dom": "^4.0.1",
+		"@wordpress/element": "^6.0.1",
+		"@wordpress/hooks": "^4.0.1",
+		"@wordpress/html-entities": "^4.0.1",
+		"@wordpress/i18n": "^5.0.1",
+		"@wordpress/icons": "^10.0.1",
+		"@wordpress/interface": "^6.0.1",
+		"@wordpress/keyboard-shortcuts": "^5.0.1",
+		"@wordpress/keycodes": "^4.0.1",
+		"@wordpress/media-utils": "^5.0.1",
+		"@wordpress/notices": "^5.0.1",
+		"@wordpress/patterns": "^2.0.1",
+		"@wordpress/plugins": "^7.0.1",
+		"@wordpress/preferences": "^4.0.1",
+		"@wordpress/private-apis": "^1.0.1",
+		"@wordpress/reusable-blocks": "^5.0.1",
+		"@wordpress/rich-text": "^7.0.1",
+		"@wordpress/server-side-render": "^5.0.1",
+		"@wordpress/url": "^4.0.1",
+		"@wordpress/warning": "^3.0.1",
+		"@wordpress/wordcount": "^4.0.1",
+		"change-case": "^4.1.2",
+		"client-zip": "^2.4.5",
 		"clsx": "^2.1.1",
 		"date-fns": "^3.6.0",
 		"deepmerge": "^4.3.0",
+		"fast-deep-equal": "^3.1.3",
 		"is-plain-object": "^5.0.0",
 		"memize": "^2.1.0",
 		"react-autosize-textarea": "^7.1.0",
@@ -79,5 +83,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "42f38f287506a6b3ed8ccba839b18ad066821044"
+	"gitHead": "0e973525f7787401b5a544e0727774d52a78639f"
 }

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/block-settings-menu/content-only-settings-menu.js

@@ -19,7 +19,7 @@ import { store as editorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 
 function ContentOnlySettingsMenuItems( { clientId, onClose } ) {
-	const { entity, onNavigateToEntityRecord } = useSelect(
+	const { entity, onNavigateToEntityRecord, canEditTemplates } = useSelect(
 		( select ) => {
 			const {
 				getBlockEditingMode,
@@ -46,11 +46,12 @@ function ContentOnlySettingsMenuItems( { clientId, onClose } ) {
 					getBlockAttributes( patternParent ).ref
 				);
 			} else {
-				const { getCurrentPostType, getCurrentTemplateId } =
-					select( editorStore );
-				const currentPostType = getCurrentPostType();
+				const { getCurrentTemplateId } = select( editorStore );
 				const templateId = getCurrentTemplateId();
-				if ( currentPostType === 'page' && templateId ) {
+				const { getContentLockingParent } = unlock(
+					select( blockEditorStore )
+				);
+				if ( ! getContentLockingParent( clientId ) && templateId ) {
 					record = select( coreStore ).getEntityRecord(
 						'postType',
 						'wp_template',
@@ -58,7 +59,12 @@ function ContentOnlySettingsMenuItems( { clientId, onClose } ) {
 					);
 				}
 			}
+			const _canEditTemplates = select( coreStore ).canUser(
+				'create',
+				'templates'
+			);
 			return {
+				canEditTemplates: _canEditTemplates,
 				entity: record,
 				onNavigateToEntityRecord:
 					getSettings().onNavigateToEntityRecord,
@@ -77,6 +83,19 @@ function ContentOnlySettingsMenuItems( { clientId, onClose } ) {
 	}
 
 	const isPattern = entity.type === 'wp_block';
+	let helpText = isPattern
+		? __(
+				'Edit the pattern to move, delete, or make further changes to this block.'
+		  )
+		: __(
+				'Edit the template to move, delete, or make further changes to this block.'
+		  );
+
+	if ( ! canEditTemplates ) {
+		helpText = __(
+			'Only users with permissions to edit the template can move or delete this block'
+		);
+	}
 
 	return (
 		<>
@@ -88,6 +107,7 @@ function ContentOnlySettingsMenuItems( { clientId, onClose } ) {
 							postType: entity.type,
 						} );
 					} }
+					disabled={ ! canEditTemplates }
 				>
 					{ isPattern ? __( 'Edit pattern' ) : __( 'Edit template' ) }
 				</MenuItem>
@@ -97,13 +117,7 @@ function ContentOnlySettingsMenuItems( { clientId, onClose } ) {
 				as="p"
 				className="editor-content-only-settings-menu__description"
 			>
-				{ isPattern
-					? __(
-							'Edit the pattern to move, delete, or make further changes to this block.'
-					  )
-					: __(
-							'Edit the template to move, delete, or make further changes to this block.'
-					  ) }
+				{ helpText }
 			</Text>
 		</>
 	);

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/collapsible-block-toolbar/style.scss

@@ -7,6 +7,7 @@
 	.block-editor-block-contextual-toolbar {
 		border-bottom: 0;
 		height: 100%;
+		background: transparent;
 	}
 
 	// These rules ensure that icons are always positioned in a way that lines up with the rest of the icons in the toolbar.
@@ -64,8 +65,9 @@
 		// Move up a little to prevent the toolbar shift when focus is on the vertical movers.
 		@include break-small() {
 			&:not(.is-horizontal) .block-editor-block-mover__move-button-container {
+				height: $grid-unit-50;
 				position: relative;
-				top: -10px;
+				top: -5px; // Should be -4px, but that causes scrolling when focus lands on the movers, in a 60px header.
 			}
 		}
 	}

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