Is it possible to use Inner Blocks in a dynamic block?

[nyordanov]

How do I get the contents of InnerBlocks without using InnerBlocks.Content? Is there any event, which is fired when the inner blocks are modified?

[jorgefilipecosta]

Hi @nyordanov you can use the withSelect HOC https://wordpress.org/gutenberg/handbook/packages/packages-data/#withselect-mapselecttoprops-function-function to get a prop with all the inner blocks. The prop is updated each time the inner blocks are modified.
Something similar to:

edit: withSelect( ( select, ownProps ) => {
	return {
		innerBlocks: select( 'core/editor' ).getBlocks( ownProps.clientId )
	};
} ( edit component... );

If you need to be notified outside of a React component you can subscribe to the store https://wordpress.org/gutenberg/handbook/packages/packages-data/#subscribe-function.

I hope this answers your question and I'm closing this issue for now if you need additional information, feel free to reopen it.

[chrisvanpatten]

@jorgefilipecosta any chance this will become available to server rendered blocks again? Would be great if blocks were rendered from the inside out, and the rendered markup was made available up the chain.

[noel-schenk]

yes please this is so important.
You could add an onChange event and pass the rendered data from the child block as a response to the onChange event like all the other compontens behave.

[noel-schenk]

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

[dadmor]

@jorgefilipecosta How can we render blocks that we get from withSelect HOC?

[jorgefilipecosta]

If there is a need to get the content string of a block whose id was retrieved from withSelect I guess we can explicitly call wp.blocks.serialize and pass an array with that block. But I think that is something that should be avoided, maybe there is another way to solve the use-case.