How can I access the values of an inner block in Gutenberg?

问题

I'm trying to build a custom block for Gutenberb. It is a carousel and uses child blocks (images). I'm trying to find a way to find out how many image-blocks were created inside to block so I can create slides for the carousel accordingly.

In order to do that, I was thinking about taking the image url from each image block and store it in an array so then I can just map through the array to create each slide, but I have no idea how to access the url value from the child block.

Any ideas?

回答1:

You can read the (very tiny) documentation on the getBlock function in the Block Editor Handbook. You should use the withDispatch higher order component to feed your components (blocks) with actions.

withDispatch( ( dispatch, ownProps, registry ) => {

  return {
    updateEditable( isEditing ) {
      const { clientId, setAttributes } = ownProps;
      const { getBlockOrder, getBlock } = registry.select( 'core/block-editor' );

      //get all innerBlockIds
      const innerBlockIds = getBlockOrder( clientId );
      innerBlockIds.forEach( ( innerBlockId ) => {
        console.log( getBlock( innerBlockId ) );
      } );
    },
  };
} )

To play around with the WordPress data module, that offers data about the editor or blocks to the client, you can also make use of the wp.data-Module. In the backend view of Gutenberg editor, you can, for example, go to a browser console and type wp.data.select( 'core/block-editor' ).getBlock(<blocks-client-id>) to test what the function does.

You can also have a look in the Gutenberg GitHub repository. Core Blocks also use these function, for example in columns.

来源：https://stackoverflow.com/questions/57237253/how-can-i-access-the-values-of-an-inner-block-in-gutenberg