GutenbergBlocks
18+ beautifully designed, accessible Gutenberg blocks that work seamlessly in WordPress and render perfectly on your Next.js frontend.
Organized by Purpose
Blocks are organized into logical categories to help you build complete page sections quickly.
Layout
3 blocks
Content
4 blocks
Conversion
3 blocks
Social Proof
3 blocks
Available Blocks
Browse all blocks included with FlatWP. Each block is fully customizable and works in the WordPress editor.
Hero
Eye-catching hero sections with multiple variants: minimal, split, and centered.
Features
Showcase product features with icons, titles, and descriptions in a responsive grid.
FAQ
Interactive accordion FAQ section with smooth animations and keyboard navigation.
Statistics
Animated number counters that count up when scrolled into view.
CTA
Call-to-action blocks in multiple styles: simple, boxed, and full-width banner.
Team
Team member cards with photos, roles, bios, and social links.
Pricing
Pricing tables with feature lists, highlighted plans, and CTAs.
Section
Versatile container block with backgrounds, gradients, and padding options.
Card
Flexible card component for wrapping any content with consistent styling.
Logo Row
Display partner or client logos in a responsive row with hover effects.
Image Text
Two-column layout combining image and text content.
Icon Text
Icon with text content in various layouts for feature highlights.
Newsletter
Email signup forms with validation and success states.
Coming Soon
Testimonials
Customer testimonials with ratings, photos, and company info.
Gallery
Image galleries with lightbox, masonry, and grid layouts.
Video
Embedded video with custom thumbnails and lazy loading.
Tabs
Tabbed content sections for organizing complex information.
Accordion
Collapsible content sections with smooth animations.
See Blocks in Action
Interactive demos showing each block with different configurations.
Hero Block
flatwp/hero
Build Something Amazing
Create stunning websites with FlatWP. Lightning fast, beautifully designed, and easy to customize.
<FlatwpHero
attributes={{
variant: 'minimal',
heading: 'Build Something Amazing',
subheading: 'Create stunning websites with FlatWP...',
badge: 'New Release',
primaryButtonText: 'Get Started',
primaryButtonUrl: '/get-started',
theme: 'dark',
}}
/>Features Block
flatwp/features
Why Choose FlatWP?
Everything you need to build modern WordPress sites.
Lightning Fast
Static generation ensures sub-second page loads.
Secure by Design
No PHP on the frontend means fewer vulnerabilities.
TypeScript Ready
Full type safety from GraphQL to React components.
FAQ Block
flatwp/faq
Frequently Asked Questions
Get answers to common questions about FlatWP.
FlatWP is a headless WordPress starter that combines WordPress CMS with a Next.js frontend for blazing-fast performance and modern development experience.
Basic React knowledge is helpful but not required. FlatWP comes with pre-built components and blocks that work out of the box. You can customize them as you learn.
Yes! FlatWP is completely free and open source under the MIT license. You can use it for personal and commercial projects.
Statistics Block
flatwp/statistics
FlatWP by the Numbers
Join thousands of developers using FlatWP.
CTA Block
flatwp/cta
Ready to Get Started?
Download FlatWP and start building your next project today.
How It Works
FlatWP blocks work seamlessly between WordPress and Next.js.
WordPress Side
- Blocks are registered via the FlatWP WordPress plugin
- Full Gutenberg editor support with live preview
- Block attributes stored in WordPress database
- Exposed via WPGraphQL for the frontend
Next.js Side
- GraphQL queries fetch block data with attributes
- EditorBlockRenderer maps blocks to React components
- Server-side rendering for optimal performance
- Full TypeScript support for type safety
// In WordPress: Add FlatWP blocks in Gutenberg editor
// The blocks are automatically available in the block inserter
// In Next.js: Blocks are rendered via EditorBlockRenderer
import { EditorBlockRenderer } from '@/components/blocks/EditorBlockRenderer';
export function PageContent({ blocks }) {
return (
<div>
{blocks.map((block) => (
<EditorBlockRenderer
key={block.clientId}
block={block}
/>
))}
</div>
);
}What's Coming Next
We're constantly adding new blocks based on community feedback.
Have a block idea? We'd love to hear from you!
Request a BlockStart Building with FlatWP Blocks
Download FlatWP and get instant access to all blocks. No premium tiers, no hidden features - everything is free.