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


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
  } = props;

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

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

    for(var i=1;i<max_links+1;i++) {
          placeholder={__("Link "+i, "wpblock")}
          onChange={onChangeLink} />

    return items;

  return [
      <h2>Quick Links</h2>

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?

, , , echodrome 3 years 2020-03-31T12:51:29-05:00 0 Answers 83 views 0

Leave an answer