@wordpress/editor 13.34.0 → 14.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/editor",
-	"version": "13.34.0",
+	"version": "14.0.0",
 	"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,41 +32,46 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.57.0",
-		"@wordpress/api-fetch": "^6.54.0",
-		"@wordpress/blob": "^3.57.0",
-		"@wordpress/block-editor": "^12.25.0",
-		"@wordpress/blocks": "^12.34.0",
-		"@wordpress/commands": "^0.28.0",
-		"@wordpress/components": "^27.5.0",
-		"@wordpress/compose": "^6.34.0",
-		"@wordpress/core-data": "^6.34.0",
-		"@wordpress/data": "^9.27.0",
-		"@wordpress/date": "^4.57.0",
-		"@wordpress/deprecated": "^3.57.0",
-		"@wordpress/dom": "^3.57.0",
-		"@wordpress/element": "^5.34.0",
-		"@wordpress/hooks": "^3.57.0",
-		"@wordpress/html-entities": "^3.57.0",
-		"@wordpress/i18n": "^4.57.0",
-		"@wordpress/icons": "^9.48.0",
-		"@wordpress/interface": "^5.34.0",
-		"@wordpress/keyboard-shortcuts": "^4.34.0",
-		"@wordpress/keycodes": "^3.57.0",
-		"@wordpress/media-utils": "^4.48.0",
-		"@wordpress/notices": "^4.25.0",
-		"@wordpress/patterns": "^1.18.0",
-		"@wordpress/plugins": "^6.25.0",
-		"@wordpress/preferences": "^3.34.0",
-		"@wordpress/private-apis": "^0.39.0",
-		"@wordpress/reusable-blocks": "^4.34.0",
-		"@wordpress/rich-text": "^6.34.0",
-		"@wordpress/server-side-render": "^4.34.0",
-		"@wordpress/url": "^3.58.0",
-		"@wordpress/warning": "^2.57.0",
-		"@wordpress/wordcount": "^3.57.0",
-		"classnames": "^2.3.1",
+		"@wordpress/a11y": "^4.0.0",
+		"@wordpress/api-fetch": "^7.0.0",
+		"@wordpress/blob": "^4.0.0",
+		"@wordpress/block-editor": "^13.0.0",
+		"@wordpress/blocks": "^13.0.0",
+		"@wordpress/commands": "^1.0.0",
+		"@wordpress/components": "^28.0.0",
+		"@wordpress/compose": "^7.0.0",
+		"@wordpress/core-data": "^7.0.0",
+		"@wordpress/data": "^10.0.0",
+		"@wordpress/date": "^5.0.0",
+		"@wordpress/deprecated": "^4.0.0",
+		"@wordpress/dom": "^4.0.0",
+		"@wordpress/element": "^6.0.0",
+		"@wordpress/hooks": "^4.0.0",
+		"@wordpress/html-entities": "^4.0.0",
+		"@wordpress/i18n": "^5.0.0",
+		"@wordpress/icons": "^10.0.0",
+		"@wordpress/interface": "^6.0.0",
+		"@wordpress/keyboard-shortcuts": "^5.0.0",
+		"@wordpress/keycodes": "^4.0.0",
+		"@wordpress/media-utils": "^5.0.0",
+		"@wordpress/notices": "^5.0.0",
+		"@wordpress/patterns": "^2.0.0",
+		"@wordpress/plugins": "^7.0.0",
+		"@wordpress/preferences": "^4.0.0",
+		"@wordpress/private-apis": "^1.0.0",
+		"@wordpress/reusable-blocks": "^5.0.0",
+		"@wordpress/rich-text": "^7.0.0",
+		"@wordpress/server-side-render": "^5.0.0",
+		"@wordpress/url": "^4.0.0",
+		"@wordpress/warning": "^3.0.0",
+		"@wordpress/wordcount": "^4.0.0",
+		"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",
 		"remove-accents": "^0.5.0"
@@ -77,5 +83,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "581d8a5580dba8f600b7268d51eb554771ae482c"
+	"gitHead": "2f30cddff15723ac7017fd009fc5913b7b419400"
 }

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

@@ -2,10 +2,92 @@
  * WordPress dependencies
  */
 import { _x } from '@wordpress/i18n';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+
+const CONTENT = 'content';
 
 export default {
 	name: 'core/pattern-overrides',
 	label: _x( 'Pattern Overrides', 'block bindings source' ),
-	useSource: null,
-	lockAttributesEditing: false,
+	getValue( { registry, clientId, attributeName } ) {
+		const { getBlockAttributes, getBlockParentsByBlockName } =
+			registry.select( blockEditorStore );
+		const currentBlockAttributes = getBlockAttributes( clientId );
+		const [ patternClientId ] = getBlockParentsByBlockName(
+			clientId,
+			'core/block',
+			true
+		);
+
+		const overridableValue =
+			getBlockAttributes( patternClientId )?.[ CONTENT ]?.[
+				currentBlockAttributes?.metadata?.name
+			]?.[ attributeName ];
+
+		// If there is no pattern client ID, or it is not overwritten, return the default value.
+		if ( ! patternClientId || overridableValue === undefined ) {
+			return currentBlockAttributes[ attributeName ];
+		}
+
+		return overridableValue === '' ? undefined : overridableValue;
+	},
+	setValues( { registry, clientId, attributes } ) {
+		const { getBlockAttributes, getBlockParentsByBlockName, getBlocks } =
+			registry.select( blockEditorStore );
+		const currentBlockAttributes = getBlockAttributes( clientId );
+		const blockName = currentBlockAttributes?.metadata?.name;
+		if ( ! blockName ) {
+			return;
+		}
+
+		const [ patternClientId ] = getBlockParentsByBlockName(
+			clientId,
+			'core/block',
+			true
+		);
+
+		// If there is no pattern client ID, sync blocks with the same name and same attributes.
+		if ( ! patternClientId ) {
+			const syncBlocksWithSameName = ( blocks ) => {
+				for ( const block of blocks ) {
+					if ( block.attributes?.metadata?.name === blockName ) {
+						registry
+							.dispatch( blockEditorStore )
+							.updateBlockAttributes(
+								block.clientId,
+								attributes
+							);
+					}
+					syncBlocksWithSameName( block.innerBlocks );
+				}
+			};
+
+			syncBlocksWithSameName( getBlocks() );
+			return;
+		}
+		const currentBindingValue =
+			getBlockAttributes( patternClientId )?.[ CONTENT ];
+		registry
+			.dispatch( blockEditorStore )
+			.updateBlockAttributes( patternClientId, {
+				[ CONTENT ]: {
+					...currentBindingValue,
+					[ blockName ]: {
+						...currentBindingValue?.[ blockName ],
+						...Object.entries( attributes ).reduce(
+							( acc, [ key, value ] ) => {
+								// TODO: We need a way to represent `undefined` in the serialized overrides.
+								// Also see: https://github.com/WordPress/gutenberg/pull/57249#discussion_r1452987871
+								// We use an empty string to represent undefined for now until
+								// we support a richer format for overrides and the block bindings API.
+								acc[ key ] = value === undefined ? '' : value;
+								return acc;
+							},
+							{}
+						),
+					},
+				},
+			} );
+	},
+	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/autocompleters/style.scss

@@ -1,8 +1,7 @@
 .editor-autocompleters__user {
 	.editor-autocompleters__no-avatar::before {
-		/* stylelint-disable */
+		/* stylelint-disable-next-line font-family-no-missing-generic-family-keyword -- dashicons don't need a generic family keyword. */
 		font: normal 20px/1 dashicons;
-		/* stylelint-enable */
 		content: "\f110";
 		margin-right: 5px;
 		vertical-align: middle;

package/src/components/block-settings-menu/content-only-settings-menu.js

@@ -0,0 +1,175 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	BlockSettingsMenuControls,
+	__unstableBlockSettingsMenuFirstItem as BlockSettingsMenuFirstItem,
+	store as blockEditorStore,
+	useBlockDisplayInformation,
+} from '@wordpress/block-editor';
+import { store as coreStore } from '@wordpress/core-data';
+import { __experimentalText as Text, MenuItem } from '@wordpress/components';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
+function ContentOnlySettingsMenuItems( { clientId, onClose } ) {
+	const { entity, onNavigateToEntityRecord } = useSelect(
+		( select ) => {
+			const {
+				getBlockEditingMode,
+				getBlockParentsByBlockName,
+				getSettings,
+				getBlockAttributes,
+			} = select( blockEditorStore );
+			const contentOnly =
+				getBlockEditingMode( clientId ) === 'contentOnly';
+			if ( ! contentOnly ) {
+				return {};
+			}
+			const patternParent = getBlockParentsByBlockName(
+				clientId,
+				'core/block',
+				true
+			)[ 0 ];
+
+			let record;
+			if ( patternParent ) {
+				record = select( coreStore ).getEntityRecord(
+					'postType',
+					'wp_block',
+					getBlockAttributes( patternParent ).ref
+				);
+			} else {
+				const { getCurrentPostType, getCurrentTemplateId } =
+					select( editorStore );
+				const currentPostType = getCurrentPostType();
+				const templateId = getCurrentTemplateId();
+				if ( currentPostType === 'page' && templateId ) {
+					record = select( coreStore ).getEntityRecord(
+						'postType',
+						'wp_template',
+						templateId
+					);
+				}
+			}
+			return {
+				entity: record,
+				onNavigateToEntityRecord:
+					getSettings().onNavigateToEntityRecord,
+			};
+		},
+		[ clientId ]
+	);
+
+	if ( ! entity ) {
+		return (
+			<TemplateLockContentOnlyMenuItems
+				clientId={ clientId }
+				onClose={ onClose }
+			/>
+		);
+	}
+
+	const isPattern = entity.type === 'wp_block';
+
+	return (
+		<>
+			<BlockSettingsMenuFirstItem>
+				<MenuItem
+					onClick={ () => {
+						onNavigateToEntityRecord( {
+							postId: entity.id,
+							postType: entity.type,
+						} );
+					} }
+				>
+					{ isPattern ? __( 'Edit pattern' ) : __( 'Edit template' ) }
+				</MenuItem>
+			</BlockSettingsMenuFirstItem>
+			<Text
+				variant="muted"
+				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.'
+					  ) }
+			</Text>
+		</>
+	);
+}
+
+function TemplateLockContentOnlyMenuItems( { clientId, onClose } ) {
+	const { contentLockingParent } = useSelect(
+		( select ) => {
+			const { getContentLockingParent } = unlock(
+				select( blockEditorStore )
+			);
+			return {
+				contentLockingParent: getContentLockingParent( clientId ),
+			};
+		},
+		[ clientId ]
+	);
+	const blockDisplayInformation =
+		useBlockDisplayInformation( contentLockingParent );
+	// Disable reason: We're using a hook here so it has to be on top-level.
+	// eslint-disable-next-line @wordpress/no-unused-vars-before-return
+	const { modifyContentLockBlock, selectBlock } = unlock(
+		useDispatch( blockEditorStore )
+	);
+
+	if ( ! blockDisplayInformation?.title ) {
+		return null;
+	}
+
+	return (
+		<>
+			<BlockSettingsMenuFirstItem>
+				<MenuItem
+					onClick={ () => {
+						selectBlock( contentLockingParent );
+						modifyContentLockBlock( contentLockingParent );
+						onClose();
+					} }
+				>
+					{ __( 'Unlock' ) }
+				</MenuItem>
+			</BlockSettingsMenuFirstItem>
+			<Text
+				variant="muted"
+				as="p"
+				className="editor-content-only-settings-menu__description"
+			>
+				{ __(
+					'Temporarily unlock the parent block to edit, delete or make further changes to this block.'
+				) }
+			</Text>
+		</>
+	);
+}
+
+export default function ContentOnlySettingsMenu() {
+	return (
+		<BlockSettingsMenuControls>
+			{ ( { selectedClientIds, onClose } ) =>
+				selectedClientIds.length === 1 && (
+					<ContentOnlySettingsMenuItems
+						clientId={ selectedClientIds[ 0 ] }
+						onClose={ onClose }
+					/>
+				)
+			}
+		</BlockSettingsMenuControls>
+	);
+}

package/src/components/block-settings-menu/content-only-settings-menu.native.js

@@ -0,0 +1,4 @@
+// Render nothing in native for now.
+export default function ContentOnlySettingsMenu() {
+	return null;
+}

package/src/components/block-settings-menu/style.scss

@@ -0,0 +1,4 @@
+.editor-content-only-settings-menu__description {
+	padding: $grid-unit;
+	min-width: 235px;
+}

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/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -49,7 +49,7 @@ function CollapsableBlockToolbar( { isCollapsed, onToggle } ) {
 	return (
 		<>
 			<div
-				className={ classnames( 'editor-collapsible-block-toolbar', {
+				className={ clsx( 'editor-collapsible-block-toolbar', {
 					'is-collapsed': isCollapsed || ! hasBlockSelection,
 				} ) }
 			>