Feature: Customized picked relationship item

assets/js/components/relationship-manager.tsx

@@ -1,7 +1,10 @@
+/* global contentConnect */
 import React from 'react';
 import { ContentPicker } from '@10up/block-components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { addQueryArgs } from '@wordpress/url';
+import { decodeEntities } from '@wordpress/html-entities';
+import { __experimentalText as Text  } from '@wordpress/components';
 import { store } from '../store';
 import { ContentConnectRelationship } from '../store/types';
 
@@ -10,6 +13,39 @@ type RelationshipManagerProps = {
 	relationship: ContentConnectRelationship;
 };
 
+type PickedRelationshipType = {
+	id: number;
+	type: string;
+	uuid: string;
+	title: string;
+	url: string;
+};
+
+/**
+ * Component to render a preview of a picked relationship.
+ *
+ * @component
+ * @param {object} props - The component props.
+ * @param {PickedRelationshipType} props.item - The picked relationship to display.
+ * @returns {*} React JSX
+ */
+const PickedRelationshipPreview: React.FC<{ item: PickedRelationshipType }> = ({ item }) => {
+	const { title } = item;
+	const decodedTitle = decodeEntities(title);
+
+	const {
+		pickedItem: {
+			truncate = true,
+			ellipsizeMode = 'auto',
+			numberOfLines = 1
+		}
+	} = contentConnect;
+
+	return (
+		<Text truncate={truncate} ellipsizeMode={ellipsizeMode} numberOfLines={numberOfLines} title={decodedTitle} aria-label={decodedTitle}>{decodedTitle}</Text>
+	);
+};
+
 export function RelationshipManager({ postId, relationship }: RelationshipManagerProps) {
 	const { updateRelatedEntities } = useDispatch(store);
 
@@ -45,6 +81,7 @@ export function RelationshipManager({ postId, relationship }: RelationshipManage
 				}
 				return query;
 			}}
+			PickedItemPreviewComponent={PickedRelationshipPreview}
 		/>
 	);
 }

includes/UI/BlockEditor.php

@@ -31,6 +31,21 @@ public function enqueue_block_editor_assets() {
 			);
 
 			wp_enqueue_script( 'wp-content-connect' );
+
+			wp_localize_script(
+				'wp-content-connect',
+				'contentConnect',
+				apply_filters(
+					'tenup_content_connect_ui_settings',
+					[
+						'pickedItem' => [
+							'truncate'      => true,
+							'ellipsizeMode' => 'auto',
+							'numberOfLines' => 1,
+						],
+					]
+				)
+			);
 		}
 	}
 }