XG CTA Blocks - WordPress Gutenberg Plugin

A comprehensive collection of Call-to-Action (CTA) blocks designed specifically for WordPress Gutenberg editor. Create engaging, conversion-focused content with beautiful, customizable CTA blocks.

🚀 Features

• 7 Unique CTA Block Types - Various styles to match your content needs
• Fully Customizable - Colors, gradients, text, buttons, and more
• Responsive Design - Mobile-friendly and accessible
• Easy Integration - Works seamlessly with WordPress Gutenberg
• Professional UI - Clean, modern designs that convert

📦 Block Types

1. Inline CTA Block

• Perfect for embedding within content
• Gradient background support
• Customizable buttons and colors
• Icon support with emoji options

2. Sidebar CTA Block

• Ideal for complementary content areas
• Space-efficient design
• Multiple styling options

3. Text Link CTA Block

• Subtle, text-based call-to-action
• Perfect for in-content linking
• Minimal design approach

4. Newsletter CTA Block

• Email capture focused
• Newsletter subscription forms
• Engagement-optimized layout

5. Floating Bar CTA Block

• Attention-grabbing sticky positioning
• Non-intrusive floating design
• High conversion potential

6. Testimonial CTA Block

• Social proof integration
• Customer testimonial display
• Trust-building design

7. Problem-Solution CTA Block

• Problem-agitate-solve framework
• Educational content structure
• Conversion-focused layout

🛠 Installation

1. Download the plugin files
2. Upload to your WordPress /wp-content/plugins/ directory
3. Activate the plugin through the WordPress admin panel
4. Find "Xgenious Blocks" category in Gutenberg editor

💻 Development

Requirements

• Node.js (v14 or higher)
• npm or yarn
• WordPress 5.0+
• PHP 7.4+

Setup Development Environment

# Install dependencies
npm install

# Build all blocks for production
npm run build

# Start development for inline CTA block
npm run start

# Start development for sidebar CTA block
npm run start:sidebar

Build Process

The plugin uses WordPress Scripts for building:

npm run build

This command builds all 7 blocks simultaneously, creating optimized files in the build/ directory.

📁 Project Structure

xgcta/
├── src/
│   └── blocks/
│       ├── cta-inline/
│       │   ├── block.json
│       │   └── index.js
│       ├── cta-sidebar/
│       ├── cta-text-link/
│       ├── cta-newsletter/
│       ├── cta-floating-bar/
│       ├── cta-testimonial/
│       └── cta-problem-solution/
├── build/           # Compiled assets
├── package.json
├── xgcta.php       # Main plugin file
└── README.md

🎨 Customization

Each block offers extensive customization options:

• Colors: Background, text, button colors
• Gradients: Beautiful gradient backgrounds
• Typography: Custom text styling
• Buttons: Multiple button support with hover effects
• Icons: Emoji and custom icon support
• Layout: Responsive design options

📖 Usage Examples

Basic Inline CTA

<!-- wp:xgenious/cta-inline {
    "title": "Ready to Get Started?",
    "description": "Join thousands of satisfied customers today.",
    "buttons": [{"text": "Start Now", "url": "/signup"}]
} /-->

🔧 Technical Details

Block Registration

All blocks are registered in the main PHP file (xgcta.php) using WordPress's register_block_type() function.

Asset Management

• Editor assets: JavaScript and CSS for the Gutenberg editor
• Frontend assets: Styles for the public-facing site
• Automatic versioning using file modification time

WordPress Integration

• Custom block category: "Xgenious Blocks"
• Proper textdomain support for internationalization
• Security: Direct access prevention

🌐 Browser Support

• Chrome (latest 2 versions)
• Firefox (latest 2 versions)
• Safari (latest 2 versions)
• Edge (latest 2 versions)

📝 Changelog

Version 1.0.0

• Initial release
• 7 CTA block types
• Full Gutenberg integration
• Responsive design
• Customization options

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

📄 License

GPL v2 or later - https://www.gnu.org/licenses/gpl-2.0.html

👥 Author

Xgenious - https://xgenious.com/

🆘 Support

For support, please visit our website or create an issue in the repository.

---

Made with ❤️ by Xgenious Team