How to get block editor block inspector attribute value in my react block

As per the docs, the file passed to render in block.json receives 3 variables:

$attributes (array): The block attributes.

$content (string): The block default content.

$block (WP_Block): The block instance.

So you need to output your attributes from $attributes into the HTML, so that your JavaScript can read the values. In this example I put one of the attributes into a data- attribute:

<p <?php echo get_block_wrapper_attributes(); ?>>
    <div id="portfolio-block-react" data-list-id="<?php echo esc_attr( $attributes['list_id'] ); ?>" style="overflow: hidden; max-width: 100%!important" >
    </div>
</p>

Then you can read that value and pass it to your React app in index.js:

const el = document.getElementById('portfolio-block-react');
const list_id = el.datalist.listId;

ReactDOM.render(<App list_id={list_id} />, el );

Notes:

You should update your question to include just block.json, render.php, and index.js. These are the only files relevant to the issue, and this answer is less useful for others if your links ever stop working.
Your front-end index.js file should not include registerBlockType(). It’s not needed and depends on a lot of block JavaScript that is intended for the editor only.
Your list_id attribute does not have a default value, so $attributes['list_id'] might not exist. Your production code should make sure to add the necessary checks.

Related Posts: