Lava Shortcodes and Inversion of Control

Overview

This doc outlines two primary patterns we use for Lava shortcodes at TWMC:

• Static HTML shortcodes for centralized, site-wide content updates.
• Dynamic parameterized shortcodes for rapid, flexible component deployment.

Inversion of Control (IoC)

Inversion of Control (IoC): A design principle where the responsibility for content rendering is shifted from individual pages/components to centralized shortcodes, enabling global or per-instance control without hardcoding content into page layouts.

🪜 There are levels to this

Static shortcode

most fundamental execution of IoC; dumps content 100% using IoC but is britel in terms of flexivbility through reusable components.

Dynamic shortcode

dumps the template of the content but the component owns and draws the content on render as it passes into the UI component dynamically as addressed on the page. A step above static shortcodes in terms of IoC but more friendly in terms of Developer Experience (when creating new UI components from previous designs).

📐 Design Patterns: Static vs Dynamic

Static Shortcode Example: {[BigBag]}
Link to BigBag shorcode build in Rock Admin

Purpose:
One shortcode defines the rendered HTML. Any page that uses {[BigBag]} gets the same content. When the shortcode's definition is updated, all pages reflect the new content instantly.

Use Case:
A campus policy announcement with date changes, like a bag policy, that affects multiple pages.

Advantages:

• Centralized control
• Single update propagates site-wide
• Simple implementation

Tradeoffs:

• No per-page customization
• Any change affects all pages using the shortcode

---

🪒 Pattern: Dynamic Content Injection for Flexible Components

Dynamic Shortcode Example:

{[ctaBlock header:'Política de bolsos de gran tamaño' snippet:'La aplicación comienza el domingo 6 de julio | En toda la Iglesia' bg_color:'#ce8147' link:'https://thewoodlandsmethodist.org/facilities#heading-facilities1' button_text:'MÁS INFORMACIÓN']}

Purpose One shortcode markup, but content is supplied via parameters. Allows per-page customization while reusing component structure.

Use Case CTAs with unique messaging, colors, and links per ministry or event.

Advantages

• Fully customizable on a per-instance basis
• Fast component development
• Reusable markup structure

Tradeoffs

• No central update capability
• Possible content drift over time if spread across pages

⚖️ When to Use Which

Use Case	Static {[BigBag]}	Dynamic {[ctaBlock]}
Church-wide policy banner	✅	❌
Ministry-specific CTA with custom messaging	❌	✅
Event-specific CTA with unique date, color, button	❌	✅
Reusable policy footer or disclaimer	✅	❌

💡 Why We Use Inversion of Control for Content Management

By separating content control from page-level implementation, we reduce risk, improve publishing speed, and enable rapid site-wide updates without needing to edit individual pages.

• Static Shortcodes: Best for global content where consistency is critical.
• Dynamic Shortcodes: Best for custom, one-off, or page-specific components.

Example Shortcodes

Static Usage

{[BigBag]}

dumps in:

<section class="twmc-cta twmc-cta__traditional-enews" style="background-color: #ce8147;">
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-6 col-sm-offset-3">
        <div class="twmc-flex-container--cta2-enews">
          <div class="twmc-flex-item--cta2-enews--left">
            <h3 class="twmc-h3">Oversized Bag Policy</h3>
            <p class="twmc-p">
              Implementation begins Sunday, July 6 | Churchwide
            </p>
          </div>
          <div class="twmc-flex-item--cta2-enews--right">
            <a href="https://thewoodlandsmethodist.org/facilities#heading-facilities1" class="twmc--btn twmc--btn--white-enews">Learn More</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Dynamic Usage

{[ctaBlock header:'CTA Title' snippet:'CTA body text' bg_color:'#123456' link:'https://example.com' button_text:'Click Me']}

dumps in

<section class="twmc-cta twmc-cta__traditional-enews" style="background-color: {{ bg_color }};">
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-6 col-sm-offset-3">
        <div class="twmc-flex-container--cta2-enews">
          <div class="twmc-flex-item--cta2-enews--left">
            <h3 class="twmc-h3">{{ header }}</h3>
            <p class="twmc-p">{{ snippet }}</p>
          </div>
          <div class="twmc-flex-item--cta2-enews--right">
            <a href="{{ link }}" class="twmc--btn twmc--btn--white-enews">{{ button_text }}</a>
           </div>
        </div>
      </div>
    </div>
  </div>
</section>

🏄‍♂️ Quick Summary

Name	Type	Use When	CMS Link
BigBag	Static HTML Shortcode	Church-wide (used multiple places) but specific to a single slice of content	View in CMS
ctaBlock	Dynamic Parameterized CTA	Reusable Design ELement CTA block with per-page content	View in CMS