⚡ The Enterprise Modular Gutenberg Block Suite & Design System for WordPress
Supercharge the WordPress Block Editor with 58+ production-ready blocks, 38 design system controls, dynamic zero-unused CSS engine, visual form builder, and cloud template library.
About • Why Frontis? • Architecture • Setup • Scripts • Contributing • Support ⭐ • Contributors • Credits • License
Frontis Blocks is a high-performance, modular WordPress Gutenberg plugin and design system. It transforms the core WordPress Block Editor into an intuitive, visual website builder—eliminating the severe performance overhead, code bloat, and proprietary vendor lock-in of traditional page builders like Elementor and Divi.
Every layout, spacing, typography, and responsive decision is compiled dynamically into scoped inline CSS via Frontis Blocks' custom dynamic styling engine. The result: zero unused CSS, blazingly fast load times, and flawless Google Core Web Vitals scores right out of the box.
| Feature | Frontis Blocks | Generic Block Addons (Spectra / Kadence) | Traditional Builders (Elementor / Divi) |
|---|---|---|---|
| Gutenberg Native | ✅ 100% Native Block Canvas | ❌ Completely proprietary builder iframe | |
| Block Diversity | ✅ 58+ Blocks (All Free) | ❌ Requires costly annual Pro subscriptions | |
| Design Controls | ✅ 38 Core Controls (@Components/*) |
❌ Monolithic proprietary inspector | |
| CSS Delivery Engine | ✅ Zero Unused CSS via dynamic queue | ❌ Heavy CSS/JS runtime loaded sitewide | |
| Form Builder | ✅ Built-in visual form builder + stylers | ❌ Bloated form widgets | |
| Core Web Vitals | ✅ 95+ PageSpeed Scores out-of-the-box | ❌ Poor (DOM inflation, heavy JS payloads) | |
| Licensing & Freedom | ✅ GPL-2.0-or-later (100% Open Source) | ❌ Strict SaaS licenses & renewal lock-in |
flowchart LR
Editor["WordPress Block Editor (Gutenberg)"] --> Components["38 Core Design Controls (@Components/*)"]
Components --> Blocks["58+ Custom Blocks (src/blocks/*)"]
Blocks --> Engine["Dynamic CSS Compiler (styling.js)"]
Engine --> Frontend["Zero-Unused-CSS Frontend Render"]
Blocks --> Cloud["Template Cloud Importer (admin/template-library)"]
- 58+ Production-Grade Gutenberg Blocks: Comprehensive coverage spanning containers, sliders, accordions, dynamic query loop builders, multi-column pricing, interactive modals, and forms.
- 38 Unified Core Design System Controls: Shared React controls located in
src/components/ensuring 100% consistent typography, responsive spacing, color swatches, box shadows, and icon selectors across all blocks. - Zero-Unused-CSS Style Engine: Dynamic CSS rules are compiled on-demand in
styling.jsand injected directly into the page header. No massive sitewide stylesheets are ever enqueued. - Integrated Form Builder: Design custom interactive lead generation forms with text, textarea, and select dropdown fields, alongside visual stylers for Fluent Forms and Contact Form 7.
- Cloud Template Library & Full-Site Import: Instantly import professionally designed block patterns, landing pages, and full website templates directly from the block editor.
- Certified Multi-PHP CI Matrix: Every commit is continuously validated against PHP 7.4, 8.0, 8.1, 8.2, 8.3, and 8.4 in automated GitHub Actions.
frontis-blocks/
├── admin/ # Admin dashboard, template library & settings UI
│ ├── components/ # Admin-specific React components
│ ├── dashboard/ # Plugin dashboard & settings UI
│ ├── scss/ # Admin styles & design tokens
│ └── template-library/ # Cloud template library importer
├── assets/ # Public assets (icons, fonts, vendor libraries)
├── build/ # Compiled distribution assets (Webpack output)
├── includes/ # PHP Backend Architecture (PSR-4)
│ ├── Activator/ # Activation & migration hooks
│ ├── Admin/ # WordPress admin menu & settings handlers
│ ├── Core/ # Core block registration & asset enqueueing
│ ├── Forms/ # Form builder backend & submissions
│ ├── RestApi/ # Custom WP REST API endpoints
│ └── Plugin.php # Main plugin singleton orchestrator
├── languages/ # Translation POT & PO files
├── src/ # Source Code
│ ├── blocks/ # 58 Gutenberg Blocks (accordion, slider, grid, etc.)
│ ├── components/ # 38 Core Design System Controls (@Components/*)
│ ├── config/ # Block configuration & presets
│ └── utils/ # React hooks, helpers & color utilities
├── .github/ # GitHub Actions (CI/CD, PR & Issue triage)
├── AGENTS.md # Contributor & AI Agent Operational Handbook
├── CONTRIBUTING.md # Contribution guidelines & Conventional Commits
└── LICENSE # GNU General Public License v2.0
| Requirement | Minimum Version | Recommended |
|---|---|---|
| Node.js | >= 18.0.0 |
20.x LTS |
| npm | >= 9.0.0 |
10.x |
| PHP | >= 7.4.0 |
8.2 / 8.3 |
| WordPress | >= 6.0.0 |
6.7+ |
- Open Local and create a fresh WordPress site.
- Clone this repository directly into the site's plugin directory:
cd ~/Local\ Sites/<site-name>/app/public/wp-content/plugins/ git clone https://github.com/boom-devs/frontis-blocks.git cd frontis-blocks
- Install dependencies and compile initial block assets:
npm install composer install npm run build # Compiles production block bundles into build/ npm run start # Starts development watch mode
- Activate Frontis Blocks from WP Admin → Plugins.
# 1. Clone repository
git clone https://github.com/boom-devs/frontis-blocks.git
cd frontis-blocks
# 2. Install dependencies & build
npm install
composer install
npm run build
# 3. Start WordPress in Docker (Port 8888)
npx @wordpress/env start- Frontend: http://localhost:8888
- WP Admin: http://localhost:8888/wp-admin (
Username: admin,Password: password) - Stop Environment:
npx @wordpress/env stop
| Command | Purpose |
|---|---|
npm run start |
Watch mode for block development (wp-scripts start) |
npm run build |
Compiles production block bundles into build/ (Webpack 5 filesystem cache enabled) |
npm run admin |
Watch mode for admin dashboard and template library assets |
npm run admin:build |
Compiles admin stylesheets and React dashboard for production |
npm run format |
Auto-formats code according to WordPress coding standards |
npm run lint:js |
Runs ESLint across all JavaScript source files |
npm run lint:css |
Runs Stylelint across SCSS stylesheets |
npm run plugin-zip |
Generates a clean, production-ready distributable archive (frontis-blocks.zip) |
Every pull request runs automated GitHub Actions workflows:
- Multi-PHP Syntax & Compatibility: Parallel linting across PHP 7.4, 8.0, 8.1, 8.2, 8.3, and 8.4.
- Block & Admin Build Verification: Compiles all 58+ block entry points and admin stylesheets with Webpack 5.
- Webpack 5 Persistent Cache: Fast CI builds powered by persistent filesystem caching (
.cache/webpack). - Packaging & Archive Audit: Verifies distributable zip creation (
webpack.zip.js) with zero missing dependencies. - Dependency Caching: Instant CI runs using
actions/cache@v4for Composer and NPM modules.
We welcome contributions from developers, designers, and documentation writers! Please review our governance guidelines before submitting pull requests:
- 📖 CONTRIBUTING.md: Contribution workflow, Conventional Commits, and PR conventions.
- 🤖 AGENTS.md: AI agent & contributor technical operational handbook.
- 📜 CODE_OF_CONDUCT.md: Contributor Covenant v2.1 code of conduct.
- 🛡️ SECURITY.md: Vulnerability disclosure and security reporting policy.
Important
Issue-Driven Development: All pull requests must resolve an approved GitHub Issue using Closes #<issue_number>.
Caution
Strict Component Lock Policy (src/components/):
src/components/ contains 38 core UI design system controls shared across 58+ blocks.
- MAINTAINERS ONLY: Only repository maintainers (
@noruzzamans,@boom-devs) are authorized to modify, refactor, or add files insrc/components/. - NO EXTERNAL EDITS: External contributors and autonomous AI agents are strictly forbidden from editing
src/components/. - AUTOMATED REJECTION: Any external pull request touching
src/components/will be immediately flagged withneeds: changesand rejected by CI/CD guards.
If you find Frontis Blocks valuable or use it in your projects, please consider giving it a star on GitHub! It takes just a second and helps the project gain visibility across the WordPress & open-source community, attract more contributors, and motivates ongoing active development.
- Star this repository to bookmark it for future use.
- Share it with fellow WordPress developers, agencies, and friends.
- Contribute code, docs, or ideas to our open Issues.
Thank you to all the amazing people who contribute to Frontis Blocks!
Contributions of any kind are welcome! See our Contributing Guide to get started.
WordPress & PHP Backend Engineer
|
Senior WordPress Systems & Core Engineer
|
- WordPress Gutenberg — Block editor framework.
- React — Declarative UI component engine.
- Swiper.js — High-performance modern touch slider library.
- Lottie & Rive — Next-generation vector animation engines.
- Appsero — Telemetry and plugin analytics.
Frontis Blocks is open-source software licensed under the GNU General Public License v2.0 or later (GPL-2.0-or-later).
Frontis Blocks - Next-Generation Gutenberg Block Library for WordPress
Copyright (C) 2024-2026 BoomDevs
This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.