Kitchen Sink — Body Blocks
This page is a regression fixture: every CKEditor toolbar button and every nested-entry type registered on the body field appears below in toolbar order. Update the prose around a block when its shape changes; replace evergreen oEmbed URLs if they go dark.
Headings
The body field exposes Heading 2 through Heading 6 in the heading dropdown. The page title is the only h1.
Heading 2 — section
Body copy under an h2.
Heading 3 — subsection
Body copy under an h3.
Heading 4 — minor subsection
Body copy under an h4.
Heading 5 — rarely used
Body copy under an h5.
Heading 6 — rarely used
Body copy under an h6.
Inline formatting
The bold/italic/link toolbar buttons emit bold, italic, and anchor tags. Links accept either an external URL or — via the link-picker — an internal entry reference. Combinations like bold italic and bold link compose as expected.
Blockquote (native)
The blockquote button wraps the current paragraph in a native <blockquote>. For a styled, attributable pull quote, use the Pull Quote nested entry below instead.
A native blockquote. Body styling treats it as italicized with a left border. No attribution field — that's what Pull Quote is for.
Lists
Unordered list with one nested level:
- List Item #1
- List Item #2
- Nested item #2.A
- Nested item #2.B
- List Item #3
Ordered list with one nested level:
- List Item #1
- List Item #2
- Nested item #2.A
- Nested item #2.B
- List Item #3
Inline image (native)
Inline-image demo omitted on this fixture — upload a sample to the Media volume and use the Insert Image toolbar button to demo. The native output is a <figure class="image"> with caption + alt + alignment toolbar.
Table (native)
The Insert Table button creates a native <figure class="table"> with header row, optional caption, and per-cell properties. Templates own table styling — no full tableProperties config exposed in the editor.
| Column A | Column B | Column C |
|---|---|---|
| row 1a | row 1b | row 1c |
| row 2a | row 2b | row 2c |
| row 3a | row 3b | row 3c |
Media embed (oEmbed)
The Media Embed button accepts URLs from the providers wired in mediaEmbed.extraProviders on the body field config. CKEditor stores an <oembed url="…"> tag; the shared _partials/macros/oembed.twig macro turns it into provider iframe (or, for Twitter, a blockquote + widgets.js). Adding a provider is a three-layer change: macro + extraProviders + HTMLPurifier safe-iframe regex.
YouTube
Vimeo
Spotify
SoundCloud
Twitter / X
Nested entries
The createEntry button drops in a Matrix-style entry from the shared block library. Six block types are exposed in the body picker — four shown here; Audio and Video require sample assets and are omitted from this fixture.
Callout
Highlighted aside — labeled (e.g. TL;DR) with a CKEditor body for inline emphasis and links.
CTA
Call-to-action card — headline, optional summary, link (entry or URL), optional image.
Pull Quote
Styled, attributable quotation — distinct from the inline blockquote above.
A representative pull quote — distinct from the native blockquote above by virtue of attribution and styling.
Entry List
Query-driven listing of entries by type, with pagination.
Latest content
Mixed listing of articles and podcast episodes, latest first.
- The Waffle House Index and Keeping an Open Mind
- The Asymmetry of Bullsh*t and Lessons from Black Fandom
- The Dampener Effect and Cohesion at Work
- Shopping Cart Theory and Our Hero Complex
-
Off-White Paper No. 1.5: Distributed, Not Divided: Creating Cohesion in Activist Movements
Our first Off-White paper explored the importance of building cohesion irrespective of proximity, providing business leaders with tools and insight to build cohesion across four domains: environment, culture, technology, and rhythm. This same principle can be applied to social movements, which are increasingly distributed and require a great deal of cohesion in order to make widespread progress. While cohesion in a business setting is focused on increasing productivity, social movements require cohesion in order to build alignment and rally people together as a unified force. Activists create cohesion by building a shared narrative across the domains of environment, culture, technology, and rhythm. Cohesive activism allows for demands to be heard more clearly, to be taken more seriously, and ultimately to be implemented more thoroughly.
Audio
Audio omitted on this fixture — upload a sample audio asset to the Media volume to demo. Native CKE has no audio plugin, so audio always lives as a nested entry. Transcript and credit travel with the asset record.
Video
Video omitted on this fixture — upload a sample video asset to the Media volume to demo. Same reason as audio. Poster image, transcript, and credit travel with the asset.