magdev/wp-bootstrap

Fork 0

Files

magdev 9bb7f4f47f

Create Release Package / PHP Lint (push) Successful in 52s

Details

Create Release Package / Build Release (push) Failing after 1m52s

Details

v0.1.0 - Core Theme: patterns, dark mode, block styles, style variations

- Add 16 block patterns across 7 new categories (hero, features, CTA,
  testimonials, pricing, contact, text)
- Add dark mode toggle with localStorage persistence and system preference
  detection (Bootstrap 5.3 data-bs-theme)
- Register 17 custom block styles mapping Bootstrap components to WordPress
  blocks (cards, alerts, tables, buttons, etc.)
- Add 4 style variations: Ocean, Forest, Sunset, Midnight
- Add sidebar template part and "Blog with Sidebar" custom template
- Add Inter and Lora variable fonts with fontFace declarations
- Add Display font size (fluid 2.5rem-3.5rem)
- Update translations (en_US .pot, de_CH .po) with all new strings
- Bump version to 0.1.0

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

2026-02-08 03:07:16 +01:00

3.3 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 (Complete)

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)

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.3 KiB Raw Blame History