I am a beginner in WordPress development looking to build a block with tab navigation using <LinkControl />. I am still learning, so any guidance/materials/code examples will be appreciated.

My question is, if I have multiple <LinkControl />, how would I check the current index of that <LinkControl /> in order to set the attributes?

Here is my code in index.js:

const amountDefault = [
  {
    title: 'Link 1',
    url: '#',
    opensInNewTab: false,
    id: 0,
  },
  {
    title: 'Link 2',
    url: '',
    opensInNewTab: false,
    id: 1,
  },
  {
    title: 'Link 3',
    url: '',
    opensInNewTab: false,
    id: 2,
  },
];
const blockAttributes = {
  items: {
    type: 'array',
    default: amountDefault,
  },
};
registerBlockType('my-theme/nav-bar', {
  title: __('Nav bar', 'my-theme'),
  icon: 'welcome-add-page',
  category: 'layout',
  supports: {
    multiple: true,
  },
  attributes: blockAttrs,

and here is the code for my edit function:

const { items } = attributes;
    return (
      <Fragment>
        <p>Test2</p>
        <nav>
          <ul>{listItems}</ul>
        </nav>
        <p>Testing Link Control</p>
        {items.map((item, index) => (
          <LinkControl
            value={{ url: item.url, title: item.title, opensInNewTab: item.opensInNewTab }}
            onChange={value => {
// create link manager for each item
// when clicking on 'edit' on item - replace the value with the new value

            }}
          />
        ))}

I am not sure how to reference that particular item in my array in order change edit the link - could someone help me please?

I am a beginner in WordPress development looking to build a block with tab navigation using <LinkControl />. I am still learning, so any guidance/materials/code examples will be appreciated.

My question is, if I have multiple <LinkControl />, how would I check the current index of that <LinkControl /> in order to set the attributes?

Here is my code in index.js:

const amountDefault = [
  {
    title: 'Link 1',
    url: '#',
    opensInNewTab: false,
    id: 0,
  },
  {
    title: 'Link 2',
    url: 'https://www.google',
    opensInNewTab: false,
    id: 1,
  },
  {
    title: 'Link 3',
    url: 'https://www.amazon.co.uk',
    opensInNewTab: false,
    id: 2,
  },
];
const blockAttributes = {
  items: {
    type: 'array',
    default: amountDefault,
  },
};
registerBlockType('my-theme/nav-bar', {
  title: __('Nav bar', 'my-theme'),
  icon: 'welcome-add-page',
  category: 'layout',
  supports: {
    multiple: true,
  },
  attributes: blockAttrs,

and here is the code for my edit function:

const { items } = attributes;
    return (
      <Fragment>
        <p>Test2</p>
        <nav>
          <ul>{listItems}</ul>
        </nav>
        <p>Testing Link Control</p>
        {items.map((item, index) => (
          <LinkControl
            value={{ url: item.url, title: item.title, opensInNewTab: item.opensInNewTab }}
            onChange={value => {
// create link manager for each item
// when clicking on 'edit' on item - replace the value with the new value

            }}
          />
        ))}

I am not sure how to reference that particular item in my array in order change edit the link - could someone help me please?

• customization
• block-editor
• links

• 1 This is actually a JS question, but anyway, in that onChange() function, you could use the findIndex() function in JS Array. E.g. To find by the link id, you can use let index = amountDefault.findIndex( obj => value.id === obj.id ); and if the value is 0 or greater (i.e. index >= 0), then that means the item/link was found in your amountDefault array. – Sally CJ Commented Oct 21, 2020 at 12:09
• Hi, thanks for replying and apologies asking in this forum (thank you for being nice about it) - I was at a loss and wasn't sure the best place for this question. Thanks for explaining how to find the value in the array - how would I set the attribute if the link that I am changing to has a different ID e.g. my array ID = 1, but the value.id is 2? – user196413 Commented Oct 21, 2020 at 12:23
• If I understand it correctly, you just need to find the index in the items array in your edit function and update the item at that index (i.e. merge the value with the one currently in the items), then do something like setAttributes( { items } ). E.g. const index = items.findIndex( obj => value.id === obj.id ); items[ index ] = { ...items[ index ], ...value }; setAttributes( { items } ); – Sally CJ Commented Oct 21, 2020 at 14:24
• @SallyCJ i'm not sure I understand what you mean with the code snippet above - if I have a list of LinkControls, I would like to know which one I have selected to edit, and then set the attribute for that specific LinkControl. I tested the snippet and I only get the ID of the URL I am changing to – user196413 Commented Oct 21, 2020 at 14:33
• I included a modified version of that snippet in my answer. I hope that helps? – Sally CJ Commented Oct 21, 2020 at 16:32

1 Answer 1

Actually, the LinkControl index is already there in your code.. it's in the items.map( ( item, index ) ) — yes, that index. So just use it in your onChange callback.

And presuming that your edit function starts like ( { attributes, setAttributes } ) => { ..., i.e. the setAttributes is defined, you can try the following in place of what you currently have:

items.map( ( item, index ) => (
    <LinkControl
        value={ { ...item } }
        onChange={ ( value ) => {
            // do not change the existing 'items' array; clone it instead
            const newItems = [ ...items ];

            // then update the one being edited
            // the 'index' below is the one passed to .map() above
            newItems[ index ] = { ...newItems[ index ], ...value };

            // then update the block attributes
            setAttributes( { items: newItems } );

            console.log( value, newItems, items ); // for testing/debugging
        } }
    />
) )