Gutenberg: Question: onChange for InnerBlocks?

[raquelmsmith]

I have a nested (parent) block with a number of items inside. When the content changes inside those innerblocks, I want to run a function. I don't see an onChange prop for InnerBlocks, and when I tried it didn't work. Any ideas how to go about this?

[manake]

I just mentioned this in #6751 too.

And also saving InnerBlocks as a value of an array could be useful. I can do this with RichText but not with InnerBlocks.

I don't know if either of these are technically feasible though.

[raquelmsmith]

@earnjam I think this should be changed to feature request for Nested / Inner Blocks as it doesn't seem to currently be possible?

[noelelias]

@chrisvanpatten and @jorgefilipecosta #7785 #7247 #10745 #6751

[scottblackburn]

@raquelmsmith did you ever figure out a solution for this? I would like to use InnerBlocks.Content from the parent block to generate some schema.

[youknowriad]

If you want to retrieve the list of blocks and use it elsewhere, see my reply here https://github.com/WordPress/gutenberg/issues/10745#issuecomment-485409149

If you want to check whether any of the inner blocks change over time to do something, I think your best bet here is to use the data module and the getBlocks selector using the clientId prop passed to the edit function of your block. if you use withSelect you'd receive the updated list of inner blocks on each render.

withSelect(
    ( select, { clientId } ) => {
        return {
            innerBlocks: select( 'core/block-editor' ).getBlocks( clientId )
        };
    }
)( MyBlockEditFunction )

[scottblackburn]

@youknowriad thanks for this, just noticed a minor issue that the select should be 'editor' rather than 'block-editor' but I can confirm this works.

@raquelmsmith this should get you close to what you need, if you use this edit for you parent block you should see a log of the innerBlocks.

edit: withSelect( ( select, blockData ) => { return { innerBlocks: select( 'core/editor' ).getBlocks( blockData.clientId ) }; } )( ( { innerBlocks, className } ) => { console.log('inner blocks content', innerBlocks); return <div className={className}> <InnerBlocks template={TEMPLATE} /> </div> } ),

[asretux]

@scottblackburn 'block-editor' is the new package extracted from the existing 'editor' package. It will be available in the WordPress 5.2 Core Gutenberg version: https://make.wordpress.org/core/2019/04/09/the-block-editor-javascript-module-in-5-2/

[roguewdesign]

Hi there, just looking for an update or possible solution for this. I took a look at the 'block-editor' mentioned by @scottblackburn, but didn't have any luck.

I know the code provided is incorrect, but here is what I'm trying to achieve:

• Create a Meta Box Block that allows the user to create a table (['core/table'] block).
• The meta data that is saved would then be the actual table block html.
• This would allow the user to easily create a table which we could then place anywhere within a single-{custom-post-type}.php template file.
• The reason for using meta and not a Block Template for the post type, is so we can include schema.org details in the template as well as customize the layout in the template file, vs a block template assigned to the custom post type.

I was able to successfully create and save Post Meta using a custom block following this tutorial:

https://developer.wordpress.org/block-editor/tutorials/metabox/meta-block-1-intro/

However, I have not been able to save the InnerBlocks content to the meta field.

You'll notice I've include 2 different methods for trying to save the content to the meta field. The InnerBlocks has been used with a restricted template to ['core/table'], as I couldn't figure out how to add just a Table block.

Obviously, I am also quite new at developing with Blocks :D

`( function( blocks, editor, i18n, element, components, _ ) {
var el = wp.element.createElement;
const { InnerBlocks } = wp.blockEditor;

var ALLOWED_BLOCKS = [ 'core/table' ];
var TEMPLATE = [
    [ 'core/table' ]
];

blocks.registerBlockType( 'rogue-theme-custom-blocks/rogue-product-specifications-block', {
    title: i18n.__( 'Product Specifications', 'rogue-theme-gutenberg-blocks' ),
    icon: 'index-card',
    category: 'layout',
    attributes: {
        blockValue: {
            type: 'string',
            source: 'meta',
            meta: 'sm_product_specifications_meta_block_field'
        }
    },
    edit: function( props ) {
        var attributes = props.attributes;
        var setAttributes = props.setAttributes;

        function updateBlockValue( blockValue ) {
            setAttributes({ blockValue:  InnerBlocks.Content});
        }

        return (
            el( 'div', { className: 'product-specifications ' + props.className },
                el( InnerBlocks, {
                    value: attributes.blockValue,
                    onUpdate: updateBlockValue,
                    allowedBlocks: ALLOWED_BLOCKS,
                    template: TEMPLATE,
                    templateLock: true
                } ),
            )
        )
    },
    save: function( props ) {
        props.setAttributes({blockValue: InnerBlocks.Content});
        return null;
    },
} );

} )(
window.wp.blocks,
window.wp.editor,
window.wp.i18n,
window.wp.element,
window.wp.components,
window._,
);
`

Thank you!