內容簡介
ClassicAddons 是一個為 WordPress 原生區塊編輯器設計的 Gutenberg 區塊庫，專注於建立著陸頁、銷售頁和行銷區段，無需前端 JavaScript，提供乾淨快速的頁面體驗。
【主要功能】
• 零前端 JavaScript，無阻塞渲染
• 專業設計的區段，立即可用
• 支援豐富結果的 FAQ 區塊
• 完全響應式設計，適應各種裝置
• 可訪問性，符合無障礙標準
• 深度自訂選項，調整字型與顏色
外掛標籤
開發者團隊
② 後台搜尋「Gutenberg Blocks for Landing Pages & Sections – ClassicAddons」→ 直接安裝（推薦）
原文外掛簡介
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:
npm install — installs the build dependencies declared in package.json.
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.
