List of Body Markdown

Newbie question. How do you add markdown to each of the 4 text blocks below the header on the example sites product page for gatsby-starter-netlify-cms?

I thought it would be as simple as changing:
label: Text, name: text, widget: text
to :
label: Text, name: body, widget: markdown

But, I think this may not be possible as they are nested within:
{label: Intro, name: intro, widget: object, fields: [{label: Heading, name: heading, widget: string}, {label: Description, name: description, widget: text}, {label: Blurbs, name: blurbs, widget: list, fields: [{label: Image, name: image, widget: image}, {label: Text, name: text, widget: text}]}]}

(See: https://github.com/netlify-templates/gatsby-starter-netlify-cms/blob/master/static/admin/config.yml)

When I did this, my markdown didn’t appear at all or didn’t format at all. I then found out that I can only use body markdown at the top level, which I guess means removing the parent List widget and its parent object widget.

As my client will need to create the text blocks (and any additional ones) via the CMS admin. Am I forced to create all formattable elements as separate fields:? and dictate exactly how many text block they can have?

I’ve been trying to work this out all day, so any help is greatly appreciated.

Try this:

- label: Intro
  name: intro
  widget: object
  fields:
    - {label: Heading, name: heading, widget: string}
    - {label: Description, name: description, widget: text}
    - label: Blurbs
      name: blurbs
      widget: list
      fields:
        - {label: Image, name: image, widget: image}
        - {label: Text, name: text, widget: markdown}

I’m pretty sure the problem is that name: body is reserved to export markdown outside of the frontmatter block. It’s actually easier to leave the name as it is.

2 Likes

Thanks for the reply.

I did this but get markdown code on the CMS right preview panel and on the final website.

The docs say:

Please note: The markdown widget outputs a raw markdown string. Your static site generator may or may not render the markdown to HTML automatically. Consult with your static site generator’s documentation for more information about rendering markdown.

Is this the issue?

This post talks about the issue:

The gatsby-transformer-remark transform will only transform the markdown within the body of your .md file. It does not know to transform fields within your frontmatter .

As you can see from the query results above, your html is empty because the body is empty.

But it’s still not clear for to get markdownRemark on a list widget. Is it not possible?

Seems silly that any widget in a list can’t have markdown (or Richtext). Maybe I need to make this a collection instead? But then how do you put a collection withing a section of a page?

Getting closer after finding this post. https://github.com/gatsbyjs/gatsby/issues/5021#ref-commit-dcc0556

But still can’t work it out.