2

I have a scenario where I will have to use the same API key for all the blocks of the same namespace that is present and that will be created new. So when user inputs on one block through a form, it will update on all the blocks of the particular namespace instantly.

Currently when register_block_type() and props.setAttributes method is used, the values for each attribute is unique for each of the block. I have seen the documentation. I couldn't see a standard way for sharing the same value across blocks.

Register code:

registerBlockType("namespace", {
  title: "Plugin title",
  category: "common",
  attributes: {
    apiKey: { type: "string" },

Handling submit from the form inside InspectorControls:

<InspectorControls>
      <PanelBody>
        <form id="api-key-input" onSubmit={(e) => handleSubmit(e)}>
          <input
            type="password"
            ref={inputRef}
            defaultValue={props.attributes.apiKey}
          />
          <input type="submit" />
        </form>
 </InspectorControls>

function handleSubmit(e) {
  e.preventDefault();
  props.setAttributes({ apiKey: inputRef.current.value });
}

The methods that I have looked at so far.

  1. Storing the attributes in the database using update_option but I did not see any get_option for the Gutenberg block.
  2. wp.data.subscribe way of dispatching to the blocks required.
  3. Creating a registry store and managing the overall value using states.

Is there an easiest/safest way of doing this that I am missing, like setting an option or supports value?

7
  • I'd probably use method 1 (storing to a db option), but how is the API key being used in the save function? And at the moment, what's the solution you're using - is it method 2 (using wp.data.subscribe)? What's the full code of your edit function?
    – Sally CJ
    Commented Jul 4, 2022 at 1:36
  • @SallyCJ Thanks for the reply! The API key is being used in the edit function itself to fetch the required data and that data is being saved in a data attribute. Once the API data is fetched I use the attributes from the PHP render_callback to render the frontend component. Save function just returns null. wp.data.subscribe works for only per page blocks, right? That's not feasible if that's the case. Is there any get_option for the JS side for getting the value stored in the database?
    – m4n0
    Commented Jul 4, 2022 at 2:51
  • It's similar to a Reusable block but only with a same specific attribute value instead of all. So I think there must be a reusable property somewhere to be used.
    – m4n0
    Commented Jul 4, 2022 at 3:01
  • Hi, sorry for the late reply. I haven't checked the other methods, but as for "Is there any get_option for the JS side" - yes, there is, and I can provide an example, if you want?
    – Sally CJ
    Commented Jul 4, 2022 at 11:47
  • @SallyCJ An example would help, yes! :)
    – m4n0
    Commented Jul 4, 2022 at 13:00

1 Answer 1

1

You could make use of register_post_field() to add the API key to the post object which you then can retrieve via getEditedPostAttribute() in the editor. In register_post_field() you can define by yourself via get_callback/update_callback how/where the API key should be saved like post meta or an option.

To update the API key in the editor use the editPost() dispatch function which will invoke your update_callback.

1
  • Hey, thanks for the reply! I made use of this method: wholesomecode.ltd/… Although I can use your methods for my other functionalities.
    – m4n0
    Commented Jul 4, 2022 at 19:43

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.