The issue

I am looking for a way to add linking functionality to a custom block of mine and found different approaches to this need.

There are:

1. The URLInputButton Component
2. The URLInput Component
3. The LinkControl Component
4. The URLPopover Component

I got it somehow working with the first two components:

const {URLInputButton, URLInput, URLPopover} = wp.blockEditor;

registerBlockType('my-plugin-domain/textlink', {
    title: __('Text Link', 'my-textdomain'),
    
    ...

    attributes: {
        url: {
            type: 'string',
        },
    },

    edit(props) {

        const {
            attributes,
            setAttributes,
        } = props;

        const {url} = attributes;

        const blockControls = (
            !!isSelected && (
                <BlockControls>
                    <Toolbar>
                        <URLInputButton
                            url={url}
                            onChange={(url, post) => setAttributes(
                                    {url, title: (post && post.title) || __('Click here')},
                                )}
                            />

                        <URLInput
                            className={className}
                            value={url}
                            onChange={(url, post) => setAttributes(
                                    {url, text: (post && post.title) || 'Click here'})}
                            />
                    </Toolbar>

    }
    ...


});

Unfortunately the URLInput as well as the URLInputButton appear displaced/buggy when entering a link.

Hence I’m trying to figure out a way how to use the LinkControl Component and I can’t get it to work. I wasn’t even able to figure out from which Package it has to be imported yet.

const {LinkControl} = wp.blockEditor; // This doesn't seem to work 


const {LinkControl} = wp.components; // Neither this

...

// This is not working:

edit(props){
 ...
 <LinkControl
    onChange={(nextValue) => {
    console.log(nextValue);
    }}
 />
...
}

...

Also I wasn’t able to get the URLPopover to work.

If anyone could point me into the right direction, it would be highly appreciated!

LinkControl is an experimental component, so it’s declared differently in blockEditor package

try this as an import statement, this worked for me:

const {__experimentalLinkControl } = wp.blockEditor;
const LinkControl = __experimentalLinkControl;