A real-world publishing platform demands far more than a single title and WYSIWYG content block. Editorial teams require secondary subtitles, primary callout quotes, hero badges, author social handles, and estimated reading metrics.

The Role of Advanced Custom Fields (ACF)

In the WordPress ecosystem, Advanced Custom Fields (ACF) is the standard for extending core content types. In a headless setup, ACF fields must be surfaced through the REST API so frontend components can consume them as strongly-typed props.

Defining the Content Model

Consider a technical publication requirement:

interface EditorialFields {
  readingTime: number;
  featuredBadge: boolean;
  technicalReviewer?: string;
  repositoryUrl?: string;
}

Mapping Fields to Astro Components

Rather than dumping raw ACF meta keys like _acf_reading_time_val directly into templates, a clean content adapter normalizes these values into semantic camelCase properties before passing them to Astro layouts.

---
// ArticleLayout.astro
interface Props {
  article: Article;
}
const { article } = Astro.props;
---
<header class="editorial-header">
  <span class="badge">{article.category.name}</span>
  <h1>{article.title}</h1>
  <p class="subtitle">{article.subtitle}</p>
  <div class="meta">
    <span>{article.readingTime} min read</span>
  </div>
</header>

This separation ensures that changing field storage on WordPress never breaks UI components.