3

I'm trying to build a custom block for Gutenberg. 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?

SuperStormer
  • 4,997
  • 5
  • 25
  • 35
Carlos G
  • 479
  • 1
  • 8
  • 19

2 Answers2

5

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.

niklas
  • 2,887
  • 3
  • 38
  • 70
0

You can access the parent innerBlocks using the code below.

const { __ } = wp.i18n;
const { useSelect } = wp.data;
const { store: blockEditorStore } = wp.blockEditor;

/**
 * Block Edit Component
 */
const Edit = (props) => {
    const { clientId } = props;
    const innerBlocks = useSelect(
        (select) => select(blockEditorStore).getBlock(clientId).innerBlocks,
    );

    console.log( innerBlocks ); // This will log all the inner blocks on your browser console
};

If you also need to access them via PHP render, you can check this article : https://jeffreycarandang.com/how-to-access-innerblocks-attributes-within-the-parent-block-on-the-wordpress-gutenberg-editor/

Jeffrey Carandang
  • 388
  • 1
  • 10