0

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
    )   

  )}
})

2 Answers 2

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.

0

@jacob

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

),<--here

}, save: function(props) {

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.