Retrieving structured data from blocks

We can iterate the (Gutenberg) blocks in the post and extract the attributes from deep within the block structure, unlocking these attributes to be fed into any functionality in our site.

For instance, by extracting all the image URLs contained in the core/image blocks in a post, we can create an image carousel with all these images.

In addition, as the block's attributes now become widely accessible (outside of the block editor), we can truly consider these as structured content, and expose them via an API to power all our applications (such as a mobile app or a newsletter).

This allows us to treat blocks as the single source of truth for all our content, and distribute it across different mediums and apps following the COPE (“Create Once, Publish Everywhere”) strategy.

This tutorial lesson demonstrates how to retrieve the image URLs from all core/image blocks in a post.

Extracting the image URLs from all core/image blocks in a post permalink

This GraphQL query uses field blockFlattenedDataItems to fetch all blocks in the post (including inner blocks) while filtering them by core/image type. It then iterates all entries, extracts property attributes.url from each, and uses it to override the field value. Finally it removes duplicate URLs (for if two core/image blocks use the same image) via @arrayUnique:

query GetImageBlockImageURLs($postID: ID!) {
post(by: { id: $postID } ) {
coreImageURLs: blockFlattenedDataItems(
filterBy: { include: "core/image" }
)
@underEachArrayItem(
passValueOnwardsAs: "blockDataItem"
)
@applyField(
name: "_objectProperty"
arguments: {
object: $blockDataItem,
by: {
path: "attributes.url"
}
}
setResultInResponse: true
)
@arrayUnique
}
}

The response is:

{
"data": {
"post": {
"coreImageURLs": [
"https://d.pr/i/fW6V3V+",
"https://gatographql.lndo.site/wp-content/uploads/2022/05/GatoGraphQL-logo-1024x622.jpg",
"https://gatographql.lndo.site/wp-content/uploads/2022/05/GatoGraphQL-logo-suki-1024x598.png"
]
}
}
}

Extensions referenced in this tutorial permalink

  1. Field on Field permalink

    Manipulate the value of a field by applying some other field on it.

  2. Field Value Iteration and Manipulation permalink

    Iterate and manipulate the value elements of array and object fields.

  3. PHP Functions via Schema permalink

    Manipulate the field output using standard programming language functions available in PHP.