Gutenberg Blocks for Landing Pages & Sections – ClassicAddons

Description

ClassicAddons is a library of designed Gutenberg blocks for building landing pages, sales pages and marketing sections in the native WordPress block editor — with zero front-end JavaScript and no page-builder bloat.

Instead of another 50-block mega-plugin full of generic containers and buttons, you get a focused set of polished, conversion-focused section blocks — hero, pricing table, testimonials, team, comparison table, FAQ and more — that look professionally designed the moment you insert them.

Every block is server-rendered (dynamic PHP), ships no front-end JavaScript, and only loads its own CSS on pages that actually use it. The result: clean markup, fast pages and great Core Web Vitals.

Learn more »

Why you’ll love it

• 🚫 Zero front-end JavaScript — no jQuery, no scripts, no render-blocking. Blocks render on the server and each block’s CSS is only loaded where it’s used.
• 🧱 Designed sections, not a block box — opinionated hero, pricing, testimonial, comparison and FAQ sections that look finished on insert, instead of raw primitives you have to style from scratch.
• 🔍 Rich-result-ready — an FAQ block with optional FAQPage schema (JSON-LD) for rich results, plus selectable heading tags (H1–H6) so your document outline stays correct for SEO.
• 📱 Fully responsive — separate desktop / tablet / mobile controls for typography, padding and visibility.
• ♿ Accessible — semantic HTML, ARIA labels, keyboard-friendly controls and reduced-motion support.
• 🎨 Genuinely designed — sensible defaults that look great out of the box, plus deep customization (typography, spacing, color, gradient, borders) when you want it.
• 🧩 Composable — cards drop straight into core Columns / Grid layouts and stretch to equal height.
• 🧱 Native block editor — built on block.json, the Block Supports API and standard hooks. Works with block themes and Full Site Editing (FSE).

The blocks

• Hero Section — a fully customizable hero section with pill, gradient heading, two CTAs, an animated social-proof bar and a browser-mockup image. Ideal for SaaS, agency and product landing pages.
• Pricing Table — a pricing plan card (name, price, features, badge, featured style) with a flexible CTA — a link or a JS button with custom id, classes and data-attributes (works with Paddle.js and similar). Drop several into a Columns or Grid layout for a full pricing table.
• Testimonial — a review card with quote, star rating, avatar and author details. Drop several into a Columns layout for a testimonial wall.
• Team Member — a staff/profile card with photo, name, role, short bio and social links (X, Facebook, Instagram, LinkedIn, YouTube, website, email).
• Comparison Table — a feature-by-feature comparison table with a highlighted column, good/bad/meh status pills and an optional in-card header and footnote. Great for affiliate, SaaS and product-review pages.
• FAQ (accordion + schema) — an accessible FAQ accordion (native details/summary) with optional FAQPage JSON-LD schema for rich results.
• Info Box — a feature card with an icon (dashicon / image / emoji / custom SVG), title, description, optional link and 5 style variations.
• Versus Box — a head-to-head two-card layout with an optional “VS” badge, custom item icons and ribbon badges.
• Eyebrow — a small pill/label for section headers: alignment, optional link, icon (dashicon / image / emoji / SVG), colors, background, border and typography.
• Section — a full-width container/row with background (color / gradient / image / overlay) and an adjustable inner content max-width. Drop any blocks inside.

Ready-made patterns

Not sure where to start? Insert a ready-made pattern built from these blocks and just edit the text:

• Hero: SaaS launch — a full hero with headline, two buttons and a social-proof bar.
• Pricing: 3 tiers — a three-column pricing section with a highlighted, recommended plan.
• Testimonials: 3-up wall — a three-column wall of review cards for social proof.
• Team: 3-up grid — a three-column team/staff grid with roles and social links.
• Features: 3-up icon grid — a three-column feature grid with icons.
• FAQ: centered section — an accessible FAQ accordion with optional schema.

Find them in the block inserter under the Patterns tab → ClassicAddons.

Built for performance and quality

• Dynamic PHP rendering via render callbacks (lean, secure, cache-friendly).
• Zero front-end JavaScript — the FAQ accordion uses native details/summary, and entrance effects are pure CSS with reduced-motion support.
• Frontend and editor assets are separated, and styles are enqueued the WordPress way (wp_add_inline_style), so CSS only loads for the blocks on the page.
• Block style variations (Light / Dark / Elevated and more) across most blocks.
• Reusable controls — typography, spacing, color, gradient, icon picker and a responsive (desktop / tablet / mobile) helper — organized into clear Content / Style / Advanced tabs.
• Follows the WordPress Coding Standards with full escaping, sanitization and i18n.

Perfect for

Landing pages, sales pages, SaaS and product sites, agency and portfolio sites, affiliate and review sites, and anyone who wants professional marketing sections in the block editor without installing a heavyweight page builder.

Source Code & Build Process

This plugin is fully open source (GPL-2.0-or-later). The complete, human-readable
source for every compiled asset is bundled inside the plugin in the /src
directory. The minified files in /build are generated from /src using the
official @wordpress/scripts toolchain (webpack under the hood) — no other build
tools are required.

To regenerate the compiled assets from source:

1. npm install — installs the build dependencies declared in package.json.
2. npm run build — compiles /src into /build.

Use npm start for a watched development build. There is no obfuscation; the
build step only bundles and minifies the JavaScript and SCSS that ships in /src.