Feature: Native Block Editor Interface

[fabiankaegy]

Warning

This PR is based on top of #95

Description of the Change

This PR adds a WordPress Data API store and Block Editor UI for managing Content Connect relationships directly within the WordPress Block Editor.

WordPress Data API Store (wp-content-connect):

• Redux-based store for managing relationship state within the Block Editor
• Selectors: getRelationships(), getRelatedEntities(), getDirtyEntityIds()
• Actions: setRelationships(), setRelatedEntities(), updateRelatedEntities(), markPostAsDirty()
• Automatic persistence of relationship changes when posts are saved
• Resolvers for lazy-loading relationship data via REST API

React Hooks:

• useRelationships() - Hook for accessing and loading relationships for a post
• useRelatedEntities() - Hook for accessing, loading, and updating related entities for a specific relationship

Block Editor UI:

• RelationshipsPanel - Plugin that automatically adds relationship panels to the Document Settings sidebar
• RelationshipManager - Component that integrates with @10up/block-components ContentPicker for managing related content
• Panels are automatically shown for relationships with enable_ui: true
• Supports both post-to-post and post-to-user relationships
• Respects relationship configuration (sortable, max_items, post_type filtering)

Key Features:

• Automatic integration with existing REST API endpoints (from New REST API Endpoints for the block editor #95)
• Lazy-loading of relationship data for optimal performance
• Dirty state tracking to only persist changes when necessary
• Seamless integration with WordPress post save lifecycle
• TypeScript support with full type definitions
• Integration with @10up/block-components ContentPicker component

This implementation enables developers to easily build custom blocks and interfaces that interact with Content Connect relationships using standard WordPress Data API patterns.

Closes #45

How to test the Change

1. Setup:

   • Ensure you have a test environment with relationships configured (e.g., using the demo plugin: https://github.com/fabiankaegy/wp-content-connect-example-data)
   • Ensure relationships have enable_ui: true set

2. Block Editor UI:

   • Open a post in the Block Editor that has relationships configured
   • Navigate to the Document Settings sidebar
   • Verify that relationship panels appear for each relationship with enable_ui: true
   • Test adding, removing, and reordering related entities using the ContentPicker interface
   • Save the post and verify relationships are persisted correctly

3. Data Store API (Browser Console):

// Get relationships for a post
wp.data.select('wp-content-connect').getRelationships(postId)

// Get related entities for a specific relationship
wp.data.select('wp-content-connect').getRelatedEntities(postId, {
  rel_key: 'relationship_key',
  rel_type: 'post-to-post'
})

// Update related entities
wp.data.dispatch('wp-content-connect').updateRelatedEntities(
  postId,
  'relationship_key',
  'post-to-post',
  [entityId1, entityId2]
)

4. React Hooks (in custom blocks/components):

import { useRelationships, useRelatedEntities } from '@wordpress/content-connect';

// In your component
const [hasResolved, relationships] = useRelationships(postId);
const [hasLoaded, entities, updateEntities] = useRelatedEntities(postId, {
  rel_key: 'relationship_key',
  rel_type: 'post-to-post'
});

Changelog Entry

• Added - WordPress Data API store (wp-content-connect) for managing Content Connect relationships within the Block Editor.
• Added - React hooks useRelationships() and useRelatedEntities() for accessing and managing relationships in custom blocks.
• Added - Block Editor UI integration with automatic relationship panels in the Document Settings sidebar.

Credits

Props @fabiankaegy @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.

[s3rgiosan]

Hi @fabiankaegy I went ahead and updated the UI to use the new ContentPicker, along with some fixes and improvements for post-to-user relationship support and bi-directional panels in post-to-post relationships. Ready for your review when you can.

[s3rgiosan]

@rickalee PR is ready for review. The 1.7.0-beta.1 tag on release/1.7.0 should help with testing in your projects. Let me know if you find any issues.

cc @jeffpaul @fabiankaegy