Accessing parent block

[bakura10]

Hi,

I am reviewing some of the elements in our themes to figure out how to implement some things. Contrary to the sample implementation, I would prefer having a lot of focused components. Sometimes, it might be useful from an inner component to get access to the parent block.

For instance, we might imagine a "Icons group" block with some presentational settings, that could accept "Text with icon" block. How those inner block would render would depend of the parent setting.

{% if block.parent_block.settings.something %}
  // Render myself
{% else %}
  // Render myself
{% endif %}

I think many use cases could be achieved with a combination of CSS and container queries, but there might be trickier use case that would probably need that.

[moxiethunder]

@bakura10 we just ran into this exact situation, where we have statically rendered blocks, and we wanted to render either a thumbnail or some other markup in the child block based on a setting in the statically rendered block. So it might look like this:

{%- content_for 'block', type: "_static-block-name", id: "static-block-id", render: "thumbnail" -%}
{%- content_for 'block', type: "_static-block-name", id: "static-block-id", render: "content" -%}

The issue is that if, in the statically rendered block, you do the following, {%- content_for 'blocks' -%}, there is no way to pass that render prop value to content_for 'blocks' when rendering the nested blocks.

The workaround we found is to use Shopify's splitting pattern and a forloop with modulo. So in the statically rendered block you would do something like this:

{%- capture blocks -%}
  {%- content_for 'blocks' -%}
{%- endcapture -%}

{%- assign blocks_array = blocks | strip | split: '<!--@split-->' -%}

{%- for item in blocks_array -%}
  {%- assign m = forloop.index0 | modulo: 2 -%}
  
  {%- if mod == 0 and render == "thumbnail" -%}
    {{ item }}
  {%- elsif mod == 1 and render == 'content -%}
    {{ item }}
  {%- endif -%}

Then in the nested block you would do something like this:

<div class="block-content" {{ block.shopify_attributes }}>
  I'm content
</div>
<!--@split-->
<div class="block-thumbnail" {{ block.shopify_attributes }}>
  I'm a thumbnail
</div>

It's pretty jank, but it works. It would be much better to have access to the child_block.settings from the parent and parent_block.settings from the child block. In addition, block.index and a proper block.type would be nice as well. These seem like fundamental attributes to have access to. I don't know though, maybe it's harder than it seems, but as it is now this seems like a half-baked, but great idea.

[iamkeir]

Also experienced this limitation, but in the reverse; wanted to access a theme block's block.settings in a parent section:

Theme block: example.liquid

{% schema %}
{
  "name": "Example",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Title",
      "default": "Testing"
    }
  ],
  "presets": [
    {
      "name": "Example",
      "settings": {
      }
    }
  ]
}
{% endschema %}

Section: test.liquid

{% for block in section.blocks %}
  {{ block.id }}, {{ block.settings.title }}
{% endfor %}

{% schema %}
{
  "name": "Test",
  "blocks": [
    {
      "type": "example",
    }
  ]
}
{% endschema %}

In this example, block.id works but block.settings.title is blank.

So, yes, it would be great to be able to access theme block settings at the parent level, and parent settings within the theme block.

Weirdly, noticed all theme block settings are shown in JSON in content_for_header so that might imply it should be feasible.