5
votes

I would like to generate a gutenberg block in php.

I'm currently developping a wordpress plugin that import videos from youtube and create a post for each video. I can insert the youtube video inside the post_content but when i edit the post with the gutenberg editor it doesn't display as a block.

I read most of the "Block Editor Handbook" here https://developer.wordpress.org/block-editor/ But i can't find anything except how to create custom block. I searched on google also, but everything i found was also about creating custom block. Yet i found that gutenberg blocks are stored inside post_content as a html comment, but the comment seems to be generated with js via gutenberg WYSIWYG editor.

I know that i could create a post with the blocks and copy the post_content from my database then use it as a "template" but i don't think it's a proper way.

Is there any documentation about using the blocks that come with wordpress (ie: embed, paragraphe) and generate the html comment wich is saved within post_content with php ? Is it even possible ?

2
You were pretty close with using the post_content as a "template". There are 2 convenient functions you can use. parse_blocks() which will convert the HTML-comments content to actual PHP arrays representing the blocks, and render_block() which will turn the arrays back into the content as it is saved to the DB. Here's a fine article about these functions billerickson.net/access-gutenberg-block-dataJules Colle

2 Answers

3
votes

When you manually add a YouTube block, click the "Code Editor" view in the Tools & Options menu (right side). In the Code Editor view you will see the HTML needed for the editor to correctly parse the block.

For example:

<!-- wp:core-embed/youtube {"url":"https://www.youtube.com/watch?v=VIDEOID","type":"video","providerNameSlug":"youtube","className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
https://www.youtube.com/watch?v=VIDEOID
</div></figure>
<!-- /wp:core-embed/youtube -->
0
votes

Today I had to update programmatically the content of Gutenberg blocks.

I used two methods:

  • parse_blocks() to read the existing array, which I could modify as any array in PHP.
  • render_blocks() to then add the content to the post post_content; the post array can then be saved via wp_update_post().

Reading this article was helpful https://www.billerickson.net/access-gutenberg-block-data/

My own project involved editing relationship act fields to other custom post types within blocks but process should be fairly similar. Regarding OP's project: I would suggest to have a first post done manually to generate the template for an array (parse_block). Then customising this array should be relatively trivial.