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

Question

I have used the scaffolding to create a block that is react on the front end. The code is below.

As you can see I have added two fields to the block but I do not know how to get the values entered in those block inspector fields in my react code to use in the block. Does anyone know how to get those values?

Block.json

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 2,
    "name": "create-block/react-dynamic",
    "version": "0.1.0",
    "title": "Portfolio Block (react)",
    "category": "embed",
    "icon": "smiley",
    "description": "Example block scaffolded with Create Block tool.",
    "supports": {
        "html": false
    },
    "attributes": {
        "list_id": {
            "type": "string"
        },
        "doubleoptin": {
            "type": "boolean"
        }
    },
    "textdomain": "example-dynamic",
    "editorScript": "file:./editor.js",
    "editorStyle": "file:./index.css",
    "style": "file:./style-index.css",
    "render": "file:./render.php"
}

render.php:

<p <?php echo get_block_wrapper_attributes(); ?>>
<div id="portfolio-block-react" style="overflow: hidden; max-width: 100%!important">

</div>
</p>

index.js:

/**
 * Registers a new block provided a unique name and an object defining its behavior.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
 */
import { registerBlockType } from '@wordpress/blocks';
import ReactDOM from 'react-dom';
/**
 * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
 * All files containing `style` keyword are bundled together. The code used
 * gets applied both to the front of your site and to the editor.
 *
 * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
 */
import './style.scss';

/**
 * Internal dependencies
 */
import Edit from './edit';
import metadata from './block.json';
import App from './App.js';

    ReactDOM.render(<App />, document.getElementById('portfolio-block-react'));


/**
 * Every block starts by registering a new block type definition.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
 */
registerBlockType( metadata.name, {
    /**
     * @see ./edit.js
     */
    edit: Edit,
} );

For quick running of code, this is hosted at github.com/brothman01/Rothman-Portfolio/tree/master-blockfields (that's the branch) and can be started by running npm run install in the root, then npm install and npm run build in the wordpress-block-react folder — brothman01
– brothman01, Commented Sep 30, 2023 at 7:08

Jacob Peattie · Accepted Answer · 2023-09-30 17:29:12Z

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.

this worked well, thank you. I have made the edits

brothman01
– brothman01

2023-09-30 20:29:18 +00:00
Commented Sep 30, 2023 at 20:29 — brothman01
– brothman01, Commented Sep 30, 2023 at 20:29

Stack Exchange Network

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

1 Answer 1

Your Answer

Hot Network Questions

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

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions