Slots, embed tag and block tag and stories

[welly]

Hello,

I'm having a little issue with a component I'm working on and am finding that a number of slot content isn't showing in the component story in storybook.

Part of my component twig template looks as follows:

    <div class="o-footer__column o-footer__column--contact">
      <div class="o-footer__inner">
        <h4 class="o-footer__heading heading-5">Contact us</h4>
        {% if telephone %}
        <p class="o-footer__telephone">
          <a href="tel:{{ telephone }}">{{ telephone }}</a>
        </p>
        {% endif %}

        {% if email_address %}
          <p class="o-footer__email">
            <a href="mailto:{{ email_address }}">{{ email_address }}</a>
          </p>
        {% endif %}

        {% block contact_us %}{% endblock %}
      </div>
    </div>

The component.yml file looks like:

$schema: https://git.drupalcode.org/project/drupal/-/raw/HEAD/core/assets/schemas/v1/metadata.schema.json

# The human-readable name.
name: Footer

# Status can be: "experimental", "stable", "deprecated", "obsolete".
status: experimental

# Schema for the props. We support www.json-schema.org. Learn more about the
# syntax there.
props:
  type: object
  properties:
    copyright:
      label: 'Copyright text'
      type: string
      examples:
        - Copyright 2025 

    email_address:
      label: 'Email address'
      type: string
      examples:
        - information@example.com

    telephone:
      label: 'Phone number'
      type: string
      examples:
        - +44 (0)123 45678910

    facebook:
      label: 'Facebook URL'
      type: string
      examples:
        - https://www.facebook.com/example/

    instagram:
      label: 'Instagram URL'
      type: string
      examples:
        - https://www.instagram.com/example/

    twitter:
      label: 'X (formally Twitter) URL'
      type: string
      examples:
        - https://twitter.com/example/

    youtube:
      label: 'YouTube URL'
      type: string
      examples:
        - https://www.youtube.com/user/example/

slots:
  address:
    title: Address
    examples:
      - <b>Organisation</b><br>
        Address<br>
        Address<br>
        Town

  contact_us:
    title: Contact us
    examples:
      - <ul>
          <li><a href="#">+44 (0)1234 5678910</a></li>
          <li><a href="#">information@example.com</a></li>
          <li><a href="#">Staff search</a></li>
          <li><a href="#">Footer link lorem ipsum dolor</a></li>
        </ul>

  quick_links:
    title: Quick links
    examples:
      - <ul>
          <li><a href="#">Footer link lorem ipsum dolor sit amet consectetur</a></li>
          <li><a href="#">Footer link lorem ipsum dolor</a></li>
          <li><a href="#">Footer link lorem ipsum dolor sit amet consectetur</a></li>
          <li><a href="#">Footer link lorem ipsum dolor</a></li>
          <li><a href="#">Footer link lorem ipsum dolor</a></li>
        </ul>

  connect:
    title: Connect with us
    examples:
      - <ul>
          <li><a href="#">Download our app</a></li>
          <li><a href="#">Social media</a></li>
          <li><a href="#">Accessibility</a></li>
          <li><a href="#">Cookies and privacy</a></li>
          <li><a href="#">Modern Slavery Act Statement [PDF 161KB]</a></li>
        </ul>

My Drupal page inserts the slot content like:

  {% embed 'example:footer' with {
    copyright: footer.copyright,
    telephone: footer.telephone,
    email_address: footer.email_address,
    social_media: social_media,
  } %}

    {% block address %}
      {{ config_pages_field('global', 'field_address', 'full') }}
    {% endblock %}

    {% block contact_us %}
      {{ drupal_menu('footer-contact', expand=false) }}
    {% endblock %}

    {% block quick_links %}
      {{ drupal_menu('footer-quick-links', expand=false) }}
    {% endblock %}

    {% block connect %}
      {{ drupal_menu('footer-quick-links', expand=false) }}
    {% endblock %}

  {% endembed %}
</div>

Unfortunately when I view the story in storybook, where I'm using {% block address %} etc. in the component.twig file, I see nothing.

Would welcome any advice!

Thanks

[iberdinsky-skilld]

could you please point which twi(n)g plugin enabled for you?

[iberdinsky-skilld]

i think should be slot output in component Twig
Not {% block contact_us %}{% endblock %} but {% block contact_us %} {{ contact_us }} {% endblock %}