@wordpress/editor 14.30.0 → 14.30.1-next.6f42e1382.0

package/src/bindings/term-data.js

@@ -0,0 +1,159 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { store as coreDataStore } from '@wordpress/core-data';
+
+/**
+ * Creates the data fields object with the given term data values and ID value.
+ *
+ * @param {Object}        termDataValues The term data values.
+ * @param {string|number} idValue        The ID value to use.
+ * @return {Object} The data fields object.
+ */
+function createDataFields( termDataValues, idValue ) {
+	return {
+		id: {
+			label: __( 'Term ID' ),
+			value: idValue,
+			type: 'string',
+		},
+		name: {
+			label: __( 'Name' ),
+			value: termDataValues?.name,
+			type: 'string',
+		},
+		slug: {
+			label: __( 'Slug' ),
+			value: termDataValues?.slug,
+			type: 'string',
+		},
+		link: {
+			label: __( 'Link' ),
+			value: termDataValues?.link,
+			type: 'string',
+		},
+		description: {
+			label: __( 'Description' ),
+			value: termDataValues?.description,
+			type: 'string',
+		},
+		parent: {
+			label: __( 'Parent ID' ),
+			value: termDataValues?.parent,
+			type: 'string',
+		},
+		count: {
+			label: __( 'Count' ),
+			value: `(${ termDataValues?.count ?? 0 })`,
+			type: 'string',
+		},
+	};
+}
+
+/**
+ * Gets a list of term 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.
+ * @return {Object} List of term data fields with their value and label.
+ *
+ * @example
+ * ```js
+ * {
+ *     name: {
+ *         label: 'Term Name',
+ *         value: 'Category Name',
+ *     },
+ *     count: {
+ *         label: 'Term Count',
+ *         value: 5,
+ *     },
+ *     ...
+ * }
+ * ```
+ */
+function getTermDataFields( select, context ) {
+	const { getEntityRecord } = select( coreDataStore );
+
+	let termDataValues, dataFields;
+	if ( context?.taxonomy && context?.termId ) {
+		termDataValues = getEntityRecord(
+			'taxonomy',
+			context?.taxonomy,
+			context?.termId
+		);
+
+		if ( ! termDataValues && context?.termData ) {
+			termDataValues = context.termData;
+		}
+
+		if ( termDataValues ) {
+			dataFields = createDataFields( termDataValues, context?.termId );
+		}
+	} else if ( context?.termData ) {
+		termDataValues = context.termData;
+		dataFields = createDataFields(
+			termDataValues,
+			termDataValues?.term_id
+		);
+	}
+
+	if ( ! dataFields || ! Object.keys( dataFields ).length ) {
+		return null;
+	}
+
+	return dataFields;
+}
+
+/**
+ * @type {WPBlockBindingsSource}
+ */
+export default {
+	name: 'core/term-data',
+	usesContext: [ 'taxonomy', 'termId', 'termData' ],
+	getValues( { select, context, bindings } ) {
+		const dataFields = getTermDataFields( 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 } =
+				dataFields?.[ fieldKey ] || {};
+			newValues[ attributeName ] = fieldValue ?? fieldLabel ?? fieldKey;
+		}
+		return newValues;
+	},
+	// eslint-disable-next-line no-unused-vars
+	setValues( { dispatch, context, bindings } ) {
+		// Terms are typically not editable through block bindings in most contexts.
+		return false;
+	},
+	canUserEditValue( { select, context, args } ) {
+		// Terms are typically read-only when displayed.
+		if ( context?.termQuery || context?.termQueryId ) {
+			return false;
+		}
+
+		// Lock editing when `taxonomy` or `termId` is not defined.
+		if ( ! context?.taxonomy || ! context?.termId ) {
+			return false;
+		}
+
+		const fieldValue = getTermDataFields( 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 ) {
+			return false;
+		}
+
+		return false;
+	},
+	getFieldsList( { select, context } ) {
+		return getTermDataFields( select, context );
+	},
+};

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

@@ -8,6 +8,7 @@ import {
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { store as blockEditorStore } from '@wordpress/block-editor';
+import { isUnmodifiedDefaultBlock } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -29,16 +30,26 @@ export function AddComment( {
 	showCommentBoard,
 	setShowCommentBoard,
 } ) {
-	const { clientId, blockCommentId } = useSelect( ( select ) => {
-		const { getSelectedBlock } = select( blockEditorStore );
-		const selectedBlock = getSelectedBlock();
-		return {
-			clientId: selectedBlock?.clientId,
-			blockCommentId: selectedBlock?.attributes?.blockCommentId,
-		};
-	} );
+	const { clientId, blockCommentId, isEmptyDefaultBlock } = useSelect(
+		( select ) => {
+			const { getSelectedBlock } = select( blockEditorStore );
+			const selectedBlock = getSelectedBlock();
+			return {
+				clientId: selectedBlock?.clientId,
+				blockCommentId: selectedBlock?.attributes?.blockCommentId,
+				isEmptyDefaultBlock: selectedBlock
+					? isUnmodifiedDefaultBlock( selectedBlock )
+					: false,
+			};
+		}
+	);
 
-	if ( ! showCommentBoard || ! clientId || undefined !== blockCommentId ) {
+	if (
+		! showCommentBoard ||
+		! clientId ||
+		undefined !== blockCommentId ||
+		isEmptyDefaultBlock
+	) {
 		return null;
 	}
 

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

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import TextareaAutosize from 'react-autosize-textarea';
+
 /**
  * WordPress dependencies
  */
@@ -5,9 +10,10 @@ import { useState } from '@wordpress/element';
 import {
 	__experimentalHStack as HStack,
 	Button,
-	TextareaControl,
+	VisuallyHidden,
 } from '@wordpress/components';
 import { _x, __ } from '@wordpress/i18n';
+import { useInstanceId } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -29,16 +35,22 @@ function CommentForm( { onSubmit, onCancel, thread, submitButtonText } ) {
 		thread?.content?.raw ?? ''
 	);
 
+	const inputId = useInstanceId( CommentForm, 'comment-input' );
+
 	return (
 		<>
-			<TextareaControl
-				__next40pxDefaultSize
-				__nextHasNoMarginBottom
+			<VisuallyHidden as="label" htmlFor={ inputId }>
+				{ __( 'Comment' ) }
+			</VisuallyHidden>
+			<TextareaAutosize
+				id={ inputId }
 				value={ inputComment ?? '' }
-				onChange={ setInputComment }
-				label={ __( 'Comment' ) }
-				hideLabelFromVision
-			/>
+				onChange={ ( comment ) =>
+					setInputComment( comment.target.value )
+				}
+				rows={ 4 }
+				maxRows={ 20 }
+			></TextareaAutosize>
 			<HStack alignment="left" spacing="3" justify="flex-start">
 				<Button
 					__next40pxDefaultSize

package/src/components/collab-sidebar/index.js

@@ -222,7 +222,7 @@ export default function CollabSidebar() {
 	const { enableComplementaryArea } = useDispatch( interfaceStore );
 	const { getActiveComplementaryArea } = useSelect( interfaceStore );
 
-	const { postId, postType, postStatus, threads } = useSelect( ( select ) => {
+	const { postId, postType, threads } = useSelect( ( select ) => {
 		const { getCurrentPostId, getCurrentPostType } = select( editorStore );
 		const _postId = getCurrentPostId();
 		const data =
@@ -237,8 +237,6 @@ export default function CollabSidebar() {
 		return {
 			postId: _postId,
 			postType: getCurrentPostType(),
-			postStatus:
-				select( editorStore ).getEditedPostAttribute( 'status' ),
 			threads: data,
 		};
 	}, [] );
@@ -257,7 +255,7 @@ export default function CollabSidebar() {
 
 	const openCollabBoard = () => {
 		setShowCommentBoard( true );
-		enableComplementaryArea( 'core', 'edit-post/collab-sidebar' );
+		enableComplementaryArea( 'core', collabHistorySidebarName );
 	};
 
 	const [ blocks ] = useEntityBlockEditor( 'postType', postType, {
@@ -265,7 +263,7 @@ export default function CollabSidebar() {
 	} );
 
 	// Process comments to build the tree structure
-	const { resultComments, sortedThreads } = useMemo( () => {
+	const { resultComments, unresolvedSortedThreads } = useMemo( () => {
 		// Create a compare to store the references to all objects by id
 		const compare = {};
 		const result = [];
@@ -291,7 +289,7 @@ export default function CollabSidebar() {
 		} );
 
 		if ( 0 === result?.length ) {
-			return { resultComments: [], sortedThreads: [] };
+			return { resultComments: [], unresolvedSortedThreads: [] };
 		}
 
 		const updatedResult = result.map( ( item ) => ( {
@@ -305,11 +303,18 @@ export default function CollabSidebar() {
 			updatedResult.map( ( thread ) => [ thread.id, thread ] )
 		);
 
-		const sortedComments = blockCommentIds
+		// Get comments by block order, filter out undefined threads, and exclude resolved comments.
+		const unresolvedSortedComments = blockCommentIds
 			.map( ( id ) => threadIdMap.get( id ) )
-			.filter( ( thread ) => thread !== undefined );
+			.filter(
+				( thread ) =>
+					thread !== undefined && thread.status !== 'approved'
+			);
 
-		return { resultComments: updatedResult, sortedThreads: sortedComments };
+		return {
+			resultComments: updatedResult,
+			unresolvedSortedThreads: unresolvedSortedComments,
+		};
 	}, [ threads, blocks ] );
 
 	// Get the global styles to set the background color of the sidebar.
@@ -327,10 +332,6 @@ export default function CollabSidebar() {
 		} );
 	}
 
-	if ( postStatus === 'publish' ) {
-		return null; // or maybe return some message indicating no threads are available.
-	}
-
 	const AddCommentComponent = blockCommentId
 		? AddCommentToolbarButton
 		: AddCommentButton;
@@ -358,7 +359,7 @@ export default function CollabSidebar() {
 				headerClassName="editor-collab-sidebar__header"
 			>
 				<CollabSidebarContent
-					comments={ sortedThreads }
+					comments={ unresolvedSortedThreads }
 					showCommentBoard={ showCommentBoard }
 					setShowCommentBoard={ setShowCommentBoard }
 					styles={ {

package/src/components/post-taxonomies/hierarchical-term-selector.js

@@ -13,11 +13,15 @@ import {
 	Flex,
 	FlexItem,
 	SearchControl,
+	Spinner,
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useDebounce } from '@wordpress/compose';
-import { store as coreStore } from '@wordpress/core-data';
+import {
+	store as coreStore,
+	privateApis as coreDataPrivateApis,
+} from '@wordpress/core-data';
 import { speak } from '@wordpress/a11y';
 import { decodeEntities } from '@wordpress/html-entities';
 
@@ -28,6 +32,9 @@ import { buildTermsTree } from '../../utils/terms';
 import { store as editorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 
+const { normalizeTextString } = unlock( componentsPrivateApis );
+const { RECEIVE_INTERMEDIATE_RESULTS } = unlock( coreDataPrivateApis );
+
 /**
  * Module Constants
  */
@@ -37,12 +44,11 @@ const DEFAULT_QUERY = {
 	order: 'asc',
 	_fields: 'id,name,parent',
 	context: 'view',
+	[ RECEIVE_INTERMEDIATE_RESULTS ]: true,
 };
 const MIN_TERMS_COUNT_FOR_FILTER = 8;
 const EMPTY_ARRAY = [];
 
-const { normalizeTextString } = unlock( componentsPrivateApis );
-
 /**
  * Sort Terms by Selected.
  *
@@ -186,14 +192,14 @@ export function HierarchicalTermSelector( { slug } ) {
 
 			return {
 				hasCreateAction: _taxonomy
-					? post._links?.[
+					? !! post._links?.[
 							'wp:action-create-' + _taxonomy.rest_base
-					  ] ?? false
+					  ]
 					: false,
 				hasAssignAction: _taxonomy
-					? post._links?.[
+					? !! post._links?.[
 							'wp:action-assign-' + _taxonomy.rest_base
-					  ] ?? false
+					  ]
 					: false,
 				terms: _taxonomy
 					? getEditedPostAttribute( _taxonomy.rest_base )
@@ -410,7 +416,7 @@ export function HierarchicalTermSelector( { slug } ) {
 
 	return (
 		<Flex direction="column" gap="4">
-			{ showFilter && (
+			{ showFilter && ! loading && (
 				<SearchControl
 					__next40pxDefaultSize
 					__nextHasNoMarginBottom
@@ -420,6 +426,17 @@ export function HierarchicalTermSelector( { slug } ) {
 					onChange={ setFilter }
 				/>
 			) }
+			{ loading && (
+				<Flex
+					justify="center"
+					style={ {
+						// Match SearchControl height to prevent layout shift.
+						height: '40px',
+					} }
+				>
+					<Spinner />
+				</Flex>
+			) }
 			<div
 				className="editor-post-taxonomies__hierarchical-terms-list"
 				tabIndex="0"