Search
Block Content
Headless WordPress

Block Content

If an image is added as a header background, the styles automatically change to white with dark overlay. View the child page for the fallback header style.

Content authored in Gutenberg is pulled via the WordPress REST API and rendered with Next.js’s hybrid rendering model. Static blocks are prerendered at build time, while dynamic embeds and live previews leverage Incremental Static Regeneration for up-to-date pages without full rebuilds.

  • Content fetched as JSON, transformed into React components.
  • Images optimized via next/image with dynamic resizing, lazy-loading, and smart placeholders.
  • CSS-in-JS or Tailwind classes scoped per block, for zero-bloat and instant style injection.
Parent-Child Relationship

Visit a Child Page

URL structure mirrors the CMS hierarchy. Parent pages generate top-level routes, with child pages nested beneath, all handled by Next.js routing.

SEO-optimized slugs generated from page titles
Breadcrumb navigation reflecting current path
Best Practice Oriented
Visit the Child Page

Repeatable, Flexible, and Optimized Content

Block templates defined in Gutenberg—such as hero sections, feature lists, or testimonial carousels—turn into reusable React components. Simply drop a block in the editor and the Next.js page renders it with the right props.

Why it matters: Editors get visual page-building; devs ship DRY components.

  • Heading blocks map to <h1>–<h6> tags with dynamic font sizes.
  • Paragraph blocks support rich text, inline links, and markdown-style formatting.
  • List blocks render as semantic <ul>/<ol> with Tailwind-driven spacing.
  • Media blocks harness next/image for responsive resizing and format-switching (WebP, AVIF).

Simple Call to Action

Pre-styled CTA blocks that can be configured in the CMS

CTA Button Text

Complex CTA Blocks

Advanced CTA variants can include icons, background videos, or conditional rendering based on user locale. Under the hood, React components can pull in A/B test data or personalization tokens at runtime.”

  • Icon support via react-icons or SVGR-powered inline SVG.
  • Conditional styling classes toggled on user preferences (dark mode, high contrast).
Eyebrow Label

This is a Complex CTA Block

This is what we call ... headless.

Tap Here to See the Magic
Make Something Awesome Happen
Push the Button, Change Your Day
Choose Adventure
Contact

Use a Featured block to spotlight a product or service—complete with hero image, title, and brief description. Next.js prerenders these at build time for instant-load hero sections.

Featured

Your Header Here

Compelling description of your offer or service.

Get Started

...another simple CTA example.

Simple Call to Action

Outline varient... description here!

Do It Now

...another complex CTA example.

Fallback

Awesome Fallbacks

No broken images or placeholders, just pure CSS and SVG fallbacks.

Great for DEV
Great for Prototyping
Great for Content Flowing
Get Started

Add an image to enhance this section

Anything else?

Frequently Asked Questions