vigetlabs / colonel-kurtz

A Block Editor
MIT License
319 stars 33 forks source link

How to properly initialize Ars Arsenal blockType? #129

Closed romangetman closed 7 years ago

romangetman commented 7 years ago

How do I pass options for Ars Arsenal from the block type definition?

In addition to my question, I think there's a typo in the docs. https://github.com/vigetlabs/colonel-kurtz/blob/master/docs/blockTypes.md#advanced-block-types component : require('ars-arsenal').Component -> component : require('ars-arsenal').component.

nhunzaker commented 7 years ago

Hey Roman,

I don't think we presently pass a BlockType's options to BlockType components. You'll need to wrap it in another component. Here's how we do it on one of our projects:

var ArsArsenal = require('ars-arsenal').component
var React = require('react')

module.exports = React.createClass({

  getDefaultProps() {
    return {
      content: {
        photo_id : null
      }
    }
  },

  render() {
    var makeQuery = (term) => `q[name_contains]=${ term }`
    var picked  = this.props.content.photo_id,
    var url = GLOBAL_URL_OMITTED

    return (
        <ArsArsenal makeQuery={makeQuery} onChange={this._onChange} picked={picked} url={url} />
    )
  },

  _onChange(photo_id) {
    this.props.onChange({ photo_id })
  }
})
romangetman commented 7 years ago

Ok, this kinda works, but the upon clicking the "Select image" button the selection dialog appears and I start getting all sorts of errors. Every keystroke in the search input field produces a Cannot read property 'value' of undefined error and none of the buttons work.

Should this work with the latest versions of both colonel-kurtz and ars-arsenal? Mind you, I'm working off the colonel-kurtz example script.

romangetman commented 7 years ago

Resolved by installing ars-arsenal via npm versus cloning it's repo into the project. Thanks for the integration example!

nhunzaker commented 7 years ago

Cool. I wonder if cloning the repo caused two Reacts to get pulled in. Either way, I'm glad you were able to get it to work!