如何在gutenberg富文本编辑器上创建按钮来模仿链接弹出窗口功能

Question

我需要创建一个按钮，该按钮将生成一个具有data-footnote属性的标签，并且该标签可编辑，就像单击该按钮时出现的链接弹出窗口一样。到目前为止，这就是我尝试过的方法，但是弹出窗口完全没有显示，我需要此按钮的工作方式与链接按钮完全相同，但是，它使用文本框更改了我的data-note属性，而不是单击时显示的输入链接按钮。

下面的代码是我到目前为止所做的。该按钮在那里，它可以按我的需要精确地创建我的标签，但是我很难找到如何使弹出窗口出现的方法，因此我可以内联编辑该数据属性。

import { Fragment } from '@wordpress/element';
import { RichTextToolbarButton, RichTextShortcut } from '@wordpress/block-editor';
import {
    toggleFormat,
    registerFormatType,
} from '@wordpress/rich-text';

const name = `custom/eos-footnote`;

export const footnote = {
    name,
    title: 'Footnote',
    tagName: 'span',
    className: 'eos-footnote',
    attributes: {
        //'data-note': 'data-note',
    },
    edit( { isActive, value, onChange } ) {
        const onToggle = () => {
            onChange(
                toggleFormat( value, {
                    type: name,
                    attributes: {
                        'data-note': 'Please type your note here',
                    },
                } )
            );
        };
        return (
            <Fragment>
                <RichTextShortcut
                    type="primary"
                    character="n"
                    onUse={ onToggle }
                />
                <RichTextToolbarButton
                    icon="admin-post"
                    title={ 'Footnote' }
                    onClick={ onToggle }
                    isActive={ isActive }
                    shortcutType="primary"
                    shortcutCharacter="n"
                />
            </Fragment>
        );

    },
};

function registerFormats () {
    [
        footnote,
    ].forEach( ( { name, ...settings } ) => registerFormatType( name, settings ) );
};

registerFormats();

Answer 1

[google]（https://developer.wordpress.org/block-editor/components/popover/#top）我发现这个链接对您有帮助在应该锚定的父级中渲染Popover：

    import { Button, Popover } from '@wordpress/components';
    import { withState } from '@wordpress/compose';

    const MyPopover = withState( {
        isVisible: false,
    } )( ( { isVisible, setState } ) => {
        const toggleVisible = () => {
            setState( ( state ) => ( { isVisible: ! state.isVisible } ) );
        };
        return (
            <Button isSecondary onClick={ toggleVisible }>
                Toggle Popover!
                { isVisible && (
                    <Popover>
                        Popover is toggled!
                    </Popover>
                ) }
            </Button>
        );
    } );

如果组件返回Popover，则会显示它。要隐藏弹出窗口，只需从组件的渲染值中忽略它即可。

如果要使Popover元素呈现到页面上的特定位置以使样式级联生效，则必须在元素树的上方进一步渲染Popover.Slot：

import { render } from '@wordpress/element';
import { Popover } from '@wordpress/components';
import Content from './Content';

const app = document.getElementById( 'app' );

render(
    <div>
        <Content />
        <Popover.Slot />
    </div>,
    app
);