Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Named slots possibly clashing with {{ slot }} variable and not rendering content to page. #8437

Open
brew-olly opened this issue Jul 12, 2023 · 0 comments
Labels

Comments

@brew-olly
Copy link

brew-olly commented Jul 12, 2023

Bug description

When using a partial with named slots, but no generic {{ slot }}, if you have a partial within that partial that has {{ slot }} then content does not appear to be rendered to the page. It's hard to explain, so here's some of the code I was using.

Here is my _accordion partial that has the named slots I use to drop content into:

<!-- components/_accordion.antlers.html -->
<div
  :aria-expanded="openAccordion === {{ index }}"
  aria-label="Accordion-{{ index }}"
  id="accordion-{{ index }}"
>
  {{ partial:layout/flex_column class="bg-white shadow-cards rounded p-6 gap-2" }}
      <div
          class="flex items-center justify-between cursor-pointer"
          x-on:click="openAccordion === {{ index }} ? openAccordion = null : openAccordion = {{ index }}"
      >
          {{ slot:title }}
          {{ slot:icon }}
      </div>
      <div
          :class="openAccordion === {{ index }} ? 'max-h-96' : 'max-h-12'"
          class="overflow-hidden transition-all duration-500 ease-in-out "
          :aria-hidden="openAccordion !== {{ index }}"
          :aria-labelledby="'accordion-{{ index }}'"
      >
          {{ slot:body }}
      </div>
   {{ /partial:layout/flex_column }}
</div>

This partial does not use a generic {{ slot }} as I specifically only want content to be in named slots.

However, my _flex_column partial does use the generic {{ slot }} syntax:

<!-- layout/_flex_column.antlers.html -->
<div class="{{ 'flex flex-col {{ class }}' | tw_merge}}">
    {{ slot }}
</div>

This is my code attempting to make use of the named slots (but the content not being displayed on the page):

{{ partial:components/accordion index="{{ index }}"}}
    {{ slot:title }}
        {{ partial:typography/h2 content="{{ accordion_title }}" class="text-[22px] font-bold"}}
    {{ /slot:title }}

    {{ slot:icon }}
        <button 
        type="button" 
        class="text-xl transition-all duration-300 ease-in-out" 
        :class="openAccordion === {{ index }} ? 'rotate-45' : 'rotate-0'"
        aria-controls="Accordion-{{ index }}"
        >
            {{ svg src="plus" class="fill-gray-500" }}
        </button>
    {{ /slot:icon }}

    {{ slot:body}}
        {{ partial:typography/p content="{{ accordion_body }}"}}
    {{ /slot:body}}
{{ /partial:components/accordion }}

The thought being that anything passed into the named slots in the accordion partial will be rendered inside my flex container partial. However when trying to use the named slots it just rendered my components without any content, even though it is making use of the named slots:

empty-modules

I can see by dumping the data that it is being passed through to the accordion partial:

dumped-data

The only way I could resolve this was by switching the _flex_column partial with a div and applying my flex classes on that, thereby removing the generic {{ slot }} entirely.

How to reproduce

Create an _accordion.antlers.html partial and a _flex_column.antlers.html partial using my code above, changing the file path on the partials if your folder structure differs.

It uses AlpineJS to handle the accordion interaction so remove that code if you need to, or install the dependency.

Use the _accordion partial and pass some data into the named slots to see if it renders content to the page.

Logs

No response

Environment

Environment
Application Name: Statamic Peak
Laravel Version: 10.14.1
PHP Version: 8.2.5
Composer Version: 2.5.5
Environment: local
Debug Mode: ENABLED
URL: ceres-web.test
Maintenance Mode: OFF

Cache
Config: NOT CACHED
Events: NOT CACHED
Routes: NOT CACHED
Views: CACHED

Drivers
Broadcasting: log
Cache: statamic
Database: mysql
Logs: stack / single
Mail: smtp
Queue: sync
Session: file

Statamic
Addons: 6
Antlers: runtime
Stache Watcher: Enabled
Static Caching: Disabled
Version: 4.10.1 PRO

Statamic Addons
marcorieser/tailwind-merge-statamic: 0.2.0
studio1902/statamic-peak-browser-appearance: 3.2
studio1902/statamic-peak-commands: 2.1
studio1902/statamic-peak-seo: 3.0
studio1902/statamic-peak-tools: 3.2
xndbogdan/statamic-bard-text-color: 4.0.0

Installation

Starter Kit using via CLI

Antlers Parser

runtime (new)

Additional details

No response

@brew-olly brew-olly changed the title Named slots not rendering content to page in some cases. Named slots possibly clashing with {{ slot }} variable and not rendering content to page. Jul 12, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants