Conversion Blocks

Beautiful Gutenberg blocks that convert visitors into customers.

Blocks

• Pricing Table - Beautiful pricing displays with multiple plans
• Accordion / FAQ - Organize content in expandable sections
• Feature Grid - Showcase features in a responsive grid with icons
• Button - Call-to-action buttons with hover effects

Development

Prerequisites

• Node.js 18+
• npm or pnpm
• WordPress 6.0+
• PHP 7.4+

Build Blocks

# Install dependencies
npm install
# or
pnpm install

# Build for production
npm run build

# Development with watch
npm run start

Plugin Structure

conversion-blocks/
├── blocks/
│   ├── src/                    # Block source files
│   │   ├── accordion/
│   │   │   ├── block.json
│   │   │   ├── index.js
│   │   │   ├── edit.js
│   │   │   ├── save.js
│   │   │   ├── view.js
│   │   │   ├── style.css
│   │   │   └── editor.css
│   │   ├── button/
│   │   ├── feature-grid/
│   │   └── pricing-table/
│   └── dist/                   # Compiled block output
├── src/                        # PHP source
│   ├── Main.php
│   ├── Blocks/
│   ├── Admin/
│   └── Assets/
├── assets/                     # Static assets
└── conversion-blocks.php       # Main plugin file

Install in WordPress

1. Build the blocks: npm run build
2. Generate autoloader: composer install --no-dev
3. Zip the plugin (excluding node_modules, src/ except compiled)
4. Upload to WordPress via Plugins > Add New > Upload
5. Activate the plugin

Testing

The plugin follows WordPress.org Plugin Check standards. Run checks with:

wp plugin check conversion-blocks

Architecture

• Singleton Pattern - Main class with single instance
• Namespaced - All classes under ConversionBlocks\ namespace
• PSR-4 Autoloading - Composer autoloader
• Controller Pattern - Separate controllers for Blocks, Admin, Assets
• Security First - ABSPATH checks, output escaping, input sanitization

License

GPL v3 or later

Support

• Support Forum
• GitHub Issues