B2B SaaS landing page on a custom WordPress FSE block theme — one server-rendered Gutenberg block with IntersectionObserver count-up, Lighthouse 99 perf, no page builder.

The problem

Agencies pick Webflow, Framer, or bespoke Next.js for SaaS marketing on reflex and skip WordPress — the assumption being page-builder soup or a heavy theme that fights every layout decision. That model was right ten years ago and hasn't been for the last five.

The approach

Built a real SaaS landing layout (hero, social proof, feature grid, pricing, testimonial, FAQ, CTA) with stock WordPress block primitives plus one custom server-rendered Gutenberg block for the animated trust-stack. No page builder, no framework wrapper, no shadow DOM — and Lighthouse 99 perf without manual tuning.

What got built

A B2B SaaS marketing landing page built end-to-end in roughly six hours — custom Full-Site-Editing block theme on a shared parent chassis, one server-rendered Gutenberg block, and real EC2 infrastructure. The demo exists to push back on the reflex that WordPress can't do modern product marketing — no page builder, no framework wrapping the CMS, just stock blocks composed deliberately plus one custom block where the design actually demanded it.

Theme — per-demo override pattern:

• Custom FSE block theme (pulsar) — a thin child of a shared _chassis parent that ships templates, parts, patterns, and gotcha-busting CSS
• Volt-aligned ink + coral theme.json design system
• Per-demo front-page.html rendering core/post-content — the override pattern that became standard across every subsequent demo
• Inherits chassis-side WooCommerce asset hygiene (~10 perf points on non-WC demos by default)

The custom block — sfp-blocks/trust-stack:

• Lives in the shared sfp-blocks plugin alongside other reusable blocks
• Stores 2–4 { value, label, suffix } objects in attributes; editor uses __experimentalNumberControl + TextControl
• Server-rendered HTML includes final numbers — non-JS users and prefers-reduced-motion users see correct values immediately
• ~1.5 KB view.js uses IntersectionObserver to detect viewport entry, then animates from 0 to target via requestAnimationFrame with cubic ease-out
• Intl.NumberFormat for comma-formatted integers; decimals preserve one digit

Stock blocks for everything else:

• Hero, three-column feature grid, three-tier pricing with "Most popular" badge, testimonial, CTA strip — all stock blocks composed deliberately
• FAQ uses native HTML <details> — zero JavaScript, full keyboard support, accessible by default
• Page composition lives in a static page rendered via <!-- wp:post-content /--> in the per-demo front-page.html

Outcomes

• Lighthouse 99 / 95 / 100 / 92 (perf / a11y / best-practices / SEO) without manual perf tuning
• Sub-1s LCP on a t3.small (2 vCPU, 2 GB RAM)
• Total page weight under 200 KB compressed
• ~1.5 KB inline JS for the trust-stack count-up; zero JS for the rest of the landing page
• Standard provisioning: DNS validation, secret generation, MariaDB, Apache vhost with security headers, Let's Encrypt HTTP-01, platform symlinks
• Established the per-demo theme override pattern reused by every subsequent demo on the platform

Stack

• WordPress
• PHP 8.3
• React
• Gutenberg
• Full-Site Editing
• theme.json
• IntersectionObserver
• Apache
• AWS EC2