You've already forked wp-bootstrap
magdev
edf053d7ea
Add Rose, Sand, Lavender, Mint (light) and Ember, Arctic, Amethyst, Slate, Mocha, Nebula, Obsidian (dark) color palettes for the Design Editor. Total of 15 style variations available (7 light, 7 dark). Co-Authored-By: Claude <noreply@anthropic.com>
115 lines
4.0 KiB
Markdown
115 lines
4.0 KiB
Markdown
# WP Bootstrap - Development Plan
|
|
|
|
## Project Vision
|
|
|
|
WP Bootstrap is a modern WordPress Block Theme built from scratch with Bootstrap 5. It provides a clean, responsive foundation for WordPress websites using the Full Site Editing (FSE) architecture with Bootstrap's design system.
|
|
|
|
## Architecture
|
|
|
|
### Theme Type
|
|
|
|
Full Site Editing (FSE) Block Theme following the WordPress 6.x template hierarchy:
|
|
|
|
- **Templates** (`templates/`): HTML files with WordPress block markup (Site Editor)
|
|
- **Template Parts** (`parts/`): Reusable header/footer components (Site Editor)
|
|
- **Patterns** (`patterns/`): PHP files with block markup and i18n support
|
|
- **Design Tokens** (`theme.json`): Colors, typography, spacing mapped to Bootstrap 5
|
|
- **Twig Templates** (`views/`): Bootstrap 5 HTML rendered on the frontend via `template_redirect`
|
|
- **Template Engine** (`inc/Template/`): Controller, context builder, and nav walker for Twig rendering
|
|
|
|
### Technology Stack
|
|
|
|
- **PHP 8.3+** with PSR-4 autoloading
|
|
- **Twig 3.0** via Composer for custom block rendering
|
|
- **Bootstrap 5.3+** CSS & JS served locally
|
|
- **Dart Sass** for SCSS compilation
|
|
- **PostCSS** with Autoprefixer and cssnano for production CSS
|
|
|
|
### Build Pipeline
|
|
|
|
```txt
|
|
src/scss/style.scss → sass → assets/css/style.css → postcss → assets/css/style.min.css
|
|
src/scss/editor-style.scss → sass → assets/css/editor-style.css
|
|
node_modules/bootstrap/dist/js/ → copyfiles → assets/js/bootstrap.bundle.min.js
|
|
```
|
|
|
|
## Version Roadmap
|
|
|
|
### v0.0.1 - Getting Started (Complete)
|
|
|
|
- [x] Theme scaffolding and project setup
|
|
- [x] Bootstrap 5 CSS/JS integration
|
|
- [x] SASS build pipeline
|
|
- [x] Basic FSE templates and patterns
|
|
- [x] Twig infrastructure
|
|
- [x] Gitea CI/CD workflow
|
|
- [x] i18n support (en_US, de_CH)
|
|
|
|
### v0.1.0 - Core Theme (Complete)
|
|
|
|
- [x] Complete set of block patterns
|
|
- [x] Dark mode toggle implementation
|
|
- [x] Custom block styles for Bootstrap components
|
|
- [x] Style variations (color schemes)
|
|
- [x] Sidebar template part
|
|
- [x] Enhanced typography settings
|
|
|
|
### v0.1.1 - Bootstrap Frontend Rendering (Complete)
|
|
|
|
- [x] Twig-based frontend rendering via `template_redirect` hook
|
|
- [x] `TemplateController`, `ContextBuilder`, `NavWalker` PHP classes
|
|
- [x] 20 Twig templates (base layout, pages, partials, components)
|
|
- [x] Bootstrap 5 navbar, cards, pagination, comments, sidebar
|
|
- [x] Enhanced `TwigService` with WordPress functions and globals
|
|
- [x] Navigation menu locations (primary, footer)
|
|
- [x] Comment form Bootstrap styling
|
|
- [x] README.md project documentation
|
|
|
|
### v0.2.0 - Design Editor (Complete)
|
|
|
|
- [x] Full Design Editor compatibility
|
|
- [x] Custom block categories
|
|
- [x] Page-level patterns and templates
|
|
- [x] Enhanced header/footer variations
|
|
- [x] Custom navigation styles
|
|
|
|
### v0.3.0 - Polish (Complete)
|
|
|
|
- [x] Performance optimization
|
|
- [x] Accessibility audit and fixes
|
|
- [x] Security audit and fixes
|
|
- [x] RTL language support
|
|
- [x] Additional translations
|
|
- [x] Documentation
|
|
|
|
### v1.0.0 - Release
|
|
|
|
- [ ] All features complete and tested
|
|
- [ ] WordPress.org theme review compliance
|
|
- [ ] Comprehensive documentation
|
|
- [ ] Full test coverage
|
|
- [ ] Update `README.md`
|
|
|
|
## Bootstrap 5 Integration Strategy
|
|
|
|
### CSS
|
|
|
|
Bootstrap SCSS is imported into the theme's build pipeline with variable overrides applied before import. The compiled CSS contains the full Bootstrap framework plus WordPress-specific overrides.
|
|
|
|
### JavaScript
|
|
|
|
The Bootstrap JS bundle (including Popper.js) is served as a pre-built file copied from `node_modules` during the build step.
|
|
|
|
### Design Tokens
|
|
|
|
`theme.json` colors, typography, and spacing are aligned with Bootstrap's default SCSS variables to ensure visual consistency between the WordPress editor and the frontend.
|
|
|
|
## Dark Mode Plan
|
|
|
|
Bootstrap 5.3+ includes built-in dark mode via the `data-bs-theme="dark"` attribute. Implementation plan:
|
|
|
|
1. SCSS: `$enable-dark-mode: true` generates dark mode CSS custom properties
|
|
2. JavaScript: Toggle mechanism with `localStorage` persistence
|
|
3. WordPress: Integration with the Site Editor color scheme
|
|
4. Accessibility: Respect `prefers-color-scheme` media query
|