Rendering of a nested block

The CMS Questions
1

Hello support team,

I want to build a custom block (e.g. FAQ section) and insert another nested custom block (e.g. FAQ item). See blueprint screenshot for better visualization. Everything is already running pretty cool, but i stuck on the rendering of the nested block element.

I want to use different layouts for the FAQ section which can be defined in the blueprint (e.g. Three columns, Side-by-side, etc) and now I need this layout value in my nested block (FAQ item), because it has a different html markup.

Blueprint: FAQ Section

sc01
sc012370×1660 448 KB

Blueprint: FAQ Item

sc02
sc022370×1660 238 KB

This is the template for the custom parent block:
snippets/block/faq_section

$headline   = $block->content()->headline();
$blocks     = $block->content()->blocks()->toBlocks();
$layout     = $block->layout();

if ($layout == 'threecolumns'): ?>
<div class="bg-white">
  <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
    <h2 class="text-3xl font-extrabold text-gray-900 text-center">
      <?php echo $headline; ?>
    </h2>
    <div class="mt-12">
      <dl class="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:grid-rows-2 md:gap-x-8 md:gap-y-12 lg:grid-cols-3">
        <?php echo $blocks; ?>
      </dl>
    </div>
  </div>
</div><?php

if ($layout == 'sidebyside'): ?>
<div class="bg-gray-50">
  <div class="max-w-7xl mx-auto py-12 px-4 divide-y-2 divide-gray-200 sm:px-6 lg:py-16 lg:px-8">
    <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
      <?php echo $headline; ?>
    </h2>
    <div class="mt-6">
      <dl class="space-y-8 divide-y divide-gray-200">
      	<?php echo $blocks; ?>
      </dl>
    </div>
  </div>
</div>

And this is the template for the custom nested block:
snippets/block/faq_item

$layout = $block->parent()->content()->blocks()->toBlocks()->toArray()[0]['content']['layout'];

if ($layout == 'threecolumns'): ?>
<div>
	<dt class="text-lg leading-6 font-medium text-gray-900">
		<?php echo $block->question(); ?>
	</dt>
	<dd class="mt-2 text-base text-gray-500">
		<?php echo $block->answer(); ?>
	</dd>
</div><?php

if ($layout == 'sidebyside'): ?>
<div class="pt-6 md:grid md:grid-cols-12 md:gap-8">
  <dt class="text-base font-semibold text-gray-900 md:col-span-5">
    <?php echo $block->question(); ?>
  </dt>
  <dd class="mt-2 md:mt-0 md:col-span-7">
    <p class="text-base text-gray-500">
      <?php echo $block->answer(); ?>
    </p>
  </dd>
</div>

When I try to get the layout value in my faq_item via $block->parent()->content()->blocks()->toBlocks()->toArray()[0]['content']['layout'] it is running, but this is only possible as long as the faq_section is the first block element in my page, because I load index [0] from the array.

Are there other possibilities to get the layout variable in a nested block or other solutions to solve this? Basically, I want to use it to build a large tailwind library and need access to variables defined in a parent block.

Thanks in advance for your help!

1 Like
2

I would load the snippets for those blocks manually in your HTML code and then pass the layout object to each block snippet. There’s an example here how to load snippets manually and you can pass down any variable you need:

2 Likes
3

That worked perfectly. Thank you!