How to get content of Guternberg block in getSaveElement hook and then perform database update?

Question

I am trying to add a Gutenberg filter to modify content to a block and then perform a database operation.

So you can imagine that I have a custom block called exercise that I place in another block (like a column block).

Like this

-----------------------------
| 
| 
|           _________________
|           | My Exercise    |
| something |                |
|           | Description    |
|           _________________
|
|  
_____________________________

Here, My Exercise and Description are fields from my custom block.

When there is instance of an exercise block, I want to apply styling to its containing block, and then do a database action equivalent to

update_post_meta(id, 'lesson_exercises', array_merge($previousexercises, $block_id)

So that I can extract exercises from my lessons posts.

In reading about wp.hooks.addFilter I see how one can do various manipulations of a block before save.

For instance

wp.hooks.addFilter(
    'blocks.getSaveContent.extraProps',
    'namespace',
    someFunction
);

function someFunction( extraProps, blockType, attributes ) {

    // do some stuff with content, attributes, etc
    return extraProps;
}

But I don’t see how to actually extract content of my custom exercise block. Using console.log(extraProps) I see these 4 relevant entries

{className: "wp-block-columns has-2-columns", children: {…}}
{children: {…}, className: "wp-block-column"}
{tagName: "p", style: {…}, className: undefined, value: "something", dir: undefined, …}
{children: {…}, className: "wp-block-column"}

When I drill into these objects in Chrome dev tools I don’t see my exercise block content. So just not sure how to proceed. Maybe this is overkill? Maybe I just need to do regular add_action('save_post,…)` and not deal with this in React?

Or maybe just extend a core block and add a type field so I can choose exercise, as well as name and description fields. But that would still have me dealing with React.

Anyway, looking for ideas on how to do this.

thanks,
Brian

0
Brian 2 years 2019-11-22T03:13:55-05:00 0 Answers 56 views 0

Leave an answer

Browse
Browse