How to get the clientId from Edit.js to view.js in Dynamic Block

  • I am saving clientId in the attribute as instnaceId but not sure how would i access that in the view.js file

    As i need a unique id for my block so that i can attach my custom react component to it.

    Below is what is in my block.json

    "attributes": {
	"instanceId": {
		"type": "string",
		"default": ""
	}
}

    and this is how i am saving it in edit.js

    
export default function Edit({ attributes, setAttributes, clientId }) {
        const instanceId = clientId;
	
        useEffect(() => {
	         setAttributes({ instanceId });
        }, [instanceId]);

...
}

    and this is how id is in render.php

    <div id="<?php echo $attributes['instanceId']; ?>">

</div>
Viewing 2 replies - 1 through 2 (of 2 total)

  • What is the view.js in your project? Is it about what you specify as viewScript in the block.json?

    Why don’t you output the list of attributes as JSON in render.php? You should then be able to read and use this with the viewScript.

    Thread Starter Rahul Pranami

    (@rahulpranami)

    Yes, It is viewScript and i am currently doing something like below in render.php but it is not ideal for large amount of attributes.

    <div <?php echo get_block_wrapper_attributes(); ?> data-attributes='<?php echo json_encode($attributes); ?>'></div>

    as for another approach there is something like below but it would not work properly for multiple blocks

    <script type="application/json" id="block-attributes-json">
    <?php echo json_encode($attributes); ?>
</script>

    I want some solution like i can pass some id and then fetch attributes using that id but using clientId is not ideal as whenever i load the edit screen clientId is going to be changed everytime.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to get the clientId from Edit.js to view.js in Dynamic Block’ is closed to new replies.