Java 脚本/Wordpress Gutenberg 块插件/无法添加第二个 class 到 div

Question

也许有人可以帮我解决这个奇怪的行为...

我正在写一个 "Wordpress Gutenberg Block" 插件，只想在 return 函数中给第一个 div 第二个 class。

它有效，但不应该。

我要得到：

<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 之前得到这个 undefined 并且不知道如何解决它。

非常感谢！

Answer 1

问题出在colclass的赋值上，因为不需要props.className。

在 registerBlockType 的 save 函数中 class 自动添加到最外层元素，但在 edit 函数中你必须明确地写它所以错误地使用了相同的两种方法。

我还建议您使用最新的 ES6 / ESNext 语法而不是 ES5，因为它对代码友好，Gutenberg 文档也有一个显示 ESNext 代码的开关。

Java 脚本/Wordpress Gutenberg 块插件/无法添加第二个 class 到 div

Java Script / Wordpress Gutenberg Block Plugin / cant add a second class to div

javascript

wordpress

gutenberg-blocks