0

I am trying to implement a WP dynamic block and I would like to create a quick links block that would allow me to setup up to 7 links. Currently I have this:


edit: props => {

    const {
      attributes: { 
        link1,
        link2
      },
      setAttributes
    } = props;

    const onChangeLink1 = newLink => {
      setAttributes({ link1: newLink });
    };

    const onChangeLink2 = newLink => {
      setAttributes({ link2: newLink });
    };

    return [      
      <div>
        <h2>Quick Links</h2>        
        <ul>
          <li>
            <RichText 
              placeholder={__("Enter your link here", "myplugin")}
              value={link1}
              onChange={onChangeLink1} />
          </li>
          <li>
            <RichText 
              placeholder={__("Enter your link here", "myplugin")}
              value={link2}
              onChange={onChangeLink2} />
          </li>
          ...
        </ul>
      </div>
    ];    
  },

  save(props) {
    return null;
  }

So my questions are:

1) How would I write the code so that onChangeLink1 would work for more than 1 value?

const {
  attributes: {
    links: {
      ???
    }
  }
}
const onChangeLink = newLink => {
  setAttributes({ links[??]: newLink });
};

2) Is it possible to limit the amount of <li> so that it was a maximum of 7? Would I have 7 hard-code the seven <li> inside the edit function?

3) If the user only enters 3 or less how could I display only those 3 instead of 7?

Would I have to loop in my callback and build the string before displaying it?

    mystr = "";

    for($i=0;$i<=????;i++) {
     mystr .= sprintf('<a href="%1$s">%2$s</a>', $link[$i].url, __($link[$i].text, "myplugin"));
    }

    return sprintf(
        '<div>
           <h2>Quick Links</h2>
           %1$s
        </div>',
        mystr
    );

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.