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 requirement, one contract

From design intent to a dependable component

The example uses Tabbed Content: a small group of parallel topics that visitors can compare in place.

  1. 01 Design requirement
    Interaction brief

    Make related content easy to compare.

    • Clear labels and content relationships
    • Usable with keyboard and assistive technology
    • Readable at every viewport and without JavaScript
  2. 02 Structured editor
    Tabbed Content
    Section headingHow we work
    Tab labelDiscover
    Panel contentResearch, goals, and constraints…
    ＋ Add tab
  3. 03 Rendered component
    How we work

    Start with the real problem.

    Research aligns the component with user needs, content, and technical constraints.

The boundary is the product

Useful freedom for editors. Durable decisions in code.

Editor

Meaningful choices

  • Headings and supporting copy
  • Tab labels and panel content
  • Item order and optional content
  • Approved variations

Component

Production responsibility

  • Semantic markup and content relationships
  • Layout, breakpoints, and overflow
  • Keyboard behavior and focus management
  • Accessible names, states, 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