Как создать пользовательскую кнопку DropdownMenu в абзаце Гутенберга - PullRequest
1 голос
/ 31 марта 2020

У меня есть некоторые проблемы при разработке выпадающего меню для Core / Paragraph. Я хочу добавить выпадающее меню для вставки текста (например, персонализированные теги в почтовых службах).

Я пытался создать этот код в Vanilla для реализации DropdownMenu для Core / Paragraph без успеха.

My код:

( function( blocks, element, components, editor ) {
    const el          = element.createElement;
    const { __ }      = wp.i18n;
    const withSelect  = wp.data.withSelect;
    const ifCondition = wp.compose.ifCondition;
    const compose     = wp.compose.compose;

    console.log(components);

    const EmailTagsMenu = el( 
        components.Toolbar,
        null,
        el(
            components.DropDownMenu,
            {
                icon: 'admin-customizer',
                isActive: false,
                label: __('Insert Tag', 'amauta'),
                controls: function(){
                    return [
                        {
                            title: __('Firstname', 'amauta'),
                            icon: 'admin-customizer',
                            onClick: function(){

                            }
                        },
                        {
                            title: __('Lastname', 'amauta'),
                            icon: 'admin-customizer',
                            onClick: function(){

                            }
                        }
                    ];
                }
            }
        )
    );

    var EmailTagsButton = compose(
        withSelect( function( select ) {
            return {
                selectedBlock: select( 'core/block-editor' ).getSelectedBlock()
            }
        } ),
        ifCondition( function( props ) {
            return (
                props.selectedBlock &&
                props.selectedBlock.name === 'core/paragraph'
            );
        } )
    )( EmailTagsMenu );

    wp.richText.registerFormatType(
        'amauta/email_tags', {
            title: __('Email Tags', 'amauta' ),
            tagName: null,
            className: null,
            edit: EmailTagsButton,
        }
    );

}(
    window.wp.blocks,
    window.wp.element,
    window.wp.components,
    window.wp.blockEditor
));

Пожалуйста, вы можете мне помочь? Спасибо!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...