我正在寻找一种方法add linking functionality to a custom block 并找到了满足这一需求的不同方法。

有：

在URLInputButton Component

URLInput Component

LinkControl Component

URLPopover Component

我通过前两个组件获得了它：

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>

    }
    ...


});

不幸的是URLInput 以及URLInputButton 显得displaced/buggy 输入链接时。

因此，我试图找出一种方法来使用LinkControl 我无法让它工作。我甚至无法确定它必须从哪个软件包中导入。

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);
    }}
 />
...
}

...

我也没能拿到URLPopover 工作。

如果有人能给我指出正确的方向，我将不胜感激！