CraftBlocks

Modern Gutenberg Blocks Library for WordPress

CraftBlocks is a custom-built collection of professional, production-ready Gutenberg blocks — designed with clean architecture, full customization control, and performance in mind. Built from scratch using PSR-4 autoloading, OOP principles, and the native WordPress Block Editor APIs.

✨ Features

Blocks (Phase 1)

• ✅ Hero Banner — Heading, subheading, button, background image, overlay, alignment, full Typography/Color/Spacing controls on heading and button
• ✅ Pricing Table — Price, currency, feature list (repeater), button, featured badge
• ✅ FAQ Accordion — Unlimited questions, rich text, native collapsible (<details>/<summary>), custom icons
• ✅ Team Members — Per-member photo, name, position, bio, nested social links (platform + URL)
• ✅ Call To Action — Title, description, button, solid/gradient background with live color picker

Blocks (Phase 2 — Planned)

• 🔲 Notice
• 🔲 Feature List
• 🔲 Timeline
• 🔲 Testimonials
• 🔲 Stats Counter

Shared Customization System

CraftBlocks uses a shared, reusable Inspector Controls architecture so every block can offer rich customization without duplicating code:

• 🎛️ TypographyControls — Font family, size, weight, line-height
• 🎨 ColorControls — Text/background color + optional hover color, with visual color picker
• 📐 SpacingControls — Padding, margin, border radius, shadow presets

Currently fully wired into Hero Banner (heading + button). Rolling out to the remaining Phase 1 blocks next.

Core Capabilities

• 📦 Dedicated Block Category — All blocks grouped under "CraftBlocks" in the inserter
• 🔁 Auto Block Registration — New blocks are discovered from build/ automatically, no manual registration
• 📱 Responsive Grid Layouts — CSS Grid (auto-fit/minmax) for Pricing Table and Team Members, no media queries needed

🛠️ Tech Stack

• PHP 8.1+ — OOP, PSR-4 autoloading via Composer
• React (@wordpress/scripts) — Block editor UI
• WordPress Block API v3 — Modern block registration via block.json
• SCSS — Block styling

📋 Requirements

• WordPress 6.8+
• PHP 8.1+
• Node.js 20+ (development only)

🚀 Installation

For users

1. Download the latest release from the Releases page
2. Upload the craftblocks folder to /wp-content/plugins/
3. Activate CraftBlocks from the WordPress Plugins screen

For developers

git clone https://github.com/mdaktarujjaman/craftblocks.git
cd craftblocks

# Install PHP dependencies
composer install

# Install JS dependencies
npm install

# Build blocks for production
npm run build

# Or start development mode with live rebuild
npm run start

🏗️ Architecture

craftblocks/ ├── craftblocks.php # Plugin bootstrap ├── includes/ # PHP backend (PSR-4: CraftBlocks) │ ├── Core/ # Plugin lifecycle, hook loader │ ├── Blocks/ # Block auto-registration │ └── Support/ # Block category, shared utilities ├── src/ # React block source │ ├── shared/ │ │ └── components/ # Reusable Inspector Controls │ │ ├── TypographyControls.js │ │ ├── ColorControls.js │ │ └── SpacingControls.js │ ├── hero-banner/ │ ├── pricing-table/ │ ├── faq-accordion/ │ ├── team-members/ │ └── call-to-action/ │ ├── block.json │ ├── index.js │ ├── edit.js │ ├── save.js │ ├── style.scss │ └── editor.scss └── build/ # Compiled output (generated by wp-scripts) Each block is auto-discovered and registered from the build/ directory — no manual registration required when adding new blocks. Shared Inspector Controls live in src/shared/components/ and are imported into each block's edit.js as needed.

📐 Coding Standards

This project follows:

• ✅ WordPress Coding Standards (PHPCS)
• ✅ PSR-4 Autoloading
• ✅ Object-Oriented Programming
• ✅ Nonce Verification
• ✅ Input Sanitization
• ✅ Output Escaping (esc_html(), esc_url(), wp_kses_post())
• ✅ Proper Hooks & Filters
• ✅ Internationalization (__(), _e())

🗺️ Roadmap

• [x] Plugin architecture & core bootstrap
• [x] Hook loader system
• [x] Auto block discovery/registration
• [x] Hero Banner block (fully customizable)
• [x] Pricing Table block
• [x] FAQ Accordion block
• [x] Team Members block
• [x] Call To Action block
• [x] Shared Typography / Color / Spacing controls system
• [ ] Roll out shared controls to Pricing Table, FAQ, Team Members, CTA
• [ ] Phase 2 blocks (Notice, Feature List, Timeline, Testimonials, Stats Counter)
• [ ] Responsive (desktop/tablet/mobile) control overrides
• [ ] PHPCS setup & CI
• [ ] WordPress.org submission

📄 License

GPL v2 or later — see LICENSE for details.

👤 Author

Md Aktarujjaman GitHub