Documentation on Bard field sets

[kyle-cyberprairie]

Hello, I'm unable to access the code and mode variables in my code block field, as described in this documentation

This is what it suggests:

{{ code_snippet }}
<pre class="language-{{ mode }}"><code>{{ code }}</code></pre>
{{ /code_snippet }}

This is what I'm doing in my own template:

<div class="wrapper">
{{ code_field }}
<div class="window">
    <div class="code_snippet min-h-24 w-full bg-slate-400 text-black p-4">
        
        <pre><code class="language-{{ mode }}">{{ code }}</code></pre>
        
    </div>
</div>
{{ /code_field }}
</div>

The above is used with a Bard field set, simply as:

{{ bard_field }}
        {{ partial src="sets/{type}" }}
 {{ /bard_field }}

Where type is 'code_set' in folder sets/code_set.antlers.html

My post blueprint looks like:

sets:
   extras:
      display: Extras
      instructions: null
      icon: addon-boxes-stack
      sets:
        code_set:
          display: 'Code Block with Preview'
          instructions: null
          icon: programming-script-code
          fields:
            -
              handle: code_field
              field:
                theme: material
                mode: htmlmixed
                mode_selectable: true
                indent_type: tabs
                indent_size: 4
                key_map: default
                line_numbers: true
                line_wrapping: true
                antlers: true
                type: code
                display: 'Code Field'
                icon: code
                listable: hidden
                instructions_position: above
                visibility: visible
                replicator_preview: true
                hide_display: false

And my post content looks like:

title: 'Example Post'
bard_field:
  -
   type: set
    attrs:
      id: lrwbnji2
      values:
        type: code_set
        code_field:
          code: |-
            <div class="w-full h-24 flex items-center justify-center">
              <div class="text-3xl">
            	<button class="bg-background hover:bg-secondary hover:animate-bounce p-8">click me</button>
              </div>
            </div>
          mode: yaml-frontmatter

When I view the page, I see the empty wrapper around where a code block should be. So I know the template is loading properly.

The only way to get this code to load, is to change the sets/code_set.antlers template like so:

<div class="window">
    <div class="code_snippet min-h-24 w-full bg-slate-400 text-black p-4">
        
        <pre><code>{{ code_field }}</code></pre>
        
    </div>
</div>

But this means I lose the 'mode' variable, which is the whole reason I'm going through all this trouble.

I've also tried doing code_field:code and code_field:mode in their respective places, but this again results in a blank output.

I have tried using this field template in a regular code field, instead of a Bard set, and it works. This tells me Bard is not able to see the variables within the code field.

Has anyone else encountered this or similar?

[edalzell]

Sounds like a bug, what version of Statamic are you on?