Как создать кнопку для всплывающей ссылки mimi c в редакторе gutenberg richtext - PullRequest
Новая
       57

Как создать кнопку для всплывающей ссылки mimi c в редакторе gutenberg richtext

0 голосов
/ 19 марта 2020

Мне нужно создать кнопку, которая будет генерировать тег с атрибутом data-footnote, и он будет редактируемым, как всплывающее окно с ссылкой, которое появляется при нажатии на нее. Это то, что я пробовал до сих пор, но всплывающее окно не отображается вообще, мне нужно, чтобы эта кнопка работала точно так же, как кнопка ссылки, но вместо этого она изменяет мой атрибут примечания к данным с текстовым полем вместо того ввода, который отображается при нажатии кнопка ссылки.

Этот код ниже - то, что я сделал до сих пор. Кнопка есть, она не позволяет создать мой тег точно так, как мне нужно, но мне трудно найти способ отображения всплывающего окна, чтобы я мог встроить редактировать этот атрибут данных. 

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();

1 Ответ

1 голос
/ 19 марта 2020

[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 отображались в определенном c месте на странице, чтобы позволить каскаду стилей вступить в силу, вы должны отобразить Popover Слот дальше вверх по дереву элементов: 

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