Skip to content
pagecraft

The Class Marker System

Audience: Site Builder.

When you author a custom section by hand (or edit an existing one through PageCraft → Sections → Edit), you're writing plain HTML that gets stored in the database. To make that HTML editable inside ContentBox — text inline-editable, images droppable, columns sortable — the markup needs ContentBox-specific class names like is-subblock, edit, is-container, is-builder. Asking section authors to memorise those is an ergonomics problem.

PageCraft solves it with a small set of marker classes. You add the marker; PageCraft rewrites the marker into the verbose ContentBox classes when it generates pagecraft-sections.js. Your stored HTML stays clean and portable; the editor scaffolding is added at generation time.

The four markers

pc-edit

Marks any element as a text or image editing zone. The class is left in place and is-subblock edit is appended to the same element.

<!-- Author writes -->
<h2 class="pc-edit">Section Heading</h2>

<!-- pagecraft-sections.js receives -->
<h2 class="pc-edit is-subblock edit">Section Heading</h2>

Use on every heading, paragraph, and standalone span the editor should be able to click into.

pc-img

Marks an image wrapper. The class stays on the wrapper, but is-subblock edit is injected onto the <img> element inside — not on the wrapper itself. That's a deliberate ContentBox quirk: image editing handles attach to the image element, not its parent.

<!-- Author writes -->
<div class="pc-img"><img src="hero.jpg" alt=""></div>

<!-- Generated -->
<div class="pc-img"><img class="is-subblock edit" src="hero.jpg" alt=""></div>

pc-container

Marks a layout container. PageCraft appends is-container v2 is-content-1200 is-builder so ContentBox treats the element as a content boundary and a drop zone for nested rows/columns. Use this on the wrapper around a row of columns inside an is-section.

<!-- Author writes -->
<div class="pc-container">
    <div class="row">…</div>
</div>

<!-- Generated -->
<div class="pc-container is-container v2 is-content-1200 is-builder">
    <div class="row">…</div>
</div>

pc-section-template-embed

Marker for the bundled Dynamic Content section. It's styling-only — it scopes the placeholder's CSS so the dashed-border placeholder visual doesn't leak into other sections. No class rewriting happens; the marker is purely a CSS hook.

Auto-injections

In addition to the explicit markers, PageCraft auto-fills two pieces of ContentBox structure if they're missing on the section's root element:

  • If the root doesn't have is-section, it gets is-section is-box is-section-auto added.
  • If the root doesn't already start with an <div class="is-overlay"></div> first child, one is inserted. (ContentBox uses the overlay for drag/select hit testing.)

Authors can ignore both — write a plain <div> as your section root and PageCraft fills in the boilerplate.

Why this exists

Two practical reasons:

  1. Portability. A section's HTML in the DB is the same shape you'd find in any static HTML template — copy/pasteable into other systems, easy to lint, easy to read at a glance.
  2. Forwards compatibility. ContentBox's class names have changed across major versions (is-subblock was renamed at one point). Centralising the rewrite means a future ContentBox upgrade only needs SectionFileWriter updated, not every stored section.

Live examples

Open themes/user/pagecraft/developer-reference.html in a browser. It contains nine annotated section examples — two-column layouts, unequal columns, hero with background image, locked footer, multi-row sections, plugin embeds — each showing the marker classes in their author form alongside the generated ContentBox classes.

Reference

  • Rewrite logic: Services/SectionFileWriter.php — pc-edit (lines 81–85), pc-img (lines 88–100), pc-container (lines 102–111), auto-injections (lines 113–154)
  • Annotated examples: themes/user/pagecraft/developer-reference.html