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!