javascript - WP Gutenberg - custom block with two content fields

admin管理员组

文章数量:1129399

I'm developing Gutenberg custom block for accodrdions on my website. My code was working with only one content field. When I have added second props it has stop worked and console says:

Cannot read property 'content' of undefined

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
    )   

  )}
})

I'm developing Gutenberg custom block for accodrdions on my website. My code was working with only one content field. When I have added second props it has stop worked and console says:

Cannot read property 'content' of undefined

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
    )   

  )}
})

• javascript
• block-editor

Share Improve this question asked Mar 18, 2019 at 15:03 Dom.inDom.in 3355 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 2

You don't need propstwo. It doesn't serve any purpose. There's only one props argument, and you use it to get access to your block's attributes. Both header and content are attributes, so you access both of them through the same props argument:

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
            )
        );
    }
})

You also hadn't correctly nested the child elements in your edit function, which I've also corrected above.

@jacob

The last comma on the ) before save needs to be removed, otherwise it's golden:

),<--here

}, save: function(props) {

本文标签： javascriptWP Gutenbergcustom block with two content fields