plugins - How do I store information in a dynamic block in WordPress?

admin管理员组

文章数量:1336644

I am trying to develop a dynamic block plugin where I store up to 7 links using Gutenberg and so far here is part of my code:

edit: props => {

  const {
    attributes: {
      links = [],
      max_links = 7
    },
    setAttributes
  } = props;

  const onChangeLink = (index, newLink) => {
    setAttributes({ links[index]: newLink });
  };

  const listItems = () => {
    var items = [];

    for(var i=1;i<max_links+1;i++) {
      items.push(
        <RichText
          placeholder={__("Link "+i, "wpblock")}
          value={links[i]}
          onChange={onChangeLink} />
      );
    }

    return items;
  };

  return [
    <div>
      <h2>Quick Links</h2>
      <ul>
        {listItems()}
      </ul>
    </div>
  ];
},

save(props) {
  return null;
}

On save I return null because I will handle this part as a callback on the php side. I saw this technique in a LinkedIn course that would allow the plugin to be modified in the future without breaking the plugin on the pages where the plugin is already being used.

My questions are:

1) How do I store the values of links so that they persist? I've seen examples but they always seem to be storing their data in posts which seems to be overkill. I have also read about WP options but I am also not sure this is the best approach in my case or if I can use it with React?

2) my onChangeLink function is not working, I am not sure how I could call it so that I pass the index of the link I want to edit?

I am trying to develop a dynamic block plugin where I store up to 7 links using Gutenberg and so far here is part of my code:

edit: props => {

  const {
    attributes: {
      links = [],
      max_links = 7
    },
    setAttributes
  } = props;

  const onChangeLink = (index, newLink) => {
    setAttributes({ links[index]: newLink });
  };

  const listItems = () => {
    var items = [];

    for(var i=1;i<max_links+1;i++) {
      items.push(
        <RichText
          placeholder={__("Link "+i, "wpblock")}
          value={links[i]}
          onChange={onChangeLink} />
      );
    }

    return items;
  };

  return [
    <div>
      <h2>Quick Links</h2>
      <ul>
        {listItems()}
      </ul>
    </div>
  ];
},

save(props) {
  return null;
}

On save I return null because I will handle this part as a callback on the php side. I saw this technique in a LinkedIn course that would allow the plugin to be modified in the future without breaking the plugin on the pages where the plugin is already being used.

My questions are:

1) How do I store the values of links so that they persist? I've seen examples but they always seem to be storing their data in posts which seems to be overkill. I have also read about WP options but I am also not sure this is the best approach in my case or if I can use it with React?

2) my onChangeLink function is not working, I am not sure how I could call it so that I pass the index of the link I want to edit?

• plugins
• plugin-development
• javascript
• block-editor

Share Improve this question edited Mar 31, 2020 at 16:07 echodrome asked Mar 31, 2020 at 14:33 echodromeechodrome 4133 bronze badges 1

• That looks like the edit function of a GB block, but where is the save function in your block? Or is this something else? I assume this is javascript based on the JSX syntax, please edit your Q to provide more context, a lot of the context is assumed and doesn't carry over to readers, as a plugin is written in PHP, but this isn't PHP – Tom J Nowell ♦ Commented Mar 31, 2020 at 15:12

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

The answer to my own questions is that you can't. When you create a dynamic block you depend on the server side (PHP) entirely to generate the content and then JS can rebuild from the HTML but you cannot have this occur the other way around.

So unless I create a custom table or can get the data from an API where PHP can access it before JS there is no way to achieve what I wanted.

本文标签： pluginsHow do I store information in a dynamic block in WordPress