Day 12: Build Custom Content Blocks with Telex

On Day 3, you built your first block with Telex. Today, you’ll build blocks that solve real editorial problems — the kind of custom components your team wishes they had but never had the dev capacity to build.

Editorial blocks worth building

Think about the recurring editorial formats your publication uses. Here are prompts for three high-value blocks — pick at least one and build it in Telex:

Option A: Breaking News Banner

A "Breaking News" banner block for editors. Features:
- A bold red banner that stretches full width at the top of any post or page
- An urgency level selector in the editor: "Breaking", "Developing", "Updated"
- Each level has a different color (red, orange, blue)
- Fields for: headline text, timestamp (auto-fills with current time), and a short summary (2 lines max)
- A subtle pulse animation on "Breaking" level that stops after 5 seconds
- Mobile responsive — stacks cleanly on small screens
- A dismiss button so readers can close it

Design it to feel urgent but not overwhelming — credible news publication, not tabloid.

Option B: Reporter’s Notebook

A "Reporter's Notebook" block for behind-the-scenes editorial notes within an article. Features:
- A visually distinct container that's clearly separate from the main article text
- A header that says "Reporter's Notebook" with a small notepad icon
- The background should look like aged paper — slightly warm, with a subtle texture
- A field for the reporter's name and a small avatar/photo
- The text inside uses a slightly different font (more personal, like handwriting-influenced serif)
- An optional "context" label at the top (e.g., "Why this matters", "Behind the story", "Editor's note")
- Should feel like a trusted journalist sharing something extra with the reader

Option C: Source Attribution Card

A "Source Card" block that provides transparent attribution within an article. Features:
- A clean card showing where key claims or data in the article come from
- Fields for: source name, source type (government, academic, industry, leaked), date of data, link to original, and a reliability note
- A small icon that changes based on source type
- Collapsible — shows just "Sources (3)" by default, expands to show all cards on click
- Helps readers assess credibility and lets editors track their sourcing

Design for trust and transparency — this is about showing our work.

Steps

  1. Go to telex.automattic.ai and paste one of the prompts above (or write your own for a block your team needs).
  2. Click BUILD and watch it generate.
  3. Use follow-up prompts to iterate: “Make the colors more muted”, “Add a dark mode variant”, “Make the fields simpler for editors who aren’t technical.”
  4. When you’re happy, Download the .zip.
  5. Install on your local Studio site (Plugins → Add New → Upload) and test it in a real post.
  6. If it works well, share the .zip with a colleague and ask them to try it. Their feedback is more valuable than yours — you built it, so you know how it works.

TIP: BUILDING GOOD TELEX PROMPTS

Be specific about both functionality and appearance. Include: what the editor sees (fields, controls, options), what the reader sees (layout, colors, animations), and how it should feel (urgent? calm? trustworthy?). The feeling description helps Telex make better design decisions. Also specify what happens on mobile — blocks that break on phones are blocks that don’t get used.

KEY TAKEAWAY

Custom blocks used to require a developer. With Telex, any editor can build the tools their team needs. This isn’t just about saving dev time — it’s about giving editorial teams direct control over their publishing formats.

← Day 11 · Next: Day 13: Content Analysis →