How do I add additional information to block items?

In some cases, more data is needed than the default values provided on each block item. For example, a promotional image may require a call-to-action link, or a sale link in the header navigation needs a custom class to turn the text red. These features are possible through the use of custom attributes, which are set on each block item.

Once the attributes have been defined against an item, they can be accessed on the storefront:

{% set hero = block_item('homepage.hero') %}
<div class="relative w-full">
    {{ hero | raw }}
    <a href="{{ hero.href }}" class="absolute bottom-0 mb-10 mx-auto">{{ hero.additional('button_text') }}</a>
</div>