Tim Fetter

Technical case study

ACF Component Workbench

A portable component system for WordPress projects that need a clear editing experience without giving up production-grade frontend control.

See the component contract View the repository

One design, one content model

From design intent to a dependable component

The same Campaign Hero content moves from a supplied Figma frame, through a structured WordPress editing experience, to the rendered front end.

  1. 01 Original Figma frame
    Campaign Hero in Figma, including the dark canvas, selected frame, site navigation, headline, calls to action, and architectural performance visual. View full size
    The source composition and surrounding Figma canvas establish the design context.
  2. 02 WordPress editor preview
    Campaign Hero selected in the WordPress block editor, with a close visual preview, the block toolbar, and an inspector control for opening the structured campaign fields. View full size
    The block preview stays visually close to the result while editing controls remain purposeful.
  3. 03 Rendered front end
    Rendered Campaign Hero on the front end with the same eyebrow, headline, body copy, links, supporting note, architectural image, and performance data. View full size
    The same authored content is rendered without editor controls or page-builder markup.

Inside the structured editor

Three focused groups, not one unrestricted canvas

The expanded editor temporarily covers part of the preview so fields can remain legible. The dimmed component behind it preserves context, and the tabs expose content choices without handing layout decisions to the editor.

Expanded Campaign Hero editor with the Content tab selected, showing structured fields for the eyebrow, segmented heading, heading level, and body copy beside the dimmed component preview. View full size
ContentMessage, semantic heading level, and supporting copy.
Expanded Campaign Hero editor with the Calls to Action tab selected, showing structured primary and secondary links, emphasized link text, and a supporting note beside the dimmed component preview. View full size
Calls to ActionDestinations, meaningful labels, emphasis, and reassurance.
Expanded Campaign Hero editor with the Desktop Visual tab selected, showing an optional image override and structured performance labels, values, percentage, and note beside the dimmed component preview. View full size
Desktop VisualAn approved image override and structured performance data.

The boundary is the product

Useful freedom for editors. Durable decisions in code.

Editor

Meaningful choices

  • Headings, supporting copy, and semantic heading level
  • Link destinations and meaningful labels
  • Optional imagery and structured performance data
  • Approved variations and empty fields

Component

Production responsibility

  • Semantic markup and content relationships
  • Layout, breakpoints, image treatment, and overflow
  • Keyboard behavior and visible focus for interactive elements
  • Accessible names, hierarchy, contrast, and reduced motion
  • Empty states, progressive enhancement, and presentation

Implementation anatomy

A component is more than its template.

Each module is a portable package with a documented content contract and deliberately small dependency surface.

Registration
block.json defines the WordPress block contract and assets.
Content model
Versioned ACF JSON describes purposeful editor fields.
Rendering
Defensive PHP normalizes data, escapes output, and omits empty markup.
Presentation
Scoped CSS owns layout, responsive behavior, focus, and visual states.
Behavior
JavaScript is added only when interaction requires it; core content remains available without it.

Production standards

Built for the uncomfortable cases

  • AccessibleSemantic structure, keyboard operation, useful names, visible focus, sufficient contrast, and reduced-motion support.
  • ResponsiveLong labels, narrow screens, content growth, and intermediate widths are part of implementation.
  • DefensiveOptional and malformed data is handled before it reaches the interface.
  • PortableNo page IDs, site-specific URLs, generic selectors, or hidden theme dependencies.

Inspect the implementation

The workbench is public.

Review the component packages, ACF field definitions, technical specifications, and implementation decisions on GitHub.

View the GitHub repository