WordPress > 古腾堡 > 如何将 Popover 添加到自定义格式类型？

Question

我想扩展 WordPress (Gutenberg) 默认块 段落，让编辑者无需编写代码即可添加工具提示。

目标：

• 添加块段落并添加一些文本
• 选择文本并单击（新）按钮（应出现在文本样式旁边）
• 工具提示按钮应该与链接按钮完全相同，只是应该可以输入文本而不是链接

在职的：

• 我添加了一个按钮（文本样式）
• 我可以选择文本并且可以添加类（.kf-tooltip）
• 我知道如何通过 JS 添加工具提示

丢失的：

• 如何添加 Popover 以输入工具提示文本
• 如何存储/保存这些数据
• 如何将此数据作为属性输出（例如：data-tooltip="Lorem ipsum"）

任何帮助都是极好的！

---

WordPress 插件

<?php
/*
Plugin Name: KF Custom
*/

add_action( 'enqueue_block_editor_assets', function () {
    wp_enqueue_script(
        'kf-custom-script',
        plugins_url( 'kf-custom-script.js', __FILE__ ),
        array('wp-blocks', 'wp-rich-text')
    );
});

add_action( 'enqueue_block_assets', function () {
    wp_enqueue_style( 'kf-custom-style', plugins_url( 'style.css', __FILE__ ) );
});

kf-自定义脚本.js

(function(wp){

    console.log(wp);

    // Create Popover
    const { Popover } = wp.components;

    var MyCustomButton = function( props ) {
        return wp.element.createElement(
            wp.blockEditor.RichTextToolbarButton, {
                icon: 'editor-code',
                title: 'Tooltip',
                onClick: function() {
                    console.log('Open Popup on this event');
                    props.onChange( wp.richText.toggleFormat(
                        props.value,
                        { type: 'my-custom-format/kf-tooltip' }
                    ) );
                },
                isActive: props.isActive,
            }
        );
    }

    var clickHandler = function( props ) {
        console.log('Open Popup on this event');
        return 'test';
    } 

    wp.richText.registerFormatType(
        'my-custom-format/kf-tooltip', {
            title: 'Tooltip',
            tagName: 'span',
            className: 'kf-tooltip',
            edit: MyCustomButton,
            click: clickHandler
        }
    );

})(window.wp)