Ошибка создания настраиваемого блока Wordpress Gutenberg

Question

Я пытаюсь создать собственный блок для редактора Wordpress Gutenberg в моем коде, но когда я пробую этот код, он сообщает мне: "Этот блок обнаружил ошибку, и его невозможно просмотреть". Я хочу знать, что не так в моем коде? Я использовал "React.createElement" вместо "wp.element.createElement", у меня тоже была та же ошибка. Как с этим бороться?

var el = wp.element.createElement;
wp.blocks.registerBlockType('shaiful-gutenberg/notice-block', {

   title: 'Notice',
   icon: 'lightbulb',
   category: 'common', 
  attributes: {
    numb: {type: 'string'},
    title: {type: 'string'},
    percent: {type: 'string'},
    imageo: {type: 'string'},
    ccode: {type: 'string'},
    expireo: {type: 'string'},
    affleo: {type: 'string'}
  },

  edit: function(props) {
  function updateNumb(value) {
      props.setAttributes({numb: event.target.value})
    }
    function updateTitle(value) {
      props.setAttributes({title: event.target.value})
    }
    function updatePercent(value) {
      props.setAttributes({percent: event.target.value})
    }
    function updateImageo(value) {
      props.setAttributes({imageo: event.target.value})
    }
    function updateCcode(value) {
      props.setAttributes({ccode: event.target.value})
    }
    function updateExpireo(value) {
      props.setAttributes({expireo: event.target.value})
    }
    function updateAffleo(value) {
      props.setAttributes({affleo: event.target.value})
    }
    return 
el("div", {
  className: "innero"
},
el("div", {
  className: "collection-header"
}, 
el("span", null, 
el("input", {
  type: "text",
  onChange: "updateNumb",
  value: "props.attributes.numb",
  placeholder: "Enter Number..."
}))),
el("h4", null, 
el("input", {
  type: "text",
  onChange: "updateTitle",
  value: "props.attributes.title",
  placeholder: "Enter Title..."
})), 
el("div", {
  className: "collection-container container"
},
el("div", {
  className: "collectionrow row"
},
el("div", {
  className: "collection-img col-md-6"
},
el("div", {
  className: "relpropercent ribbon ribbon-top-left"
},
el("span", null, 
el("input", {
  type: "text",
  onChange: "updatePercent",
  value: "props.attributes.percent",
  placeholder: "Enter percentage..."
}))),
el("input", {
  type: "text",
  onChange: "updateImageo",
  value: "props.attributes.imageo",
  placeholder: "Enter Image Url..."
})),
el("div", {
  className: "collection-info col-md-6"
},
el("div", {
  className: "relprocode container"
}, 
el("div", {
  className: "row"
}, 
el("div", {
  className: "col-9"
},
el("input", {
  type: "text",
  onChange: "updateCcode",
  value: "props.attributes.ccode",
  placeholder: "Enter Code..."
})),
el("div", {
  className: "col-3"
},
el("button", {
  className: "relcopycode",
  onclick: "relclicktocopy(this)"
},
el("i", {
  className: "fa fa-copy"
}))))), 
el("div", {
  className: "relproexpiry"
},
el("input", {
  type: "text",
  onChange: "updateExpireo",
  value: "props.attributes.expireo",
  placeholder: "Enter expiry date..."
})),
el("input", {
  type: "text",
  onChange: "updateAffleo",
  value: "props.attributes.affleo",
  placeholder: "Enter Aff Url..."
})))));
  },
  save: function(props) {
    return
el("div", {
  className: "innero"
},
el("div", {
  className: "collection-header"
},
el("span", null, props.attributes.numb)),
el("h4", null, props.attributes.title),
el("div", {
  className: "collection-container container"
},
el("div", {
  className: "collectionrow row"
},
el("div", {
  className: "collection-img col-md-6"
},
el("div", {
  className: "relpropercent ribbon ribbon-top-left"
},
el("span", null, props.attributes.percent)), 
el("img", {
  src: "{props.attributes.numb}",
  title: "{props.attributes.title}",
  alt: "{props.attributes.title}"
})),
el("div", {
  className: "collection-info col-md-6"
},
el("div", {
  className: "relprocode container"
}, 
el("div", {
  className: "row"
},
el("div", {
  className: "col-9"
}, 
el("input", {
  type: "text",
  value: "{props.attributes.ccode}",
  className: "RelInput",
  readonly: true
})),
el("div", {
  className: "col-3"
},
el("button", {
  className: "relcopycode",
  onclick: "relclicktocopy(this)"
},
el("i", {
  className: "fa fa-copy"
}))))),
el("div", {
  className: "relproexpiry"
}, props.attributes.ccode),
el("input", {
  type: "submit",
  className: "promo-link",
  value: "Shop Now",
  onclick: "window.open('{props.attributes.affleo}', '_blank')"
})))));
  }
})
``