Get Elementor vibe in the WordPress Editor! Powerful Gutenberg blocks with Flexbox containers, responsive controls, and professional design options.
- 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
Try Magical Blocks instantly in your browser - no installation required!
Or copy this link:
https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/noralam/magical-blocks/main/blueprint.json
| Block | Description |
|---|---|
| 🔲 Container | Powerful Flexbox container with full layout controls (direction, wrap, justify, align) |
| 📐 Inner Container | Nestable container for complex multi-column layouts |
| 📄 Section | Full-width sections with backgrounds and inner blocks |
| Block | Description |
|---|---|
| 🔤 Heading | Advanced typography controls with Google Fonts integration |
| 🔘 Button | Stylish buttons with hover effects and icon support |
| 📦 Icon Box | Icon + text combinations for features and services |
| 💬 Testimonial | Customer reviews with avatar and star ratings |
| ℹ️ Info Box | Information cards with icons and call-to-action |
| 🖼️ Image Box | Image + text layouts with hover effects |
| 🔢 Counter | Animated number counters for statistics |
| 📊 Progress Bar | Visual progress indicators with animations |
| ➖ Divider | Stylish separators with icons and text |
- 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 – 7 pre-designed layouts ready to use
Pre-built layouts to get you started quickly:
- Hero Section - Full-width hero with gradient background and CTAs
- Features Grid - 3-column feature showcase with icon boxes
- Services Section - Professional service cards layout
- Testimonial Cards - Customer reviews in elegant cards
- Pricing Table - 3-tier pricing comparison
- Team Section - Team member profiles with social links
- CTA Banner - Call-to-action banner with gradient
- WordPress 6.0 or higher
- PHP 8.0 or higher
- Modern browser with ES6 support
- Go to Plugins > Add New in your WordPress admin
- Search for "Magical Blocks"
- Click Install Now and then Activate
- Download the plugin ZIP file
- Go to Plugins > Add New > Upload Plugin
- Choose the ZIP file and click Install Now
- Activate the plugin
cd wp-content/plugins/
git clone https://github.com/noralam/magical-blocks.git
cd magical-blocks
npm install
npm run build- Node.js 18+
- npm or yarn
- Composer (for PHP dependencies)
# Clone the repository
git clone https://github.com/noralam/magical-blocks.git
cd magical-blocks
# Install dependencies
npm install
composer install
# Start development
npm run start
# Build for production
npm run build| Command | Description |
|---|---|
npm run build |
Build for production |
npm run start |
Development mode with watch |
npm run lint:js |
JavaScript linting |
npm run lint:css |
CSS linting |
npm run format |
Format code with Prettier |
composer run phpcs |
PHP code standards check |
magical-blocks/
├── blocks/ # Server-side block rendering
├── build/ # Compiled assets (generated)
├── includes/ # PHP classes and functions
│ ├── traits/ # Reusable PHP traits
│ └── class-*.php # Main plugin classes
├── languages/ # Translation files
├── patterns/ # Block patterns
├── src/ # Source files
│ ├── blocks/ # Individual block source
│ ├── common/ # Shared utilities
│ └── components/ # Reusable React components
├── blueprint.json # WordPress Playground config
├── magical-blocks.php # Main plugin file
└── readme.txt # WordPress.org readme
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the GPL-2.0+ License - see the LICENSE file for details.
Noor Alam
- WordPress.org: @nalam-1
- GitHub: @noralam
- Website: wpthemespace.com
- ⭐ Star this repository if you find it helpful
- 🐛 Report bugs
- 💡 Request features
- 📖 Documentation
Made with ❤️ for the WordPress community