Java Script / Wordpress Gutenberg Block Plugin / не могу добавить второй класс в div

Может кто мне поможет с этим странным поведением ...

Я пишу о плагине Wordpress Gutenberg Block и просто хочу дать первому div второй класс в функции возврата.

Это работает, но не тогда, когда должно.

Я хочу получить:

<div class="wp-block-womoblocks-katblock col-lg-4">

Но я всегда получаю:

<div class="wp-block-womoblocks-katblock undefinedcol-lg-4">

Вот код функции:

save: function( props ) {

    var attributes = props.attributes;
    var colg4 = "col-lg-4";
    var colclass = props.className + colg4;
    return (
        el( 'div', { className: colclass },
        el( 'div', { className: 'col-lg-4' },
        el( 'div', { className: 'kat-post' },

        el( RichText.Content, {
            tagName: 'h2', value: attributes.title
        } ),
        attributes.mediaURL &&
            el( 'div', { className: 'kat-image' },
                el( 'img', { src: attributes.mediaURL } ),
            ),
            el( RichText.Content, {
                tagName: 'div', className: 'kat-ausz', value: attributes.instructions
            } ),
        )))
    );
},

Я пробовал несколько вариантов, но всегда получаю неопределенное значение перед col-lg-4 и не знаю, как его решить.

Большое тебе спасибо!


javascript wordpress gutenberg-blocks
person Phantom001    schedule 16.12.2019    source источник
comment
var colg4 = "col-lg-4"; добавьте пробел, например var colg4 = " col-lg-4";   -  person Vel    schedule 16.12.2019
comment
Спасибо за подсказку, но теперь у меня есть: class = wp-block-womoblocks-katblock undefined test Я не знаю, откуда это undefined ... :-( Переменная определена и отображается на выходе .... Спасибо   -  person Phantom001    schedule 17.12.2019
comment
Также, когда я просто делаю что-то вроде: props.className = props.className + test3; Я получу: class = wp-block-womoblocks-katblock undefinedtest3 Я думаю, что в коде редактора Гутенберга есть что-то, чего я не знаю ... На данный момент я использую: props.className = props.className + 1 контрольная работа; Итак, я получу два класса (undefined1 и test) и смогу использовать второй.   -  person Phantom001    schedule 17.12.2019
comment
пожалуйста, console.log значение props и поделитесь мне выводом   -  person Vel    schedule 17.12.2019

Ответы (1)


arrow_upward
0
arrow_downward

Проблема заключается в присвоении colclass, потому что props.className не требуется.

В save функция класса registerBlockType автоматически добавляется к самому внешнему элементу, но в функции edit вы должны явно написать ее, поэтому по ошибке вы используете один и тот же подход для обоих.

Я также предлагаю вам использовать более последний синтаксис ES6 / ESNext вместо ES5, потому что он удобен для кода, в документации Gutenberg также есть переключатель, который показывает вам код ESNext.

person Mehmood Ahmad    schedule 17.12.2019