How do you use the `<LinkControl />` component in Gutenberg development?

#wordpress #gutenberg #help

Honza Jul 24, 2020 ・Updated on Jul 27, 2020 ・1 min read

I'm trying to develop a custom CTA button component that will be used in all of our custom Gutenberg blocks. I'd like the authors to be able to click on the button in the editor and change the button text, URL (with option to search the existing posts/pages/CPTs/…) and set the target and rel attributes. I've been playing around with URLInputButton, URLPopover and eventually stumbled upon LinkControl, but I just can't get it to work at all. The documentation doesn't provide any example of its use either. Does anybody here knows?

// A simplified example showing what I've been trying so far…
function edit( props ) {
    const { attributes: { btnText, url }, setAttributes } = props;
    return (
        // <ButtonGroup className={`flex cta`}>
        //     {/* <Button url={`#url`}>
        //     </Button> */}
        //     <Button url={url} >
        //     <PlainText
        //         placeholder={ __(`Calling to act`, cvslug) }
        //         value={btnText || `Click`}
        //         onChange={ (newText) => setAttributes({ btnText: newText }) }
        //     />
        //     </Button>
        //     {/* <URLInputButton
        //         url={ url }
        //         onChange={ (url, post) => setAttributes( { url, btnText: (post && post.title) || `Click here` } ) }
        //     /> */}
        // </ButtonGroup>
        <LinkControl />
    );
}