Feature: Customization filter hooks

[s3rgiosan]

Description of the Change

This PR introduces WordPress JavaScript filter hooks in Content Connect's RelationshipManager component, enabling projects to customize search results, picked items, and preview components in the Block Editor UI. These filters are context-aware allowing both global and per-relationship customization.

Problem

Content Connect's Block Editor UI uses hardcoded filter functions that cannot be customized by projects. This limits flexibility when projects need to:

• Display additional information in search results (e.g., post IDs, custom metadata)
• Customize how picked items are displayed in the relationship list
• Replace the default preview component with custom React components
• Apply different customizations based on relationship type or key

Solution

Added three WordPress JavaScript filter hooks that receive full relationship context:

1. contentConnect.searchResultFilter - Customizes search result items before display
2. contentConnect.pickedItemFilter - Customizes picked item data before display
3. contentConnect.pickedItemPreviewComponent - Allows replacing the preview component with custom React components

All filters receive a context object containing:

• rel_key: The relationship key
• rel_type: 'post-to-post' or 'post-to-user'
• postId: Current post ID
• mode: Content search mode ('post' | 'user' | 'term')

Filter Usage Examples

Global Customization:

import { addFilter } from '@wordpress/hooks';

addFilter(
  'contentConnect.searchResultFilter',
  'my-project/customize-search-results',
  (defaultFilter, context) => {
    return (item, result) => {
      return {
        ...item,
        url: '',
        info: `<strong>ID:</strong> ${result.id}`,
      };
    };
  }
);

Per-Relationship Customization:

addFilter(
  'contentConnect.pickedItemPreviewComponent',
  'my-project/custom-preview',
  (defaultComponent, context) => {
    if (context.rel_key === 'my-specific-relationship') {
      return ({ item }) => {
        return <CustomComponent item={item} />;
      };
    }
    return defaultComponent;
  }
);

Custom Preview Component:

import { __experimentalText as Text } from '@wordpress/components';
import { decodeEntities } from '@wordpress/html-entities';

addFilter(
  'contentConnect.pickedItemPreviewComponent',
  'my-project/custom-preview',
  (defaultComponent, context) => {
    return ({ item }) => {
      const decodedTitle = decodeEntities(item.title);
      return (
        <Text
          truncate={false}
          title={decodedTitle}
          aria-label={decodedTitle}
        >
          {decodedTitle}
        </Text>
      );
    };
  }
);

How to Test the Change

1. Build the package: npm run build (from root directory)
2. Start the test environment: npm run wp-env:start (or your preferred method)
3. Test contentConnect.searchResultFilter:
   • Add a filter that customizes search result items
   • Verify customizations appear in the search dropdown
   • Test with different relationship types
4. Test contentConnect.pickedItemFilter:
   • Add a filter that customizes picked item data
   • Verify customizations appear in the picked items list
   • Test with different relationship types
5. Test contentConnect.pickedItemPreviewComponent:
   • Add a filter that returns a custom React component
   • Verify the custom component renders in the picked items list
   • Test with different relationship types
6. Test per-relationship customization:
   • Add filters that check context.rel_key or context.rel_type
   • Verify different customizations apply to different relationships
7. Verify backward compatibility:
   • Ensure default behavior works when no filters are applied
   • Verify existing functionality is not broken

Changelog Entry

Added - WordPress JavaScript filter hooks (contentConnect.searchResultFilter, contentConnect.pickedItemFilter, contentConnect.pickedItemPreviewComponent) for customizing Block Editor UI in RelationshipManager component with context awareness

Credits

Props @s3rgiosan

Checklist:

• I agree to follow this project's Code of Conduct.
• I have updated the documentation accordingly.
• I have added Critical Flows, Test Cases, and/or End-to-End Tests to cover my change.
• All new and existing tests pass.