Post Types

Post types allow you to create reusable page templates that dynamically fetch content from your API. This is perfect for blog posts, product pages, or any content with the same layout but varying API data.

Creating a Post Type

To create a new post type, navigate to the Pages menu by clicking on the current page name in the center of the editor toolbar, then select "New Post Type".

Create a new post type from the pages menu

You'll need to provide:

• Name: A descriptive name for your post type (e.g., "Blog Posts", "Products")
• Slug: The base directory path for this post type (e.g., "/posts", "/products")

Connecting Data Source

Post types require a data connector to populate content dynamically. The connector setup follows the same process as regular API connections (see API Data for detailed instructions).

Set up a data connector for your post type

Data Transformation

The transform modal helps you convert your API data into the required post type format:

Transform your API data to match the required post type format

The modal shows:

• Your incoming API data at the top
• A code editor with the expected schema in the middle
• A preview of the transformed output at the bottom

Your transformed data needs to match this specific structure:

type Data = {
  title: string
  slug: string
  id: string
}[]

Use vanilla JavaScript to transform your data. For example:

// Transform API response to post type format
value.map((item) => ({
  id: item.id.toString(),
  title: item.title,
  slug: item.slug || item.id.toString(),
}))

Dynamic Data Mapping

After creating your post type, you'll need to set up the content template by adding blocks to the post type page. Here's how to connect these blocks to your dynamic data:

1. Navigate to your post type page
2. Add blocks to create your content template
3. For each block that needs dynamic content, click "Connect to API" in the block settings

Configure dynamic API routes using [slug] to fetch page-specific content

When setting up the API connection for a block, you can use dynamic API routes with the [slug] parameter. For example, if your API endpoint is /api/posts/[slug], it will automatically use the current page's slug. So when viewing /posts/my-first-post, the API call will be made to /api/posts/my-first-post to fetch that specific post's content.

This allows you to:

• Use the same API endpoint structure for all pages of this post type
• Dynamically fetch the right content based on the current page's slug