ACF Media Block Issues

[sloyer]

Most blocks work out of the box besides BlockMediaText - which just wants width/height requirements

But ACF Media Text will only return the ID back there for we can't get an image url returned.

Is there a way around this or a solution?

[sloyer]

Here is my Block data, does everything seem to be in order here?
{ "attributesJSON": "{\"id\":\"block_606e4cc9f259e\",\"name\":\"acf\\/acf-media-text\",\"data\":{\"title\":\"This is the ACF title\",\"_title\":\"field_601bfba98c0c8\",\"body\":\"Body text\",\"_body\":\"field_601bfbcb8c0c9\",\"ctaText\":\"Button Text\",\"_ctaText\":\"field_601bfbd78c0ca\",\"ctaUrl\":\"https:\\/\\/reddit.com\",\"_ctaUrl\":\"field_601bfbf38c0cb\",\"image\":328,\"_image\":\"field_601bfc288c0cc\"},\"align\":\"wide\",\"mode\":\"edit\"}", "dynamicContent": "", "name": "acf/acf-media-text", "attributes": { "name": "acf/acf-media-text", "id": "block_606e4cc9f259e" }

[sloyer]

So I dont see anywhere where we fetch the url from the ID.
With Gatsby, we do this - I am still new to NextJS so im not sure the equivalent to useStaticQuery

`// import React from 'react'
import {graphql, useStaticQuery} from 'gatsby'

export const useGetImg = (id, getCollection = false) => {
  let img = {}

  const {allWpMediaItem} = useStaticQuery(graphql`
    query basicMediaQueryHook {
      allWpMediaItem(limit: 1000) {
        nodes {
          altText
          databaseId
          sourceUrl
          srcSet
          sizes
          title
        }
      }
    }
  `)

  if (getCollection) {
    return allWpMediaItem.nodes
  } else {
    let pos = allWpMediaItem.nodes
      .map((item) => {
        return item.databaseId
      })
      .indexOf(id)

    if (pos > -1) {
      img.src = allWpMediaItem.nodes[pos].sourceUrl
      img.srcSet = allWpMediaItem.nodes[pos].srcSet
      // img.sizes = media.allWpMediaItem.nodes[pos].sizes
      img.sizes = '(max-width: 800px) 100w, 50vw'
      img.alt = allWpMediaItem.nodes[pos].altText
    } else {
      img = null
    }

    return img
  }
}

export default useGetImg
`

[reinis7]

If you are making your custom ACF block to show on the page, you need to make your own block in the projects.
All blocks are rendered through displayBlocks function. You will need to add condition to render your "acf-media-text" conditionally.

[sloyer]

This is just using the existing Custom block provided by the theme default.

[yoryi]

@reinis7 is right. @sloyer Please look at the Blocks component to display blocks where displayBlocks function exists