Block context

[jbmoelker]

User story

As a developer, I want to know the context of a Block, so that I can use that for its configuration.

For example: when you know where an ImageBlock is on the page, you can configure its image loading strategy (instantly when on top, lazily when lower on the page). And similar behaviour for lazy embeds (#107), and native video element preload: auto|none (#33).

Possible solution

Right now, Blocks are registered in and included from src/blocks/Blocks.astro, like:

<SomeContentBlock 
  block={ dataFromCms }
/>

We could add a context like so:

<SomeContentBlock 
  block={ dataFromCms }
  context={{
    location: 'header|body|footer',
    index: 0...n,
  }}
/>

Page models have a bodyBlocks field, and could be extended with a headerBlocks and footerBlocks field in the future. This could then be passed in the context as location like in the example above.

This concept is based on discussion with @Siilwyn about Shopify: Announcing new Liquid features for better web performance:

New Liquid section properties [...] We have three new properties for you (docs):

• section.index - the 1-based index of the section within its contextual location
• section.index0 - the 0-based index of the section within its contextual location
• section.location - the section’s location (can also be thought of as the section’s context or scope)