Files

magdev d7415b9747 Initial theme scaffolding (v0.0.1)

- Bootstrap 5 CSS/JS integration via Yarn (served locally)
- Dart Sass build pipeline with PostCSS, Autoprefixer, cssnano
- Twig 3.0 via Composer with PSR-4 autoloading
- FSE block theme templates (index, home, single, page, archive, search, 404)
- Template parts (header, footer) and block patterns
- theme.json with Bootstrap 5-aligned design tokens
- Gitea CI/CD workflow for automated release packages
- WordPress i18n support (en_US base, de_CH translation)

Co-Authored-By: Claude <noreply@anthropic.com>

2026-02-08 02:25:33 +01:00

3.1 KiB

Raw Blame History

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
Template Parts (parts/): Reusable header/footer components
Patterns (patterns/): PHP files with block markup and i18n support
Design Tokens (theme.json): Colors, typography, spacing mapped to Bootstrap 5

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

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 (Current)

Theme scaffolding and project setup
Bootstrap 5 CSS/JS integration
SASS build pipeline
Basic FSE templates and patterns
Twig infrastructure
Gitea CI/CD workflow
i18n support (en_US, de_CH)

v0.1.0 - Core Theme

Complete set of block patterns
Dark mode toggle implementation
Custom block styles for Bootstrap components
Style variations (color schemes)
Sidebar template part
Enhanced typography settings

v0.2.0 - Design Editor

Full Design Editor compatibility
Custom block categories
Page-level patterns and templates
Enhanced header/footer variations
Custom navigation styles

v0.3.0 - Polish

Performance optimization (selective Bootstrap imports)
Accessibility audit and fixes
RTL language support
Additional translations
Documentation

v1.0.0 - Release

All features complete and tested
WordPress.org theme review compliance
Comprehensive documentation
Full test coverage

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:

SCSS: $enable-dark-mode: true generates dark mode CSS custom properties
JavaScript: Toggle mechanism with localStorage persistence
WordPress: Integration with the Site Editor color scheme
Accessibility: Respect prefers-color-scheme media query

3.1 KiB Raw Blame History