Description
Section Blocks is a powerful WordPress Gutenberg plugin that provides a complete collection of professional section blocks for building modern, responsive websites. Each block is carefully crafted with beautiful design, extensive customization options, and mobile-first responsive design.
Key Features:
- 12 professional section blocks
- Custom “Section Blocks” category in the Gutenberg editor
- Mobile-first responsive design
- Extensive color, typography, and spacing customization
- Hover effects and scroll-triggered animations
- SEO-friendly semantic HTML markup
- Accessibility-compliant ARIA labels and keyboard navigation
- Works with any properly coded WordPress theme
Available Blocks:
Hero Section — Eye-catching hero sections with background images, customizable headings, subtitles, and call-to-action buttons. Includes overlay controls and multiple text alignment options.
Features Section — Showcase product or service features in a 3–6 column responsive grid. Includes 16+ built-in WordPress Dashicons and optional side images.
Services Section — Display services with stylish cards. Choose from 60+ Dashicons or upload custom images. Supports 2–4 column layouts, hover effects, and CTA buttons.
Steps Timeline — Display multi-step processes with vertical, horizontal, and zigzag layouts. Supports 3–6 configurable steps, visual connectors, and scroll-triggered animations.
Video CTA Section — Engaging video call-to-action sections. Supports YouTube, Vimeo, and self-hosted videos with overlay controls and conversion-focused design.
Testimonials Section — Showcase customer testimonials with star ratings, client images, and names. Supports both carousel (with pause-on-hover) and grid layout options.
Pricing Tables — Create professional pricing comparison tables with multiple plans, feature lists, billing period toggle, and highlighted recommended plans.
Team Members — Showcase your team with Card, Overlay, Minimal, and Professional layout styles. Includes social media links and hover effects.
FAQ / Accordion — Toggle-style accordion sections with smooth animations and built-in schema markup for SEO benefits.
Gallery Portfolio — Display images in masonry or grid layouts with filterable categories and lightbox functionality.
Newsletter Signup — Email capture forms with Mailchimp integration, WordPress native storage, privacy consent support, and honeypot spam protection. Configure under Settings > Newsletter Settings.
Call to Action — High-converting CTA sections with solid, gradient, or image backgrounds, customizable text, and multiple button options.
Screenshots
Blocks
This plugin provides 12 blocks.
- Hero Section A beautiful hero section with background image, title, subtitle, and call-to-action button.
- Pricing Tables Professional pricing tables with multiple plans, feature comparison, billing toggle, and customizable design options.
- Steps Timeline Guide users through a multi-step process or chronological journey with clear, engaging visuals and animations. Perfect for how-it-works sections, onboarding flows, and project timelines.
- Team Members Showcase your team with beautiful profile cards featuring images, names, positions, bios, and social links. Multiple layouts and hover effects included.
- Testimonials Section A beautiful testimonials section with star ratings, client images, names, and testimonial text. Supports carousel and grid layout options.
- Gallery Portfolio A beautiful gallery/portfolio section with masonry or grid layout, filterable categories, and awesome interactive features.
- FAQ Accordion A comprehensive FAQ accordion block with toggle functionality, schema markup for SEO, search, categories, and advanced customization options.
- Services Section Display services, features, or offerings using stylish cards with icons/images, titles, descriptions, and optional CTA buttons. Enhanced with hover effects and responsive design.
- Features Section A beautiful features section with icons, headings, descriptions, and optional side image. Supports 3-6 columns layout with hover effects.
- Newsletter Signup A beautiful newsletter signup section with email capture, Mailchimp integration, and customizable design options.
- Video CTA Section Engage users with compelling video content and call-to-action buttons. Supports YouTube, Vimeo, and self-hosted videos.
- Call to Action Section A powerful call-to-action section with customizable background, text, and multiple button options.
Installation
- Upload the plugin files to
/wp-content/plugins/section-blocks, or install directly through the WordPress plugins screen. - Activate the plugin through the ‘Plugins’ screen in WordPress.
- In the Gutenberg editor, look for the “Section Blocks” category to find all available blocks.
- For newsletter features, configure settings under Settings > Newsletter Settings.
FAQ
-
How many blocks are included?
-
The plugin includes 12 professional section blocks: Hero Section, Features Section, Services Section, Steps Timeline, Video CTA Section, Testimonials, Pricing Tables, Team Members, FAQ/Accordion, Gallery Portfolio, Newsletter Signup, and Call to Action.
-
Go to Settings > Newsletter Settings in your WordPress admin to configure your Mailchimp API key, custom API endpoint, reCAPTCHA settings, and view the subscriber list.
-
Are the blocks responsive?
-
Yes. All blocks are built mobile-first and automatically adapt to different screen sizes.
-
Can I customize colors and typography?
-
Yes. Every block has extensive customization options for colors, typography, spacing, and layout in the Gutenberg editor sidebar.
-
Do the blocks work with any WordPress theme?
-
Yes. The blocks are designed to work with any properly coded WordPress theme that supports the block editor.
-
Is the plugin accessible?
-
Yes. All blocks include proper ARIA labels, semantic HTML markup, and follow WordPress accessibility guidelines.
-
When using the default WordPress storage option, email addresses are stored in your WordPress database. You can view and manage them under Settings > Newsletter Settings. An uninstall routine removes this data when the plugin is deleted.
-
Yes. Enter your Mailchimp API key and list ID under Settings > Newsletter Settings, then select “Mailchimp” as the integration type in the Newsletter Signup block settings.
Reviews
Contributors & Developers
“Section Blocks – The Layout Builder for Gutenberg” is open source software. The following people have contributed to this plugin.
Contributors
Translate “Section Blocks – The Layout Builder for Gutenberg” into your language.
Interested in development?
Browse the code, check out the SVN repository, or subscribe to the development log by RSS.
Changelog
1.2.6
- Hotfix: resolve fatal error on activation
1.2.5
- Security: Sanitize all user-controlled colors via centralized hex validator
- Security: AJAX handler hardened with honeypot check, reCAPTCHA siteverify, rate-limit moved after validation
- Security: Strip Appsero license_key/pass/secret from telemetry data
- Security: Removed custom API endpoint exposure from newsletter front-end markup
- Security: Added capability check to newsletter settings save handler
- Security: Added rate limiting (5 submissions per IP per hour) to newsletter signup
- Security: Added direct-access (ABSPATH) guards to all block render templates
- Security: All AJAX input sanitized and unslashed consistently
- Accessibility: Add screen-reader-text labels to newsletter form inputs
- Accessibility: Replace span interactive elements with button (hero, pricing, newsletter)
- Accessibility: Add aria-hidden to decorative SVG icons (services, steps, features, pricing)
- Accessibility: Add aria-live to testimonials carousel slide announcements
- Accessibility: FAQ accordion uses proper ARIA roles (tablist/tab/tabpanel)
- Accessibility: Billing toggle labels in pricing table are now real button elements
- Responsive: Services section columns-3 tablet breakpoint at 992px
- Responsive: Features section columns-4 tablet breakpoint at 1024px
- Responsive: Pricing table columns-3 tablet 2-column layout
- Responsive: Steps timeline horizontal connectors hidden on mobile when stacked
- Responsive: Steps timeline zigzag layout geometry and connector sizing fixed
- Performance: Gate all JS-dependent animations behind @media (scripting: enabled)
- Performance: Use independent translate/scale CSS properties to prevent recommended plan scale conflicts
- Performance: Gallery portfolio pagination now filters correctly over filtered items
- Performance: Gallery portfolio lightbox with keyboard nav, focus trap, dialog role
- Performance: Testimonials CSS-var-driven grid with responsive breakpoints
- Performance: Team members overlay bio capped at 3 line-clamp
- Performance: Newsletter backdrop-filter fallback with -webkit- prefix
- Performance: Gallery portfolio aspect-ratio inline on items (replaces dead :has() selector)
- Fix: Video CTA block.json asset refs corrected (editor.css to index.css, style.css to style-index.css)
- Fix: Services edit.js stale-closure double-setAttributes fixed
- Fix: Testimonials edit.js image save &&-chain bug fixed
- Fix: Gallery portfolio console.log removed from edit.js
- Fix: Hero media select stores url/alt not raw WP media object
- Fix: Steps view.js id-guarded style injection, passive scroll, z-index stacking
- Fix: FAQ localStorage race condition (use page-stable key with 24h expiry)
- Fix: FAQ view.js trackView dead code removed
- Fix: Newsletter form method=post added explicitly
- Fix: Newsletter colors sanitized (background, text, button, input, overlay)
- Fix: CTA section colors sanitized, dead block_id removed
- Fix: CTA focus outlines use currentColor instead of hardcoded rgba
- Fix: CTA secondary button hover uses currentColor, removed !important overrides
- Fix: Features SVG icons switched to currentColor for proper color inheritance
- Fix: Team members social links use CSS var instead of hardcoded color
- Fix: Team members edit.js imageId synced when image is selected
- Fix: Team members bio limited to 300 characters in editor
- Fix: Team members render.php socialLinks array guard added
- Fix: Pricing billing toggle labels wired as clickable buttons in view.js
- Fix: Pricing icon map extended with heart, thumbs-up, awards, performance
- Fix: Pricing feature items guarded with isset and is_array checks
- Fix: Pricing render.php colors sanitized via centralized helper
- Fix: Pricing animation keyframes replaced with independent translate/scale
- Fix: Dead FAQ voting UI and view tracking removed (no server-side handler existed)
- Fix: uninstall.php multisite-aware (iterates all sites, cleans options and drops tables)
- Fix: Appsero filter strips license_key, pass, secret from source data
- Fix: DB upgrade check moved to proper transient check with admin_init fallback
- Tested up to WordPress 7.1
1.2.3
- Security: Added CSRF nonce verification to the Newsletter Settings admin form.
- Security: Removed server-side use of client-supplied API endpoint (SSRF prevention); endpoint is now configured in admin settings only.
- Security: Fixed XSS vulnerability in Gallery Portfolio image attribute builder.
- Security: Fixed onclick injection vulnerability in Video CTA Section scroll buttons; replaced with safe data-attribute approach.
- Security: Added validation for base64 data URL images in Team Members block.
- Bug fix: Removed inline
<script>tags from Pricing Tables, Testimonials, CTA Section, and Video CTA renders — scripts are now properly enqueued via view.js files. - Bug fix: Removed leftover debug HTML comments from Pricing Tables render.
- Bug fix: Fixed fatal error on double-render — helper functions in Video CTA and CTA Section renders now use function_exists() guards.
- Bug fix: Fixed team member image upload in editor — now correctly saves {url, alt, id} object instead of raw media library object.
- Bug fix: Fixed masonry gallery layout breaking on repeated filter/sort calls — positions now reset before each recalculation.
- Bug fix: Fixed IntersectionObserver memory leak in Gallery Portfolio infinite scroll — observer now disconnects when all items are loaded.
- Bug fix: Fixed ResizeObserver memory leak in Video CTA Section.
- Bug fix: Fixed reCAPTCHA silent failure in Newsletter Signup — submission is now blocked if reCAPTCHA is required but unavailable.
- Bug fix: Fixed CTA Section buttons — empty URL now renders a semantic
<button>element instead of<a onclick="return false">. - Bug fix: Fixed Pricing Tables — all plans now render regardless of column count (no silent plan truncation).
- Improvement: Added plugin activation hook to create the newsletter subscribers database table on install.
- Improvement: Added uninstall routine to remove all plugin data (options and database table) on deletion.
- Improvement: Added “Settings” action link on the Plugins list page.
- Improvement: Testimonials carousel now pauses on hover and supports keyboard arrow navigation.
- Improvement: Added native loading=”lazy” to Team Members images.
- Improvement: Social icon aria-labels now use natural language (“Visit [Name]’s LinkedIn profile”).
- Improvement: Video caption tracks now use the WordPress site locale instead of hardcoded English.
- Improvement: Custom API endpoint moved to admin settings for security.
1.2.2
- Added analytics integration with Appsero for plugin usage insights.
- Updated minimum PHP requirement to 7.4.
- Improved plugin architecture for better maintainability.
1.2.1
- Added Services Section block with service cards and CTA buttons.
- Added Steps Timeline block with vertical, horizontal, and zigzag orientations.
- Added Video CTA Section block with YouTube, Vimeo, and self-hosted video support.
- Enhanced testimonials with autoplay and animation effects.
- Improved responsive design across all blocks.
1.2.0
- Added cover image and logo to plugin assets.
1.1.0
- Added Newsletter Signup block with Mailchimp integration and WordPress native storage.
- Added Gallery Portfolio block with masonry/grid layouts and lightbox.
- Added FAQ/Accordion block with schema markup.
- Added Team Members block with four layout styles and social media links.
- Added Hero Section block with background image and overlay controls.
- Added Features Section block with responsive grid and Dashicons.
- Added Testimonials Section block with star ratings.
- Added Pricing Tables block with feature comparison.
- Added Call to Action block.
- Created custom “Section Blocks” category in the Gutenberg editor.
0.1.0
- Initial release — plugin scaffolding and basic structure.