Feature: New Classic Editor Interface

[s3rgiosan]

Warning

This PR is based on top of #94

Description of the Change

This PR replaces the existing Vue-based classic editor UI with a React-based interface that uses the same components and WordPress Data API store as the Block Editor, ensuring a consistent user experience across both editors and eliminating the Vue dependency.

Key Changes:

• Removed Vue Dependency:

  • Removed the Vue.js-based classic editor implementation
  • Eliminated vue-resource and other Vue-related dependencies
  • Removed the old content-connect.js bundle that contained Vue components

• New Classic Editor Implementation:

  • Created ClassicEditor.php class to handle classic editor integration
  • Implemented classic-editor.tsx entry point that mounts React components in classic editor meta boxes
  • Uses the same RelationshipManager component as the Block Editor
  • Shares the same WordPress Data API store (wp-content-connect) for state management
  • Integrates with the same REST API endpoints for fetching and updating relationships

• Component Reuse:

  • Classic editor now uses the same RelationshipManager component as the Block Editor
  • Both editors use the same @10up/block-components ContentPicker component
  • Consistent UI/UX across Block Editor and Classic Editor
  • Same relationship configuration support (sortable, max_items, post_type filtering)

Closes #45

How to test the Change

1. Setup:

   • Ensure you have relationships configured with enable_ui: true
   • Disable the Block Editor for a post type (or use a post type that doesn't support it)

2. Classic Editor Testing:

   • Edit a post in the Classic Editor that has relationships configured
   • Verify that relationship meta boxes appear in the sidebar
   • Test adding, removing, and reordering related entities using the ContentPicker
   • Verify that changes are saved immediately when interacting with the picker
   • Save the post and verify relationships persist correctly
   • Refresh the page and confirm relationships are still present

3. Cross-Editor Consistency:

   • Compare the UI in Classic Editor with Block Editor
   • Verify both editors show the same ContentPicker interface
   • Test that relationship configuration (sortable, max_items) works the same in both editors

4. Regression Testing:

   • Verify that Block Editor functionality is unaffected
   • Test that existing relationships continue to work
   • Verify that both post-to-post and post-to-user relationships work in classic editor

Changelog Entry

• Changed - Replaced Vue-based classic editor UI with React-based implementation using shared Block Editor components.
• Removed - Vue.js dependency and vue-resource package.

Credits

Props @s3rgiosan @fabiankaegy

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 @rickalee this is ready for review.

[s3rgiosan]

I've created a try/block-editor-ui all-in-one branch to make it easier to test the features in both the block and classic editors, as well as the Query Loop integration.

[jeffpaul]

@s3rgiosan is there more work planned here or should we bump this again for review?

[s3rgiosan]

@jeffpaul I'm planning to review this later this week.

[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