Import external data into post using custom Gutenberg block

Question

I've created a simple Gutenberg block that displays the transcript of an externally-hosted video.

When creating a new WP post, the author enters the ID of a video in the block's editor section. This triggers my custom PHP to fetch and parse the video's caption file via a 3rd-party API. WP's ServerSideRender is then used to render the caption file in both the editor view and the front-end view. This works very well.

The problem is that the transcript is never truly imported or saved in the WP database in any fashion -- the transcript is always re-fetched in real-time, every time the page is visited by a viewer. The transcript is never persisted in the WP database, which means it is not searchable by site visitors.

My goal is to enable the WP author to fetch the video's transcript when creating a post by entering the video ID into a Gutenberg block attribute field. Once fetched, the transcript would be automatically inserted into the WP post's body as editable HTML so it can be cleaned up by the author (fix typos and punctuation), then persisted in the WP database.

I've spent many many hours trying to sort this out and have had no luck. My Google-Fu is failing me, in part because Gutenberg is so new.

So... I'm already fetching the transcript via the API, I'm just at a loss how to get it out of Gutenberg's React rendering system. How can I insert the retrieved text into the post body as HTML instead of rendering as uneditable text in a Gutenberg block?

Thanks!

Answer 1

You can save your data into the database by using save method in registerBlockType. Just make requests on ComponentDidMount via using JS fetch API, store and use it in edit method. In the end use save method instead of using Server Side Rendering.

Server side rendering should only be use if your content changes like latest posts. If this is just a one time data then it's not needed.