2

When I click the "open in new tab" toggle, nothing happens in the UI. The onChange is triggered. How do I set the toggle to true?

I am using the following: https://github.com/WordPress/gutenberg/tree/trunk/packages/block-editor/src/components/link-control#settings

Here is my current link control component

<LinkControl
            searchInputPlaceholder="Add Link"
            value={attributes.link}
            onChange={ ( value ) => {
                setAttributes({ link: value.url, opensInNewTab: value.opensInNewTab})
            }}
            settings={[
                {
                    id: 'opensInNewTab',
                    title: 'Opens in new tab',
                }
            ]}

            suggestionsQuery={ { type: "post", subtype: 'page' } }
        >

1 Answer 1

1

This is covered in the documentation section directly above the one you linked, for value:

A link value is composed of a union between the values of default link properties and any custom link settings.

The resulting default properties of value include:

  • url (string): Link URL.
  • title (string, optional): Link title.
  • opensInNewTab (boolean, optional): Whether link should open in a new browser tab. This value is only assigned when not providing a custom settings prop.

So you'd need to include it in the value:

<LinkControl
    searchInputPlaceholder="Add Link"
    value={{
        url: attributes.link,
        opensInNewTab: attributes.opensInNewTab,
    }}
    onChange={(value) => {
        setAttributes({ link: value.url, opensInNewTab: value.opensInNewTab })
    }}
    settings={[
        {
            id: 'opensInNewTab',
            title: 'Opens in new tab',
        },
    ]}
    suggestionsQuery={{ type: "post", subtype: 'page' }}
/>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.