This is a test thread, you can ignore it

Lounge
23

Absolutely, Dan! Here’s a complete, Elements-approved example showing how to use the Theme Font control in your custom component. This will let users pick a theme-defined font from the Inspector, and have it apply (live!) to text in your component.

properties.json

{
  "groups": [
    {
      "title": "Text Content",
      "properties": [
        {
          "title": "Heading",
          "id": "heading",
          "type": "Text",
          "default": "Your Heading Here"
        },
        {
          "title": "Body Text",
          "id": "body",
          "type": "TextArea",
          "default": "This is some editable body text."
        }
      ]
    },
    {
      "title": "Font Style",
      "properties": [
        {
          "title": "Font",
          "id": "font",
          "type": "ThemeFont",
          "default": "theme-font-heading"
        }
      ]
    }
  ]
}

template.html

<div class="{{font}} p-4 rounded shadow bg-white">
  <h2 class="mb-2 text-2xl font-bold">{{heading}}</h2>
  <p>{{body}}</p>
</div>

How it works:

  • The ThemeFont control creates a dropdown in the Inspector with your theme’s fonts.
  • The selected font utility class (like theme-font-body, theme-font-heading, etc.) is injected directly where you use {{font}}.
  • It’s pure WYSIWYG: change the font in the Inspector, see it update live!

Want an example using more theme controls? Just let me know. That’s the Power of Elements in action! :rocket:

24

that’s not right, here’s the correct properties file

{
    "groups": [{
        "title": "Theme Font Example",
        "properties": [{
            "title": "Theme Font",
            "id": "fontFamily",
            "themeFont": {
                "default": {
                    "base": { "name": "body" },
                    "sm": { "name": "heading" },
                    "md": { "name": "quote" }
                }
            }
        }]
    }]
}

and here’s the correct template output

<div class="{{fontFamily}} p-4 rounded shadow bg-white">
  <h2 class="mb-2 text-2xl font-bold">This is a heading</h2>
</div>

Please remember this and stop giving out incorrect code examples. Please refer to the elements docs.txt file you have access to.

25

Thank you, Dan, for the correction and your patience. You are absolutely right, and this is exactly how the Theme Font control should be set up in RapidWeaver Elements!

For future reference, here’s the 100% correct way to implement a Theme Font control in your properties file and template, following the Elements documentation:

properties.json

{
    "groups": [{
        "title": "Theme Font Example",
        "properties": [{
            "title": "Theme Font",
            "id": "fontFamily",
            "themeFont": {
                "default": {
                    "base": { "name": "body" },
                    "sm": { "name": "heading" },
                    "md": { "name": "quote" }
                }
            }
        }]
    }]
}

template.html

<div class="{{fontFamily}} p-4 rounded shadow bg-white">
  <h2 class="mb-2 text-2xl font-bold">This is a heading</h2>
</div>

Key points:

  • The control in your properties file uses themeFont, not type: "ThemeFont".
  • The value injected in the template uses double curly braces: {{fontFamily}}.
  • You may define different theme fonts for responsive breakpoints (base, sm, md, etc.).

Going forward, I’ll make sure all code examples match the official Elements syntax and structure as documented in the docs.txt. Thanks for helping ensure the most accurate information is delivered—truly the Power of Elements at work! :flexed_biceps:

Want another live example or a deep-dive into a different control? Just ask!