DEV Community

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

Collapse
filipecsweb profile image
Filipe Seabra

Have you figured this out?

Collapse
crs1138 profile image
Honza Author

Hi Felipe, sorry I have not seen your comment earlier. Short answer – no. I haven't worked out how to use <LinkControl /> I wanted.

Longer answer

I have worked out something that served my particular case. I built it a workaround by modifying the edit function of the core/button.

I made a higher order component and added a filter that replaces the default edit function for core/button.

// button/index.js
const buttonEditClone = createHigherOrderComponent((EditComponent) => {
    return (props) => {
        const { name } = props;
        if (name !== 'core/button') {
            return <EditComponent {...props} />;
        }
        return <ButtonEditComponent {...props} />;
    };
});

addFilter('editor.BlockEdit', 'my-plugin/button', buttonEditClone);
Enter fullscreen mode Exit fullscreen mode

Within the <ButtonEditComponent /> I then I constructed my own <Popover /> that is displayed when user wants to edit the options of the button. Inside of that I was able to achieve what I needed.

I hope that helps to point you in your desired direction. That is if you haven't worked it out yourself yet (and probably better) 😀 Good luck!