Feature: Native Block Editor Interface

[fabiankaegy]

Warning

This PR is based on top of #91

Description of the Change

Adds a WordPress Data store to more easily interface with the Content Connect REST API from within the Block Editor.

Closes #45

How to test the Change

1. Ensure you have a test environment with a few connections configured (For example using the demo plugin: https://github.com/fabiankaegy/wp-content-connect-example-data)
2. Use the browser console on a post that has connections (in the editor) to run wp.data.select('wp-content-connect').getRelationships(xxx) where xxx is the current post id
3. This will resolve an empty object at first but if you run it again it will show you the relationships (this is expected since to begin with the relationships are not preloaded. useSelect will smooth this experience)
4. Now that you have the relationship you can get some actually related posts by running: wp.data.select('wp-content-connect').getRelatedPosts(xxx, 'university_city_university_to_city')
5. You can also update the relationships by running: wp.data.dispatch('wp-content-connect').updateRelatedPosts( xxx, 'university_city_university_to_city', [ yyy, zzz ] )

Note

This PR is still very much in progress and subject to change :)

Changelog Entry

Added - WordPress Data API store for interacting with the wp-content-connect plugin
Added - Block editor UI

Credits

Props @fabiankaegy @s3rgiosan

[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]

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.

[ocean90]

This is looking pretty good already! Thanks for the try/block-editor-ui branch. Two things I noticed while doing some basic testing:

• If sortable is enabled sorting is a bit laggy. Sometimes the item positions are not changed.I think this happens because the sorting is directly saved via a POST request and directly followed by a GET request. There seems to be a race-condition where the second runs to early? Should saving maybe delayed until the post is saved?
• The second one is related to enable_ui which is simply ignored in the block editor, meaning the UI is always there.

[s3rgiosan]

This is looking pretty good already! Thanks for the try/block-editor-ui branch. Two things I noticed while doing some basic testing:

• If sortable is enabled sorting is a bit laggy. Sometimes the item positions are not changed.I think this happens because the sorting is directly saved via a POST request and directly followed by a GET request. There seems to be a race-condition where the second runs to early? Should saving maybe delayed until the post is saved?
• The second one is related to enable_ui which is simply ignored in the block editor, meaning the UI is always there.

Thanks for testing this @ocean90. I'll review the issues you pointed out ASAP.

[s3rgiosan]

The second one is related to enable_ui which is simply ignored in the block editor, meaning the UI is always there.

@ocean90 this was resolved in the latest commit.

[s3rgiosan]

If sortable is enabled sorting is a bit laggy. Sometimes the item positions are not changed.I think this happens because the sorting is directly saved via a POST request and directly followed by a GET request. There seems to be a race-condition where the second runs to early? Should saving maybe delayed until the post is saved?

Hi @ocean90,

I haven't been able to replicate this same issue on my end, but I did notice that was missing an await when calling updateRelatedEntities. I added the await and it should help avoid timing issues.

Can you try again when you have a chance to see if the problem still persists?

If so, it would be really helpful to get a bit more context about your setup:

• For the post type, how many relationships are defined?
• How many related entities are there in each relationship (especially the one creating the problem), roughly speaking?

Once again, thank you!

[s3rgiosan]

@fabiankaegy Is there a way to improve this experience? Maybe by using an internal state and syncing changes to the REST API afterward?

Screen.Recording.2025-04-30.at.11.23.10.AM.mp4

[fabiankaegy]

@s3rgiosan yeah we really should improve that. I though that the way we handle the rest API communication in the custom Data store would have already taken care of this but apparently not.

I will try and see if I can find some time at the end of this week for this. Feel free to explore either adjusting the logic in the datastore to not persist on change directly but rather only queueing up the changes in the datastore as local changes that are in memory only and then only persist the relationships when we actually save the post 🤔

Alternatively, we could look at using something like useOptimistic in the actual component

[s3rgiosan]

@s3rgiosan yeah we really should improve that. I though that the way we handle the rest API communication in the custom Data store would have already taken care of this but apparently not.

I will try and see if I can find some time at the end of this week for this. Feel free to explore either adjusting the logic in the datastore to not persist on change directly but rather only queueing up the changes in the datastore as local changes that are in memory only and then only persist the relationships when we actually save the post 🤔

Alternatively, we could look at using something like useOptimistic in the actual component

I'll explore some options and take a look into useOptimistic. Thanks!