I’m trying to create a basic link control in my WordPress plugin, but I can’t get it to work properly. I ‘ve read the previous answers on here, but still having issues. I also checked out the block-editor component documentation on Github, but the example doesn’t go far enough to address my problem. Here is the code for my Attributes:

const attributes = {
    linkText: {
        type: 'string',
        'selector': '.hero-image__button',
        default: ''
    },
    linkURL: {
        type: 'string',
        selector: '.hero-image__button',
        default: ''
    }
};

export default attributes;

Here is the code for my Edit function:

import { TextControl } from '@wordpress/components';
import { __experimentalLinkControl as LinkControl } from '@wordpress/block-editor';

export default function Edit ( { attributes: { linkURL, LinkText }, setAttributes } ) {

    const handleLinkChange = ( value ) => {
        setAttributes( {
            linkURL: value.url
        } );
    };

    return (
        <>
            <TextControl
                value={ linkText }
                onChange={ ( linkText ) => setAttributes( { linkText } ) }
            />
            <LinkControl
                onChange={ handleLinkChange }
                value={ linkURL }                           
            />
        </>
    );

}

Here is the code for my Save Function:

export default function Save ( { attributes: { linkURL, linkText } } ) {

    return (
        <a className="hero-image__button" href={ linkURL }>{ linkText }</a>
    );

}

Everything saves fine and it looks as expected on the front end. The problem occurs in the admin. After entering the URL the value of the field always comes up “Undefined”. Here is a screenshot of what I get:

When I reload the admin page, the link control field resets completely even though the linkURL value persists:

Any help would be greatly appreciated!

Your value prop is the wrong format. From <LinkControl>‘s README:

value

• Type: Object
• Required: No

Current link 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.

If the link’s actual title & “opensInNewTab” properties are relevant to your ends, then you should store the whole value in attributes in the handleLinkChange() function. Otherwise, specifying the linkText attribute should be sufficient. As mentioned in the README, you can also specify a settings prop to suppress the “Opens in New Tab” toggle (or add additional toggles):

            <LinkControl
                onChange={ handleLinkChange }
                value={ { url: linkURL, title: linkText } }   
                settings={ [] }    
            />