0

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,
} );
1

1 Answer 1

0

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.
1
  • this worked well, thank you. I have made the edits
    – brothman01
    Sep 30, 2023 at 20:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.