Get a Wordpress Gutenberg Block Attribute to use it in frontend

admin管理员组

文章数量:1122832

In a Gutenberg block generating a Carousel I set the uniqueId attribute from the clientId of the block and I save it to the markup of the save function as an Html id.

I make that so I can have a unique id, for example, for each Carousel I render to the frontend.

Problem is that I need this unique id also in the frontend js code to pass, for example, different options for each carousel I'm generating. But how can I get this unique id in the js code that will be used in frontend only?

In a Gutenberg block generating a Carousel I set the uniqueId attribute from the clientId of the block and I save it to the markup of the save function as an Html id.

I make that so I can have a unique id, for example, for each Carousel I render to the frontend.

Problem is that I need this unique id also in the frontend js code to pass, for example, different options for each carousel I'm generating. But how can I get this unique id in the js code that will be used in frontend only?

• block-editor

Share Improve this question asked Mar 5, 2021 at 19:50 AmintaCodeAmintaCode 17711 gold badge44 silver badges1616 bronze badges 1

• can you share your code and the markup the block generates? I'm assuming each slide of the carousel is a nested block? – Tom J Nowell ♦ Commented Mar 5, 2021 at 20:12

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 4

One way of getting a unique id for a block in Gutenberg is using the clientId, but in a different way. Given that clientId string is used only once, you can store that in the attributes of the block, which will be stored in the database and you can retrieve it at any given time, the trick is to store the clientId the block gives you, the first time the block mounts, and then stop WordPress from edit that attribute when page reloads. That way, every time you reload the page, you will have a different clientId, but the attribute you saved with the first clientId will still be available in the attributes. The code should look something like this:

import { useEffect } from '@wordpress/element';
import { useBlockProps } from '@wordpress/block-editor';

// ... Whatever else you want to import

export default function Edit({ clientId, attributes, setAttributes }) {
    const blockProps = useBlockProps(); 

    /*useEffect is a React hook that triggers during the component's life 
      cycle parts, but when giving it an empty array as a second argument
      it will only trigger on mounting the component*/

    useEffect(() => {

        //This conditional is useful to only set the id attribute once
        //when the component mounts for the first time

        attributes.id === '' 
        && setAttributes( { "id": clientId } )
    }, [])
    
    //... the rest of your logic goes here


    return (
        <div { ...blockProps }>
            {// You can use attributes.id as a class or id or whatever serves your purpose }
            <div className={attributes.id}>
               //...more JSX or HTML
            </div>                  
        </div>
    );
}

Also, in the attributes prop, you will have to do this:

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

        //...The rest of your attributes
    }

I tested that approach and it works perfectly for a plugin I'm building.

I also read this question that says you can use withInstanceId to get a unique identifier, but I haven't tested that approach yet.

The solution suggested by @Laloptk works. However, using clientId didn't smell right and I was after a finer grained solution, so after encountering issues with state, setState and setAttribute(), I was inspired by Underscore’s uniqueId function referred to in the @Wordpress documentation for the PHP function wp_unique_id().

var idCounter = 0;
export default function uniqueId(prefix) {
  var id = ++idCounter + '';
  return prefix ? prefix + id : id;
}

which when coupled with @Laloptk's answer provided the clean, namespaced, non-dulicate identifier I was after for each instance of the block. e.g wpse-id-1 wpse-id-2

---

block.json

// ...block.json
{ 
"attributes": {
   "itemId": {
      "type": "string"
   }
}

---

Edit.js

import uniqueId from "../path/to/uniqueId";
import { useEffect } from '@wordpress/element';
//...
export default function edit( props ) {

    const { attributes, setAttributes } = props;
    const {itemId} = attributes;
    //
    useEffect( () => {
        setAttributes( { itemId: uniqueId( "wpse-id-" ) } );
    }, [ /* run once */ ] );
// ... result (string) wpse-id-1

Though I still have resevations as this answer still involves using setAttibute() function outsite of the return function.

---

本文标签： Get a Wordpress Gutenberg Block Attribute to use it in frontend