Address code review feedback

Author: s3rgiosan

components/content-picker/SortableList.tsx

@@ -32,6 +32,7 @@ import PickedItem, { PickedItemType } from './PickedItem';
 import { DraggableChip } from './DraggableChip';
 import { ContentSearchMode, QueryFieldsFilter } from '../content-search/types';
 import type { PickedItemFilter } from './index';
+import { Term } from './types';
 
 const dropAnimation = {
 	...defaultDropAnimation,
@@ -49,18 +50,6 @@ interface SortableListProps {
 	pickedItemFilter?: PickedItemFilter;
 }
 
-type Term = {
-	count: number;
-	description: string;
-	id: number;
-	link: string;
-	meta: Record<string, unknown>;
-	name: string;
-	parent: number;
-	slug: string;
-	taxonomy: string;
-};
-
 function getEntityKind(mode: ContentSearchMode) {
 	let type;
 	switch (mode) {

components/content-picker/index.tsx

@@ -3,6 +3,7 @@ import { select } from '@wordpress/data';
 import { useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { VisuallyHidden } from '@wordpress/components';
+import { Post, User } from '@wordpress/core-data';
 import { v4 as uuidv4 } from 'uuid';
 import { ContentSearch } from '../content-search';
 import SortableList from './SortableList';
@@ -17,10 +18,11 @@ import {
 } from '../content-search/types';
 import { NormalizedSuggestion } from '../content-search/utils';
 import { PickedItemType } from './PickedItem';
+import { Term } from './types';
 
 export type PickedItemFilter = (
 	item: Partial<PickedItemType>,
-	originalResult: any,
+	originalResult: Post | Term | User,
 ) => Partial<PickedItemType>;
 
 const NAMESPACE = 'tenup-content-picker';

components/content-picker/readme.md

@@ -41,9 +41,8 @@ function MyComponent( props ) {
     }, [] );
 
     const searchResultFilter = useCallback( (item, result) => {
-        item.url = '';
-        item.info = `<strong>ID:</strong> ${result.id}<br>${result.excerpt}`;
-        return item;
+        const info = `<strong>ID:</strong> ${result.id}<br>${result.excerpt}`;
+        return { ...item, url: '', info };
     }, [] );
 
     const pickedItemFilter = useCallback( (item, result) => {
@@ -71,7 +70,7 @@ function MyComponent( props ) {
 |----------------------|------------|----------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
 | `onPickChange`        | `function` | `undefined`          | Callback function the list of picked content gets changed                                                                                                                                                                                                                                                                                                                                                              |
 | `queryFilter`         | `function` | `undefined`          | Function called to allow you to customize the query before is made. It's advisable to use `useCallback` to save this parameter                                                                                                                                                                                                                                                                                         |
-| `queryFieldsFilter`   | `function` | `undefined`          | Function to customize which fields are fetched from the API for both search and picked items. Receives `(fields: string[], mode: ContentSearchMode) => string[]`. It's advisable to use `useCallback` to save this parameter. |
+| `queryFieldsFilter`   | `function` | `undefined`          | Function to customize which fields are fetched from the API for both search and picked items. Receives `(fields: string[], mode: ContentSearchMode) => string[]`. When requesting additional fields from the WordPress REST API search endpoint, you may need to register those fields in PHP using `register_rest_field` so that they are available on search results as well as on picked items. It's advisable to use `useCallback` to save this parameter. |
 | `searchResultFilter`  | `function` | `undefined`          | Function to customize the normalized search result item. Receives `(item: NormalizedSuggestion, originalResult: WP_REST_API_Search_Result \| WP_REST_API_User) => NormalizedSuggestion`. It's advisable to use `useCallback` to save this parameter. |
 | `pickedItemFilter`    | `function` | `undefined`          | Function to customize the picked item before it's displayed in the list. Receives `(item: Partial<PickedItemType>, originalResult: Post \| Term \| User) => Partial<PickedItemType>`. It's advisable to use `useCallback` to save this parameter. |
 | `label`               | `string`   | `''`                 | Renders a label for the Search Field.

components/content-picker/types.ts

@@ -0,0 +1,11 @@
+export type Term = {
+	count: number;
+	description: string;
+	id: number;
+	link: string;
+	meta: Record<string, unknown>;
+	name: string;
+	parent: number;
+	slug: string;
+	taxonomy: string;
+};

components/content-search/readme.md

@@ -39,9 +39,11 @@ function MyComponent( props ) {
     }, [] );
 
     const searchResultFilter = useCallback( (item, result) => {
-        item.url = '';
-        item.info = `<strong>ID:</strong> ${result.id}<br>${result.excerpt}`;
-        return item;
+        return {
+            ...item,
+            url: '',
+            info: `<strong>ID:</strong> ${result.id}<br>${result.excerpt}`,
+        };
     }, [] );
 
     return (

example/src/blocks/content-picker-example/edit.tsx

@@ -24,9 +24,8 @@ export const BlockEdit = (props) => {
 	}, []);
 
 	const searchResultFilter = useCallback((item, result) => {
-		item.url = '';
-		item.info = `<strong>ID:</strong> ${result.id}<br>${result.excerpt || ''}`;
-		return item;
+		const info = `<strong>ID:</strong> ${result.id}<br>${result.excerpt || ''}`;
+		return { ...item, url: '', info };
 	}, []);
 
 	const pickedItemFilter = useCallback((item, result) => {

example/src/blocks/content-search-example/edit.tsx

@@ -24,9 +24,11 @@ export const BlockEdit = (props) => {
 	}, []);
 
 	const searchResultFilter = useCallback((item, result) => {
-		item.url = '';
-		item.info = `<strong>ID:</strong> ${result.id}<br>${result.excerpt || ''}`;
-		return item;
+		return {
+			...item,
+			url: '',
+			info: `<strong>ID:</strong> ${result.id}<br>${result.excerpt || ''}`,
+		};
 	}, []);
 
 	const blockProps = useBlockProps();