InlineImage inline block - pass children with Gatsby Image

How do you pass Gatsby Image as a child of InlineImage when working with inline blocks?

Was following this tutorial, but got stuck when I tried to apply to inline blocks. Can’t seem to figure out what prop has childImageSharp on it.

Here’s my setup:

./src/pages/index.js

const Homepage = ({ data }) => {
 const [, form] = useJsonForm(data.dataJson)
 usePlugin(form)
 return (
   <>
     <InlineForm form={form} initialStatus='active'>
       <InlineBlocks name="rawJson.blocks" blocks={HOME_BLOCKS} />
     </InlineForm>
   </>
 )
}
export default Homepage

const HOME_BLOCKS = {
 copy: copyBlock,
 cover: coverBlock,
}

./src/blocks/cover.js

function Cover({ index }) {
  return (
      <div className={Styles.cover}>
        <InlineImage
          name="cover_image"
          parse={filename => `../assets/${filename}`}
          uploadDir={() => "./content/assets/"}
          previewSrc={formValues => {
            const preview =
              formValues.jsonNode.blocks[index].cover_image.childImageSharp
                .fluid.src
            return preview
          }}
          focusRing={false}
        >
          {props => (
            //Can't figure out what prop to pass here?
            <Img fluid={?.cover_image.childImageSharp.fluid} />
          )}
        </InlineImage>
      </div>
  )
}

export const coverBlock = {
  Component: ({ index, data }) => (
    <BlocksControls
      index={index}
      focusRing={{ offset: 0, borderRadius: 0 }}
      insetControls
    >
      <Cover index={index} {...data} />
    </BlocksControls>
  ),
  template: {
    label: "Cover",
    defaultItem: {
      _template: "cover",
      cover_image: "../assets/default.jpg",
    },
    fields: [],
  },
}

Hey @Alex, so in in the props passed to the child is the return value from your previewSrc function (which is that childImageSharp.fluid.src for the current block). I would also recommend providing a fallback source for the Img based on the data passed to the blocks.

- function Cover({ index }) {
+ function Cover({ data, index }) {
  return (
      <div className={Styles.cover}>
        <InlineImage
          name="cover_image"
          parse={filename => `../assets/${filename}`}
          uploadDir={() => "./content/assets/"}
          previewSrc={formValues => {
            const preview =
              formValues.jsonNode.blocks[index].cover_image.childImageSharp
                .fluid.src
            return preview
          }}
          focusRing={false}
        >
          {props => (
            //Can't figure out what prop to pass here?
-           <Img fluid={?.cover_image.childImageSharp.fluid} />
             /** Note the `data` path may be different*/
+           <Img fluid={props?.previewSrc || data.childImageSharp.fluid} />
          )}
        </InlineImage>
      </div>
  )
}

Let me know if that makes sense/works for you. I made a PR to update the documentation to try and communicate this better.

1 Like

Amazing! TYSM! @kendall

1 Like