Showing Unpublished Block Status in Optimizely CMS 12 ContentArea

Introduction

One of the most common editor complaints in Optimizely CMS is that it’s not obvious when a block inside a ContentArea has unpublished changes. By default, editors can only see those drafts if they preview the block itself (not the page that contains it). This leads to confusion, because the page looks “finished” but actually contains hidden drafts.

In this post, I’ll walk through how we solved this by decorating ContentArea items in the CMS UI so editors can instantly see the status of each block (Draft, Scheduled, Awaiting Approval, etc.) without leaving the page.

Problem

• Draft blocks inside a ContentArea aren’t visible in page preview until they’re published.
• Editors have no indication in All Properties view that a block has unpublished changes.
• Status information (Draft, Awaiting Approval, Rejected, etc.) is stored in the CMS, but not surfaced in the editor UI.

Solution Overview

We extended the ContentArea editor with a custom Dojo widget and a small API controller:

1. API Controller (/api/blockstatus)

   • Returns the latest VersionStatus for a block.
   • Maps raw enum values into friendly labels (e.g. CheckedOut → “Draft (in progress)”).
   • Also returns last saved date and changed by user for hover tooltips.
   
   

2. Dojo Widget (poc/editors/ContentAreaWithStatus)

   • Overrides the default ContentAreaEditor.
   • Calls the batch API to fetch statuses for all blocks in a ContentArea.
   • Adds a small badge next to each block item with a friendly label.
   • Optionally tints the whole row with a soft background color for visibility.
   • Shows a tooltip on hover: “Draft (in progress) · Last edited by Jane Doe on 1 Sep 2025, 15:22”.
   
   

3. EditorDescriptor

   • Applies globally to all ContentArea properties, no [UIHint] required.
   • Ensures editors always see status indicators wherever a ContentArea is used.
   
   

4. CSS (color variants)

     
   	  /* Base marker when a non-published status is present */
         .poc-unpublished-block {
             position: relative;
         }
   
         /* Badge base */
         .poc-indicator {
             margin-left: 6px;
             font-size: 11px;
             color: #fff;
             padding: 2px 6px;
             border-radius: 3px;
             font-weight: 500;
         }
         
         /* Badge colors */
         .poc-badge--yellow {background: #ffc107; color: #000;}
         /* Drafts */
         .poc-badge--orange {background: #fd7e14;}
         /* Awaiting approval */
         .poc-badge--red {background: #dc3545;} /* Rejected */
         .poc-badge--blue {background: #0d6efd;} /* Scheduled */
         .poc-badge--gray {background: #6c757d;} /* Archived/Not created */
   
         /* Optional row tint (used when TINT_ROW = true) */
         .poc-row--yellow {background: #fff8db;} /* soft yellow */
         .poc-row--orange {background: #fff0e0;} /* soft orange */
         .poc-row--red {background: #ffe6e9;} /* soft red */
         .poc-row--blue {background: #eaf2ff;} /* soft blue */
         .poc-row--gray {background: #f2f3f5;} /* soft gray */
   	

Status Mapping

We mapped Optimizely’s VersionStatus enum into user-friendly labels and colors:

• Draft (in progress) → Yellow badge
• Draft (awaiting publish) → Yellow badge
• Awaiting Approval → Orange badge
• Rejected → Red badge
• Scheduled → Blue badge
• Archived / Not created → Gray badge
• Published → No badge (treated as “clean”)

This color coding makes it immediately obvious which blocks need attention.

Benefits

• Editors see at a glance which blocks are drafts, scheduled, awaiting approval, etc.
• No hidden surprises in Preview — the status is visible directly in All Properties.
• Better workflow visibility: tooltips show who last edited the block and when.
• Performance friendly: uses a single batch API call per ContentArea.
• Global: applies automatically to all ContentAreas.

Conclusion

By extending the ContentArea editor with a small Dojo widget and a lightweight API, we’ve made unpublished block statuses visible, color-coded, and editor-friendly. This simple improvement reduces confusion, saves time, and gives editors more confidence before publishing.