hey there,
I’ve recently dug into NetlifyCMS and its custom previews, and am hitting a small road block (hopefully just a bump)
I have a list field on the home page allowing the adding/maintaining of object fields, called Blocks Herefor trying to replicate CMS Blocks as we know them, each block can be be of a different types etc…
Here the blocks themselves have a body field using the markdown widget. I’m trying to render it using the forWidget method. Now the documentation only illustrate the use of forWidget on let’s say “root” fields, fields attached directly to the collection/file being previewed.
Now this field, is not on the page, but inside an object in a list. What would be the best practice, to run the forWidget method (or any other) in order to render this widget. Here’s I’m passing it as a prop for simplicity, but using inside the component would be ideal.
The following is evidently not working, as trying to use forWidget on a non-existing body “root” field from the homepage.
class HomepagePreview extends React.Component {
render() {
var entry = this.props.entry;
return (
<div className="p-4">
{this.props.widgetsFor('blocks').map((block, index) => (
<BlockAccordeon data={block} body={this.props.widgetFor('body')} />
))}
</div>
)
}
}
I guess the straight forward solution would be to create basic Custom Widgets for each layer of blocks data (one the “blocks”, one for “one block” etc…) but I’d rather avoid creating a Custom Widget of each layer of the “blocks levels” I’m going into.
For examples, here, I have blocks, one of those with type “accordeon” can contain a list of items, and in those items, I want to render the markdown widget. I think this would mean creating a Custom Widget for “Blocks”, a Custom Widget for “Block–accordeon” and another one for “Block–accordeon__item”.
I’d rather not do that but if that’s the best practice, I’d be happy to do so.
Thanks for your help! 