Professional Gutenberg block library with 43 blocks and 11 powerful extensions - complete Form Builder, container system, interactive elements, maps, and animations. Built with WordPress standards for guaranteed editor/frontend parity.
DesignSetGo is the first WordPress block plugin to integrate with the WordPress 6.9 Abilities API, making it fully accessible to AI agents and automation tools. Build pages programmatically with Claude, ChatGPT, or custom AI workflows.
✨ Active Development - Core blocks complete, expanding features
Current Progress:
- ✅ Project foundation and architecture complete
- ✅ Build system configured (webpack + @wordpress/scripts)
- ✅ PHP plugin architecture implemented
- ✅ 43 custom blocks across 5 categories with FSE integration
- ✅ Complete Form Builder system (13 blocks: builder + 12 field types)
- ✅ Container system (Row, Section, Flex, Grid, Stack)
- ✅ Interactive blocks (Tabs, Accordion, Flip Card, Reveal, Scroll effects, Slider, Counters, Progress)
- ✅ Content blocks (Icon, Icon Button, Icon List, Card, Pill, Divider, Countdown, Blobs)
- ✅ Location block (Map with OpenStreetMap & Google Maps support)
- ✅ 11 Block Extensions - Animations, Sticky Header, Clickable Groups, Background Video, Responsive, Max Width, and more
- ✅ Global styles system (theme.json integration)
- ✅ Block patterns library
- ✅ Comprehensive testing setup (E2E + Unit + PHP)
- ✅ WordPress 6.4+ compatibility (tested up to 6.7)
- ✅ WordPress Abilities API integration (AI-native)
- ✅ Comprehensive documentation (15,000+ lines)
- ✅ Zero JavaScript errors - comprehensive linting cleanup
- ✅ ViewScript support for interactive blocks
- ✅ 9 language translations (de, es, fr, it, ja, nl, pt, ru, zh)
- 🔄 Expanding pattern library
See CLAUDE.md for development learnings and best practices.
| Category | Features |
|---|---|
| 🤖 AI Integration | WordPress Abilities API - First plugin with AI-native programmatic access |
| Blocks | 43 blocks across 5 categories: Containers (5) - Row, Section, Flex, Grid, Stack; Form Builder (13) - Complete form system with AJAX, spam protection, 12 field types; Interactive (10) - Tabs, Accordion, Flip Card, Reveal, Scroll effects, Slider, Counters, Progress; Content/UI (14) - Icon, Icon Button, Icon List, Card, Pill, Divider, Countdown, Blobs, plus child blocks; Location (1) - Interactive Map with OpenStreetMap & Google Maps |
| Extensions | 11 Extensions - Block Animations (24 effects), Sticky Header, Clickable Groups, Background Video, Responsive Visibility, Max Width, Custom CSS, Grid Span, Reveal Control, Text Alignment |
| Patterns | Pre-designed layouts (Hero, CTA, Features, FAQ) |
| FSE Ready | Full Site Editing compatible, theme.json integration, dual categorization |
| Performance | Optimized bundles, code-splitting, no jQuery, declarative styling, viewScript support |
| Accessibility | WCAG 2.1 AA compliant, keyboard navigation, screen reader friendly, Schema.org markup |
| Developer DX | WordPress best practices, < 300 lines per file, 15,000+ lines of docs, comprehensive refactoring guides |
| Testing | E2E (Playwright) + Unit (Jest) + PHP (PHPUnit + PHPStan) |
| i18n | Translation-ready with 9 language translations included |
- Node.js: 18+ (for development)
- PHP: 7.4+ (8.0+ recommended)
- WordPress: 6.4+
- npm: 8+ (or pnpm/yarn)
# 1. Clone the repository
git clone https://github.com/yourusername/designsetgo.git
cd designsetgo
# 2. Install dependencies
npm install
# 3. Start WordPress environment
npx wp-env start
# This starts a local WordPress at http://localhost:8888
# Login: admin / password
# 4. Start development (in a new terminal)
npm start
# This watches files and rebuilds automaticallyThat's it! The plugin is now active in your local WordPress. Visit http://localhost:8888/wp-admin and start creating with DesignSetGo blocks.
# Start WordPress
npx wp-env start
# Stop WordPress
npx wp-env stop
# Reset WordPress (clean install)
npx wp-env clean all
# Access:
# - Frontend: http://localhost:8888
# - Admin: http://localhost:8888/wp-admin (admin/password)
# - Database: http://localhost:8889 (phpMyAdmin - root/password)# Start development with hot reload
npm start
# Build for production
npm run build
# Code Quality
npm run lint:js # Lint JavaScript
npm run lint:css # Lint SCSS/CSS
npm run lint:php # Lint PHP (requires Composer)
npm run format # Format all code (Prettier)
# Testing
npm run test:unit # Run Jest unit tests
npm run test:e2e # Run Playwright E2E tests
npm run test:e2e:ui # Run E2E tests with UI
npm run test:e2e:debug # Debug E2E tests
npm run test:php # Run PHPUnit tests (requires Composer)
# Security & Compliance
npm run security:audit # Check for vulnerabilities and license issues
# Create plugin ZIP for distribution
npm run plugin-zip📚 View Complete Blocks Reference →
- Row - Horizontal layouts with flexible alignment and spacing
- Section - Full-width sections with inner content width constraints
- Flex Container - Advanced flexbox layouts with wrapping and gap control
- Grid Container - Responsive CSS Grid with column/row controls
- Stack Container - Vertical stacking with precise spacing control
- Accordion - Collapsible content panels with customizable icons
- Tabs - Tabbed content interface with icon support
- Slider - Modern carousel with multiple effects (slide, fade, zoom)
- Flip Card - Interactive cards that flip on hover/click
- Reveal - Content that reveals on hover with multiple effects
- Scroll Accordion - Sticky stacking accordion triggered by scroll
- Image Accordion - Expandable image panels for portfolios
- Counter Group - Animated counting statistics
- Progress Bar - Animated progress indicators with labels
- Scroll Marquee - Horizontal scrolling galleries with parallax
- Plus child blocks: Accordion Item, Tab, Slide, Flip Card Front/Back, Image Accordion Item, Scroll Accordion Item, Counter
- Icon - 500+ icons with shapes, sizes, and animations
- Icon Button - Icon-based buttons with extensive styling options
- Icon List - Lists with custom icons and formatting
- Card - Content cards with images, headers, and call-to-action buttons
- Pill - Badge/tag components for labels and categories
- Divider - Styleable content separators with multiple styles
- Countdown Timer - Countdown to specific dates and times
- Blobs - Organic animated background shapes
- Plus child blocks: Icon List Item
- Map - Interactive maps with dual provider support:
- OpenStreetMap (no API key required, privacy-friendly)
- Google Maps (requires API key, advanced features)
- Custom markers, zoom control, height settings
- Multiple map styles and themes
- Responsive and accessible
- Form Builder - Complete form system with 12 field types:
- Text, Email, Phone, URL fields
- Date, Time, Number fields
- Checkbox, Select, Textarea
- File Upload, Hidden field
- AJAX submission with honeypot spam protection
- Google reCAPTCHA v3 support
- Email notifications with customizable templates
- Success/error message customization
- Form validation and error handling
Extensions work with any WordPress block (core, third-party, or DesignSetGo):
Block Animations Extension - Professional entrance/exit animations
- 24+ animation types (fadeIn, slideIn, bounce, zoom, flip, rotate, etc.)
- Scroll-triggered animations
- Configurable duration, delay, and easing
- Respects
prefers-reduced-motion - CSS-only implementation (no JS libraries)
Sticky Header Extension - Make headers/navs stick on scroll
- Smooth sticky behavior with customizable offset
- Works with core Group, Row, Section blocks
- Mobile-responsive with hide on scroll option
- Z-index control for proper layering
Clickable Groups Extension - Turn any group/container into a clickable link
- Link entire cards or sections
- Accessibility-friendly with proper ARIA labels
- External link support with security (rel="noopener")
- Prevents conflicts with inner interactive elements
Background Video Extension - Add video backgrounds to containers
- YouTube and self-hosted video support
- Overlay color/opacity controls
- Mobile fallback images
- Autoplay, loop, and mute controls
- Accessibility considerations
Responsive Visibility Extension - Control block visibility by device
- Hide/show on Desktop, Tablet, Mobile
- Works with any WordPress block
- CSS-based (no JavaScript)
Max Width Extension - Constrain content width
- Custom max-width controls
- Auto-center alignment
- Responsive width constraints
- Works with containers and content blocks
Custom CSS Extension - Add custom CSS to any block
- Block-specific CSS editor
- Advanced styling control
- Scoped to individual blocks
Grid Span Extension - Control grid item spanning
- Column span (1-12 columns)
- Row span controls
- Works with Grid Container and core Columns block
Reveal Control Extension - Advanced hover reveal settings
- Timing and transition controls
- Direction and distance settings
- Works with Reveal block
Text Alignment Inheritance - Inherit alignment from parent blocks
- Consistent text alignment across nested blocks
- Parent-child context awareness
Pre-designed layouts ready to use:
- Hero Section - Full-width hero with container
- Three Column Grid - Feature/service showcase
- Centered CTA - Call-to-action section
- FAQ Accordion - Frequently asked questions
- FSE-first approach using theme.json
- Color palette integration
- Spacing scale (xs, sm, md, lg, xl)
- Typography presets
- Full Twenty Twenty-Five theme compatibility
- WordPress best practices (useBlockProps, useInnerBlocksProps)
- Declarative styling (no DOM manipulation)
- Comprehensive JSDoc documentation
- Refactored component architecture (< 300 lines per file)
- Security-first approach (sanitization, escaping, nonces)
designsetgo/
├── includes/ # PHP classes
│ ├── admin/ # Admin interface
│ ├── blocks/ # Block registration
│ ├── patterns/ # Pattern registration
│ └── class-*.php # Core classes
├── src/ # JavaScript source
│ ├── blocks/ # Block implementations
│ │ └── container/ # Container block
│ ├── components/ # Shared React components
│ ├── extensions/ # Block extensions
│ ├── styles/ # Global SCSS
│ └── utils/ # Utility functions
├── build/ # Compiled output
├── patterns/ # Block patterns (PHP)
└── designsetgo.php # Main plugin file
Complete documentation for users and developers.
Visit the DesignSetGo Wiki for user-facing documentation:
- Quick Start Guide - Get up and running in 5 minutes
- Installation Guide - All installation methods
- Blocks Reference - Complete blocks documentation
- Troubleshooting - Common issues and solutions
View Developer Documentation - Technical guides in the /docs/ folder:
Getting Started:
-
Getting Started Guide ⭐ Start here!
- Complete setup walkthrough for new contributors
- Prerequisites and installation
- Making your first change
- Common workflows and troubleshooting
-
Architecture Overview ⭐ Understand the code!
- Project structure and folder organization
- How blocks work (code → editor → frontend)
- Build system and asset pipeline
- Data flow and component architecture
-
Contributing Guide ⭐ Ready to contribute!
- Complete contribution workflow
- Code standards and best practices
- Pull request process
- Getting help
Development Guides:
- Best Practices Summary - Quick reference patterns
- Block Development (Comprehensive) - Deep dive
- WordPress Block Editor Best Practices
- FSE Compatibility Guide - Full Site Editing integration
- Testing Guide - E2E and unit testing
Specialized Topics:
- Block Controls Organization
- Color Controls Pattern
- Width & Layout Patterns
- Extension vs Custom Blocks
- Abilities API - AI integration
AI-Assisted Development:
- AI-Assisted Development Guide - Complete guide to building with AI
- .claude/CLAUDE.md - Development patterns for AI agents
New to the project?
↓
1. Read GETTING-STARTED.md (setup and first contribution)
↓
2. Read ARCHITECTURE.md (understand the codebase)
↓
3. Read CONTRIBUTING.md (contribution workflow)
↓
4. Pick a good-first-issue and start coding!
↓
Reference .claude/CLAUDE.md as you develop
Note: The
/docs/folder contains developer documentation. User-facing docs are in the Wiki.
- 43 custom blocks across 5 categories (Containers, Interactive, Content/UI, Location, Forms)
- 11 block extensions (Animations, Sticky Header, Clickable Groups, Background Video, Responsive, and more)
- Global styles integration with theme.json
- Animation system (24+ entrance/exit animations)
- Map block with OpenStreetMap & Google Maps support
- Block patterns (Hero, CTA, Features, FAQ)
- Comprehensive documentation (15,000+ lines across wiki and docs)
- Testing infrastructure (E2E + Unit + PHP)
- FSE compatibility (Twenty Twenty-Five)
- WordPress Abilities API integration
- Expanding pattern library
- Additional block variations
- Performance optimization
- Accessibility improvements
- WordPress.org submission preparation
- Additional interactive blocks (Timeline, Testimonials, Pricing Tables)
- Advanced animation sequences
- More block patterns (20+ total)
- Video tutorials and documentation
- Enhanced Form Builder features (conditional logic, multi-step forms)
- Community feedback integration
- WordPress.org release
- Dynamic content blocks
- WooCommerce integration blocks
- Advanced theme builder features
- Template library
- Community pattern marketplace
- Form integrations (Mailchimp, ConvertKit, etc.)
- Native Integration: Uses WordPress's built-in features (useBlockProps, useInnerBlocksProps, theme.json)
- FSE Compatible: Full Site Editing support out of the box
- Theme Agnostic: Works seamlessly with any modern WordPress theme
- No jQuery: Pure vanilla JavaScript for better performance
- Clean Code: < 300 lines per file, comprehensive JSDoc documentation
- Best Practices: Follows official WordPress block development patterns
- Declarative Styling: No DOM manipulation, React-based architecture
- Security-First: Input sanitization, output escaping, nonce verification
- Small Bundle Sizes: < 10 KB per block (editor), < 5 KB (frontend)
- CSS-Only Animations: No JavaScript libraries required
- Progressive Enhancement: Core features work without JavaScript
- Tree-Shaking: Only loads what you use
- WCAG 2.1 AA: Meets accessibility standards
- Keyboard Navigation: Full keyboard support
- Screen Reader Friendly: Proper ARIA labels and announcements
- Reduced Motion: Respects
prefers-reduced-motionpreference
This project is 100% free and open source (GPL v2+). Contributions welcome!
Never contributed before? We've created comprehensive guides to get you started:
-
Getting Started Guide - Complete step-by-step setup walkthrough
- Prerequisites and software installation
- Local environment setup with wp-env
- Making your first code change
- Development tools and workflows
- Troubleshooting common issues
-
Architecture Overview - Understanding the codebase
- Project structure and folder organization
- How blocks work (from code to browser)
- Build system and asset pipeline
- Data flow and state management
- Testing infrastructure
-
Contributing Guide - Complete contribution workflow
- Development setup and prerequisites
- Code standards and best practices
- Testing requirements
- Pull request process
- Getting help and community support
Looking for something specific?
- Setup help: docs/GETTING-STARTED.md
- Code structure: docs/ARCHITECTURE.md
- Development patterns: .claude/CLAUDE.md
- Testing guide: docs/TESTING.md
- Common issues: docs/TROUBLESHOOTING.md
Already familiar with WordPress block development? Here's the quick version:
# 1. Fork and clone
git clone https://github.com/YOUR-USERNAME/designsetgo.git
cd designsetgo
# 2. Install and start
npm install
npx wp-env start # Terminal 1
npm start # Terminal 2
# 3. Access WordPress
# http://localhost:8888/wp-admin (admin/password)
# 4. Make changes, test, and submit PR!First contribution? Look for issues labeled good-first-issue.
This plugin was built 100% with AI assistance (Claude Code). We've documented everything:
-
AI-Assisted Development Guide ⭐ Complete guide!
- How this entire plugin was built with AI
- Available slash commands (/add-block, /lint, /test, /deploy, etc.)
- Best practices and workflows
- Tips, tricks, and real examples
-
.claude/CLAUDE.md - Development patterns for AI agents
- Critical patterns AI should follow
- WordPress best practices
- Project-specific conventions
-
WordPress Abilities API - AI-native programmatic access
- REST API for AI agents
- Block insertion and configuration
- Automation workflows
Using Claude Code, ChatGPT, or GitHub Copilot? These guides will help you contribute effectively with AI assistance.
Core Principles:
- ✅ Use WordPress defaults first (Block Supports, useBlockProps, theme.json)
- ✅ Keep files under 300 lines (extract components/utils)
- ✅ Test in both editor AND frontend
- ✅ Internationalize all strings (
__('Text', 'designsetgo')) - ✅ Follow WordPress coding standards
See .claude/CLAUDE.md for complete patterns.
Found a bug or have a feature request?
- Check existing issues first
- If new, create an issue with:
- WordPress version, PHP version, browser
- Steps to reproduce (for bugs)
- Use case and expected behavior (for features)
- Screenshots or videos (if helpful)
Questions? We're here to help!
- Setup/Development: See docs/GETTING-STARTED.md
- Ask Questions: GitHub Discussions
- Report Bugs: GitHub Issues
GPL-2.0-or-later - 100% Free Forever
Blocks are organized in the WordPress block inserter:
DesignSetGo Collection - All 43 blocks grouped together
- Layout Containers: Row, Section, Flex, Grid, Stack
- Interactive: Accordion, Tabs, Slider, Flip Card, Reveal, Scroll Accordion, Image Accordion, Counter Group, Progress Bar, Scroll Marquee
- Content & UI: Icon, Icon Button, Icon List, Card, Pill, Divider, Countdown Timer, Blobs
- Location: Map (OpenStreetMap & Google Maps)
- Forms: Form Builder + 12 field types (Text, Email, Phone, URL, Date, Time, Number, Checkbox, Select, Textarea, File Upload, Hidden)
WordPress Core Categories - Blocks also appear in native categories
- Design: Layout containers and interactive blocks
- Text: Icon List, Card
- Widgets: Forms, Counters, Progress Bars, Map, Countdown Timer
11 Block Extensions - Available for ANY block (core, third-party, or DesignSetGo)
- Block Animations - 24+ entrance/exit effects with scroll triggers
- Sticky Header - Sticky navigation on scroll
- Clickable Groups - Make containers clickable
- Background Video - YouTube or self-hosted video backgrounds
- Responsive Visibility - Hide/show by device
- Max Width - Content width constraints
- Custom CSS - Block-specific CSS
- Grid Span - Column/row spanning for grids
- Reveal Control - Advanced hover effects
- Text Alignment Inheritance - Align with parent context
Patterns - Pre-designed layouts
- Look for the "DesignSetGo" category in the pattern inserter
- Hero sections, CTAs, Features, FAQ layouts
📚 Complete Blocks Reference - Detailed documentation for all blocks
DesignSetGo is the first WordPress block plugin to fully integrate with the WordPress 6.9 Abilities API, enabling AI agents and automation tools to programmatically interact with blocks.
Discovery:
designsetgo/list-blocks- List all available blocks with schemas
Block Insertion:
designsetgo/insert-flex-container- Insert Flex layoutdesignsetgo/insert-grid-container- Insert responsive Grid
Configuration:
designsetgo/configure-counter-animation- Update counter settingsdesignsetgo/apply-animation- Apply animations to any block
# List all DesignSetGo blocks
curl -X POST http://yoursite.com/wp-json/wp-abilities/v1/abilities/designsetgo/list-blocks/execute \
-u "username:password" \
-d '{"category": "all"}'
# Insert a Flex container
curl -X POST http://yoursite.com/wp-json/wp-abilities/v1/abilities/designsetgo/insert-flex-container/execute \
-u "username:password" \
-d '{
"post_id": 123,
"attributes": {
"direction": "row",
"justifyContent": "center"
}
}'- ✅ Claude (via Model Context Protocol)
- ✅ ChatGPT (via REST API)
- ✅ Custom Automation Tools
📖 Full Abilities API Documentation →
- Documentation: See docs/ folder for comprehensive guides
- GitHub Issues: Report bugs or request features
- Discussions: Ask questions in GitHub Discussions
- How to Use Guide - Getting started
- Troubleshooting - Common issues
- Claude Code Learnings - Development insights
Coming soon - preparing for submission
Built with ❤️ for the WordPress community by developers who believe in:
- WordPress-first development
- Open source collaboration
- Accessible, performant web experiences
- Clean, maintainable code
Powered by: React, WordPress Block Editor, Webpack, @wordpress/scripts, WordPress Abilities API
License: GPL-2.0-or-later | Version: 1.0.0 | Requires WordPress: 6.4+ | Requires PHP: 7.4+