rmihailova20 07.02.2023 11:41

Как создать кастомный блок в Gutenberg с использованием JavaScript?

Здравствуйте! Мне необходимо создать кастомный блок в Gutenberg с использованием JavaScript, однако у меня возникли сложности с его реализацией. Я хотел бы попросить помощи у сообщества onwp.ru. Проблема заключается в том, что я пытаюсь добавить дополнительную функциональность в свой кастомный блок, но не понимаю, как это сделать с помощью JavaScript. Мне нужно, чтобы при клике на кнопку внутри блока происходило определенное действие, например, выводилось сообщение или изменялся стиль блока. Вот пример кода, с которым у меня возникли затруднения: 

( function( blocks, editor, element ) {
    var el = element.createElement;
    var registerBlockType = blocks.registerBlockType;
    var RichText = editor.RichText;

    registerBlockType( 'my-plugin/my-block', {
        title: 'Мой кастомный блок',
        icon: 'smiley',
        category: 'common',
        attributes: {
            content: {
                type: 'array',
                source: 'children',
                selector: 'p',
            },
            // другие атрибуты
        },
        edit: function( props ) {
            var content = props.attributes.content;
            var onChangeContent = function( newContent ) {
                props.setAttributes( { content: newContent } );
            };
            
            return el(
                RichText,
                {
                    tagName: 'p',
                    className: props.className,
                    value: content,
                    onChange: onChangeContent,
                }
            );
        },
        save: function( props ) {
            var content = props.attributes.content;
            
            return el( RichText.Content, {
                tagName: 'p',
                className: props.className,
                value: content,
            } );
        },
    } );
} )(
    window.wp.blocks,
    window.wp.editor,
    window.wp.element
);
Буду очень благодарна, если кто-то сможет подсказать, как добавить функциональность в этот кастомный блок с помощью JavaScript. Заранее спасибо за вашу помощь!

Ответы:

YanaFish40 07.02.2023 11:47
Для добавления функциональности в кастомный блок в Gutenberg с использованием JavaScript, вы можете использовать методы edit и save в объекте registerBlockType. Для начала, вам нужно определить свои атрибуты, которые будут использоваться в кастомном блоке. В вашем примере кода уже определен атрибут "content", который является массивом детей и отображается внутри тега "p". Вы можете добавить другие атрибуты в этот объект для вашей функциональности. Для добавления кнопки и обработчика события для нее, вам нужно изменить функцию edit. Вы можете использовать элемент кнопки "button" и добавить обработчик события "onClick". Внутри обработчика события вы можете выполнить определенное действие, например, использовать метод console.log для вывода сообщения в консоль. Вот пример кода, который показывает, как добавить кнопку внутри кастомного блока и обработать клик: 

edit: function( props ) {
    var content = props.attributes.content;
    var onChangeContent = function( newContent ) {
        props.setAttributes( { content: newContent } );
    };
    
    var onClickButton = function() {
        console.log('Вы нажали на кнопку!');
        // Дополнительные действия здесь
    };
    
    return el(
        'div',
        { className: props.className },
        el(
            RichText,
            {
                tagName: 'p',
                value: content,
                onChange: onChangeContent,
            }
        ),
        el(
            'button',
            { onClick: onClickButton },
            'Кликни на меня!'
        )
    );
},
Вы можете дополнительно изменять стиль блока или выполнять другие действия внутри обработчика события onClickButton. После внесения изменений в функцию edit, необходимо сохранить их в функции save. В вашем примере кода, метод save уже определен и использует атрибут "content". Если вы внесли изменения в функцию edit, то они также должны применяться в функции save. Надеюсь, это поможет вам добавить функциональность в ваш кастомный блок с использованием JavaScript. Если у вас возникнут еще вопросы, не стесняйтесь спрашивать. Удачи в вашей разработке на WordPress!

Добавить ответ