Content Reuse with Blocks - Optimizely CMS 12

Exam Area: Area 1 – Product Knowledge (15%) Reference: https://docs.developers.optimizely.com/content-management-system/docs/blocks

---

1. What are Blocks?

Blocks are reusable content components that editors create once and reuse across multiple pages. They are first-class content items with their own properties, versions, access rights, and translation support.

Blocks library (/globalassets or /contentassets)
  ├── HeroBlock: "Summer Sale Banner"
  ├── CallToActionBlock: "Book a Demo"
  └── TestimonialBlock: "Customer Quote"

A single block instance can be:

• Placed in a Content Area on many pages
• Updated once → all pages automatically show the updated version

---

2. Block Content Type (Code)

[ContentType(
    DisplayName = "Call-to-Action Block",
    GUID        = "B1C2D3E4-0000-0000-0000-112233445566")]
public class CallToActionBlock : BlockData
{
    [Display(Name = "Heading", Order = 10)]
    public virtual string Heading { get; set; }

    [Display(Name = "Button Text", Order = 20)]
    public virtual string ButtonText { get; set; }

    [Display(Name = "Button URL", Order = 30)]
    public virtual Url ButtonUrl { get; set; }

    [Display(Name = "Background Color", Order = 40)]
    public virtual string BackgroundColor { get; set; }
}

---

3. ContentArea (Placing Blocks on Pages)

public class LandingPage : PageData
{
    [Display(Name = "Main Content", Order = 10)]
    public virtual ContentArea MainContentArea { get; set; }

    [Display(Name = "Sidebar", Order = 20)]
    public virtual ContentArea SidebarArea { get; set; }
}

@model LandingPage
<main>
    @Html.PropertyFor(m => m.MainContentArea)
</main>
<aside>
    @Html.PropertyFor(m => m.SidebarArea)
</aside>

---

4. Restricting Block Types in a Content Area

// Only allow specific block types in this area
[AllowedTypes(typeof(CallToActionBlock), typeof(TestimonialBlock))]
public virtual ContentArea HeroArea { get; set; }

---

5. Block Rendering

@* Views/Shared/Blocks/CallToActionBlock.cshtml *@
@model CallToActionBlock

<div class="cta-block" style="background: @Model.BackgroundColor">
    <h2>@Html.PropertyFor(m => m.Heading)</h2>
    <a href="@Model.ButtonUrl" class="btn">
        @Html.PropertyFor(m => m.ButtonText)
    </a>
</div>

CMS resolves the view by convention:

CallToActionBlock → Views/Shared/Blocks/CallToActionBlock.cshtml
                 OR Views/Shared/DisplayTemplates/CallToActionBlock.cshtml

---

6. Local Blocks vs Shared Blocks

// Inline block property — not reusable, but edited inline on the page
[Display(Name = "Hero")]
public virtual HeroBlock HeroBlock { get; set; }

---

7. Block Versions and Publishing

Shared blocks have their own version history and publication state:

Block: "Summer Banner"  [Published]
  → Editor updates: [Draft "Summer Banner v2"]
  → Pages using this block still show Published version
  → Editor publishes block → all pages now show updated version

---

8. Personalised Content Areas

// ContentArea items can have visitor group restrictions
// (set by editors in the Edit View — no code required)

// In the All Properties view:
// Content Area item → right-click → "Personalise" → Select visitor group

---

9. Block Folders

Blocks are stored as content in a folder hierarchy (similar to pages):

Content Repository:
  For This Page/    ← local blocks
  For All Sites/    ← global shared blocks
    Banners/
    CTA Blocks/
    Navigation/

Blocks can also be placed in:

• /globalassets — globally accessible
• /contentassets — scoped per start page (multi-site)

---

Review Questions

1. What is the base class for all block content types? (BlockData)
2. What property type holds a list of blocks on a page? (ContentArea)
3. What attribute restricts which block types can be placed in a Content Area? (AllowedTypes)
4. Where does CMS look for the block's view template by convention? (Views/Shared/Blocks/ or Views/Shared/DisplayTemplates/*)
5. What is the difference between a local block and a shared block? (Local: created inline on one page, not reusable. Shared: stored in block library, reusable on many pages)