WP Gutenberg-带有两个内容字段的自定义块

时间:2019-03-18 作者:Dom.in

我正在我的网站上为accodrdions开发Gutenberg自定义块。我的代码只处理一个内容字段。当我添加第二个道具时,它停止工作,控制台显示:

无法读取未定义的属性“content”

wp.blocks.registerBlockType(\'myblock/question-block\', {
  title: \'Blok Pytan\',
  icon: \'dashicons-welcome-write-blog\',
  category: \'common\',
  attributes: {
    header: {type: \'string\'},
      content: {type: \'string\'}
  },
  edit: function(props, propstwo) {

      function updateheader(event) {
      props.setAttributes({header: event.target.value})
    }

       function updatecontent(event) {
      propstwo.setAttributes({content: event.target.value})
    }

    return wp.element.createElement(
      "div",
      null,
      wp.element.createElement(
        "h2",
        null,
        "Nagłówek tekstu"
      ),
      wp.element.createElement("input", { type: "text", value: props.attributes.header, onChange: updateheader }),
    ),
         wp.element.createElement(
        "p",
        null,
        "Rozwijany tekst"
      ),
        wp.element.createElement("input", { type: "text", value: propstwo.attributes.content, onChange: updatecontent })

  },
  save: function(props, propstwo) {

    return wp.element.createElement(
    "div",
    {className: "accodrion"},

    wp.element.createElement(
      "h2",
      {className: "accodrdion-header"},
      props.attributes.header
    ),

    wp.element.createElement(
      "p",
      {className: "panel"},
      propstwo.attributes.content
    )   

  )}
})

2 个回复
最合适的回答,由SO网友:Jacob Peattie 整理而成

你不需要propstwo. 它没有任何作用。只有一个props 参数,并使用它访问块的attributes. 二者都headercontent 是属性,因此可以通过相同的props 参数:

wp.blocks.registerBlockType(\'myblock/question-block\', {
    title: \'Blok Pytan\',
    icon: \'dashicons-welcome-write-blog\',
    category: \'common\',
    attributes: {
        header: {
            type: \'string\'
        },
        content: {
            type: \'string\'
        }
    },
    edit: function(props) {
        function updateheader(event) {
            props.setAttributes({
                header: event.target.value
            })
        }
        function updatecontent(event) {
            props.setAttributes({
                content: event.target.value
            })
        }
        return wp.element.createElement(
            "div",
            null,
            wp.element.createElement(
                "h2",
                null,
                "Nagłówek tekstu"
            ),
            wp.element.createElement(
                "input",
                {
                    type: "text",
                    value: props.attributes.header,
                    onChange: updateheader
                }
            ),
            wp.element.createElement(
                "p",
                null,
                "Rozwijany tekst"
            ),
            wp.element.createElement(
                "input",
                {
                    type: "text",
                    value: props.attributes.content,
                    onChange: updatecontent
                }
            ),
        ),
    },
    save: function(props) {
        return wp.element.createElement(
            "div",
            {
                className: "accodrion",
            },
            wp.element.createElement(
                "h2", {
                    className: "accodrdion-header"
                },
                props.attributes.header
            ),
            wp.element.createElement(
                "p", {
                    className: "panel"
                },
                props.attributes.content
            )
        )
    }
})
您还没有将子元素正确嵌套在edit 函数,我在上面也对其进行了更正。

SO网友:user2299879

@雅各布

保存前)上的最后一个逗号需要删除,否则为金色:

),<--here
},保存:函数(道具){

相关推荐

尝试仅在PODS类别/自定义帖子类型内的页面上加载JavaScript

我想加载CSS,但只在某些页面上加载。这段代码通常工作得很好,但我无法确定“条件标记”是什么只会加载这些页面。这是我在函数中放置的函数。php文件://Below loads JS ONLY for the main directory pages function directory_scripts () { if ( *** NOT SURE *** ): wp_enqueue_style( \'addev