Wordpress Gutenberg InnerBlock.Content не сохраняется и не отображается - PullRequest
Новая
       63

Wordpress Gutenberg InnerBlock.Content не сохраняется и не отображается

0 голосов
/ 13 июня 2019

Я создаю собственный блок в Гутенберге с помощью специального плагина.Мой пользовательский блок содержит InnerBlocks.Кажется, что функция редактирования работает правильно, так как я могу добавить блок на страницу и разместить новые элементы блока внутри блока, как и предполагалось.Проблема возникает, когда я перезагружаю страницу.После обновления страницы и перезагрузки редактора все элементы InnerBlock исчезли.Они не сохраняются и не отображаются на внешнем интерфейсе.Если я не сумасшедший, моя функция сохранения построена неправильноЛюбая помощь будет отличной.Я хорошо разбираюсь в Wordpress и JS, но плохо знаком с React и Gutenberg.Спасибо за любую помощь! 

( function( blocks, element, editor ) {

    const el = element.createElement;
    const { registerBlockType } = blocks;
    const InnerBlocks = editor.InnerBlocks;

    registerBlockType( 'dab/nest', { 
        title: 'Disruptive Nest',
        icon: 'layout',
        category: 'disruptive-blocks', 
        keywords: [ 'base', 'build', 'custom' ], 

        edit: function( props ) {
            return (
                el( 'div', {className: props.className + ' dab-full'},
                    el( 'div', {className: 'dab-content'},
                        el( InnerBlocks )
                    )
                )
            );
        },

        save: function( props ) {
            return (
                el( 'div',
                    el( 'div',
                        el( InnerBlocks.Content, null )
                    )
                )
            );
        },
    });
})( window.wp.blocks, 
    window.wp.element, 
    window.wp.blockEditor
);

1 Ответ

0 голосов
/ 17 июня 2019

Я нашел это в Руководстве редактора блоков ([https://developer.wordpress.org/block-editor/developers/block-api/block-edit-save/#classname):

«Это автоматически добавляется в методе сохранения, но не при редактировании» [в теме props.className]. Вот почему у меня изначально не было зеркальных классов. Повторное чтение привело меня к осознанию того, что зеркалирование classNames в функции «сохранить» - это не то, что исправлено, а просто наличие {} после каждого из родительских el( 'div',, даже если вы ничего не указали , это то, что исправило функцию.

Итак, это работает так, и className автоматически добавляется к первому el( 'div',: 

save: function( props ) {
    return (
       el( 'div', {},
           el( 'div', {},
               el( InnerBlocks.Content )
            )
       )
    );
},

Спасибо, @niklas, что помог мне понять это.

...