@wordpress/editor 14.33.3 → 14.33.5

package/src/bindings/post-data.js

@@ -11,90 +11,23 @@ const NAVIGATION_BLOCK_TYPES = [
 	'core/navigation-submenu',
 ];
 
-/**
- * Gets a list of post data fields with their values and labels
- * to be consumed in the needed callbacks.
- * If the value is not available based on context, like in templates,
- * it falls back to the default value, label, or key.
- *
- * @param {Object} select   The select function from the data store.
- * @param {Object} context  The context provided.
- * @param {string} clientId The block client ID used to read attributes.
- * @return {Object} List of post data fields with their value and label.
- *
- * @example
- * ```js
- * {
- *     field_1_key: {
- *         label: 'Field 1 Label',
- *         value: 'Field 1 Value',
- *     },
- *     field_2_key: {
- *         label: 'Field 2 Label',
- *         value: 'Field 2 Value',
- *     },
- *     ...
- * }
- * ```
- */
-function getPostDataFields( select, context, clientId ) {
-	const { getEditedEntityRecord } = select( coreDataStore );
-	const { getBlockAttributes, getBlockName } = select( blockEditorStore );
-
-	let entityDataValues, dataFields;
-
-	/*
-	 * BACKWARDS COMPATIBILITY: Hardcoded exception for navigation blocks.
-	 * Required for WordPress 6.9+ navigation blocks. DO NOT REMOVE.
-	 */
-	const blockName = getBlockName?.( clientId );
-	const isNavigationBlock = NAVIGATION_BLOCK_TYPES.includes( blockName );
-
-	let postId, postType;
-
-	if ( isNavigationBlock ) {
-		// Navigation blocks: read from block attributes
-		const blockAttributes = getBlockAttributes?.( clientId );
-		postId = blockAttributes?.id;
-		postType = blockAttributes?.type;
-	} else {
-		// All other blocks: use context
-		postId = context?.postId;
-		postType = context?.postType;
-	}
-
-	// Try to get the current entity data values using resolved identifiers.
-	if ( postType && postId ) {
-		entityDataValues = getEditedEntityRecord(
-			'postType',
-			postType,
-			postId
-		);
-		dataFields = {
-			date: {
-				label: __( 'Post Date' ),
-				value: entityDataValues?.date,
-				type: 'string',
-			},
-			modified: {
-				label: __( 'Post Modified Date' ),
-				value: entityDataValues?.modified,
-				type: 'string',
-			},
-			link: {
-				label: __( 'Post Link' ),
-				value: entityDataValues?.link,
-				type: 'string',
-			},
-		};
-	}
-
-	if ( ! Object.keys( dataFields || {} ).length ) {
-		return null;
-	}
-
-	return dataFields;
-}
+const postDataFields = [
+	{
+		label: __( 'Post Date' ),
+		args: { field: 'date' },
+		type: 'string',
+	},
+	{
+		label: __( 'Post Modified Date' ),
+		args: { field: 'modified' },
+		type: 'string',
+	},
+	{
+		label: __( 'Post Link' ),
+		args: { field: 'link' },
+		type: 'string',
+	},
+];
 
 /**
  * @type {WPBlockBindingsSource}
@@ -102,15 +35,50 @@ function getPostDataFields( select, context, clientId ) {
 export default {
 	name: 'core/post-data',
 	getValues( { select, context, bindings, clientId } ) {
-		const dataFields = getPostDataFields( select, context, clientId );
+		const allowedFields = postDataFields.map(
+			( field ) => field.args.field
+		);
+
+		/*
+		 * BACKWARDS COMPATIBILITY: Hardcoded exception for navigation blocks.
+		 * Required for WordPress 6.9+ navigation blocks. DO NOT REMOVE.
+		 */
+		const { getBlockAttributes, getBlockName } = select( blockEditorStore );
+		const blockName = getBlockName?.( clientId );
+		const isNavigationBlock = NAVIGATION_BLOCK_TYPES.includes( blockName );
+
+		let postId, postType;
+
+		if ( isNavigationBlock ) {
+			// Navigation blocks: read from block attributes
+			const blockAttributes = getBlockAttributes?.( clientId );
+			postId = blockAttributes?.id;
+			postType = blockAttributes?.type;
+		} else {
+			// All other blocks: use context
+			postId = context?.postId;
+			postType = context?.postType;
+		}
+
+		const { getEditedEntityRecord } = select( coreDataStore );
+		const entityDataValues = getEditedEntityRecord(
+			'postType',
+			postType,
+			postId
+		);
 
 		const newValues = {};
-		for ( const [ attributeName, source ] of Object.entries( bindings ) ) {
-			// Use the value, the field label, or the field key.
-			const fieldKey = source.args.field;
-			const { value: fieldValue, label: fieldLabel } =
-				dataFields?.[ fieldKey ] || {};
-			newValues[ attributeName ] = fieldValue ?? fieldLabel ?? fieldKey;
+		for ( const [ attributeName, binding ] of Object.entries( bindings ) ) {
+			if ( ! allowedFields.includes( binding.args.field ) ) {
+				newValues[ attributeName ] = {};
+				continue;
+			}
+
+			newValues[ attributeName ] =
+				entityDataValues?.[ binding.args.field ] ??
+				postDataFields.find(
+					( field ) => field.args.field === binding.args.field
+				).label;
 		}
 		return newValues;
 	},
@@ -136,7 +104,7 @@ export default {
 			newData
 		);
 	},
-	canUserEditValue( { select, context, args } ) {
+	canUserEditValue( { select, context } ) {
 		const { getBlockName, getSelectedBlockClientId } =
 			select( blockEditorStore );
 		const clientId = getSelectedBlockClientId();
@@ -158,14 +126,6 @@ export default {
 			return false;
 		}
 
-		const fieldValue = getPostDataFields( select, context, undefined )?.[
-			args.field
-		]?.value;
-		// Empty string or `false` could be a valid value, so we need to check if the field value is undefined.
-		if ( fieldValue === undefined ) {
-			return false;
-		}
-
 		// Check that the user has the capability to edit post data.
 		const canUserEdit = select( coreDataStore ).canUser( 'update', {
 			kind: 'postType',
@@ -178,7 +138,7 @@ export default {
 
 		return true;
 	},
-	getFieldsList( { select, context } ) {
+	getFieldsList( { select } ) {
 		const selectedBlock = select( blockEditorStore ).getSelectedBlock();
 		if ( selectedBlock?.name !== 'core/post-date' ) {
 			return [];
@@ -187,15 +147,7 @@ export default {
 		if ( NAVIGATION_BLOCK_TYPES.includes( selectedBlock?.name ) ) {
 			return [];
 		}
-		const clientId = select( blockEditorStore ).getSelectedBlockClientId();
-		const postDataFields = getPostDataFields( select, context, clientId );
-		if ( ! postDataFields ) {
-			return [];
-		}
-		return Object.entries( postDataFields ).map( ( [ key, field ] ) => ( {
-			label: field.label,
-			type: field.type,
-			args: { field: key },
-		} ) );
+
+		return postDataFields;
 	},
 };

package/src/bindings/post-meta.js

@@ -35,41 +35,52 @@ import { unlock } from '../lock-unlock';
  * ```
  */
 function getPostMetaFields( select, context ) {
-	const { getEditedEntityRecord } = select( coreDataStore );
 	const { getRegisteredPostMeta } = unlock( select( coreDataStore ) );
 
-	let entityMetaValues;
-	// Try to get the current entity meta values.
-	if ( context?.postType && context?.postId ) {
-		entityMetaValues = getEditedEntityRecord(
-			'postType',
-			context?.postType,
-			context?.postId
-		).meta;
-	}
-
 	const registeredFields = getRegisteredPostMeta( context?.postType );
-	const metaFields = {};
-	Object.entries( registeredFields || {} ).forEach( ( [ key, props ] ) => {
+	const metaFields = [];
+	Object.entries( registeredFields ).forEach( ( [ key, props ] ) => {
 		// Don't include footnotes or private fields.
-		if ( key !== 'footnotes' && key.charAt( 0 ) !== '_' ) {
-			metaFields[ key ] = {
-				label: props.title || key,
-				value:
-					// When using the entity value, an empty string IS a valid value.
-					entityMetaValues?.[ key ] ??
-					// When using the default, an empty string IS NOT a valid value.
-					( props.default || undefined ),
-				type: props.type,
-			};
+		if ( key === 'footnotes' || key.charAt( 0 ) === '_' ) {
+			return;
 		}
+
+		metaFields.push( {
+			label: props.title || key,
+			args: { key },
+			default: props.default,
+			type: props.type,
+		} );
 	} );
 
-	if ( ! Object.keys( metaFields || {} ).length ) {
-		return null;
+	return metaFields;
+}
+
+function getValue( { select, context, args } ) {
+	const metaFields = getPostMetaFields( select, context );
+	const metaField = metaFields.find(
+		( field ) => field.args.key === args.key
+	);
+
+	// If the meta field was not found, it's either protected, inaccessible, or simply doesn't exist.
+	if ( ! metaField ) {
+		return args.key;
 	}
 
-	return metaFields;
+	// Without a postId, we cannot look up a meta value.
+	if ( ! context?.postId ) {
+		// Return the default value for the meta field if available.
+		return metaField.default || metaField.label || args.key;
+	}
+
+	const { getEditedEntityRecord } = select( coreDataStore );
+	const entityMetaValues = getEditedEntityRecord(
+		'postType',
+		context?.postType,
+		context?.postId
+	).meta;
+
+	return entityMetaValues?.[ args.key ] ?? metaField?.label ?? args.key;
 }
 
 /**
@@ -78,15 +89,13 @@ function getPostMetaFields( select, context ) {
 export default {
 	name: 'core/post-meta',
 	getValues( { select, context, bindings } ) {
-		const metaFields = getPostMetaFields( select, context );
-
 		const newValues = {};
-		for ( const [ attributeName, source ] of Object.entries( bindings ) ) {
-			// Use the value, the field label, or the field key.
-			const fieldKey = source.args.key;
-			const { value: fieldValue, label: fieldLabel } =
-				metaFields?.[ fieldKey ] || {};
-			newValues[ attributeName ] = fieldValue ?? fieldLabel ?? fieldKey;
+		for ( const [ attributeName, binding ] of Object.entries( bindings ) ) {
+			newValues[ attributeName ] = getValue( {
+				select,
+				context,
+				args: binding.args,
+			} );
 		}
 		return newValues;
 	},
@@ -116,12 +125,14 @@ export default {
 			return false;
 		}
 
-		const fieldValue = getPostMetaFields( select, context )?.[ args.key ]
-			?.value;
-		// Empty string or `false` could be a valid value, so we need to check if the field value is undefined.
-		if ( fieldValue === undefined ) {
+		const metaFields = getPostMetaFields( select, context );
+		const hasMatchingMetaField = metaFields.some(
+			( field ) => field.args.key === args.key
+		);
+		if ( ! hasMatchingMetaField ) {
 			return false;
 		}
+
 		// Check that custom fields metabox is not enabled.
 		const areCustomFieldsEnabled =
 			select( editorStore ).getEditorSettings().enableCustomFields;
@@ -143,13 +154,11 @@ export default {
 	},
 	getFieldsList( { select, context } ) {
 		const metaFields = getPostMetaFields( select, context );
-		if ( ! metaFields ) {
-			return [];
-		}
-		return Object.entries( metaFields ).map( ( [ key, field ] ) => ( {
-			label: field.label,
-			type: field.type,
-			args: { key },
-		} ) );
+		// Remove 'default' property from meta fields.
+		return metaFields.map(
+			( { default: defaultProp, ...otherProps } ) => ( {
+				...otherProps,
+			} )
+		);
 	},
 };

package/src/bindings/test/post-meta.js

@@ -0,0 +1,211 @@
+/**
+ * Internal dependencies
+ */
+import { lock } from '../../lock-unlock';
+
+/**
+ * Internal dependencies
+ */
+import postMetaBindings from '../post-meta';
+
+describe( 'post-meta bindings', () => {
+	let context, select, selectReturn;
+
+	beforeAll( () => {
+		const getEditedEntityRecord = ( kind, type, id ) => ( {
+			meta:
+				id === 123
+					? {
+							movie_field: 'Test Movie Value',
+							_protected_field: 'Protected field value',
+					  }
+					: {},
+		} );
+
+		const getEditorSettings = () => ( {
+			enableCustomFields: false,
+		} );
+
+		selectReturn = {
+			getEditedEntityRecord,
+			getEditorSettings,
+		};
+
+		const getRegisteredPostMeta = () => ( {
+			field_without_label_or_default: { type: 'string' },
+			field_with_label_only: {
+				title: 'Field With Label Only',
+				default: '', // If there's no default set, getRegisteredPostMeta() will return an empty string.
+				type: 'string',
+			},
+			movie_field: {
+				title: 'Movie Field Label',
+				default: 'Movie field default value',
+				type: 'string',
+			},
+			_protected_field: {
+				default: 'Protected field default value',
+				type: 'string',
+			},
+		} );
+
+		lock( selectReturn, { getRegisteredPostMeta } );
+
+		select = () => selectReturn;
+	} );
+
+	describe( 'when no postId is provided in context', () => {
+		beforeAll( () => {
+			context = { postType: 'movie' };
+		} );
+
+		describe( 'getValues', () => {
+			it( 'should return the meta default value if it is defined', () => {
+				const values = postMetaBindings.getValues( {
+					select,
+					context,
+					bindings: {
+						content: {
+							args: { key: 'movie_field' },
+						},
+					},
+				} );
+
+				expect( values.content ).toBe( 'Movie field default value' );
+			} );
+
+			it( 'should fall back to the field label if the meta default value is not defined', () => {
+				const values = postMetaBindings.getValues( {
+					select,
+					context,
+					bindings: {
+						content: {
+							args: { key: 'field_with_label_only' },
+						},
+					},
+				} );
+
+				expect( values.content ).toBe( 'Field With Label Only' );
+			} );
+
+			it( 'should fall back to the field key if the field label is not defined', () => {
+				const values = postMetaBindings.getValues( {
+					select,
+					context,
+					bindings: {
+						content: {
+							args: { key: 'field_without_label_or_default' },
+						},
+					},
+				} );
+
+				expect( values.content ).toBe(
+					'field_without_label_or_default'
+				);
+			} );
+		} );
+
+		describe( 'getFieldsList', () => {
+			it( 'should return the list of available meta fields, with correct fallbacks for labels, and exclude protected fields', () => {
+				const fields = postMetaBindings.getFieldsList( {
+					select,
+					context,
+				} );
+
+				expect( fields ).toEqual( [
+					{
+						label: 'field_without_label_or_default',
+						type: 'string',
+						args: { key: 'field_without_label_or_default' },
+					},
+					{
+						label: 'Field With Label Only',
+						type: 'string',
+						args: { key: 'field_with_label_only' },
+					},
+					{
+						label: 'Movie Field Label',
+						type: 'string',
+						args: { key: 'movie_field' },
+					},
+				] );
+			} );
+		} );
+	} );
+
+	describe( 'when postId is provided in context', () => {
+		beforeAll( () => {
+			context = { postType: 'movie', postId: 123 };
+		} );
+
+		describe( 'getValues', () => {
+			it( 'should return the meta value if it is defined', () => {
+				const values = postMetaBindings.getValues( {
+					select,
+					context,
+					bindings: {
+						content: {
+							args: { key: 'movie_field' },
+						},
+					},
+				} );
+
+				expect( values.content ).toBe( 'Test Movie Value' );
+			} );
+
+			it( 'should fall back to the key when meta field is not accessible', () => {
+				const values = postMetaBindings.getValues( {
+					select,
+					context,
+					bindings: {
+						content: {
+							args: { key: 'inaccessible_field' },
+						},
+					},
+				} );
+
+				expect( values.content ).toBe( 'inaccessible_field' );
+			} );
+
+			it( 'should fall back to the key when meta field is protected', () => {
+				const values = postMetaBindings.getValues( {
+					select,
+					context,
+					bindings: {
+						content: {
+							args: { key: '_protected_field' },
+						},
+					},
+				} );
+
+				expect( values.content ).toBe( '_protected_field' );
+			} );
+		} );
+
+		describe( 'canUserEditValue', () => {
+			beforeAll( () => {
+				select = () => ( { ...selectReturn, canUser: () => true } );
+			} );
+
+			it( 'should return false when meta field is not accessible', () => {
+				const canUser = postMetaBindings.canUserEditValue( {
+					select,
+					context,
+					args: { key: 'inaccessible_field' },
+				} );
+
+				expect( canUser ).toBe( false );
+			} );
+
+			it( 'should return false when meta field is protected', () => {
+				const canUser = postMetaBindings.canUserEditValue( {
+					select,
+					context,
+					args: { key: '_protected_field' },
+				} );
+
+				expect( canUser ).toBe( false );
+			} );
+		} );
+	} );
+} );

package/src/components/collab-sidebar/add-comment.js

@@ -6,7 +6,7 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import {
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
@@ -45,6 +45,13 @@ export function AddComment( {
 		};
 	}, [] );
 	const blockElement = useBlockElement( clientId );
+	const { toggleBlockSpotlight } = unlock( useDispatch( blockEditorStore ) );
+
+	const unselectThread = () => {
+		setShowCommentBoard( false );
+		blockElement?.focus();
+		toggleBlockSpotlight( clientId, false );
+	};
 
 	if ( ! showCommentBoard || ! clientId || undefined !== blockCommentId ) {
 		return null;
@@ -61,7 +68,7 @@ export function AddComment( {
 			spacing="3"
 			tabIndex={ 0 }
 			aria-label={ __( 'New note' ) }
-			role="listitem"
+			role="treeitem"
 			ref={ isFloating ? refs.setFloating : undefined }
 			style={
 				isFloating
@@ -73,6 +80,7 @@ export function AddComment( {
 				if ( event.currentTarget.contains( event.relatedTarget ) ) {
 					return;
 				}
+				toggleBlockSpotlight( clientId, false );
 				setShowCommentBoard( false );
 			} }
 		>
@@ -85,10 +93,7 @@ export function AddComment( {
 					focusCommentThread( id, commentSidebarRef.current );
 					setShowCommentBoard( false );
 				} }
-				onCancel={ () => {
-					setShowCommentBoard( false );
-					blockElement?.focus();
-				} }
+				onCancel={ unselectThread }
 				reflowComments={ reflowComments }
 				submitButtonText={ __( 'Add note' ) }
 				labelText={ __( 'New note' ) }

package/src/components/collab-sidebar/comment-author-info.js

@@ -18,38 +18,45 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
  */
 import { getAvatarBorderColor } from './utils';
 
-/**
- * Render author information for a comment.
- *
- * @param {Object} props        - Component properties.
- * @param {string} props.avatar - URL of the author's avatar.
- * @param {string} props.name   - Name of the author.
- * @param {string} props.date   - Date of the comment.
- * @param {string} props.userId - User ID of the author.
- *
- * @return {React.ReactNode} The JSX element representing the author's information.
- */
 function CommentAuthorInfo( { avatar, name, date, userId } ) {
+	const hasAvatar = !! avatar;
 	const dateSettings = getDateSettings();
 	const {
 		currentUserAvatar,
 		currentUserName,
 		currentUserId,
 		dateFormat = dateSettings.formats.date,
-	} = useSelect( ( select ) => {
-		const { getCurrentUser, getEntityRecord } = select( coreStore );
-		const { getSettings } = select( blockEditorStore );
-		const userData = getCurrentUser();
-		const { __experimentalDiscussionSettings } = getSettings();
-		const defaultAvatar = __experimentalDiscussionSettings?.avatarURL;
-		const siteSettings = getEntityRecord( 'root', 'site' );
-		return {
-			currentUserAvatar: userData?.avatar_urls?.[ 48 ] ?? defaultAvatar,
-			currentUserName: userData?.name,
-			currentUserId: userData?.id,
-			dateFormat: siteSettings?.date_format,
-		};
-	}, [] );
+	} = useSelect(
+		( select ) => {
+			const { canUser, getCurrentUser, getEntityRecord } =
+				select( coreStore );
+			const siteSettings = canUser( 'read', {
+				kind: 'root',
+				name: 'site',
+			} )
+				? getEntityRecord( 'root', 'site' )
+				: undefined;
+
+			if ( hasAvatar ) {
+				return {
+					dateFormat: siteSettings?.date_format,
+				};
+			}
+
+			const { getSettings } = select( blockEditorStore );
+			const { __experimentalDiscussionSettings } = getSettings();
+			const defaultAvatar = __experimentalDiscussionSettings?.avatarURL;
+			const userData = getCurrentUser();
+			return {
+				currentUserAvatar:
+					userData?.avatar_urls?.[ 48 ] ?? defaultAvatar,
+				currentUserName: userData?.name,
+				currentUserId: userData?.id,
+				dateFormat: siteSettings?.date_format,
+			};
+		},
+		[ hasAvatar ]
+	);
 
 	const commentDate = getDate( date );
 	const commentDateTime = dateI18n( 'c', commentDate );
@@ -87,7 +94,7 @@ function CommentAuthorInfo( { avatar, name, date, userId } ) {
 					{ name ?? currentUserName }
 				</span>
 				{ date && (
-					<Tooltip placement="top" text={ tooltipText }>
+					<Tooltip text={ tooltipText }>
 						<time
 							dateTime={ commentDateTime }
 							className="editor-collab-sidebar-panel__user-time"