Magical Blocks – Elementor Style Blocks for Gutenberg

Magical Blocks brings the Elementor experience to Gutenberg – build stunning websites with the same powerful design controls you love, but 100% native to the WordPress block editor.

🎯 Why Magical Blocks?

• Elementor-Style Workflow – Familiar container-based layouts with Flexbox controls
• Lightweight & Fast – Only loads assets for blocks you actually use
• Design-First – Professional styling with full customization options
• WordPress Native – Built entirely on the Gutenberg block editor
• Developer Friendly – Clean code following WordPress coding standards

🚀 Get the Elementor Vibe in WordPress Editor

Miss Elementor’s intuitive design controls? Magical Blocks brings that same power to Gutenberg:

• Flexbox Containers – Build complex layouts with direction, wrap, justify, and align controls
• Nested Containers – Create sophisticated multi-column designs with Inner Container blocks
• Full Responsive Control – Desktop, tablet, and mobile settings for every property
• Visual Design Panel – Intuitive controls just like your favorite page builder

📦 12 Free Blocks

Layout Blocks:
1. Container Block – Powerful Flexbox container with full layout controls (direction, wrap, justify, align)
2. Inner Container Block – Nestable container for complex multi-column layouts
3. Section Block – Full-width sections with backgrounds and inner blocks

Content Blocks:
4. Heading Block – Advanced typography controls with Google Fonts integration
5. Button Block – Stylish buttons with hover effects and icon support
6. Icon Box Block – Icon + text combinations for features and services
7. Testimonial Block – Customer reviews with avatar and star ratings
8. Info Box Block – Information cards with icons and call-to-action
9. Image Box Block – Image + text layouts with hover effects
10. Counter Block – Animated number counters for statistics
11. Progress Bar Block – Visual progress indicators with animations
12. Divider Block – Stylish separators with icons and text

⚡ Key Features

• Flexbox Layout System – Container blocks with full Flexbox controls like Elementor
• On-Demand Asset Loading – CSS/JS only loads when blocks are used
• Responsive Controls – Desktop, tablet, and mobile settings for all properties
• CSS Variables – Easy theme integration and customization
• Block Patterns – Pre-designed layouts (coming soon)
• Pro Blocks – Additional premium blocks available (coming soon)

🎨 Full Customization

Every block includes comprehensive styling options – just like Elementor:

• Typography (font family, size, weight, line-height, letter-spacing)
• Colors (text, background, borders with opacity support)
• Spacing (padding, margin with responsive controls)
• Borders (width, radius, style, color)
• Shadows (customizable box shadows)
• Hover effects (transitions and transforms)
• Layout Controls (Flexbox direction, wrap, justify, align, gap)

🔧 Developer Features

• PHPCS compliant (WordPress Coding Standards)
• ESLint & Prettier configured
• Webpack build system with @wordpress/scripts
• Proper internationalization (i18n ready)
• Documented codebase with PHPDoc/JSDoc

💡 Perfect For Elementor Users

Switching from Elementor to Gutenberg? Magical Blocks makes the transition smooth:

• Same container-based workflow you’re used to
• Familiar Flexbox layout controls
• Visual design panels for all styling options
• No learning curve – just start building!