adding the ability to edit title to

Question

I am new to WP dev so please bear with me. I am currently using <LinkControl /> to loop through my array and display a list of links with the ability to edit the link and open in a new tab
I need to add the ability to edit the title in the <LinkControl /> by adding in another editable field for the title – I am not sure how I can do this?

In my edit function – I have a list on navigation links – as well as the ability to add more by clicking on a button

Below this my <LinkControl /> loops through every item to display a <LinkControl /> for each item.

I want to be able to display a <LinkControl /> for the corresponding navigation link when you hover over the link, and add also add a field to edit the title – could someone help me with this please?

I’m not sure how to implement this and any help/code snippets would be appreciated, here is my code:

my index.js:

    const amountDefault = [
  {
    title: 'Link 1',
    url: '#',
    opensInNewTab: false,
    id: 0,
  },
  {
    title: 'Link 2',
    url: 'https://www.google.co.uk',
    opensInNewTab: true,
    id: 1,
  },
  {
    title: 'Link 3',
    url: 'https://www.amazon.co.uk',
    opensInNewTab: false,
    id: 2,
  },
];

const blockAttributes = {
  items: {
    type: 'array',
    default: amountDefault,
  },
};

my edit function:

  render() {
    const { attributes, setAttributes } = this.props;
    const { isVisible, setState } = this.state;

    const listItems = attributes.items.map(item => (
      <li key={item.url}>
        <a href={item.url}>{item.title}</a>
      </li>
    ));

    const { items } = attributes;
    const newItem2 = {
      title: 'Test Link',
      url: '#',
      opensInNewTab: false,
      id: items.length + 1,
    };

    const addItem = () => {
      setAttributes({
        items: [...items, newItem2],
      });
    };


    return (
      <Fragment>
        <p>Test2</p>
        <nav>
          <ul>
            <li className="nav-link active"
              {listItems}
            </li>
          </ul>
        </nav>

        <button onClick={addItem} className="add-link-btn">
          Add Link
        </button>

 
        {items.map((item, index) => (
          <LinkControl
            key={item}
            value={{
              url: item.url,
              title: item.title,
              opensInNewTab: item.opensInNewTab,
              id: item.id,
            }}
            onChange={value => {
              const newItems = [...items];

              newItems[index] = { ...newItems[index], ...value };

              // update attributes for LinkControl
              setAttributes({ items: newItems });
            }}
          />
        ))}
      </Fragment>
    );
0
fk_code 3 months 0 Answers 12 views 0

Leave an answer