fix: decode WordPress title entities before Twig to prevent double-encoding (v1.0.10)

WordPress's get_the_title() pre-encodes & as &. Twig autoescape
re-encoded the & in & to &, rendering as literal &
in the browser. Wrapped all 6 get_the_title() calls in ContextBuilder
with wp_specialchars_decode() so Twig can properly re-encode once.

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

.gitea/workflows/release.yml

@@ -113,7 +113,6 @@ jobs:
             -x "${THEME_NAME}/src/*" \
             -x "${THEME_NAME}/package.json" \
             -x "${THEME_NAME}/package-lock.json" \
-            -x "${THEME_NAME}/yarn.lock" \
             -x "${THEME_NAME}/composer.json" \
             -x "${THEME_NAME}/composer.lock" \
             -x "${THEME_NAME}/.gitignore" \

.gitignore

@@ -15,13 +15,16 @@ vendor/
 .DS_Store
 Thumbs.db
 
-# Yarn
-yarn-error.log
+# npm
+npm-debug.log
 
 # Backup files
 *.bak
 *.po~
 
+# Compiled translations (built by CI/CD release workflow)
+*.mo
+
 # Claude local settings
 .claude/settings.local.json
 

.markdownlint.json

@@ -0,0 +1,4 @@
+{
+  "MD024": false,
+  "MD013": false
+}

CHANGELOG.md

@@ -2,6 +2,210 @@
 
 All notable changes to this project will be documented in this file.
 
+## [1.0.10] - 2026-02-25
+
+### Fixed
+
+- **Title double-encoding in Twig templates** (`inc/Template/ContextBuilder.php`): WordPress's `get_the_title()` pre-encodes `&` as `&`. When passed to Twig with autoescape enabled, the `&` in `&` was escaped again to `&`, rendering as literal `&` in the browser (e.g. "Bewerbungen & Nachrichten" instead of "Bewerbungen & Nachrichten"). Fixed by wrapping all 6 `get_the_title()` calls with `wp_specialchars_decode()` to decode WordPress entities before Twig. Twig autoescape then properly re-encodes `&` → `&`. This is XSS-safe because Twig still escapes all output.
+
+## [1.0.9] - 2026-02-19
+
+### Performance
+
+- **Color variation CSS transient caching** (`functions.php`): `wp_bootstrap_variation_colors()` now caches the generated inline CSS in a 24-hour WordPress transient keyed by `wp_bootstrap_variation_css_` + an MD5 of the active stylesheet slug. Previously the palette iteration and CSS string building ran on every frontend page load. The transient is immediately invalidated on `switch_theme` and `save_post_wp_global_styles`, so changes made via the Design Editor are reflected instantly.
+- **Twig template recompilation gated behind `WP_DEBUG`** (`inc/Twig/TwigService.php`): `auto_reload` in the Twig `Environment` constructor was hardcoded to `true`, causing Twig to stat every compiled template file on every request to check for source changes. Changed to `WP_DEBUG` so template recompilation only occurs during development. In production (`WP_DEBUG = false`) compiled Twig templates are served from cache without filesystem mtime checks.
+
+## [1.0.8] - 2026-02-19
+
+### Security
+
+- **Archive XSS hardening**: `ContextBuilder::getArchiveData()` now wraps `get_the_archive_title()` and `get_the_archive_description()` with `wp_kses_post()`. Term descriptions are user-editable by Editors and above; without sanitization an injected `<script>` tag would execute via the `|raw` filter in `archive.html.twig`
+- **Comment author XSS hardening**: `ContextBuilder::buildCommentTree()` now applies `esc_html()` to `comment_author` and `esc_url()` to `comment_author_url` at the data source, preventing injection via user-supplied comment fields
+- **Dark mode localStorage whitelist**: `getPreferredTheme()` in `dark-mode.js` now validates the stored theme value against `['dark', 'light']` before use, preventing attribute injection from a tampered localStorage value written by a third-party script
+- **Twig escaping functions marked safe**: `esc_html()`, `esc_attr()`, and `esc_url()` registered in `TwigService` are now declared with `['is_safe' => ['html']]`, preventing double-encoding if Twig autoescape is ever enabled
+
+### Changed
+
+- `views/partials/comment-item.html.twig`: Comment author URL now output via `{{ comment.author_url|raw }}` (escaped in PHP) instead of calling `esc_url()` from the template, keeping escaping logic in one place
+
+## [1.0.7] - 2026-02-18
+
+### Added
+
+- `do_shortcode()` registered as a Twig function in `TwigService`, allowing shortcodes to be rendered directly from Twig templates via `{{ do_shortcode('[shortcode]') }}`
+
+## [1.0.6] - 2026-02-14
+
+### Fixed
+
+- Sidebar widgets not rendered on pages using the "Page with Sidebar" template — `ContextBuilder::build()` only populated `sidebar` context for `is_home()`, so `page-sidebar.html.twig` received no widget data
+
+## [1.0.5] - 2026-02-11
+
+### Added
+
+- 11 new translation files: de_CH_informal, de_DE, de_DE_informal, en_GB, es_ES, fr_CH, it_CH, it_IT, nl_NL, pl_PL, pt_PT (total: 13 locales + en_US base)
+- Compiled .mo files for all 13 translations
+
+### Changed
+
+- Standardized all .po file names to use `wp-bootstrap-` prefix (WordPress convention: `{text-domain}-{locale}.po`)
+
+## [1.0.4] - 2026-02-11
+
+### Added
+
+- `wp_bootstrap_should_render_template` filter in `TemplateController::render()` — allows plugins and child themes to prevent the theme from rendering a specific request, enabling clean separation of concerns when plugins handle their own page rendering
+
+## [1.0.3] - 2026-02-11
+
+### Fixed
+
+- Double `<h1>` headings on pages where plugins provide their own titles — `page.html.twig` now wraps `<h1>` in `{% if post.title is not empty %}` guard so plugins can suppress it by passing empty `post.title`
+
+## [1.0.2] - 2026-02-10
+
+### Fixed
+
+- Missing HTML `<title>` tag on all pages — theme never declared `add_theme_support('title-tag')`, so WordPress's `_wp_render_title_tag()` hook was inactive during `wp_head()` output in Twig templates
+
+## [1.0.1] - 2026-02-09
+
+### Added
+
+- Bootstrap Icons web font integration — all 2,000+ icons available via `<i class="bi bi-*"></i>` CSS classes
+- `copy:icons` build step to copy icon font files (`.woff`, `.woff2`) from `node_modules` to `assets/fonts/`
+- Bootstrap Icons SCSS imported in both frontend and editor stylesheets for icon support in templates and block editor
+
+## [1.0.0] - 2026-02-08
+
+### Added
+
+- Sidebar widget area (`primary-sidebar`) registered via `register_sidebar()` — manageable in Appearance > Widgets
+- Widget area rendering in Twig sidebar with fallback to built-in content (recent posts, search, tags) when no widgets assigned
+- Widget area description strings added to all translation files (en_US, de_CH, fr_FR)
+
+### Changed
+
+- Updated README.md with accurate feature counts (15 style variations, 41 patterns, 3 translations)
+- Added documentation for style variation bridge, widget areas, RTL support, and accessibility features
+
+## [0.3.3] - 2026-02-08
+
+### Fixed
+
+- Style variation colors not applied to Bootstrap frontend — bridge function checked wrong palette origin (`custom` instead of `theme`)
+- Variation detection now compares `theme` origin against base theme.json defaults instead of looking for slugs in `custom` origin
+
+## [0.3.2] - 2026-02-08
+
+### Fixed
+
+- Dark mode body colors overridden by WordPress global styles (`styles.color` in `theme.json` generated conflicting `body` CSS)
+- Dark mode styling for plugin-generated form elements (`select`, `input`, `textarea`) that lack Bootstrap classes
+- Footer columns template used hardcoded `bg-dark text-light` instead of semantic `bg-body-tertiary`
+- Style variation bridge function ran with default palette when no variation was active, causing unnecessary CSS overrides
+
+### Changed
+
+- Removed `styles.color` from `theme.json` to prevent WordPress from generating body background/text CSS that conflicts with Bootstrap dark mode
+- Added `!important` override in `_custom.scss` for `html[data-bs-theme="dark"] body` to ensure Bootstrap dark mode takes precedence
+- Added broad dark mode rules for native form elements in `_custom.scss`
+
+## [0.3.1] - 2026-02-08
+
+### Added
+
+- 4 new light style variations: Rose, Sand, Lavender, Mint
+- 4 new dark style variations: Slate, Mocha, Nebula, Obsidian
+- Total of 15 color palettes available in the Design Editor (7 light, 7 dark, plus default)
+
+## [0.3.0] - 2026-02-08
+
+### Added
+
+- Skip-to-content link for keyboard navigation accessibility
+- ARIA labels on all navigation landmarks (`<nav>`, `<aside>`)
+- `aria-current="page"` on active dropdown menu items across all header variants
+- Lazy loading (`loading="lazy"`) on all below-fold images (post thumbnails, cards, avatars)
+- Screen reader announcement for dark mode toggle via `aria-live` status region
+- Font preload hints for Inter and Lora variable fonts
+- RTL language support: conditional RTL stylesheet, logical CSS properties for blockquote and list styles
+- French (fr_FR) translation with all ~216 strings translated
+- CSS classes for post thumbnails, card thumbnails, sidebar headings, and hero overlays (replacing inline styles)
+
+### Fixed
+
+- XSS vulnerability in search results template (`search_query` now escaped with `|e('html')`)
+- Comment author URLs now explicitly escaped with `esc_url()` in Twig templates
+
+### Changed
+
+- Block style `blockquote-accent` uses `border-inline-start` instead of `border-left` for RTL compatibility
+- Block style `list-unstyled` uses `padding-inline-start` instead of `padding-left` for RTL compatibility
+- Inline styles in Twig templates replaced with CSS classes for maintainability
+- Updated translation files (`.pot` and `de_CH.po`) with new accessibility strings
+- Build pipeline includes RTL SCSS compilation step
+
+## [0.2.0] - 2026-02-08
+
+### Added
+
+- Full Design Editor compatibility: Bootstrap JS in block editor, full Bootstrap SCSS in editor stylesheet
+- 3 custom block categories: Bootstrap Layout, Bootstrap Components, Bootstrap Navigation
+- 3 custom pattern categories: Layout, Components, Navigation
+- 4 layout patterns: container, 2-column, 3-column, full-width section
+- 2 component patterns: card group, accordion
+- 3 full-page patterns: about, services, contact
+- 4 custom page templates (FSE + Twig): landing (no header/footer), full-width, hero, sidebar
+- 2 header variations (FSE + Twig): centered, transparent
+- 2 footer variations (FSE + Twig): minimal, multi-column
+- 2 navigation patterns: dark navbar, offcanvas mobile navigation
+- Offcanvas navigation Twig partial with Bootstrap offcanvas component
+- Editor SCSS overrides for alignment and spacing consistency
+- Shadow presets (sm, md, lg), aspect ratio presets, and custom layout values in `theme.json`
+- Header/footer variant support via `get_theme_mod()` in `ContextBuilder`
+- Twig block inheritance in `base.html.twig` for header/footer variant overrides
+- Custom page template routing via `get_page_template_slug()` in `TemplateController`
+- Transparent header and offcanvas dark mode SCSS styles
+
+### Changed
+
+- Enhanced `editor-style.scss` to import full Bootstrap for WYSIWYG editor fidelity
+- Enhanced `theme.json` with custom templates and template parts registration
+- Enhanced `functions.php` with block editor assets, block categories, and pattern categories
+- Enhanced `ContextBuilder` with header/footer variant methods
+- Enhanced `TemplateController` with custom page template slug routing
+- Updated translation files (`.pot` and `de_CH.po`) with all new translatable strings
+
+## [0.1.1] - 2026-02-08
+
+### Added
+
+- Twig-based frontend rendering via `template_redirect` hook, bypassing FSE block markup on the frontend while preserving Site Editor functionality
+- `TemplateController` class: resolves and renders Twig templates for all page types (home, single, page, archive, search, 404)
+- `ContextBuilder` class: gathers WordPress data (posts, menus, pagination, comments, sidebar, archive info) into structured arrays for Twig
+- `NavWalker` class: converts flat `wp_get_nav_menu_items()` into nested tree for Bootstrap dropdown menus
+- 20 Twig templates with proper Bootstrap 5 HTML: base layout, 5 page templates, 9 partials (header, footer, pagination, sidebar, comments, search form, dark mode toggle, meta, post navigation), 3 components (post card, post grid card, post loop)
+- Bootstrap 5 navbar with responsive collapse, brand, dropdown support, and dark mode toggle
+- Bootstrap 5 card components for post listings
+- Bootstrap 5 pagination component
+- Bootstrap 5 comment section with threaded replies and Bootstrap-styled form fields
+- Bootstrap 5 sidebar with recent posts, search, and tag cloud (badges)
+- Previous/next post navigation and "More posts" grid on single posts
+- WordPress functions in Twig: `wp_head`, `wp_footer`, `wp_body_open`, `language_attributes`, `body_class`, `home_url`, `get_bloginfo`, `get_search_query`, `wp_kses_post`, `number_format_i18n`, `_n`
+- Twig globals: `site_name`, `site_description`, `site_url`, `theme_uri`, `charset`, `current_year`
+- Twig filters: `wpautop`, `wp_kses_post`
+- `primary` and `footer` navigation menu locations
+- Comment form fields filter for Bootstrap classes (`form-control`, `form-label`, `form-check`, `btn`)
+- Fallback menu from published pages when no menu is assigned
+- Sidebar layout detection for "Blog with Sidebar" template
+- README.md with project documentation
+
+### Changed
+
+- Enhanced `TwigService` with WordPress output-buffering functions, globals, and filters
+
 ## [0.1.0] - 2026-02-08
 
 ### Added
@@ -27,7 +231,7 @@ All notable changes to this project will be documented in this file.
 ### Added
 
 - Initial theme scaffolding
-- Bootstrap 5 CSS and JS integration (served locally via Yarn)
+- Bootstrap 5 CSS and JS integration (served locally via npm)
 - SASS build pipeline with Dart Sass, PostCSS, Autoprefixer, cssnano
 - Twig 3.0 template engine integration via Composer
 - FSE templates: index, home, single, page, archive, search, 404

CLAUDE.md

@@ -34,19 +34,7 @@ This project is proudly **"vibe-coded"** using Claude.AI - the entire codebase w
 
 **Note for AI Assistants:** Clean this section after the specific features are done or new releases are made. Effective changes are tracked in `CHANGELOG.md`. Do not add completed versions here - document them in the Session History section at the end of this file.
 
-### Getting started (v0.0.1)
-
-- [ ] Create a new Theme, use `wp-core/wp-content/themes/twentytwentyfive/` as blueprint (but not as base-theme, we're building from scratch!).
-- [ ] Include Bootstrap 5 (CSS/JS) (serve locally, not from CDN, use Yarn for install).
-- [ ] Use SASS as Stylesheet language, use node-sass for compilation.
-- [ ] Integrate custom stylesheets using SASS.
-- [ ] Add Gitea CI/CD workflow to create WordPress compatible release packages. Perform as much as possible build tasks in the workflow.
-- [ ] Create `PLAN.md` with a comprhensive plan to create the custom theme.
-- [ ] Create `README.md` with current information.
-- [ ] Create `CHANGELOG.md` with initial information
-- [ ] Commit to `main` and `dev`, but don't tag yet. Push to `origin`.
-
-Planning is moved to `PLAN.md`
+Current version is **v1.0.9**. See `PLAN.md` for details.
 
 ## Technical Stack
 
@@ -56,7 +44,7 @@ Planning is moved to `PLAN.md`
 - **Template Engine:** Twig 3.0 (via Composer)
 - **Frontend:** Bootstrap 5 Javascript & Vanilla JavaScript
 - **Styling:** Bootstrap 5 & Custom CSS (if necessary)
-- **Dependency Management:** Composer (PHP), Yarn (JS/CSS)
+- **Dependency Management:** Composer (PHP), npm (JS/CSS)
 - **Internationalization:** WordPress i18n (.pot/.po/.mo files)
 - **Canonical Plugin Name:** `wp-bootstrap`
 
@@ -89,8 +77,49 @@ Text domain: `wp-bootstrap`
 
 - `en_US` - English (United States) [base language - .pot template]
 - `de_CH` - German (Switzerland, formal)
+- `de_CH_informal` - German (Switzerland, informal)
+- `de_DE` - German (Germany, formal)
+- `de_DE_informal` - German (Germany, informal)
+- `en_GB` - English (United Kingdom)
+- `es_ES` - Spanish (Spain)
+- `fr_CH` - French (Switzerland)
+- `fr_FR` - French (France)
+- `it_CH` - Italian (Switzerland)
+- `it_IT` - Italian (Italy)
+- `nl_NL` - Dutch (Netherlands)
+- `pl_PL` - Polish (Poland)
+- `pt_PT` - Portuguese (Portugal)
 
-There is no need to compile translation to *.mo locally as it will be done in the Gitea CD/CI pipeline
+Translation file naming convention: `wp-bootstrap-{locale}.po` (e.g., `wp-bootstrap-de_CH.po`)
+
+Compiled .mo files are built by the Gitea CI/CD pipeline during releases. For local development:
+
+```bash
+for po in languages/wp-bootstrap-*.po; do msgfmt -o "${po%.po}.mo" "$po"; done
+```
+
+#### Updating Translations
+
+When new strings are added to PHP sources, use the fast JSON workflow documented in
+`wp-jobroom-theme/CLAUDE.md → Updating Translations (Fast JSON Workflow)`. That
+document contains the full step-by-step process including the `patch-po.py` patcher script
+(located in `wp-jobroom-theme/languages/patch-po.py`) which patches **both** `wp-bootstrap`
+and `wp-jobroom-theme` `.po` files in a single pass.
+
+**Quick reference for wp-bootstrap POT regeneration:**
+
+```bash
+docker exec jobroom-wordpress wp i18n make-pot \
+  /var/www/html/wp-content/themes/wp-bootstrap \
+  /var/www/html/wp-content/themes/wp-bootstrap/languages/wp-bootstrap.pot \
+  --allow-root
+
+# Then merge into all .po files:
+for locale in de_CH de_CH_informal de_DE de_DE_informal en_GB es_ES fr_CH fr_FR it_CH it_IT nl_NL pl_PL pt_PT; do
+  msgmerge --update --backup=none --no-fuzzy-matching \
+    languages/wp-bootstrap-${locale}.po languages/wp-bootstrap.pot
+done
+```
 
 ### Create Releases
 
@@ -170,3 +199,373 @@ When editing CLAUDE.md or other markdown files, follow these rules to avoid lint
 6. **MD032 - Lists should be surrounded by blank lines**: Add a blank line before AND after list blocks, including after bold labels like `**Attributes:**`.
 7. **MD034 - Bare URLs**: Wrap URLs in angle brackets (e.g., `<https://example.com>`) or use markdown link syntax `[text](url)`.
 8. **Author section formatting**: Use a heading (`### Name`) instead of bold (`**Name**`) for the author name to maintain consistent document structure.
+
+### Build Pipeline
+
+The build uses npm scripts defined in `package.json`:
+
+```bash
+# Full build (CI and local)
+npm run build
+
+# Development watch mode
+npm run dev
+```
+
+Build steps (in order):
+
+1. `copy:js` — Copy Bootstrap JS bundle from `node_modules` to `assets/js/`
+2. `copy:theme-js` — Copy theme JS (e.g., `dark-mode.js`) from `src/js/` to `assets/js/`
+3. `scss` — Compile SCSS (`src/scss/`) to CSS (`assets/css/`)
+4. `postcss` — Autoprefixer + cssnano minification → `assets/css/style.min.css`
+
+**CI/CD note:** The Gitea workflow uses `npm install` and `npm run build`.
+
+### Architecture Notes
+
+- **Dark mode:** Uses Bootstrap 5.3 `data-bs-theme` attribute on `<html>`. An inline anti-flash script runs synchronously in `<head>` (via `wp_add_inline_script` with `'before'`), while the full `dark-mode.js` is deferred. Preference stored in `localStorage` key `wp-bootstrap-theme`.
+- **Block styles:** Registered via `register_block_style()` with `inline_style` parameter in `functions.php`. Dark mode overrides for alert/card styles are in `src/scss/_custom.scss`.
+- **Style variations:** JSON files in `styles/` directory. All 15 variations (7 light, 7 dark, plus default) use the same 10 color slug names (base, contrast, primary, secondary, success, danger, warning, info, light, dark) to ensure patterns work across all schemes.
+- **Fonts:** Inter (sans-serif) and Lora (serif) variable fonts bundled as `.woff2` in `assets/fonts/`. Declared via `fontFace` in `theme.json` with `font-display: swap`.
+- **Patterns:** PHP files in `patterns/` with WordPress block markup and i18n. Hidden patterns (prefixed `hidden-`) are reusable components not shown in the pattern inserter.
+- **Twig frontend rendering:** `TemplateController` hooks `template_redirect` to intercept frontend requests and render Bootstrap 5 HTML via Twig, bypassing FSE block markup. FSE templates remain for the Site Editor. WordPress functions that produce output (`wp_head`, `wp_footer`, `body_class`, `language_attributes`) are captured via `ob_start()`/`ob_get_clean()` and passed to Twig as safe HTML strings.
+- **Navigation menus:** `NavWalker` converts flat `wp_get_nav_menu_items()` into a nested tree for Bootstrap dropdown rendering. Falls back to listing published pages when no menu is assigned.
+- **Docker development:** WordPress runs in Docker container `jobroom-wordpress`. The theme directory must be bind-mounted via `compose.override.yaml` (absolute path) for live changes to be visible.
+
+## Session History
+
+### Session 16 — v1.0.10 Title Double-Encoding Fix (2026-02-25)
+
+**Completed:** Fixed double-encoding of HTML entities in page titles rendered through Twig.
+
+**Root cause:** WordPress's `get_the_title()` returns titles with HTML entities pre-encoded (e.g. `&` → `&#038;`). `ContextBuilder` passed these pre-encoded strings to Twig as template variables. Twig's autoescape then re-encoded the `&` in `&#038;` to `&amp;#038;`, which browsers rendered as the literal text `&#038;` instead of `&`. Affected all pages with `&` in their title (e.g. help pages "Bewerbungen & Nachrichten", "Konto & Sicherheit", "Abonnements & Abrechnung").
+
+**Fix:** Wrapped all 6 `get_the_title()` calls in `ContextBuilder.php` with `wp_specialchars_decode()`. This decodes WordPress entities back to raw characters before Twig, allowing Twig autoescape to properly encode them once. XSS-safe because Twig still escapes all output.
+
+**Files modified:**
+
+- `inc/Template/ContextBuilder.php` — `wp_specialchars_decode()` on all 6 `get_the_title()` calls
+- `style.css` — version bump to 1.0.10
+- `CHANGELOG.md` — v1.0.10 entry
+
+### Session 15 — v1.0.9 Performance Optimization (2026-02-19)
+
+**Completed:** Two targeted performance fixes for production environments.
+
+**Changes made:**
+
+- **Color variation CSS transient caching** (`functions.php`): `wp_bootstrap_variation_colors()` now caches the generated Bootstrap CSS variable overrides in a 24-hour transient keyed by `wp_bootstrap_variation_css_` + `md5(get_stylesheet())`. Previously the palette loop and CSS string building executed on every frontend request. Transient is invalidated on `switch_theme` and `save_post_wp_global_styles` hooks so Design Editor changes apply immediately.
+- **Twig `auto_reload` gated behind `WP_DEBUG`** (`inc/Twig/TwigService.php`): Hardcoded `auto_reload => true` caused Twig to `stat()` each compiled template file on every request to detect source file changes. Changed to `auto_reload => WP_DEBUG` so stat checks only occur during development. In production, compiled templates are served from cache unconditionally.
+
+**Files modified:**
+
+- `functions.php` — transient caching and invalidation for variation CSS
+- `inc/Twig/TwigService.php` — `auto_reload => WP_DEBUG`
+- `style.css` — version bump to 1.0.9
+- `CHANGELOG.md` — v1.0.9 entry
+
+### Session 14 — v1.0.8 Security Audit & Hardening (2026-02-19)
+
+**Completed:** Comprehensive OWASP-aligned security audit. Two parallel background agents reviewed all PHP (functions.php, ContextBuilder, NavWalker, TemplateController, TwigService, all patterns) and JavaScript/Twig templates. Four targeted security fixes applied.
+
+**Findings and fixes:**
+
+- **Archive term description XSS (High)**: `get_the_archive_description()` returns raw term content editable by Editor-role users. Templates rendered it with `|raw`, creating a stored XSS path. Fixed: wrapped with `wp_kses_post()` in `ContextBuilder::getArchiveData()`. Same applied to `get_the_archive_title()`.
+- **Comment author injection (Low, defense-in-depth)**: `comment_author` and `comment_author_url` were passed to Twig as raw database values. Fixed: `esc_html()` applied to author name, `esc_url()` applied to author URL in `ContextBuilder::buildCommentTree()`. Template updated to output pre-escaped URL via `|raw` rather than calling `esc_url()` in Twig.
+- **Dark mode localStorage whitelist (Medium)**: `getPreferredTheme()` returned any stored value without validation, allowing attribute injection if a malicious script wrote to `localStorage`. Fixed: strict equality check against `['dark', 'light']` before trusting the stored value.
+- **Twig escaping functions not marked safe (Medium)**: `esc_html()`, `esc_attr()`, `esc_url()` registered in `TwigService` lacked `['is_safe' => ['html']]`, meaning any future autoescape enablement would cause double-encoding. Fixed: all three now carry the `is_safe` declaration.
+
+**Confirmed secure (no action needed):**
+
+- All `|raw` filter usages for widget HTML, comment content, comment reply links, and comment forms are by-design (WordPress core output)
+- Pattern files: no direct-access guards needed (loaded only via `register_block_pattern()`)
+- No SQL injection vectors (`$wpdb` not used directly; all data via WordPress functions)
+- `TemplateController` error handling: `\Throwable` caught, logged, and gated behind `WP_DEBUG`
+- `do_shortcode()` and `wp_kses_post()` Twig functions correctly marked `is_safe`
+- `wp_head()`, `wp_footer()`, `body_class()` Twig functions correctly use output buffering + `is_safe`
+
+**Key learnings:**
+
+- WordPress Twig themes should not enable `autoescape => 'html'` globally: `get_the_title()` applies `wptexturize()` which returns HTML entities (`&mdash;`, `&ldquo;`). Autoescape would double-encode these, corrupting post title rendering.
+- `esc_url()` does more than HTML-encoding — it validates the URL scheme and strips dangerous protocols (`javascript:`, `data:`). Always use it for user-supplied URLs, even when autoescape is active.
+- Registering WordPress escaping functions (`esc_url`, `esc_html`, `esc_attr`) as Twig functions without `is_safe => html` silently creates a double-encoding trap: calling `{{ esc_url(url) }}` with autoescape on would produce `&amp;amp;` instead of `&amp;`.
+- Added `.markdownlint.json` disabling MD024 (duplicate headings, expected in changelogs) and MD013 (line length).
+
+**Files modified:**
+
+- `inc/Template/ContextBuilder.php` — archive data sanitization, comment field escaping
+- `inc/Twig/TwigService.php` — `is_safe => html` on three escaping functions
+- `views/partials/comment-item.html.twig` — use pre-escaped author URL
+- `src/js/dark-mode.js` — localStorage whitelist
+- `assets/js/dark-mode.js` — rebuilt compiled output
+- `style.css` — version bump to 1.0.8
+- `CHANGELOG.md` — v1.0.8 entry
+- `.markdownlint.json` — created
+
+### Session 13 — v1.0.5 Translation Files (2026-02-11)
+
+**Completed:** Standardized translation file naming and added 11 new locale translations.
+
+**What was done:**
+
+- Renamed all .po files to use `wp-bootstrap-` prefix for WordPress text domain convention
+- Previously: mixed naming (some with prefix like `wp-bootstrap-en_GB.po`, some without like `de_CH.po`)
+- Now: all 13 files follow `wp-bootstrap-{locale}.po` pattern
+- Compiled all 13 .po files to .mo for local development
+- Added 11 new locales: de_CH_informal, de_DE, de_DE_informal, en_GB, es_ES, fr_CH, it_CH, it_IT, nl_NL, pl_PL, pt_PT
+
+**Files renamed:**
+
+- `de_CH.po` → `wp-bootstrap-de_CH.po`
+- `de_CH_informal.po` → `wp-bootstrap-de_CH_informal.po`
+- `de_DE.po` → `wp-bootstrap-de_DE.po`
+- `de_DE_informal.po` → `wp-bootstrap-de_DE_informal.po`
+- `es_ES.po` → `wp-bootstrap-es_ES.po`
+- `fr_CH.po` → `wp-bootstrap-fr_CH.po`
+- `fr_FR.po` → `wp-bootstrap-fr_FR.po`
+- `it_CH.po` → `wp-bootstrap-it_CH.po`
+- `it_IT.po` → `wp-bootstrap-it_IT.po`
+- `pt_PT.po` → `wp-bootstrap-pt_PT.po`
+
+**Key learnings:**
+
+- WordPress expects translation files named `{text-domain}-{locale}.po` (e.g., `wp-bootstrap-de_CH.po`)
+- `load_theme_textdomain()` loads files matching this pattern from the `languages/` directory
+- Files without the text domain prefix would not be loaded by WordPress
+
+### Session 12 — v1.0.4 Template Render Filter (2026-02-11)
+
+**Completed:** Added `wp_bootstrap_should_render_template` filter to `TemplateController::render()` for clean plugin/theme separation.
+
+**What was added:**
+
+- New `wp_bootstrap_should_render_template` filter at the top of `TemplateController::render()` — returns `true` by default, but plugins can return `false` to prevent the theme from rendering a request
+- Enables the wp-jobroom plugin to handle its own custom post types and routes without the theme's `TemplateController` racing to render first
+- Theme remains 100% standalone — the filter is a no-op when no plugin hooks into it
+
+**Key learnings:**
+
+- WordPress `template_redirect` hook priority ordering is the primary mechanism for plugin/theme rendering coordination: plugin Router at priority 5, theme TemplateController at default priority 10
+- Adding a simple filter check (`apply_filters('wp_bootstrap_should_render_template', true)`) is the cleanest decoupling mechanism — no cross-project class detection needed
+
+### Session 11 — v1.0.3 Conditional Page Title (2026-02-11)
+
+**Completed:** Made `<h1>` on page template conditional to prevent double headings when plugins provide their own titles.
+
+**What was fixed:**
+
+- `views/pages/page.html.twig` now wraps `<h1>{{ post.title }}</h1>` in `{% if post.title is not empty %}` guard
+- When a plugin passes empty `post.title` via `render_via_theme_twig()`, the theme's `<h1>` is skipped
+- Prevents duplicate headings on pages where plugin templates render their own `<h1>` with richer context (icons, badges, meta)
+
+**Key learnings:**
+
+- Plugins that delegate rendering to the parent theme via `TwigService` should be able to opt out of the theme's `<h1>` by passing empty `post.title`
+- The `is not empty` Twig test correctly handles both `null` and empty string `''`
+
+### Session 10 — v1.0.2 Title Tag Fix (2026-02-10)
+
+**Completed:** Fixed missing HTML `<title>` tag on all pages rendered by the theme's Twig pipeline.
+
+**What was fixed:**
+
+- Added `add_theme_support('title-tag')` to `wp_bootstrap_setup()` in `functions.php`
+
+**Root cause:**
+
+- The theme's `base.html.twig` calls `{{ wp_head() }}` which fires the `wp_head` action
+- WordPress hooks `_wp_render_title_tag()` to `wp_head` at priority 1, which outputs the `<title>` tag
+- However, this hook only fires when the theme declares `add_theme_support('title-tag')`
+- The theme never made this declaration, so `wp_head()` output included styles and scripts but no `<title>` element
+- All pages rendered by `TemplateController` (via `base.html.twig`) were affected
+
+**Key learnings:**
+
+- `add_theme_support('title-tag')` is required even for themes that render `wp_head()` via Twig — WordPress does not output `<title>` without it
+- The absence of a `<title>` tag is invisible in the rendered page but affects SEO, browser tab display, and bookmarking
+- This support declaration has been standard since WordPress 4.1 and should always be included in `after_setup_theme`
+
+### Session 9 — v1.0.1 Bootstrap Icons (2026-02-09)
+
+**Completed:** Bootstrap Icons web font integration via SCSS build pipeline.
+
+**What was built:**
+
+- Added `bootstrap-icons` npm dependency (v1.13.1)
+- Imported Bootstrap Icons SCSS in both `style.scss` and `editor-style.scss`
+- Added `$bootstrap-icons-font-src` variable override in `_variables.scss` to point `@font-face` at `assets/fonts/`
+- Added `copy:icons` npm script to copy `.woff`/`.woff2` font files from `node_modules` to `assets/fonts/`
+- Updated `build` script to include `copy:icons` step
+
+**Key learnings:**
+
+- Bootstrap Icons SCSS uses `$bootstrap-icons-font-src` to allow overriding the `@font-face` `src` declaration — set it before the import to control font file paths
+- The existing `--load-path=node_modules` Sass flag resolves `@import "bootstrap-icons/font/bootstrap-icons"` without any extra configuration
+- Font files (`.woff2` at 131KB, `.woff` at 176KB) are small enough to serve as web fonts without performance concern
+
+### Session 8 — v1.0.0 Release (2026-02-08)
+
+**Completed:** Sidebar widget area registration, Twig widget rendering with fallback, documentation refresh, v1.0.0 release.
+
+**What was built:**
+
+- `register_sidebar()` for `primary-sidebar` widget area with Bootstrap-styled wrapper markup
+- Widget area rendering in `ContextBuilder::getSidebarData()` via `ob_start()` + `dynamic_sidebar()` with fallback to built-in content
+- Twig sidebar template conditional: renders WordPress widgets when assigned, falls back to recent posts/search/tags otherwise
+- Updated README.md with accurate feature counts (15 variations, 41 patterns, 3 translations, accessibility, RTL, widget area)
+- Updated all translation files (.pot, de_CH.po, fr_FR.po) with widget area strings
+
+**Key learnings:**
+
+- `is_active_sidebar()` returns true only when widgets are assigned to the area, making it the right condition for fallback logic
+- `dynamic_sidebar()` outputs widget HTML directly, so `ob_start()`/`ob_get_clean()` is needed to capture it for Twig
+- Widget area `before_widget`/`after_widget` markup should use Bootstrap utility classes (`widget mb-4`) for consistent spacing
+- Widget title markup (`before_title`/`after_title`) should match existing sidebar heading styles (`sidebar-heading h6 text-uppercase fw-semibold`)
+
+### Session 7 — v0.3.2/v0.3.3 Dark Mode & Style Variation Bridge (2026-02-08)
+
+**Completed:** Fixed dark mode rendering conflicts between WordPress global styles and Bootstrap, fixed form element styling in dark mode, bridged style variation colors to Bootstrap CSS custom properties, fixed variation detection to read from correct palette origin.
+
+**What was built:**
+
+- Style variation bridge function (`wp_bootstrap_variation_colors`) that maps WordPress palette colors to Bootstrap CSS custom properties via `wp_enqueue_scripts`
+- Helper functions for color manipulation: `wp_bootstrap_hex_to_rgb()`, `wp_bootstrap_build_surface_css()`, `wp_bootstrap_mix_hex()`, `wp_bootstrap_hex_to_rgb_array()`, `wp_bootstrap_relative_luminance()`
+- Variation detection comparing `theme` origin palette against hardcoded base defaults (base, contrast, primary)
+- Dark mode body override in `_custom.scss` using `!important` to defeat WordPress global styles specificity
+- Broad dark mode rules for all native form elements (`select`, `input`, `textarea`) to catch plugin-generated controls
+- Fixed `footer-columns.html.twig` to use semantic `bg-body-tertiary` instead of hardcoded `bg-dark text-light`
+
+**Key learnings:**
+
+- WordPress puts style variation colors in the `theme` palette origin, NOT `custom` -- `wp_get_global_settings(['color', 'palette', 'theme'])` returns the base theme.json merged with the active variation
+- The `custom` palette origin contains user manual edits from the Site Editor, but its data structure may lack expected `slug`/`color` keys
+- To detect an active variation, compare `theme` origin colors against known base theme.json defaults rather than checking for slugs in `custom`
+- WordPress `theme.json` `styles.color` generates `body { background-color: var(--wp--preset--color--base) }` directly on `body`, which overrides inherited CSS variables from `html[data-bs-theme="dark"]` -- removing `styles.color` from theme.json is the cleanest fix
+- CSS variables defined directly on `body` beat inherited values from `html` due to specificity, requiring `!important` on `html[data-bs-theme="dark"] body` to ensure Bootstrap dark mode works
+- Plugin-generated form elements (e.g., `<select class="jr-search-form__filter-select">`) lack Bootstrap classes and need explicit dark mode styling via element selectors
+
+### Session 6 — v0.3.1 Style Variations (2026-02-08)
+
+**Completed:** Added 8 new style variations (4 light, 4 dark) to the Design Editor.
+
+**What was built:**
+
+- 4 new light palettes: Rose (pink/fuchsia), Sand (warm amber/beige), Lavender (soft purple), Mint (fresh teal)
+- 4 new dark palettes: Slate (neutral blue-gray), Mocha (coffee/warm brown), Nebula (space teal-cyan), Obsidian (near-black with red)
+- All variations follow the established 10-slug color pattern for cross-variation pattern compatibility
+
+**Key learnings:**
+
+- Dark style variations swap base/contrast (dark base, light contrast) and use darker shades for the `light` and `dark` slugs to maintain proper surface hierarchy
+- Button and link hover states in dark palettes need explicit `color` and `text` overrides since the default theme.json assumes light base
+
+### Session 5 — v0.3.0 Polish (2026-02-08)
+
+**Completed:** Accessibility audit and fixes, security hardening, performance optimization, RTL language support, French translation, inline style cleanup.
+
+**What was built:**
+
+- Skip-to-content link in `base.html.twig` with visually-hidden CSS class (visible on focus)
+- ARIA labels on all `<nav>` elements across 4 header variants, 2 footer variants, and sidebar
+- `aria-current="page"` on active dropdown items in all header variants
+- `loading="lazy"` on post thumbnails, card images, and comment avatars
+- Screen reader announcement (`aria-live="polite"`) in `dark-mode.js` for theme toggle
+- Font preload `<link>` tags for Inter and Lora `.woff2` files via `wp_head` priority 1
+- RTL stylesheet (`src/scss/rtl.scss`) conditionally loaded when `is_rtl()` is true
+- Logical CSS properties (`border-inline-start`, `padding-inline-start`) replacing physical directions in block styles
+- French translation (`fr_FR.po`) covering all ~216 translatable strings
+- CSS classes replacing inline styles: `.post-thumbnail`, `.card-thumbnail`, `.sidebar-heading`, `.hero-overlay`
+- XSS fix in search template: `search_query|e('html')` before `|raw` output
+- Explicit `esc_url()` on comment author URLs in Twig
+- Updated `.pot` and `de_CH.po` with 4 new accessibility strings
+- RTL build step added to npm scripts
+
+**Key learnings:**
+
+- WordPress `is_rtl()` detects RTL locales, allowing conditional stylesheet loading without doubling CSS bundle size
+- CSS logical properties (`border-inline-start`, `padding-inline-start`) are the modern approach to RTL support, replacing physical left/right properties
+- Twig `|e('html')` filter must be applied *before* concatenation with `|raw` HTML to prevent XSS -- `search_query|e('html')` inside a `|format()` call
+- Font preloading via `wp_head` at priority 1 ensures preload hints appear before render-blocking stylesheets
+- `aria-live="polite"` with `role="status"` announces dynamic changes to screen readers without interrupting current reading flow
+
+### Session 4 — v0.2.0 Design Editor (2026-02-08)
+
+**Completed:** Full Design Editor compatibility, custom block categories, page templates, header/footer/navigation variations.
+
+**What was built:**
+
+- Enhanced editor stylesheet importing full Bootstrap SCSS for WYSIWYG fidelity
+- Editor overrides SCSS (`_editor-overrides.scss`) for alignment and spacing
+- Bootstrap JS loaded in block editor via `enqueue_block_editor_assets`
+- 3 custom block categories (`block_categories_all` filter): Bootstrap Layout, Components, Navigation
+- 3 custom pattern categories: Layout, Components, Navigation
+- 6 layout/component patterns: container, 2-col, 3-col, full-width section, card group, accordion
+- 3 full-page patterns: about, services, contact
+- 4 custom page templates (FSE + Twig): landing, full-width, hero, sidebar
+- 2 header variations (FSE parts + patterns + Twig): centered, transparent
+- 2 footer variations (FSE parts + patterns + Twig): minimal, multi-column
+- 2 navigation patterns: dark navbar, offcanvas
+- Offcanvas navigation Twig partial with Bootstrap offcanvas component
+- Twig block inheritance in `base.html.twig` for header/footer variant overrides
+- Header/footer variant support via `get_theme_mod()` in `ContextBuilder`
+- Custom page template routing via `get_page_template_slug()` in `TemplateController`
+- Shadow presets, aspect ratios, custom layout values in `theme.json`
+- Transparent header and offcanvas dark mode SCSS styles
+- Updated translations (`.pot` and `de_CH.po`) with ~70 new translatable strings
+
+**Key learnings:**
+
+- WordPress `block_categories_all` filter (block inserter categories) and `register_block_pattern_category()` (pattern inserter categories) are separate APIs serving different parts of the editor UI
+- FSE template parts (`parts/`) use pattern references (`<!-- wp:pattern {"slug":"..."} /-->`) to keep markup in PHP pattern files for i18n support
+- Twig blocks (`{% block header %}`) enable page-level templates to override header/footer without modifying `base.html.twig`
+- `get_page_template_slug()` returns the custom template slug assigned in the page editor, used in `TemplateController` for routing to the correct Twig template
+- Bootstrap SCSS deprecation warnings (Dart Sass 3.0 migration) are upstream issues, not blocking — the build succeeds
+
+### Session 3 — v0.1.1 Bootstrap Frontend Rendering (2026-02-08)
+
+**Completed:** Full Twig-based Bootstrap 5 frontend rendering, replacing FSE block markup on the public-facing site.
+
+**What was built:**
+
+- `TemplateController` class hooking `template_redirect` to render Twig templates for all page types
+- `ContextBuilder` class gathering WordPress data (posts, menus, pagination, comments, sidebar, archive info) into structured arrays
+- `NavWalker` class converting flat menu items to nested tree for Bootstrap dropdown menus
+- 20 Twig templates: base layout, 5 page templates (index, single, page, archive, search, 404), 9 partials (header, footer, pagination, sidebar, comments, search form, dark mode toggle, meta, post navigation), 3 components (post card, grid card, post loop)
+- Enhanced `TwigService` with WordPress output-buffering functions, globals, and filters
+- Navigation menu locations (primary, footer) with pages fallback
+- Comment form Bootstrap styling filter
+- README.md project documentation
+
+**Key learnings:**
+
+- `template_redirect` + `exit()` cleanly bypasses FSE rendering on frontend while preserving Site Editor functionality
+- WordPress functions that produce output (`wp_head`, `wp_footer`, `body_class`, `language_attributes`) must be captured via `ob_start()`/`ob_get_clean()` for use in Twig, and marked with `is_safe => html`
+- With `optimize-autoloader: true` in `composer.json`, new PSR-4 classes require `composer dump-autoload` to regenerate the static classmap
+- Docker bind mounts require absolute paths in `compose.override.yaml` -- relative paths create empty directories
+- Post content is rendered via `apply_filters('the_content', get_the_content())` which processes Gutenberg blocks into standard HTML that Bootstrap CSS handles natively
+
+### Session 2 — v0.1.0 Core Theme (2026-02-08)
+
+**Completed:** Full v0.1.0 milestone implementation.
+
+**What was built:**
+
+- 16 block patterns across 7 new categories (hero, features, CTA, testimonials, pricing, contact, text)
+- Dark mode toggle with SVG sun/moon icons, localStorage persistence, `prefers-color-scheme` detection
+- 17 custom block styles mapping Bootstrap components to WordPress blocks
+- 4 style variations: Ocean, Forest, Sunset, Midnight
+- Sidebar template part + "Blog with Sidebar" custom template
+- Inter + Lora variable web fonts with Display font size
+
+**Key learnings:**
+
+- CI uses `npm install` / `npm run build` — `yarn` is not available in the CI runner
+- Bootstrap 5 alert colors are hardcoded (not CSS variables), so explicit dark mode overrides are needed in SCSS
+- Anti-flash for dark mode requires a synchronous inline script via `wp_add_inline_script('handle', '...', 'before')` — the deferred JS alone causes a flash
+- Variable fonts use `fontWeight: "100 900"` range syntax in `theme.json` `fontFace` declarations
+- Style variation JSON files must maintain identical color slug names across all variations for patterns to work correctly
+- When re-tagging a release, delete the remote tag first (`git push origin :refs/tags/vX.X.X`) then recreate and push
+
+### Session 1 — v0.0.1 Getting Started (2026-02-08)
+
+**Completed:** Initial theme scaffolding, Bootstrap 5 integration, SASS pipeline, Twig setup, CI/CD workflow, basic FSE templates and patterns, i18n support.

PLAN.md

@@ -10,10 +10,12 @@ WP Bootstrap is a modern WordPress Block Theme built from scratch with Bootstrap
 
 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
+- **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
 
@@ -52,28 +54,40 @@ node_modules/bootstrap/dist/js/ → copyfiles → assets/js/bootstrap.bundle.min
 - [x] Sidebar template part
 - [x] Enhanced typography settings
 
-### v0.2.0 - Design Editor
+### v0.1.1 - Bootstrap Frontend Rendering (Complete)
 
-- [ ] Full Design Editor compatibility
-- [ ] Custom block categories
-- [ ] Page-level patterns and templates
-- [ ] Enhanced header/footer variations
-- [ ] Custom navigation styles
+- [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.3.0 - Polish
+### v0.2.0 - Design Editor (Complete)
 
-- [ ] Performance optimization (selective Bootstrap imports)
-- [ ] Accessibility audit and fixes
-- [ ] RTL language support
-- [ ] Additional translations
-- [ ] Documentation
+- [x] Full Design Editor compatibility
+- [x] Custom block categories
+- [x] Page-level patterns and templates
+- [x] Enhanced header/footer variations
+- [x] Custom navigation styles
 
-### v1.0.0 - Release
+### v0.3.0 - Polish (Complete)
 
-- [ ] All features complete and tested
-- [ ] WordPress.org theme review compliance
-- [ ] Comprehensive documentation
-- [ ] Full test coverage
+- [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 (Complete)
+
+- [x] All features complete and tested
+- [x] Widget area registration and Twig rendering with fallback
+- [x] Comprehensive documentation (README refresh, updated translations)
+- [x] Code quality audit passed (no TODO/FIXME, proper escaping, no security issues)
 
 ## Bootstrap 5 Integration Strategy
 

README.md

@@ -1,21 +1,31 @@
 # WP Bootstrap
 
-A modern WordPress Block Theme built from scratch with Bootstrap 5.
+A modern WordPress Block Theme built from scratch with Bootstrap 5. Features responsive design, dark mode support, Twig template rendering, and full compatibility with the WordPress Site Editor.
 
 ## Features
 
-- Full Site Editing (FSE) support
-- Bootstrap 5 CSS and JavaScript
-- Responsive design
-- Dark mode ready (Bootstrap 5.3 dark mode variables)
-- Twig 3.0 template engine
-- WordPress i18n support
-- Gitea CI/CD automated releases
+- **Bootstrap 5 Frontend** -- Proper Bootstrap 5 HTML (navbar, cards, pagination, grid) rendered via Twig templates
+- **Dark Mode** -- Toggle with localStorage persistence and `prefers-color-scheme` support
+- **Full Site Editing** -- Compatible with the WordPress Site Editor for admin editing
+- **Style Variations** -- 15 color schemes (7 light, 7 dark, plus default) with live Design Editor customization
+- **Block Patterns** -- 41 patterns across 11 categories (hero, features, CTA, testimonials, pricing, contact, text, layout, components, navigation, pages)
+- **Bootstrap Icons** -- 2,000+ icons available via CSS classes (`bi bi-*`)
+- **Block Styles** -- 17 custom styles mapping Bootstrap components to WordPress blocks
+- **Custom Templates** -- Landing (no header/footer), full-width, hero, sidebar page templates
+- **Header/Footer Variations** -- Default, centered, transparent headers; default, minimal, multi-column footers
+- **Navigation Styles** -- Dark navbar, offcanvas mobile navigation
+- **Widget Area** -- Sidebar widget area manageable via WordPress admin, with built-in fallback
+- **Accessibility** -- Skip-to-content link, ARIA labels, `aria-current` on active items, screen reader announcements
+- **RTL Support** -- Right-to-left language support with logical CSS properties
+- **Translation Ready** -- Full i18n support with 14 locales (en_US, de_CH, de_CH_informal, de_DE, de_DE_informal, en_GB, es_ES, fr_CH, fr_FR, it_CH, it_IT, nl_NL, pl_PL, pt_PT)
+- **Responsive** -- Mobile-first design with Bootstrap's responsive grid
 
 ## Requirements
 
 - WordPress 6.7 or higher
 - PHP 8.3 or higher
+- Composer
+- Node.js 20+
 
 ## Installation
 
@@ -31,16 +41,18 @@ A modern WordPress Block Theme built from scratch with Bootstrap 5.
 git clone ssh://git@src.bundespruefstelle.ch:2022/magdev/wp-bootstrap.git
 cd wp-bootstrap
 composer install
-yarn install
-yarn build
+npm install
+npm run build
 ```
 
+Activate the theme in **Appearance > Themes** in the WordPress admin.
+
 ## Development
 
 ### Prerequisites
 
 - Node.js 20+
-- Yarn
+- npm
 - Composer
 - PHP 8.3+
 
@@ -48,33 +60,96 @@ yarn build
 
 | Command | Description |
 | --- | --- |
-| `yarn build` | Compile SCSS, minify CSS, copy Bootstrap JS |
-| `yarn dev` | Watch SCSS files and recompile on changes |
-| `yarn scss` | Compile SCSS only |
-| `yarn postcss` | Minify CSS with Autoprefixer |
-| `composer install` | Install PHP dependencies |
+| `npm run build` | Full production build (copy JS, compile SCSS, minify CSS) |
+| `npm run dev` | Watch SCSS files and recompile on changes |
+| `npm run scss` | Compile SCSS only |
+| `npm run postcss` | Minify CSS with Autoprefixer and cssnano |
+| `composer install` | Install PHP dependencies (Twig) |
+
+### Build Pipeline
+
+1. `copy:js` -- Copy Bootstrap JS bundle from `node_modules` to `assets/js/`
+2. `copy:theme-js` -- Copy theme JS (dark-mode.js) from `src/js/` to `assets/js/`
+3. `copy:icons` -- Copy Bootstrap Icons font files (`.woff`, `.woff2`) to `assets/fonts/`
+4. `scss` -- Compile SCSS (`src/scss/`) to CSS (`assets/css/`)
+5. `scss:rtl` -- Compile RTL stylesheet (`assets/css/rtl.css`)
+6. `postcss` -- Autoprefixer + cssnano minification to `assets/css/style.min.css`
+
+## Architecture
+
+### Frontend Rendering
+
+The theme uses a dual-rendering approach:
+
+- **Site Editor (admin):** FSE block templates in `templates/` and `parts/` for visual editing
+- **Frontend (public):** Twig templates in `views/` render Bootstrap 5 HTML via the `template_redirect` hook
+
+The `TemplateController` intercepts frontend requests and renders the appropriate Twig template with data gathered by `ContextBuilder`. Plugins can hook into the `wp_bootstrap_should_render_template` filter to prevent rendering for specific requests (e.g., when a plugin handles its own custom post types). FSE templates remain untouched for the WordPress admin editor.
+
+### Style Variation Bridge
+
+WordPress style variation colors are bridged to Bootstrap CSS custom properties at runtime. When a variation is selected in the Design Editor, the theme reads the active palette via `wp_get_global_settings()` and outputs inline CSS that overrides Bootstrap's compiled defaults. This works for both light and dark mode.
+
+### Key PHP Classes
+
+| Class | Purpose |
+| --- | --- |
+| `TwigService` | Singleton Twig environment with WordPress functions and globals |
+| `TemplateController` | Hooks `template_redirect`, resolves and renders Twig templates |
+| `ContextBuilder` | Gathers WordPress data (posts, menus, pagination, comments, sidebar) |
+| `NavWalker` | Converts flat menu items to nested tree for Bootstrap dropdowns |
+
+### Navigation Menus
+
+Register menus in **Appearance > Menus**:
+
+- **Primary Navigation** -- Displayed in the Bootstrap navbar with dropdown support
+- **Footer Navigation** -- Displayed in the footer
+
+If no menu is assigned, the primary location falls back to listing published pages.
+
+### Widget Areas
+
+The theme registers a **Sidebar** widget area. When widgets are assigned via **Appearance > Widgets**, they replace the default sidebar content. When no widgets are assigned, the sidebar displays recent posts, a search form, and a tag cloud.
 
 ### Project Structure
 
 ```txt
 wp-bootstrap/
-├── assets/           Compiled CSS, JS, and images
-├── inc/              PHP classes (PSR-4 autoloaded)
-├── languages/        Translation files (.pot, .po)
-├── parts/            FSE template parts (header, footer)
-├── patterns/         Block patterns
-├── src/scss/         SCSS source files
-├── templates/        FSE page templates
-├── views/            Twig templates
-├── functions.php     Theme bootstrap
-├── style.css         Theme metadata
-└── theme.json        Design tokens and settings
++-- assets/           Compiled CSS, JS, fonts
++-- inc/
+|   +-- Template/     TemplateController, ContextBuilder, NavWalker
+|   +-- Twig/         TwigService singleton
++-- languages/        Translation files (.pot, .po)
++-- patterns/         Block patterns (PHP)
++-- parts/            FSE template parts (header, footer, sidebar, variants)
++-- src/
+|   +-- js/           Source JavaScript
+|   +-- scss/         Source SCSS
++-- styles/           Style variations (JSON)
++-- templates/        FSE templates (HTML)
++-- views/            Twig templates (Bootstrap 5 HTML)
+|   +-- base.html.twig
+|   +-- pages/        Page templates (index, single, page, archive, search, 404)
+|   +-- partials/     Reusable parts (header, footer, pagination, sidebar, etc.)
+|   +-- components/   UI components (post card, post loop)
++-- functions.php     Theme bootstrap
++-- style.css         Theme metadata
++-- theme.json        Design tokens and settings
 ```
 
+## Technology Stack
+
+- **PHP 8.3+** with PSR-4 autoloading
+- **Twig 3.0** via Composer
+- **Bootstrap 5.3+** CSS & JS (served locally)
+- **Dart Sass** for SCSS compilation
+- **PostCSS** with Autoprefixer and cssnano
+
 ## License
 
-GPL-2.0-or-later
+GPL-2.0-or-later. See <http://www.gnu.org/licenses/gpl-2.0.html>.
 
 ## Author
 
-Marco Graetsch - [src.bundespruefstelle.ch/magdev](https://src.bundespruefstelle.ch/magdev)
+Marco Graetsch - <https://src.bundespruefstelle.ch/magdev>

assets/css/rtl.css

@@ -0,0 +1,4 @@
+/*!
+ * WP Bootstrap Theme - RTL Overrides
+ * Right-to-left language support
+ */.is-style-blockquote-accent{border-left:none;border-right:4px solid var(--wp--preset--color--primary);border-radius:.375rem 0 0 .375rem}

assets/js/dark-mode.js

@@ -20,7 +20,9 @@
      */
     function getPreferredTheme() {
         var stored = localStorage.getItem(STORAGE_KEY);
-        if (stored) {
+        // Whitelist: only honour known-good values to prevent attribute injection
+        // from a tampered localStorage (e.g. XSS-written value by another script).
+        if (stored === 'dark' || stored === 'light') {
             return stored;
         }
         return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
@@ -61,6 +63,7 @@
                 var newTheme = currentTheme === 'dark' ? 'light' : 'dark';
                 localStorage.setItem(STORAGE_KEY, newTheme);
                 setTheme(newTheme);
+                announceTheme(newTheme);
             });
         });
     });
@@ -71,4 +74,23 @@
             setTheme(e.matches ? 'dark' : 'light');
         }
     });
+
+    /**
+     * Announce theme change to screen readers via a live region.
+     *
+     * @param {string} theme - 'dark' or 'light'
+     */
+    function announceTheme(theme) {
+        var msg = theme === 'dark' ? 'Dark mode enabled' : 'Light mode enabled';
+        var el = document.getElementById('wp-bootstrap-theme-status');
+        if (!el) {
+            el = document.createElement('div');
+            el.id = 'wp-bootstrap-theme-status';
+            el.setAttribute('role', 'status');
+            el.setAttribute('aria-live', 'polite');
+            el.className = 'visually-hidden';
+            document.body.appendChild(el);
+        }
+        el.textContent = msg;
+    }
 })();

functions.php

@@ -23,6 +23,9 @@ if ( file_exists( get_template_directory() . '/vendor/autoload.php' ) ) {
  */
 if ( ! function_exists( 'wp_bootstrap_setup' ) ) :
     function wp_bootstrap_setup() {
+        // Add support for automatic document title tag.
+        add_theme_support( 'title-tag' );
+
         // Add support for post formats.
         add_theme_support( 'post-formats', array(
             'aside', 'audio', 'chat', 'gallery', 'image',
@@ -34,10 +37,36 @@ if ( ! function_exists( 'wp_bootstrap_setup' ) ) :
 
         // Add editor styles.
         add_editor_style( 'assets/css/editor-style.css' );
+
+        // Register navigation menu locations.
+        register_nav_menus( array(
+            'primary' => __( 'Primary Navigation', 'wp-bootstrap' ),
+            'footer'  => __( 'Footer Navigation', 'wp-bootstrap' ),
+        ) );
     }
 endif;
 add_action( 'after_setup_theme', 'wp_bootstrap_setup' );
 
+/**
+ * Register widget areas.
+ *
+ * @since 1.0.0
+ */
+if ( ! function_exists( 'wp_bootstrap_register_sidebars' ) ) :
+    function wp_bootstrap_register_sidebars() {
+        register_sidebar( array(
+            'name'          => __( 'Sidebar', 'wp-bootstrap' ),
+            'id'            => 'primary-sidebar',
+            'description'   => __( 'Add widgets here to appear in the sidebar.', 'wp-bootstrap' ),
+            'before_widget' => '<div id="%1$s" class="widget mb-4 %2$s">',
+            'after_widget'  => '</div>',
+            'before_title'  => '<h3 class="sidebar-heading h6 text-uppercase fw-semibold">',
+            'after_title'   => '</h3>',
+        ) );
+    }
+endif;
+add_action( 'widgets_init', 'wp_bootstrap_register_sidebars' );
+
 /**
  * Enqueue theme scripts and styles.
  */
@@ -85,6 +114,403 @@ if ( ! function_exists( 'wp_bootstrap_enqueue_scripts' ) ) :
 endif;
 add_action( 'wp_enqueue_scripts', 'wp_bootstrap_enqueue_scripts' );
 
+/**
+ * Preload critical fonts for performance.
+ *
+ * @since 0.3.0
+ */
+if ( ! function_exists( 'wp_bootstrap_preload_fonts' ) ) :
+    function wp_bootstrap_preload_fonts() {
+        $fonts = array(
+            'inter/InterVariable.woff2',
+            'lora/Lora-VariableFont.woff2',
+        );
+        $base = get_template_directory_uri() . '/assets/fonts/';
+        foreach ( $fonts as $font ) {
+            printf(
+                '<link rel="preload" href="%s" as="font" type="font/woff2" crossorigin>' . "\n",
+                esc_url( $base . $font )
+            );
+        }
+    }
+endif;
+add_action( 'wp_head', 'wp_bootstrap_preload_fonts', 1 );
+
+/**
+ * Enqueue RTL stylesheet for right-to-left languages.
+ *
+ * @since 0.3.0
+ */
+if ( ! function_exists( 'wp_bootstrap_rtl_styles' ) ) :
+    function wp_bootstrap_rtl_styles() {
+        if ( ! is_rtl() ) {
+            return;
+        }
+        $theme_version = wp_get_theme()->get( 'Version' );
+        wp_enqueue_style(
+            'wp-bootstrap-rtl',
+            get_template_directory_uri() . '/assets/css/rtl.css',
+            array( 'wp-bootstrap-style' ),
+            $theme_version
+        );
+    }
+endif;
+add_action( 'wp_enqueue_scripts', 'wp_bootstrap_rtl_styles', 20 );
+
+/**
+ * Bridge WordPress style variation colors to Bootstrap CSS custom properties.
+ *
+ * Reads the active color palette (theme.json + variation + user overrides)
+ * and outputs inline CSS for both light and dark modes so the dark-mode toggle
+ * switches between two variation-aware color schemes.
+ *
+ * Theme colors (primary–info) go into :root and apply in both modes.
+ * Surface colors (body-bg, tertiary-bg, etc.) are computed separately for
+ * [data-bs-theme=light] and [data-bs-theme=dark].
+ *
+ * For light palettes: light mode uses base/contrast; dark mode uses dark/light slugs.
+ * For dark palettes:  dark mode uses base/contrast; light mode swaps them.
+ *
+ * @since 0.3.2
+ */
+if ( ! function_exists( 'wp_bootstrap_variation_colors' ) ) :
+    function wp_bootstrap_variation_colors() {
+        $transient_key = 'wp_bootstrap_variation_css_' . md5( get_stylesheet() );
+        $cached_css    = get_transient( $transient_key );
+
+        if ( false !== $cached_css ) {
+            // '' means default palette (no inline CSS needed); non-empty string is the computed CSS.
+            if ( '' !== $cached_css ) {
+                wp_add_inline_style( 'wp-bootstrap-style', $cached_css );
+            }
+            return;
+        }
+
+        // Read the theme origin palette — this contains the base theme.json
+        // colors merged with the active style variation (if any).
+        $theme_palette = wp_get_global_settings( array( 'color', 'palette', 'theme' ) );
+        $colors = array();
+        if ( ! empty( $theme_palette ) && is_array( $theme_palette ) ) {
+            foreach ( $theme_palette as $entry ) {
+                if ( ! empty( $entry['slug'] ) && ! empty( $entry['color'] ) ) {
+                    $colors[ $entry['slug'] ] = $entry['color'];
+                }
+            }
+        }
+
+        // Compare against base theme.json defaults to detect an active variation.
+        // WordPress puts variation colors in the 'theme' origin, not 'custom'.
+        $base_defaults = array(
+            'base'     => '#ffffff',
+            'contrast' => '#212529',
+            'primary'  => '#0d6efd',
+        );
+
+        $is_default = true;
+        foreach ( $base_defaults as $slug => $default_color ) {
+            if ( ! empty( $colors[ $slug ] ) && strtolower( $colors[ $slug ] ) !== $default_color ) {
+                $is_default = false;
+                break;
+            }
+        }
+
+        // No variation active — let Bootstrap's compiled CSS handle both modes.
+        if ( $is_default ) {
+            set_transient( $transient_key, '', DAY_IN_SECONDS );
+            return;
+        }
+
+        if ( empty( $colors['base'] ) || empty( $colors['contrast'] ) ) {
+            set_transient( $transient_key, '', DAY_IN_SECONDS );
+            return;
+        }
+
+        // Theme colors apply in both modes via :root.
+        $theme_slugs = array(
+            'primary'   => '--bs-primary',
+            'secondary' => '--bs-secondary',
+            'success'   => '--bs-success',
+            'danger'    => '--bs-danger',
+            'warning'   => '--bs-warning',
+            'info'      => '--bs-info',
+        );
+
+        $root_css = '';
+        foreach ( $theme_slugs as $slug => $var ) {
+            if ( ! empty( $colors[ $slug ] ) ) {
+                $hex = esc_attr( $colors[ $slug ] );
+                $rgb = wp_bootstrap_hex_to_rgb( $colors[ $slug ] );
+                $root_css .= "{$var}:{$hex};";
+                if ( $rgb ) {
+                    $root_css .= "{$var}-rgb:{$rgb};";
+                }
+            }
+        }
+
+        // Link colors from primary (both modes).
+        if ( ! empty( $colors['primary'] ) ) {
+            $primary_rgb = wp_bootstrap_hex_to_rgb( $colors['primary'] );
+            $root_css .= '--bs-link-color:' . esc_attr( $colors['primary'] ) . ';';
+            $root_css .= '--bs-link-color-rgb:' . $primary_rgb . ';';
+            $root_css .= '--bs-link-hover-color:' . esc_attr( $colors['primary'] ) . ';';
+            $root_css .= '--bs-link-hover-color-rgb:' . $primary_rgb . ';';
+        }
+
+        // Determine if this is a dark palette (base luminance < contrast luminance).
+        $is_dark = wp_bootstrap_relative_luminance( $colors['base'] )
+                 < wp_bootstrap_relative_luminance( $colors['contrast'] );
+
+        // Resolve light-mode and dark-mode base colors.
+        if ( $is_dark ) {
+            // Dark palette: dark mode is native, light mode swaps base↔contrast.
+            $light_bg  = $colors['contrast'];
+            $light_fg  = $colors['base'];
+            $dark_bg   = $colors['base'];
+            $dark_fg   = $colors['contrast'];
+        } else {
+            // Light palette: light mode is native, dark mode uses dark/light slugs.
+            $light_bg  = $colors['base'];
+            $light_fg  = $colors['contrast'];
+            $dark_bg   = $colors['dark'] ?? '#212529';
+            $dark_fg   = $colors['light'] ?? '#f8f9fa';
+        }
+
+        // Also set light/dark slug variables for utilities like bg-light, bg-dark.
+        if ( ! empty( $colors['light'] ) ) {
+            $root_css .= '--bs-light:' . esc_attr( $colors['light'] ) . ';';
+            $root_css .= '--bs-light-rgb:' . wp_bootstrap_hex_to_rgb( $colors['light'] ) . ';';
+        }
+        if ( ! empty( $colors['dark'] ) ) {
+            $root_css .= '--bs-dark:' . esc_attr( $colors['dark'] ) . ';';
+            $root_css .= '--bs-dark-rgb:' . wp_bootstrap_hex_to_rgb( $colors['dark'] ) . ';';
+        }
+
+        // Build surface CSS for a given bg/fg pair.
+        $light_css = wp_bootstrap_build_surface_css( $light_bg, $light_fg, false );
+        $dark_css  = wp_bootstrap_build_surface_css( $dark_bg, $dark_fg, true );
+
+        $css = ':root{' . $root_css . '}'
+             . '[data-bs-theme=light]{' . $light_css . '}'
+             . '[data-bs-theme=dark]{' . $dark_css . '}';
+
+        // Cache for 24 hours; invalidated on theme switch or global-styles save.
+        set_transient( $transient_key, $css, DAY_IN_SECONDS );
+
+        // Attach after the compiled stylesheet so variation values override
+        // Bootstrap's hardcoded dark-mode defaults via source order.
+        wp_add_inline_style( 'wp-bootstrap-style', $css );
+    }
+endif;
+add_action( 'wp_enqueue_scripts', 'wp_bootstrap_variation_colors', 30 );
+
+/**
+ * Invalidate the color variation CSS transient when global styles or theme change.
+ */
+add_action( 'switch_theme', function () {
+    delete_transient( 'wp_bootstrap_variation_css_' . md5( get_stylesheet() ) );
+} );
+add_action( 'save_post_wp_global_styles', function () {
+    delete_transient( 'wp_bootstrap_variation_css_' . md5( get_stylesheet() ) );
+} );
+
+/**
+ * Build Bootstrap surface CSS variables for a given background/foreground pair.
+ *
+ * Computes body-bg, body-color, tertiary-bg, secondary-bg, secondary-color,
+ * emphasis-color, and border-color — mirroring how Bootstrap derives them.
+ *
+ * @since 0.3.2
+ *
+ * @param string $bg      Background hex color.
+ * @param string $fg      Foreground (text) hex color.
+ * @param bool   $is_dark Whether this is for dark mode.
+ * @return string CSS declarations (no selector).
+ */
+if ( ! function_exists( 'wp_bootstrap_build_surface_css' ) ) :
+    function wp_bootstrap_build_surface_css( $bg, $fg, $is_dark ) {
+        $bg_rgb = wp_bootstrap_hex_to_rgb( $bg );
+        $fg_rgb = wp_bootstrap_hex_to_rgb( $fg );
+
+        $css  = '--bs-body-bg:' . esc_attr( $bg ) . ';';
+        $css .= '--bs-body-bg-rgb:' . $bg_rgb . ';';
+        $css .= '--bs-body-color:' . esc_attr( $fg ) . ';';
+        $css .= '--bs-body-color-rgb:' . $fg_rgb . ';';
+
+        if ( $is_dark ) {
+            $secondary_bg = wp_bootstrap_mix_hex( $fg, $bg, 0.16 );
+            $tertiary_bg  = wp_bootstrap_mix_hex( $fg, $bg, 0.08 );
+            $border_color = wp_bootstrap_mix_hex( $fg, $bg, 0.24 );
+            $emphasis     = '#FFFFFF';
+        } else {
+            $secondary_bg = wp_bootstrap_mix_hex( $fg, $bg, 0.08 );
+            $tertiary_bg  = wp_bootstrap_mix_hex( $fg, $bg, 0.04 );
+            $border_color = wp_bootstrap_mix_hex( $fg, $bg, 0.16 );
+            $emphasis     = '#000000';
+        }
+
+        $css .= '--bs-secondary-color:rgba(' . $fg_rgb . ',0.75);';
+        $css .= '--bs-secondary-bg:' . $secondary_bg . ';';
+        $css .= '--bs-secondary-bg-rgb:' . wp_bootstrap_hex_to_rgb( $secondary_bg ) . ';';
+        $css .= '--bs-tertiary-color:rgba(' . $fg_rgb . ',0.5);';
+        $css .= '--bs-tertiary-bg:' . $tertiary_bg . ';';
+        $css .= '--bs-tertiary-bg-rgb:' . wp_bootstrap_hex_to_rgb( $tertiary_bg ) . ';';
+        $css .= '--bs-emphasis-color:' . $emphasis . ';';
+        $css .= '--bs-emphasis-color-rgb:' . wp_bootstrap_hex_to_rgb( $emphasis ) . ';';
+        $css .= '--bs-border-color:' . $border_color . ';';
+
+        return $css;
+    }
+endif;
+
+/**
+ * Convert a hex color string to an RGB triplet string.
+ *
+ * @since 0.3.2
+ *
+ * @param string $hex Hex color (e.g. "#0d6efd" or "0d6efd").
+ * @return string RGB triplet (e.g. "13,110,253") or empty string on failure.
+ */
+if ( ! function_exists( 'wp_bootstrap_hex_to_rgb' ) ) :
+    function wp_bootstrap_hex_to_rgb( $hex ) {
+        $hex = ltrim( $hex, '#' );
+        if ( strlen( $hex ) === 3 ) {
+            $hex = $hex[0] . $hex[0] . $hex[1] . $hex[1] . $hex[2] . $hex[2];
+        }
+        if ( strlen( $hex ) !== 6 ) {
+            return '';
+        }
+        return hexdec( substr( $hex, 0, 2 ) ) . ','
+             . hexdec( substr( $hex, 2, 2 ) ) . ','
+             . hexdec( substr( $hex, 4, 2 ) );
+    }
+endif;
+
+/**
+ * Mix two hex colors by a given weight.
+ *
+ * @since 0.3.2
+ *
+ * @param string $color1 Hex color to mix in.
+ * @param string $color2 Base hex color.
+ * @param float  $weight Weight of color1 (0.0 to 1.0).
+ * @return string Resulting hex color.
+ */
+if ( ! function_exists( 'wp_bootstrap_mix_hex' ) ) :
+    function wp_bootstrap_mix_hex( $color1, $color2, $weight ) {
+        $c1 = wp_bootstrap_hex_to_rgb_array( $color1 );
+        $c2 = wp_bootstrap_hex_to_rgb_array( $color2 );
+        if ( ! $c1 || ! $c2 ) {
+            return $color2;
+        }
+        $r = (int) round( $c1[0] * $weight + $c2[0] * ( 1 - $weight ) );
+        $g = (int) round( $c1[1] * $weight + $c2[1] * ( 1 - $weight ) );
+        $b = (int) round( $c1[2] * $weight + $c2[2] * ( 1 - $weight ) );
+        return sprintf( '#%02x%02x%02x', max( 0, min( 255, $r ) ), max( 0, min( 255, $g ) ), max( 0, min( 255, $b ) ) );
+    }
+endif;
+
+/**
+ * Convert a hex color to an array of [r, g, b] integers.
+ *
+ * @since 0.3.2
+ *
+ * @param string $hex Hex color.
+ * @return array|false Array of [r, g, b] or false on failure.
+ */
+if ( ! function_exists( 'wp_bootstrap_hex_to_rgb_array' ) ) :
+    function wp_bootstrap_hex_to_rgb_array( $hex ) {
+        $hex = ltrim( $hex, '#' );
+        if ( strlen( $hex ) === 3 ) {
+            $hex = $hex[0] . $hex[0] . $hex[1] . $hex[1] . $hex[2] . $hex[2];
+        }
+        if ( strlen( $hex ) !== 6 ) {
+            return false;
+        }
+        return array(
+            hexdec( substr( $hex, 0, 2 ) ),
+            hexdec( substr( $hex, 2, 2 ) ),
+            hexdec( substr( $hex, 4, 2 ) ),
+        );
+    }
+endif;
+
+/**
+ * Compute relative luminance of a hex color (0.0 = black, 1.0 = white).
+ *
+ * @since 0.3.2
+ *
+ * @param string $hex Hex color.
+ * @return float Relative luminance.
+ */
+if ( ! function_exists( 'wp_bootstrap_relative_luminance' ) ) :
+    function wp_bootstrap_relative_luminance( $hex ) {
+        $rgb = wp_bootstrap_hex_to_rgb_array( $hex );
+        if ( ! $rgb ) {
+            return 0.0;
+        }
+        $channels = array();
+        foreach ( $rgb as $val ) {
+            $val /= 255;
+            $channels[] = ( $val <= 0.03928 ) ? $val / 12.92 : pow( ( $val + 0.055 ) / 1.055, 2.4 );
+        }
+        return 0.2126 * $channels[0] + 0.7152 * $channels[1] + 0.0722 * $channels[2];
+    }
+endif;
+
+/**
+ * Enqueue Bootstrap JS in the block editor for interactive previews.
+ *
+ * @since 0.2.0
+ */
+if ( ! function_exists( 'wp_bootstrap_enqueue_editor_assets' ) ) :
+    function wp_bootstrap_enqueue_editor_assets() {
+        $theme_version = wp_get_theme()->get( 'Version' );
+
+        wp_enqueue_script(
+            'wp-bootstrap-editor-js',
+            get_template_directory_uri() . '/assets/js/bootstrap.bundle.min.js',
+            array(),
+            $theme_version,
+            true
+        );
+    }
+endif;
+add_action( 'enqueue_block_editor_assets', 'wp_bootstrap_enqueue_editor_assets' );
+
+/**
+ * Register custom block categories for Bootstrap components.
+ *
+ * @since 0.2.0
+ *
+ * @param array                   $categories Existing block categories.
+ * @param WP_Block_Editor_Context $context    Block editor context.
+ * @return array Modified categories.
+ */
+if ( ! function_exists( 'wp_bootstrap_block_categories' ) ) :
+    function wp_bootstrap_block_categories( array $categories, $context ): array {
+        $bootstrap_categories = array(
+            array(
+                'slug'  => 'wp-bootstrap-layout',
+                'title' => __( 'Bootstrap Layout', 'wp-bootstrap' ),
+                'icon'  => 'layout',
+            ),
+            array(
+                'slug'  => 'wp-bootstrap-components',
+                'title' => __( 'Bootstrap Components', 'wp-bootstrap' ),
+                'icon'  => 'grid-view',
+            ),
+            array(
+                'slug'  => 'wp-bootstrap-navigation',
+                'title' => __( 'Bootstrap Navigation', 'wp-bootstrap' ),
+                'icon'  => 'menu',
+            ),
+        );
+
+        return array_merge( $bootstrap_categories, $categories );
+    }
+endif;
+add_filter( 'block_categories_all', 'wp_bootstrap_block_categories', 10, 2 );
+
 /**
  * Register block pattern categories.
  */
@@ -153,6 +579,30 @@ if ( ! function_exists( 'wp_bootstrap_pattern_categories' ) ) :
                 'description' => __( 'Text-focused content sections.', 'wp-bootstrap' ),
             )
         );
+
+        register_block_pattern_category(
+            'wp-bootstrap-layout',
+            array(
+                'label'       => __( 'Layout', 'wp-bootstrap' ),
+                'description' => __( 'Layout building blocks for page structure.', 'wp-bootstrap' ),
+            )
+        );
+
+        register_block_pattern_category(
+            'wp-bootstrap-components',
+            array(
+                'label'       => __( 'Components', 'wp-bootstrap' ),
+                'description' => __( 'Reusable Bootstrap component patterns.', 'wp-bootstrap' ),
+            )
+        );
+
+        register_block_pattern_category(
+            'wp-bootstrap-navigation',
+            array(
+                'label'       => __( 'Navigation', 'wp-bootstrap' ),
+                'description' => __( 'Navigation and header patterns.', 'wp-bootstrap' ),
+            )
+        );
     }
 endif;
 add_action( 'init', 'wp_bootstrap_pattern_categories' );
@@ -178,7 +628,7 @@ if ( ! function_exists( 'wp_bootstrap_block_styles' ) ) :
             'name'         => 'list-unstyled',
             'label'        => __( 'Unstyled', 'wp-bootstrap' ),
             'inline_style' => '
-                ul.is-style-list-unstyled, ol.is-style-list-unstyled { list-style: none; padding-left: 0; }',
+                ul.is-style-list-unstyled, ol.is-style-list-unstyled { list-style: none; padding-inline-start: 0; }',
         ) );
 
         // core/group - Card.
@@ -258,7 +708,7 @@ if ( ! function_exists( 'wp_bootstrap_block_styles' ) ) :
             'name'         => 'blockquote-accent',
             'label'        => __( 'Accent Border', 'wp-bootstrap' ),
             'inline_style' => '
-                .is-style-blockquote-accent { border-left: 4px solid var(--wp--preset--color--primary); background: var(--wp--preset--color--light); padding: var(--wp--preset--spacing--30); border-radius: 0 0.375rem 0.375rem 0; }',
+                .is-style-blockquote-accent { border-inline-start: 4px solid var(--wp--preset--color--primary); background: var(--wp--preset--color--light); padding: var(--wp--preset--spacing--30); border-start-start-radius: 0; border-start-end-radius: 0.375rem; border-end-end-radius: 0.375rem; border-end-start-radius: 0; }',
         ) );
 
         // core/image - Shadow.
@@ -315,3 +765,62 @@ if ( ! function_exists( 'wp_bootstrap_init_twig' ) ) :
     }
 endif;
 add_action( 'after_setup_theme', 'wp_bootstrap_init_twig' );
+
+/**
+ * Initialize Twig template controller for frontend rendering.
+ *
+ * Hooks into template_redirect to render Bootstrap 5 HTML
+ * via Twig templates instead of FSE block markup on the frontend.
+ *
+ * @since 0.1.1
+ */
+if ( ! function_exists( 'wp_bootstrap_init_templates' ) ) :
+    function wp_bootstrap_init_templates() {
+        if ( class_exists( '\\WPBootstrap\\Template\\TemplateController' ) ) {
+            new \WPBootstrap\Template\TemplateController();
+        }
+    }
+endif;
+add_action( 'after_setup_theme', 'wp_bootstrap_init_templates' );
+
+/**
+ * Customize comment form fields with Bootstrap classes.
+ *
+ * @since 0.1.1
+ *
+ * @param array $fields Default comment form fields.
+ * @return array Modified fields with Bootstrap classes.
+ */
+if ( ! function_exists( 'wp_bootstrap_comment_form_fields' ) ) :
+    function wp_bootstrap_comment_form_fields( array $fields ): array {
+        $commenter = wp_get_current_commenter();
+        $required  = get_option( 'require_name_email' );
+        $req_attr  = $required ? ' required' : '';
+
+        $fields['author'] = '<div class="mb-3">'
+            . '<label for="author" class="form-label">' . __( 'Name', 'wp-bootstrap' ) . ( $required ? ' <span class="text-danger">*</span>' : '' ) . '</label>'
+            . '<input id="author" name="author" type="text" class="form-control" value="' . esc_attr( $commenter['comment_author'] ) . '"' . $req_attr . '>'
+            . '</div>';
+
+        $fields['email'] = '<div class="mb-3">'
+            . '<label for="email" class="form-label">' . __( 'Email', 'wp-bootstrap' ) . ( $required ? ' <span class="text-danger">*</span>' : '' ) . '</label>'
+            . '<input id="email" name="email" type="email" class="form-control" value="' . esc_attr( $commenter['comment_author_email'] ) . '"' . $req_attr . '>'
+            . '</div>';
+
+        $fields['url'] = '<div class="mb-3">'
+            . '<label for="url" class="form-label">' . __( 'Website', 'wp-bootstrap' ) . '</label>'
+            . '<input id="url" name="url" type="url" class="form-control" value="' . esc_attr( $commenter['comment_author_url'] ) . '">'
+            . '</div>';
+
+        if ( isset( $fields['cookies'] ) ) {
+            $fields['cookies'] = '<div class="mb-3 form-check">'
+                . '<input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" class="form-check-input" value="yes">'
+                . '<label for="wp-comment-cookies-consent" class="form-check-label">'
+                . __( 'Save my name, email, and website in this browser for the next time I comment.', 'wp-bootstrap' )
+                . '</label></div>';
+        }
+
+        return $fields;
+    }
+endif;
+add_filter( 'comment_form_default_fields', 'wp_bootstrap_comment_form_fields' );

inc/Template/ContextBuilder.php

@@ -0,0 +1,519 @@
+<?php
+/**
+ * Twig Template Context Builder.
+ *
+ * Gathers WordPress data into structured arrays for Twig templates.
+ *
+ * @package WPBootstrap
+ * @since 0.1.1
+ */
+
+namespace WPBootstrap\Template;
+
+class ContextBuilder
+{
+    private NavWalker $navWalker;
+
+    public function __construct()
+    {
+        $this->navWalker = new NavWalker();
+    }
+
+    /**
+     * Build the complete context for the current request.
+     */
+    public function build(): array
+    {
+        $context = [
+            'site'           => $this->getSiteData(),
+            'menu'           => $this->getMenuData('primary'),
+            'footer_menu'    => $this->getMenuData('footer'),
+            'dark_mode'      => true,
+            'layout'         => 'default',
+            'header_variant' => $this->getHeaderVariant(),
+            'footer_variant' => $this->getFooterVariant(),
+        ];
+
+        if (is_singular()) {
+            $context['post'] = $this->getPostData();
+
+            if (is_singular('post')) {
+                $context['comments']        = $this->getCommentsData();
+                $context['post_navigation'] = $this->getPostNavigation();
+                $context['more_posts']      = $this->getMorePosts();
+            }
+        }
+
+        if (is_home() || is_archive() || is_search()) {
+            $context['posts']      = $this->getPostsLoop();
+            $context['pagination'] = $this->getPagination();
+        }
+
+        if (is_archive()) {
+            $context['archive'] = $this->getArchiveData();
+        }
+
+        if (is_search()) {
+            $context['search_query'] = get_search_query();
+        }
+
+        // Sidebar layout detection.
+        if (is_home()) {
+            $pageId = (int) get_option('page_for_posts');
+            if ($pageId) {
+                $templateSlug = get_page_template_slug($pageId);
+                if ($templateSlug === 'home-sidebar') {
+                    $context['layout'] = 'sidebar';
+                }
+            }
+            $context['sidebar'] = $this->getSidebarData();
+        }
+
+        // Sidebar data for pages/posts using the "Page with Sidebar" template.
+        if (is_page() || is_singular('post')) {
+            $slug = get_page_template_slug();
+            if ($slug === 'page-sidebar') {
+                $context['sidebar'] = $this->getSidebarData();
+            }
+        }
+
+        return $context;
+    }
+
+    /**
+     * Get global site information.
+     */
+    private function getSiteData(): array
+    {
+        return [
+            'name'        => get_bloginfo('name'),
+            'description' => get_bloginfo('description'),
+            'url'         => home_url('/'),
+            'charset'     => get_bloginfo('charset'),
+        ];
+    }
+
+    /**
+     * Get navigation menu items for a location.
+     */
+    private function getMenuData(string $location): array
+    {
+        $locations = get_nav_menu_locations();
+
+        if (isset($locations[$location])) {
+            $menu = wp_get_nav_menu_object($locations[$location]);
+            if ($menu) {
+                $items = wp_get_nav_menu_items($menu->term_id);
+                if ($items) {
+                    return $this->navWalker->buildTree($items);
+                }
+            }
+        }
+
+        // Fallback for primary: list top-level pages.
+        if ($location === 'primary') {
+            return $this->getPagesFallback();
+        }
+
+        return [];
+    }
+
+    /**
+     * Fallback menu from published pages.
+     */
+    private function getPagesFallback(): array
+    {
+        $pages = get_pages([
+            'sort_column' => 'menu_order,post_title',
+            'parent'      => 0,
+        ]);
+
+        $items = [];
+        foreach ($pages as $page) {
+            $items[] = [
+                'id'       => $page->ID,
+                'title'    => $page->post_title,
+                'url'      => get_permalink($page->ID),
+                'target'   => '',
+                'classes'  => '',
+                'active'   => is_page($page->ID),
+                'children' => [],
+            ];
+        }
+
+        return $items;
+    }
+
+    /**
+     * Get single post/page data.
+     */
+    private function getPostData(): array
+    {
+        global $post;
+
+        return [
+            'id'         => $post->ID,
+            'title'      => wp_specialchars_decode( get_the_title() ),
+            'url'        => get_permalink(),
+            'content'    => apply_filters('the_content', get_the_content()),
+            'excerpt'    => get_the_excerpt(),
+            'date'       => get_the_date(),
+            'date_iso'   => get_the_date('c'),
+            'modified'   => get_the_modified_date(),
+            'author'     => [
+                'name' => get_the_author(),
+                'url'  => get_author_posts_url(get_the_author_meta('ID')),
+            ],
+            'thumbnail'  => get_the_post_thumbnail_url($post->ID, 'large') ?: '',
+            'categories' => $this->getTermsList('category'),
+            'tags'       => $this->getTermsList('post_tag'),
+            'type'       => get_post_type(),
+        ];
+    }
+
+    /**
+     * Get posts for the main query loop.
+     */
+    private function getPostsLoop(): array
+    {
+        global $wp_query;
+        $posts = [];
+
+        if ($wp_query->have_posts()) {
+            while ($wp_query->have_posts()) {
+                $wp_query->the_post();
+                $posts[] = [
+                    'id'        => get_the_ID(),
+                    'title'     => wp_specialchars_decode( get_the_title() ),
+                    'url'       => get_permalink(),
+                    'excerpt'   => get_the_excerpt(),
+                    'date'      => get_the_date(),
+                    'date_iso'  => get_the_date('c'),
+                    'author'    => [
+                        'name' => get_the_author(),
+                        'url'  => get_author_posts_url(get_the_author_meta('ID')),
+                    ],
+                    'thumbnail' => get_the_post_thumbnail_url(null, 'medium_large') ?: '',
+                    'categories' => $this->getTermsList('category'),
+                    'tags'       => $this->getTermsList('post_tag'),
+                    'read_more' => __('Read more', 'wp-bootstrap'),
+                ];
+            }
+            wp_reset_postdata();
+        }
+
+        return $posts;
+    }
+
+    /**
+     * Build pagination data.
+     */
+    private function getPagination(): array
+    {
+        global $wp_query;
+
+        $totalPages  = (int) $wp_query->max_num_pages;
+        $currentPage = max(1, get_query_var('paged'));
+
+        if ($totalPages <= 1) {
+            return [];
+        }
+
+        $pages = [];
+        for ($i = 1; $i <= $totalPages; $i++) {
+            $pages[] = [
+                'number'     => $i,
+                'url'        => get_pagenum_link($i),
+                'is_current' => ($i === $currentPage),
+            ];
+        }
+
+        return [
+            'pages'     => $pages,
+            'current'   => $currentPage,
+            'total'     => $totalPages,
+            'prev_url'  => ($currentPage > 1) ? get_pagenum_link($currentPage - 1) : null,
+            'next_url'  => ($currentPage < $totalPages) ? get_pagenum_link($currentPage + 1) : null,
+            'prev_text' => __('Previous', 'wp-bootstrap'),
+            'next_text' => __('Next', 'wp-bootstrap'),
+        ];
+    }
+
+    /**
+     * Get archive page data.
+     */
+    private function getArchiveData(): array
+    {
+        return [
+            // wp_kses_post() allows safe HTML (headings, links, spans) while stripping
+            // script/event-handler attributes that could be injected via term descriptions.
+            'title'       => wp_kses_post(get_the_archive_title()),
+            'description' => wp_kses_post(get_the_archive_description()),
+        ];
+    }
+
+    /**
+     * Get comments for the current post.
+     */
+    private function getCommentsData(): array
+    {
+        $postId = get_the_ID();
+        $count  = (int) get_comments_number($postId);
+
+        $comments = get_comments([
+            'post_id' => $postId,
+            'status'  => 'approve',
+            'orderby' => 'comment_date_gmt',
+            'order'   => 'ASC',
+        ]);
+
+        return [
+            'list'    => $this->buildCommentTree($comments),
+            'count'   => $count,
+            'title'   => sprintf(
+                _n('%s Comment', '%s Comments', $count, 'wp-bootstrap'),
+                number_format_i18n($count)
+            ),
+            'form'    => $this->getCommentFormHtml(),
+            'is_open' => comments_open($postId),
+        ];
+    }
+
+    /**
+     * Build a nested comment tree from flat comments.
+     */
+    private function buildCommentTree(array $comments, int $parentId = 0): array
+    {
+        $tree = [];
+
+        foreach ($comments as $comment) {
+            if ((int) $comment->comment_parent !== $parentId) {
+                continue;
+            }
+
+            $tree[] = [
+                'id'         => (int) $comment->comment_ID,
+                // Escape at source — comment_author is user-supplied, store as safe text.
+                'author'     => esc_html($comment->comment_author),
+                // esc_url() strips dangerous schemes (javascript:, data:) and encodes for HTML.
+                'author_url' => esc_url($comment->comment_author_url),
+                'avatar_url' => get_avatar_url($comment, ['size' => 40]),
+                'date'       => get_comment_date('', $comment),
+                'date_iso'   => get_comment_date('c', $comment),
+                'content'    => apply_filters('comment_text', $comment->comment_content, $comment),
+                'edit_url'   => current_user_can('edit_comment', $comment->comment_ID)
+                    ? get_edit_comment_link($comment)
+                    : '',
+                'reply_url'  => get_comment_reply_link([
+                    'depth'     => 1,
+                    'max_depth' => get_option('thread_comments_depth', 5),
+                ], $comment),
+                'children'   => $this->buildCommentTree($comments, (int) $comment->comment_ID),
+            ];
+        }
+
+        return $tree;
+    }
+
+    /**
+     * Capture the WordPress comment form HTML.
+     */
+    private function getCommentFormHtml(): string
+    {
+        if (! comments_open()) {
+            return '';
+        }
+
+        ob_start();
+        comment_form([
+            'title_reply'          => __('Leave a Comment', 'wp-bootstrap'),
+            'title_reply_before'   => '<h3 id="reply-title" class="comment-reply-title h5 mb-3">',
+            'title_reply_after'    => '</h3>',
+            'class_form'           => 'needs-validation',
+            'class_submit'         => 'btn btn-primary',
+            'submit_button'        => '<input name="%1$s" type="submit" id="%2$s" class="%3$s" value="%4$s" />',
+            'comment_field'        => '<div class="mb-3"><label for="comment" class="form-label">' . __('Comment', 'wp-bootstrap') . '</label><textarea id="comment" name="comment" class="form-control" rows="5" required></textarea></div>',
+        ]);
+        return ob_get_clean();
+    }
+
+    /**
+     * Get previous/next post navigation.
+     */
+    private function getPostNavigation(): array
+    {
+        $prev = get_previous_post();
+        $next = get_next_post();
+
+        $navigation = [];
+
+        if ($prev) {
+            $navigation['previous'] = [
+                'title' => wp_specialchars_decode( get_the_title($prev) ),
+                'url'   => get_permalink($prev),
+            ];
+        }
+
+        if ($next) {
+            $navigation['next'] = [
+                'title' => wp_specialchars_decode( get_the_title($next) ),
+                'url'   => get_permalink($next),
+            ];
+        }
+
+        return $navigation;
+    }
+
+    /**
+     * Get recent posts for the "More posts" section.
+     */
+    private function getMorePosts(int $count = 3): array
+    {
+        $currentId = get_the_ID();
+
+        $query = new \WP_Query([
+            'posts_per_page' => $count,
+            'post__not_in'   => [$currentId],
+            'orderby'        => 'date',
+            'order'          => 'DESC',
+        ]);
+
+        $posts = [];
+        if ($query->have_posts()) {
+            while ($query->have_posts()) {
+                $query->the_post();
+                $posts[] = [
+                    'id'        => get_the_ID(),
+                    'title'     => wp_specialchars_decode( get_the_title() ),
+                    'url'       => get_permalink(),
+                    'date'      => get_the_date(),
+                    'date_iso'  => get_the_date('c'),
+                    'thumbnail' => get_the_post_thumbnail_url(null, 'medium_large') ?: '',
+                ];
+            }
+            wp_reset_postdata();
+        }
+
+        return $posts;
+    }
+
+    /**
+     * Get sidebar widget data.
+     *
+     * If the 'primary-sidebar' widget area has widgets assigned,
+     * their rendered HTML is returned. Otherwise, fallback data
+     * (recent posts, tags) is provided for the default Twig sidebar.
+     */
+    private function getSidebarData(): array
+    {
+        $widgets_active = is_active_sidebar( 'primary-sidebar' );
+        $widgets_html   = '';
+        if ( $widgets_active ) {
+            ob_start();
+            dynamic_sidebar( 'primary-sidebar' );
+            $widgets_html = ob_get_clean();
+        }
+
+        return [
+            'widgets_active' => $widgets_active,
+            'widgets_html'   => $widgets_html,
+            'recent_posts'   => $this->getSidebarRecentPosts(),
+            'tags'           => $this->getSidebarTags(),
+        ];
+    }
+
+    /**
+     * Get recent posts for sidebar.
+     */
+    private function getSidebarRecentPosts(int $count = 4): array
+    {
+        $query = new \WP_Query([
+            'posts_per_page' => $count,
+            'orderby'        => 'date',
+            'order'          => 'DESC',
+        ]);
+
+        $posts = [];
+        if ($query->have_posts()) {
+            while ($query->have_posts()) {
+                $query->the_post();
+                $posts[] = [
+                    'title' => wp_specialchars_decode( get_the_title() ),
+                    'url'   => get_permalink(),
+                    'date'  => get_the_date(),
+                ];
+            }
+            wp_reset_postdata();
+        }
+
+        return $posts;
+    }
+
+    /**
+     * Get tags for sidebar tag cloud.
+     */
+    private function getSidebarTags(int $count = 15): array
+    {
+        $tags = get_tags([
+            'number'  => $count,
+            'orderby' => 'count',
+            'order'   => 'DESC',
+        ]);
+
+        if (! $tags || is_wp_error($tags)) {
+            return [];
+        }
+
+        $items = [];
+        foreach ($tags as $tag) {
+            $items[] = [
+                'name'  => $tag->name,
+                'url'   => get_tag_link($tag->term_id),
+                'count' => $tag->count,
+            ];
+        }
+
+        return $items;
+    }
+
+    /**
+     * Get the active header variant.
+     *
+     * @since 0.2.0
+     */
+    private function getHeaderVariant(): string
+    {
+        return get_theme_mod('wp_bootstrap_header_variant', 'default');
+    }
+
+    /**
+     * Get the active footer variant.
+     *
+     * @since 0.2.0
+     */
+    private function getFooterVariant(): string
+    {
+        return get_theme_mod('wp_bootstrap_footer_variant', 'default');
+    }
+
+    /**
+     * Get terms list for a taxonomy.
+     */
+    private function getTermsList(string $taxonomy): array
+    {
+        $terms = get_the_terms(get_the_ID(), $taxonomy);
+        if (! $terms || is_wp_error($terms)) {
+            return [];
+        }
+
+        $list = [];
+        foreach ($terms as $term) {
+            $list[] = [
+                'name' => $term->name,
+                'url'  => get_term_link($term),
+            ];
+        }
+
+        return $list;
+    }
+}

inc/Template/NavWalker.php

@@ -0,0 +1,80 @@
+<?php
+/**
+ * Bootstrap 5 Navigation Walker.
+ *
+ * Converts flat WordPress menu items into a nested tree
+ * suitable for rendering Bootstrap navbar dropdowns in Twig.
+ *
+ * @package WPBootstrap
+ * @since 0.1.1
+ */
+
+namespace WPBootstrap\Template;
+
+class NavWalker
+{
+    /**
+     * Build a nested menu tree from flat WordPress menu items.
+     *
+     * @param array $items Array of WP_Post menu item objects.
+     * @return array Nested array suitable for Twig iteration.
+     */
+    public function buildTree(array $items): array
+    {
+        $tree    = [];
+        $children = [];
+
+        foreach ($items as $item) {
+            $node = [
+                'id'       => (int) $item->ID,
+                'title'    => $item->title,
+                'url'      => $item->url,
+                'target'   => $item->target ?: '',
+                'classes'  => implode(' ', array_filter($item->classes ?? [])),
+                'active'   => $this->isActive($item),
+                'children' => [],
+            ];
+
+            if ((int) $item->menu_item_parent === 0) {
+                $tree[$item->ID] = $node;
+            } else {
+                $children[(int) $item->menu_item_parent][] = $node;
+            }
+        }
+
+        // Assign children to their parent items.
+        foreach ($children as $parentId => $childItems) {
+            if (isset($tree[$parentId])) {
+                $tree[$parentId]['children'] = $childItems;
+            }
+        }
+
+        return array_values($tree);
+    }
+
+    /**
+     * Determine if a menu item is currently active.
+     */
+    private function isActive(object $item): bool
+    {
+        $classes = $item->classes ?? [];
+
+        if (in_array('current-menu-item', $classes, true)) {
+            return true;
+        }
+
+        if (in_array('current-menu-ancestor', $classes, true)) {
+            return true;
+        }
+
+        if ($item->object === 'page' && is_page((int) $item->object_id)) {
+            return true;
+        }
+
+        if ($item->object === 'category' && is_category((int) $item->object_id)) {
+            return true;
+        }
+
+        return false;
+    }
+}

inc/Template/TemplateController.php

@@ -0,0 +1,111 @@
+<?php
+/**
+ * Template Controller.
+ *
+ * Intercepts frontend requests and renders Twig templates
+ * with proper Bootstrap 5 HTML instead of FSE block markup.
+ *
+ * @package WPBootstrap
+ * @since 0.1.1
+ */
+
+namespace WPBootstrap\Template;
+
+use WPBootstrap\Twig\TwigService;
+
+class TemplateController
+{
+    private ContextBuilder $contextBuilder;
+
+    public function __construct()
+    {
+        $this->contextBuilder = new ContextBuilder();
+        add_action('template_redirect', [$this, 'render']);
+    }
+
+    /**
+     * Render the appropriate Twig template for the current request.
+     */
+    public function render(): void
+    {
+        // Skip admin, REST API, and AJAX requests.
+        if (is_admin() || wp_doing_ajax()) {
+            return;
+        }
+
+        if (defined('REST_REQUEST') && REST_REQUEST) {
+            return;
+        }
+
+        // Allow plugins or child themes to prevent rendering for this request.
+        if (! apply_filters('wp_bootstrap_should_render_template', true)) {
+            return;
+        }
+
+        $template = $this->resolveTemplate();
+        if (! $template) {
+            return;
+        }
+
+        try {
+            $context = $this->contextBuilder->build();
+            $twig    = TwigService::getInstance();
+
+            echo $twig->render($template, $context);
+            exit;
+        } catch (\Throwable $e) {
+            // Log the error and fall back to FSE rendering.
+            error_log('WP Bootstrap Twig Error: ' . $e->getMessage() . ' in ' . $e->getFile() . ':' . $e->getLine());
+            if (defined('WP_DEBUG') && WP_DEBUG) {
+                wp_die(
+                    '<h1>Template Rendering Error</h1>'
+                    . '<p><strong>' . esc_html($e->getMessage()) . '</strong></p>'
+                    . '<p>' . esc_html($e->getFile()) . ':' . esc_html($e->getLine()) . '</p>'
+                    . '<pre>' . esc_html($e->getTraceAsString()) . '</pre>',
+                    'Template Error',
+                    ['response' => 500]
+                );
+            }
+        }
+    }
+
+    /**
+     * Determine which Twig template to render based on WordPress conditionals.
+     */
+    private function resolveTemplate(): ?string
+    {
+        if (is_404()) {
+            return 'pages/404.html.twig';
+        }
+
+        if (is_search()) {
+            return 'pages/search.html.twig';
+        }
+
+        if (is_singular('post')) {
+            return 'pages/single.html.twig';
+        }
+
+        if (is_page()) {
+            $slug = get_page_template_slug();
+            return match ($slug) {
+                'page-landing'    => 'pages/landing.html.twig',
+                'page-full-width' => 'pages/full-width.html.twig',
+                'page-hero'       => 'pages/hero.html.twig',
+                'page-sidebar'    => 'pages/page-sidebar.html.twig',
+                default           => 'pages/page.html.twig',
+            };
+        }
+
+        if (is_archive()) {
+            return 'pages/archive.html.twig';
+        }
+
+        if (is_home()) {
+            return 'pages/index.html.twig';
+        }
+
+        // Fallback.
+        return 'pages/index.html.twig';
+    }
+}

inc/Twig/TwigService.php

@@ -11,6 +11,7 @@ namespace WPBootstrap\Twig;
 use Twig\Environment;
 use Twig\Loader\FilesystemLoader;
 use Twig\TwigFunction;
+use Twig\TwigFilter;
 
 class TwigService
 {
@@ -24,12 +25,14 @@ class TwigService
 
         $loader = new FilesystemLoader($viewsDir);
         $this->twig = new Environment($loader, [
-            'cache' => WP_DEBUG ? false : $cacheDir,
-            'debug' => WP_DEBUG,
-            'auto_reload' => true,
+            'cache'        => WP_DEBUG ? false : $cacheDir,
+            'debug'        => WP_DEBUG,
+            'auto_reload'  => WP_DEBUG,
         ]);
 
         $this->registerWordPressFunctions();
+        $this->registerWordPressGlobals();
+        $this->registerFilters();
     }
 
     public static function getInstance(): self
@@ -57,6 +60,7 @@ class TwigService
 
     private function registerWordPressFunctions(): void
     {
+        // Translation functions.
         $this->twig->addFunction(new TwigFunction('__', function (string $text, string $domain = 'wp-bootstrap'): string {
             return __($text, $domain);
         }));
@@ -65,8 +69,101 @@ class TwigService
             _e($text, $domain);
         }));
 
-        $this->twig->addFunction(new TwigFunction('esc_html', 'esc_html'));
-        $this->twig->addFunction(new TwigFunction('esc_attr', 'esc_attr'));
-        $this->twig->addFunction(new TwigFunction('esc_url', 'esc_url'));
+        $this->twig->addFunction(new TwigFunction('_n', function (string $single, string $plural, int $number, string $domain = 'wp-bootstrap'): string {
+            return _n($single, $plural, $number, $domain);
+        }));
+
+        // Escaping functions — marked is_safe so Twig does not double-escape their output.
+        // These functions already return HTML-safe strings; without is_safe, enabling
+        // Twig autoescape would double-encode the result (e.g. & → &).
+        $this->twig->addFunction(new TwigFunction('esc_html', 'esc_html', ['is_safe' => ['html']]));
+        $this->twig->addFunction(new TwigFunction('esc_attr', 'esc_attr', ['is_safe' => ['html']]));
+        $this->twig->addFunction(new TwigFunction('esc_url', 'esc_url', ['is_safe' => ['html']]));
+
+        // WordPress head/footer output (captured via output buffering).
+        $this->twig->addFunction(new TwigFunction('wp_head', function (): string {
+            ob_start();
+            wp_head();
+            return ob_get_clean();
+        }, ['is_safe' => ['html']]));
+
+        $this->twig->addFunction(new TwigFunction('wp_footer', function (): string {
+            ob_start();
+            wp_footer();
+            return ob_get_clean();
+        }, ['is_safe' => ['html']]));
+
+        $this->twig->addFunction(new TwigFunction('wp_body_open', function (): string {
+            ob_start();
+            wp_body_open();
+            return ob_get_clean();
+        }, ['is_safe' => ['html']]));
+
+        // HTML attribute helpers.
+        $this->twig->addFunction(new TwigFunction('language_attributes', function (): string {
+            ob_start();
+            language_attributes();
+            return ob_get_clean();
+        }, ['is_safe' => ['html']]));
+
+        $this->twig->addFunction(new TwigFunction('body_class', function (string $extra = ''): string {
+            ob_start();
+            body_class($extra);
+            return ob_get_clean();
+        }, ['is_safe' => ['html']]));
+
+        // URL and info helpers.
+        $this->twig->addFunction(new TwigFunction('home_url', function (string $path = '/'): string {
+            return home_url($path);
+        }));
+
+        $this->twig->addFunction(new TwigFunction('get_template_directory_uri', function (): string {
+            return get_template_directory_uri();
+        }));
+
+        $this->twig->addFunction(new TwigFunction('get_bloginfo', function (string $show): string {
+            return get_bloginfo($show);
+        }));
+
+        $this->twig->addFunction(new TwigFunction('get_search_query', function (): string {
+            return get_search_query();
+        }));
+
+        // Content filtering.
+        $this->twig->addFunction(new TwigFunction('wp_kses_post', function (string $content): string {
+            return wp_kses_post($content);
+        }, ['is_safe' => ['html']]));
+
+        $this->twig->addFunction(new TwigFunction('do_shortcode', function (string $content): string {
+            return do_shortcode($content);
+        }, ['is_safe' => ['html']]));
+
+        // Formatting.
+        $this->twig->addFunction(new TwigFunction('number_format_i18n', function (float $number, int $decimals = 0): string {
+            return number_format_i18n($number, $decimals);
+        }));
+
+        // Block template parts (allows FSE Template Editor changes to take effect).
+        $this->twig->addFunction(new TwigFunction('block_template_part', function (string $part): string {
+            ob_start();
+            block_template_part($part);
+            return ob_get_clean();
+        }, ['is_safe' => ['html']]));
+    }
+
+    private function registerWordPressGlobals(): void
+    {
+        $this->twig->addGlobal('site_name', get_bloginfo('name'));
+        $this->twig->addGlobal('site_description', get_bloginfo('description'));
+        $this->twig->addGlobal('site_url', home_url('/'));
+        $this->twig->addGlobal('theme_uri', get_template_directory_uri());
+        $this->twig->addGlobal('charset', get_bloginfo('charset'));
+        $this->twig->addGlobal('current_year', date('Y'));
+    }
+
+    private function registerFilters(): void
+    {
+        $this->twig->addFilter(new TwigFilter('wpautop', 'wpautop', ['is_safe' => ['html']]));
+        $this->twig->addFilter(new TwigFilter('wp_kses_post', 'wp_kses_post', ['is_safe' => ['html']]));
     }
 }

languages/de_CH.po

@@ -1,572 +0,0 @@
-# German (Switzerland) translation for WP Bootstrap.
-# Copyright (C) 2026 Marco Graetsch
-# This file is distributed under the same license as the WP Bootstrap theme.
-#
-msgid ""
-msgstr ""
-"Project-Id-Version: WP Bootstrap 0.1.0\n"
-"Report-Msgid-Bugs-To: https://src.bundespruefstelle.ch/magdev/wp-bootstrap/issues\n"
-"POT-Creation-Date: 2026-02-08 00:00+0000\n"
-"PO-Revision-Date: 2026-02-08 00:00+0000\n"
-"Last-Translator: Marco Graetsch <magdev3.0@gmail.com>\n"
-"Language-Team: German (Switzerland)\n"
-"Language: de_CH\n"
-"MIME-Version: 1.0\n"
-"Content-Type: text/plain; charset=UTF-8\n"
-"Content-Transfer-Encoding: 8bit\n"
-"Plural-Forms: nplurals=2; plural=(n != 1);\n"
-"X-Domain: wp-bootstrap\n"
-
-#. Theme Name of the theme
-#: patterns/footer.php
-msgid "WP Bootstrap"
-msgstr "WP Bootstrap"
-
-#. Description of the theme
-msgid "A modern WordPress Block Theme built from scratch with Bootstrap 5. Features responsive design, dark mode support, and full compatibility with the WordPress Site Editor."
-msgstr "Ein modernes WordPress Block-Theme, erstellt mit Bootstrap 5. Mit responsivem Design, Darkmode-Unterstützung und voller Kompatibilität mit dem WordPress Site-Editor."
-
-#: patterns/footer.php
-msgid "Powered by %s"
-msgstr "Betrieben mit %s"
-
-#: patterns/footer.php
-msgid "https://wordpress.org"
-msgstr "https://de.wordpress.org"
-
-#: patterns/hidden-404.php
-msgid "Page not found"
-msgstr "Seite nicht gefunden"
-
-#: patterns/hidden-404.php
-msgid "The page you are looking for does not exist, or it has been moved. Please try searching using the form below."
-msgstr "Die gesuchte Seite existiert nicht oder wurde verschoben. Bitte verwenden Sie das untenstehende Suchformular."
-
-#: patterns/hidden-search.php
-#: patterns/hidden-sidebar.php
-msgid "Search"
-msgstr "Suchen"
-
-#: patterns/hidden-search.php
-#: patterns/hidden-sidebar.php
-msgid "Search..."
-msgstr "Suchen..."
-
-#: patterns/hidden-blog-heading.php
-msgid "Blog"
-msgstr "Blog"
-
-#: patterns/comments.php
-msgid "Comments"
-msgstr "Kommentare"
-
-#: patterns/post-navigation.php
-msgid "Previous"
-msgstr "Zurück"
-
-#: patterns/post-navigation.php
-msgid "Next"
-msgstr "Weiter"
-
-#: patterns/more-posts.php
-msgid "More posts"
-msgstr "Weitere Beiträge"
-
-#: patterns/template-query-loop.php
-msgid "Read more"
-msgstr "Weiterlesen"
-
-#: patterns/template-query-loop.php
-msgid "No posts were found."
-msgstr "Es wurden keine Beiträge gefunden."
-
-#: patterns/hero-cover.php
-msgid "Build something amazing"
-msgstr "Erstellen Sie etwas Grossartiges"
-
-#: patterns/hero-cover.php
-msgid "Create modern, responsive websites with the power of Bootstrap 5 and the WordPress Site Editor."
-msgstr "Erstellen Sie moderne, responsive Websites mit der Leistung von Bootstrap 5 und dem WordPress Site-Editor."
-
-#: patterns/hero-cover.php
-#: patterns/hero-centered.php
-#: patterns/pricing-3-col.php
-msgid "Get Started"
-msgstr "Jetzt starten"
-
-#: patterns/hero-split.php
-msgid "Modern design meets powerful features"
-msgstr "Modernes Design trifft auf leistungsstarke Funktionen"
-
-#: patterns/hero-split.php
-msgid "A WordPress theme built from the ground up with Bootstrap 5 for a seamless editing and browsing experience."
-msgstr "Ein WordPress-Theme, von Grund auf mit Bootstrap 5 erstellt, für ein nahtloses Bearbeitungs- und Browsing-Erlebnis."
-
-#: patterns/hero-split.php
-#: patterns/hero-centered.php
-#: patterns/text-about.php
-msgid "Learn More"
-msgstr "Mehr erfahren"
-
-#: patterns/hero-split.php
-msgid "View Demo"
-msgstr "Demo ansehen"
-
-#: patterns/hero-split.php
-msgid "Hero image"
-msgstr "Heldenbild"
-
-#: patterns/hero-centered.php
-msgid "Welcome to your new website"
-msgstr "Willkommen auf Ihrer neuen Website"
-
-#: patterns/hero-centered.php
-msgid "Start building beautiful, responsive pages with the full power of Bootstrap 5 and the WordPress block editor."
-msgstr "Beginnen Sie mit dem Erstellen schöner, responsiver Seiten mit der vollen Leistung von Bootstrap 5 und dem WordPress Block-Editor."
-
-#: patterns/features-3-col.php
-#: functions.php
-msgid "Features"
-msgstr "Funktionen"
-
-#: patterns/features-3-col.php
-msgid "Everything you need to build a modern website."
-msgstr "Alles, was Sie für eine moderne Website benötigen."
-
-#: patterns/features-3-col.php
-msgid "Responsive Design"
-msgstr "Responsives Design"
-
-#: patterns/features-3-col.php
-msgid "Your website looks great on every device, from mobile phones to large desktop screens."
-msgstr "Ihre Website sieht auf jedem Gerät grossartig aus, vom Mobiltelefon bis zum grossen Desktop-Bildschirm."
-
-#: patterns/features-3-col.php
-msgid "Easy Customization"
-msgstr "Einfache Anpassung"
-
-#: patterns/features-3-col.php
-msgid "Customize colors, fonts, and layouts using the WordPress Site Editor with no code required."
-msgstr "Passen Sie Farben, Schriftarten und Layouts mit dem WordPress Site-Editor an, ganz ohne Programmierung."
-
-#: patterns/features-3-col.php
-msgid "Performance First"
-msgstr "Leistung zuerst"
-
-#: patterns/features-3-col.php
-msgid "Built with speed in mind. Optimized assets and clean code for lightning-fast page loads."
-msgstr "Entwickelt mit Fokus auf Geschwindigkeit. Optimierte Ressourcen und sauberer Code für blitzschnelle Seitenladezeiten."
-
-#: patterns/features-icon-list.php
-msgid "Why choose us"
-msgstr "Warum Sie uns wählen sollten"
-
-#: patterns/features-icon-list.php
-msgid "Bootstrap 5 Framework"
-msgstr "Bootstrap 5 Framework"
-
-#: patterns/features-icon-list.php
-msgid "Built on the most popular CSS framework. Leverage a proven, well-documented design system."
-msgstr "Basierend auf dem beliebtesten CSS-Framework. Nutzen Sie ein bewährtes, gut dokumentiertes Design-System."
-
-#: patterns/features-icon-list.php
-msgid "Full Site Editing"
-msgstr "Vollständige Website-Bearbeitung"
-
-#: patterns/features-icon-list.php
-msgid "Edit every part of your site visually. Headers, footers, templates, and content are all customizable."
-msgstr "Bearbeiten Sie jeden Teil Ihrer Website visuell. Kopfzeilen, Fusszeilen, Vorlagen und Inhalte sind vollständig anpassbar."
-
-#: patterns/features-icon-list.php
-msgid "Dark Mode Support"
-msgstr "Darkmode-Unterstützung"
-
-#: patterns/features-icon-list.php
-msgid "Built-in dark mode toggle that respects user preferences and persists across visits."
-msgstr "Integrierter Darkmode-Schalter, der Benutzereinstellungen respektiert und über Besuche hinweg beibehalten wird."
-
-#: patterns/features-2-col-offset.php
-msgid "Feature illustration"
-msgstr "Funktionsillustration"
-
-#: patterns/features-2-col-offset.php
-msgid "Designed for modern workflows"
-msgstr "Entwickelt für moderne Arbeitsabläufe"
-
-#: patterns/features-2-col-offset.php
-msgid "Streamline your development process with a theme that works the way you do."
-msgstr "Optimieren Sie Ihren Entwicklungsprozess mit einem Theme, das so arbeitet wie Sie."
-
-#: patterns/features-2-col-offset.php
-msgid "Block Patterns"
-msgstr "Block-Vorlagen"
-
-#: patterns/features-2-col-offset.php
-msgid "Pre-built patterns for common page sections. Drop them in and customize to fit your needs."
-msgstr "Vorgefertigte Vorlagen für gängige Seitenabschnitte. Fügen Sie diese ein und passen Sie sie an Ihre Bedürfnisse an."
-
-#: patterns/features-2-col-offset.php
-msgid "Style Variations"
-msgstr "Stilvariationen"
-
-#: patterns/features-2-col-offset.php
-msgid "Switch between color schemes with a single click. Choose from multiple professionally designed palettes."
-msgstr "Wechseln Sie mit einem Klick zwischen Farbschemata. Wählen Sie aus mehreren professionell gestalteten Paletten."
-
-#: patterns/cta-banner.php
-msgid "Ready to get started?"
-msgstr "Bereit loszulegen?"
-
-#: patterns/cta-banner.php
-msgid "Start building your website today with our powerful and flexible theme."
-msgstr "Beginnen Sie noch heute mit dem Aufbau Ihrer Website mit unserem leistungsstarken und flexiblen Theme."
-
-#: patterns/cta-banner.php
-msgid "Start Now"
-msgstr "Jetzt beginnen"
-
-#: patterns/cta-newsletter.php
-msgid "Stay in the loop"
-msgstr "Bleiben Sie auf dem Laufenden"
-
-#: patterns/cta-newsletter.php
-msgid "Subscribe to our newsletter for updates, tips, and exclusive content."
-msgstr "Abonnieren Sie unseren Newsletter für Aktualisierungen, Tipps und exklusive Inhalte."
-
-#: patterns/cta-newsletter.php
-msgid "Enter your email address"
-msgstr "Geben Sie Ihre E-Mail-Adresse ein"
-
-#: patterns/cta-newsletter.php
-msgid "Subscribe"
-msgstr "Abonnieren"
-
-#: patterns/testimonials-2-col.php
-msgid "What our clients say"
-msgstr "Was unsere Kunden sagen"
-
-#: patterns/testimonials-2-col.php
-msgid "This theme completely transformed our website. The Bootstrap integration makes it incredibly easy to create professional-looking pages without any custom code."
-msgstr "Dieses Theme hat unsere Website vollständig transformiert. Die Bootstrap-Integration macht es unglaublich einfach, professionell aussehende Seiten ohne individuellen Code zu erstellen."
-
-#: patterns/testimonials-2-col.php
-msgid "Jane Doe, Web Designer"
-msgstr "Jane Doe, Webdesignerin"
-
-#: patterns/testimonials-2-col.php
-msgid "The dark mode support and style variations give us the flexibility we need. Our clients love being able to switch between color schemes effortlessly."
-msgstr "Die Darkmode-Unterstützung und Stilvariationen geben uns die Flexibilität, die wir benötigen. Unsere Kunden schätzen es, mühelos zwischen Farbschemata wechseln zu können."
-
-#: patterns/testimonials-2-col.php
-msgid "John Smith, Developer"
-msgstr "John Smith, Entwickler"
-
-#: patterns/testimonials-centered.php
-msgid "The best WordPress theme we have ever used. Clean code, beautiful design, and incredible flexibility."
-msgstr "Das beste WordPress-Theme, das wir je verwendet haben. Sauberer Code, schönes Design und unglaubliche Flexibilität."
-
-#: patterns/testimonials-centered.php
-msgid "Alex Johnson, Creative Director"
-msgstr "Alex Johnson, Kreativdirektor"
-
-#: patterns/pricing-3-col.php
-#: functions.php
-msgid "Pricing"
-msgstr "Preise"
-
-#: patterns/pricing-3-col.php
-msgid "Choose the plan that works best for you."
-msgstr "Wählen Sie den Plan, der am besten zu Ihnen passt."
-
-#: patterns/pricing-3-col.php
-msgid "Basic"
-msgstr "Basis"
-
-#: patterns/pricing-3-col.php
-msgid "Free"
-msgstr "Kostenlos"
-
-#: patterns/pricing-3-col.php
-msgid "1 Website"
-msgstr "1 Website"
-
-#: patterns/pricing-3-col.php
-msgid "Community Support"
-msgstr "Community-Support"
-
-#: patterns/pricing-3-col.php
-msgid "Core Features"
-msgstr "Kernfunktionen"
-
-#: patterns/pricing-3-col.php
-msgid "Professional"
-msgstr "Professionell"
-
-#: patterns/pricing-3-col.php
-msgid "$49"
-msgstr "49 $"
-
-#: patterns/pricing-3-col.php
-msgid "5 Websites"
-msgstr "5 Websites"
-
-#: patterns/pricing-3-col.php
-msgid "Priority Support"
-msgstr "Vorrangiger Support"
-
-#: patterns/pricing-3-col.php
-msgid "All Features"
-msgstr "Alle Funktionen"
-
-#: patterns/pricing-3-col.php
-msgid "Enterprise"
-msgstr "Unternehmen"
-
-#: patterns/pricing-3-col.php
-msgid "$199"
-msgstr "199 $"
-
-#: patterns/pricing-3-col.php
-msgid "Unlimited Websites"
-msgstr "Unbegrenzte Websites"
-
-#: patterns/pricing-3-col.php
-msgid "Dedicated Support"
-msgstr "Persönlicher Support"
-
-#: patterns/pricing-3-col.php
-msgid "Custom Development"
-msgstr "Individuelle Entwicklung"
-
-#: patterns/pricing-3-col.php
-msgid "Contact Us"
-msgstr "Kontaktieren Sie uns"
-
-#: patterns/contact-info.php
-msgid "Get in touch"
-msgstr "Kontakt aufnehmen"
-
-#: patterns/contact-info.php
-msgid "We would love to hear from you. Reach out through any of the channels below."
-msgstr "Wir freuen uns von Ihnen zu hören. Kontaktieren Sie uns über einen der folgenden Kanäle."
-
-#: patterns/contact-info.php
-msgid "Address"
-msgstr "Adresse"
-
-#: patterns/contact-info.php
-msgid "123 Example Street"
-msgstr "Beispielstrasse 123"
-
-#: patterns/contact-info.php
-msgid "8000 Zurich, Switzerland"
-msgstr "8000 Zürich, Schweiz"
-
-#: patterns/contact-info.php
-msgid "Phone"
-msgstr "Telefon"
-
-#: patterns/contact-info.php
-msgid "+41 44 123 45 67"
-msgstr "+41 44 123 45 67"
-
-#: patterns/contact-info.php
-#: patterns/cta-newsletter.php
-msgid "Email"
-msgstr "E-Mail"
-
-#: patterns/contact-info.php
-msgid "info@example.com"
-msgstr "info@example.com"
-
-#: patterns/text-faq.php
-msgid "Frequently Asked Questions"
-msgstr "Häufig gestellte Fragen"
-
-#: patterns/text-faq.php
-msgid "How do I install the theme?"
-msgstr "Wie installiere ich das Theme?"
-
-#: patterns/text-faq.php
-msgid "Download the ZIP file from the releases page, then upload it via WordPress Admin > Appearance > Themes > Add New > Upload Theme."
-msgstr "Laden Sie die ZIP-Datei von der Release-Seite herunter und laden Sie sie über WordPress-Admin > Design > Themes > Neu hinzufügen > Theme hochladen hoch."
-
-#: patterns/text-faq.php
-msgid "Does it work with the Site Editor?"
-msgstr "Funktioniert es mit dem Site-Editor?"
-
-#: patterns/text-faq.php
-msgid "Yes, this is a Full Site Editing block theme. You can customize templates, headers, footers, and all block patterns using the WordPress Site Editor."
-msgstr "Ja, dies ist ein Full-Site-Editing-Block-Theme. Sie können Vorlagen, Kopfzeilen, Fusszeilen und alle Block-Vorlagen mit dem WordPress Site-Editor anpassen."
-
-#: patterns/text-faq.php
-msgid "Can I use my own fonts?"
-msgstr "Kann ich eigene Schriftarten verwenden?"
-
-#: patterns/text-faq.php
-msgid "The theme comes with Inter, Lora, and system font stacks. You can add custom fonts through the Site Editor or by modifying theme.json."
-msgstr "Das Theme wird mit Inter, Lora und System-Schriftarten geliefert. Sie können eigene Schriftarten über den Site-Editor oder durch Anpassung der theme.json hinzufügen."
-
-#: patterns/text-faq.php
-msgid "Is dark mode supported?"
-msgstr "Wird der Darkmode unterstützt?"
-
-#: patterns/text-faq.php
-msgid "Yes, the theme includes a dark mode toggle that uses Bootstrap 5.3 built-in dark mode. It respects system preferences and remembers your choice."
-msgstr "Ja, das Theme enthält einen Darkmode-Schalter, der den integrierten Darkmode von Bootstrap 5.3 verwendet. Er respektiert Systemeinstellungen und merkt sich Ihre Wahl."
-
-#: patterns/text-about.php
-msgid "About us"
-msgstr "Über uns"
-
-#: patterns/text-about.php
-msgid "We are passionate about creating tools that empower people to build beautiful websites. Our theme combines the reliability of Bootstrap with the flexibility of WordPress."
-msgstr "Wir sind leidenschaftlich daran interessiert, Werkzeuge zu schaffen, die Menschen befähigen, schöne Websites zu erstellen. Unser Theme vereint die Zuverlässigkeit von Bootstrap mit der Flexibilität von WordPress."
-
-#: patterns/text-about.php
-msgid "With years of experience in web development and design, we understand what it takes to create a theme that is both powerful and easy to use."
-msgstr "Mit jahrelanger Erfahrung in Webentwicklung und Design verstehen wir, was nötig ist, um ein Theme zu erstellen, das sowohl leistungsstark als auch einfach zu bedienen ist."
-
-#: patterns/text-about.php
-msgid "About us image"
-msgstr "Über-uns-Bild"
-
-#: patterns/hidden-sidebar.php
-msgid "Recent Posts"
-msgstr "Neueste Beiträge"
-
-#: patterns/hidden-sidebar.php
-msgid "Tags"
-msgstr "Schlagwörter"
-
-#: patterns/dark-mode-toggle.php
-msgid "Switch to dark mode"
-msgstr "Zum Darkmode wechseln"
-
-#: patterns/dark-mode-toggle.php
-msgid "Switch to light mode"
-msgstr "Zum hellen Modus wechseln"
-
-#: functions.php
-msgid "Pages"
-msgstr "Seiten"
-
-#: functions.php
-msgid "A collection of full page layouts."
-msgstr "Eine Sammlung von ganzseitigen Layouts."
-
-#: functions.php
-msgid "Hero Sections"
-msgstr "Heldenabschnitte"
-
-#: functions.php
-msgid "Large hero and banner sections."
-msgstr "Grosse Helden- und Banner-Abschnitte."
-
-#: functions.php
-msgid "Call to Action"
-msgstr "Handlungsaufforderung"
-
-#: functions.php
-msgid "Call to action sections."
-msgstr "Handlungsaufforderungs-Abschnitte."
-
-#: functions.php
-msgid "Feature and service showcase sections."
-msgstr "Funktions- und Service-Präsentationsabschnitte."
-
-#: functions.php
-msgid "Testimonials"
-msgstr "Referenzen"
-
-#: functions.php
-msgid "Testimonial and review sections."
-msgstr "Referenz- und Bewertungsabschnitte."
-
-#: functions.php
-msgid "Pricing table sections."
-msgstr "Preistabellen-Abschnitte."
-
-#: functions.php
-msgid "Contact"
-msgstr "Kontakt"
-
-#: functions.php
-msgid "Contact information sections."
-msgstr "Kontaktinformations-Abschnitte."
-
-#: functions.php
-msgid "Text & Content"
-msgstr "Text & Inhalt"
-
-#: functions.php
-msgid "Text-focused content sections."
-msgstr "Textorientierte Inhaltsabschnitte."
-
-#: functions.php
-msgid "Checkmark"
-msgstr "Häkchen"
-
-#: functions.php
-msgid "Unstyled"
-msgstr "Ohne Stil"
-
-#: functions.php
-msgid "Card"
-msgstr "Karte"
-
-#: functions.php
-msgid "Card with Shadow"
-msgstr "Karte mit Schatten"
-
-#: functions.php
-msgid "Alert - Info"
-msgstr "Hinweis - Info"
-
-#: functions.php
-msgid "Alert - Success"
-msgstr "Hinweis - Erfolg"
-
-#: functions.php
-msgid "Alert - Warning"
-msgstr "Hinweis - Warnung"
-
-#: functions.php
-msgid "Alert - Danger"
-msgstr "Hinweis - Gefahr"
-
-#: functions.php
-msgid "Striped Rows"
-msgstr "Gestreifte Zeilen"
-
-#: functions.php
-msgid "Hover Rows"
-msgstr "Hervorgehobene Zeilen"
-
-#: functions.php
-msgid "Bordered"
-msgstr "Mit Rahmen"
-
-#: functions.php
-msgid "Accent Border"
-msgstr "Akzentrahmen"
-
-#: functions.php
-msgid "Shadow"
-msgstr "Schatten"
-
-#: functions.php
-msgid "Large Rounded"
-msgstr "Gross abgerundet"
-
-#: functions.php
-msgid "Large"
-msgstr "Gross"
-
-#: functions.php
-msgid "Small"
-msgstr "Klein"
-
-#: functions.php
-msgid "Wide"
-msgstr "Breit"

package-lock.json

@@ -1,16 +1,17 @@
 {
     "name": "wp-bootstrap",
-    "version": "0.1.0",
+    "version": "1.0.0",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "wp-bootstrap",
-            "version": "0.1.0",
+            "version": "1.0.0",
             "license": "GPL-2.0-or-later",
             "dependencies": {
                 "@popperjs/core": "^2.11",
-                "bootstrap": "^5.3"
+                "bootstrap": "^5.3",
+                "bootstrap-icons": "^1.13.1"
             },
             "devDependencies": {
                 "autoprefixer": "^10.4",
@@ -259,6 +260,22 @@
                 "@popperjs/core": "^2.11.8"
             }
         },
+        "node_modules/bootstrap-icons": {
+            "version": "1.13.1",
+            "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.13.1.tgz",
+            "integrity": "sha512-ijombt4v6bv5CLeXvRWKy7CuM3TRTuPEuGaGKvTV5cz65rQSY8RQ2JcHt6b90cBBAC7s8fsf2EkQDldzCoXUjw==",
+            "funding": [
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/twbs"
+                },
+                {
+                    "type": "opencollective",
+                    "url": "https://opencollective.com/bootstrap"
+                }
+            ],
+            "license": "MIT"
+        },
         "node_modules/brace-expansion": {
             "version": "1.1.12",
             "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",

package.json

@@ -1,6 +1,6 @@
 {
     "name": "wp-bootstrap",
-    "version": "0.1.0",
+    "version": "1.0.1",
     "description": "WordPress Theme built with Bootstrap 5",
     "author": "Marco Graetsch <magdev3.0@gmail.com>",
     "license": "GPL-2.0-or-later",
@@ -13,24 +13,27 @@
         "node": ">=20.0.0"
     },
     "dependencies": {
+        "@popperjs/core": "^2.11",
         "bootstrap": "^5.3",
-        "@popperjs/core": "^2.11"
+        "bootstrap-icons": "^1.13.1"
     },
     "devDependencies": {
-        "sass": "^1.97",
+        "autoprefixer": "^10.4",
+        "copyfiles": "^2.4",
+        "cssnano": "^7.1",
         "postcss": "^8.5",
         "postcss-cli": "^11",
-        "autoprefixer": "^10.4",
-        "cssnano": "^7.1",
-        "copyfiles": "^2.4"
+        "sass": "^1.97"
     },
     "scripts": {
         "scss": "sass src/scss/style.scss:assets/css/style.css src/scss/editor-style.scss:assets/css/editor-style.css --load-path=node_modules",
+        "scss:rtl": "sass src/scss/rtl.scss:assets/css/rtl.css --style=compressed --no-source-map",
         "scss:watch": "sass --watch src/scss/style.scss:assets/css/style.css src/scss/editor-style.scss:assets/css/editor-style.css --load-path=node_modules",
         "postcss": "postcss assets/css/style.css --use autoprefixer cssnano -o assets/css/style.min.css --no-map",
         "copy:js": "copyfiles -f node_modules/bootstrap/dist/js/bootstrap.bundle.min.js node_modules/bootstrap/dist/js/bootstrap.bundle.min.js.map assets/js/",
         "copy:theme-js": "copyfiles -f src/js/dark-mode.js assets/js/",
-        "build": "npm run copy:js && npm run copy:theme-js && npm run scss && npm run postcss",
+        "copy:icons": "copyfiles -f node_modules/bootstrap-icons/font/fonts/bootstrap-icons.woff node_modules/bootstrap-icons/font/fonts/bootstrap-icons.woff2 assets/fonts/",
+        "build": "npm run copy:js && npm run copy:theme-js && npm run copy:icons && npm run scss && npm run scss:rtl && npm run postcss",
         "watch": "npm run copy:js && npm run scss:watch",
         "dev": "npm run watch"
     }

parts/footer-columns.html

@@ -0,0 +1 @@
+<!-- wp:pattern {"slug":"wp-bootstrap/footer-columns"} /-->

parts/footer-minimal.html

@@ -0,0 +1 @@
+<!-- wp:pattern {"slug":"wp-bootstrap/footer-minimal"} /-->

parts/header-centered.html

@@ -0,0 +1 @@
+<!-- wp:pattern {"slug":"wp-bootstrap/header-centered"} /-->

parts/header-transparent.html

@@ -0,0 +1 @@
+<!-- wp:pattern {"slug":"wp-bootstrap/header-transparent"} /-->

patterns/component-accordion.php

@@ -0,0 +1,38 @@
+<?php
+/**
+ * Title: Accordion
+ * Slug: wp-bootstrap/component-accordion
+ * Categories: wp-bootstrap-components, text
+ * Description: An accordion section using details blocks with summary and content paragraphs.
+ *
+ * @package WPBootstrap
+ * @since 0.2.0
+ */
+?>
+<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|70","bottom":"var:preset|spacing|70"}}},"layout":{"type":"constrained","contentSize":"720px"}} -->
+<div class="wp-block-group alignfull" style="padding-top:var(--wp--preset--spacing--70);padding-bottom:var(--wp--preset--spacing--70)"><!-- wp:heading {"textAlign":"center","fontSize":"xx-large"} -->
+<h2 class="wp-block-heading has-text-align-center has-xx-large-font-size"><?php esc_html_e( 'Accordion', 'wp-bootstrap' ); ?></h2>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph {"align":"center","textColor":"secondary"} -->
+<p class="has-text-align-center has-secondary-color has-text-color"><?php esc_html_e( 'Click on each item to expand and reveal its content.', 'wp-bootstrap' ); ?></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:details -->
+<details class="wp-block-details"><summary><?php esc_html_e( 'Accordion Item One', 'wp-bootstrap' ); ?></summary><!-- wp:paragraph {"textColor":"secondary"} -->
+<p class="has-secondary-color has-text-color"><?php esc_html_e( 'This is the content for the first accordion item. You can add any blocks inside this details element to create rich, expandable content sections.', 'wp-bootstrap' ); ?></p>
+<!-- /wp:paragraph --></details>
+<!-- /wp:details -->
+
+<!-- wp:details -->
+<details class="wp-block-details"><summary><?php esc_html_e( 'Accordion Item Two', 'wp-bootstrap' ); ?></summary><!-- wp:paragraph {"textColor":"secondary"} -->
+<p class="has-secondary-color has-text-color"><?php esc_html_e( 'This is the content for the second accordion item. Details blocks are a native HTML element that provide toggle functionality without JavaScript.', 'wp-bootstrap' ); ?></p>
+<!-- /wp:paragraph --></details>
+<!-- /wp:details -->
+
+<!-- wp:details -->
+<details class="wp-block-details"><summary><?php esc_html_e( 'Accordion Item Three', 'wp-bootstrap' ); ?></summary><!-- wp:paragraph {"textColor":"secondary"} -->
+<p class="has-secondary-color has-text-color"><?php esc_html_e( 'This is the content for the third accordion item. Use accordions to organize frequently asked questions, feature lists, or any content that benefits from progressive disclosure.', 'wp-bootstrap' ); ?></p>
+<!-- /wp:paragraph --></details>
+<!-- /wp:details --></div>
+<!-- /wp:group -->

patterns/component-card-group.php

@@ -0,0 +1,50 @@
+<?php
+/**
+ * Title: Card Group
+ * Slug: wp-bootstrap/component-card-group
+ * Categories: wp-bootstrap-components
+ * Description: A three-column card group with shadow-styled cards, each containing a heading and paragraph.
+ *
+ * @package WPBootstrap
+ * @since 0.2.0
+ */
+?>
+<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|70","bottom":"var:preset|spacing|70"}}},"layout":{"type":"constrained"}} -->
+<div class="wp-block-group alignfull" style="padding-top:var(--wp--preset--spacing--70);padding-bottom:var(--wp--preset--spacing--70)"><!-- wp:columns {"align":"wide","style":{"spacing":{"blockGap":{"left":"var:preset|spacing|40"}}}} -->
+<div class="wp-block-columns alignwide"><!-- wp:column -->
+<div class="wp-block-column"><!-- wp:group {"className":"is-style-card-shadow","style":{"spacing":{"padding":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50","left":"var:preset|spacing|40","right":"var:preset|spacing|40"}}},"layout":{"type":"constrained"}} -->
+<div class="wp-block-group is-style-card-shadow" style="padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--40)"><!-- wp:heading {"level":3} -->
+<h3 class="wp-block-heading"><?php esc_html_e( 'Card One', 'wp-bootstrap' ); ?></h3>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph {"textColor":"secondary"} -->
+<p class="has-secondary-color has-text-color"><?php esc_html_e( 'Add a short description for this card. Cards are a great way to organize and present related content.', 'wp-bootstrap' ); ?></p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:group --></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class="wp-block-column"><!-- wp:group {"className":"is-style-card-shadow","style":{"spacing":{"padding":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50","left":"var:preset|spacing|40","right":"var:preset|spacing|40"}}},"layout":{"type":"constrained"}} -->
+<div class="wp-block-group is-style-card-shadow" style="padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--40)"><!-- wp:heading {"level":3} -->
+<h3 class="wp-block-heading"><?php esc_html_e( 'Card Two', 'wp-bootstrap' ); ?></h3>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph {"textColor":"secondary"} -->
+<p class="has-secondary-color has-text-color"><?php esc_html_e( 'Add a short description for this card. Cards are a great way to organize and present related content.', 'wp-bootstrap' ); ?></p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:group --></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class="wp-block-column"><!-- wp:group {"className":"is-style-card-shadow","style":{"spacing":{"padding":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50","left":"var:preset|spacing|40","right":"var:preset|spacing|40"}}},"layout":{"type":"constrained"}} -->
+<div class="wp-block-group is-style-card-shadow" style="padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--40)"><!-- wp:heading {"level":3} -->
+<h3 class="wp-block-heading"><?php esc_html_e( 'Card Three', 'wp-bootstrap' ); ?></h3>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph {"textColor":"secondary"} -->
+<p class="has-secondary-color has-text-color"><?php esc_html_e( 'Add a short description for this card. Cards are a great way to organize and present related content.', 'wp-bootstrap' ); ?></p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:group --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns --></div>
+<!-- /wp:group -->

patterns/footer-columns.php

@@ -0,0 +1,85 @@
+<?php
+/**
+ * Title: Footer - Multi-Column
+ * Slug: wp-bootstrap/footer-columns
+ * Categories: footer
+ * Block Types: core/template-part/footer
+ * Description: Multi-column footer with site info, navigation, and credits.
+ *
+ * @package WPBootstrap
+ * @since 0.2.0
+ */
+?>
+<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|60","bottom":"var:preset|spacing|50"}}},"backgroundColor":"dark","textColor":"base","layout":{"type":"constrained"}} -->
+<div class="wp-block-group has-base-color has-dark-background-color has-text-color has-background" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--50)">
+	<!-- wp:columns {"align":"wide"} -->
+	<div class="wp-block-columns alignwide">
+		<!-- wp:column -->
+		<div class="wp-block-column">
+			<!-- wp:site-title {"level":3} /-->
+			<!-- wp:site-tagline {"fontSize":"small"} /-->
+			<!-- wp:paragraph {"fontSize":"small"} -->
+			<p class="has-small-font-size"><?php esc_html_e( 'A modern WordPress theme built with Bootstrap 5.', 'wp-bootstrap' ); ?></p>
+			<!-- /wp:paragraph -->
+		</div>
+		<!-- /wp:column -->
+
+		<!-- wp:column -->
+		<div class="wp-block-column">
+			<!-- wp:heading {"level":4,"fontSize":"medium"} -->
+			<h4 class="wp-block-heading has-medium-font-size"><?php esc_html_e( 'Navigation', 'wp-bootstrap' ); ?></h4>
+			<!-- /wp:heading -->
+			<!-- wp:navigation {"overlayMenu":"never","layout":{"type":"flex","orientation":"vertical"},"style":{"spacing":{"blockGap":"var:preset|spacing|10"}}} /-->
+		</div>
+		<!-- /wp:column -->
+
+		<!-- wp:column -->
+		<div class="wp-block-column">
+			<!-- wp:heading {"level":4,"fontSize":"medium"} -->
+			<h4 class="wp-block-heading has-medium-font-size"><?php esc_html_e( 'About', 'wp-bootstrap' ); ?></h4>
+			<!-- /wp:heading -->
+			<!-- wp:paragraph {"fontSize":"small"} -->
+			<p class="has-small-font-size"><?php esc_html_e( 'This theme is proudly built with Bootstrap 5 and WordPress Full Site Editing.', 'wp-bootstrap' ); ?></p>
+			<!-- /wp:paragraph -->
+		</div>
+		<!-- /wp:column -->
+	</div>
+	<!-- /wp:columns -->
+
+	<!-- wp:spacer {"height":"var:preset|spacing|40"} -->
+	<div style="height:var(--wp--preset--spacing--40)" aria-hidden="true" class="wp-block-spacer"></div>
+	<!-- /wp:spacer -->
+
+	<!-- wp:separator {"align":"wide","className":"is-style-separator-wide"} -->
+	<hr class="wp-block-separator alignwide has-alpha-channel-opacity is-style-separator-wide"/>
+	<!-- /wp:separator -->
+
+	<!-- wp:group {"align":"wide","layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between"}} -->
+	<div class="wp-block-group alignwide">
+		<!-- wp:paragraph {"fontSize":"small"} -->
+		<p class="has-small-font-size">
+			<?php
+			printf(
+				/* translators: Copyright notice. %1$s: Year, %2$s: Site title. */
+				esc_html__( '&copy; %1$s %2$s', 'wp-bootstrap' ),
+				esc_html( gmdate( 'Y' ) ),
+				esc_html( get_bloginfo( 'name' ) )
+			);
+			?>
+		</p>
+		<!-- /wp:paragraph -->
+		<!-- wp:paragraph {"fontSize":"small"} -->
+		<p class="has-small-font-size">
+			<?php
+			printf(
+				/* translators: Powered by WordPress. %s: WordPress link. */
+				esc_html__( 'Powered by %s', 'wp-bootstrap' ),
+				'<a href="' . esc_url( __( 'https://wordpress.org', 'wp-bootstrap' ) ) . '" rel="nofollow">WordPress</a>'
+			);
+			?>
+		</p>
+		<!-- /wp:paragraph -->
+	</div>
+	<!-- /wp:group -->
+</div>
+<!-- /wp:group -->

patterns/footer-minimal.php

@@ -0,0 +1,35 @@
+<?php
+/**
+ * Title: Footer - Minimal
+ * Slug: wp-bootstrap/footer-minimal
+ * Categories: footer
+ * Block Types: core/template-part/footer
+ * Description: Minimal single-line footer with copyright.
+ *
+ * @package WPBootstrap
+ * @since 0.2.0
+ */
+?>
+<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40"}}},"layout":{"type":"constrained"}} -->
+<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40)">
+	<!-- wp:separator {"className":"is-style-separator-wide","style":{"spacing":{"margin":{"bottom":"var:preset|spacing|40"}}}} -->
+	<hr class="wp-block-separator has-alpha-channel-opacity is-style-separator-wide" style="margin-bottom:var(--wp--preset--spacing--40)"/>
+	<!-- /wp:separator -->
+	<!-- wp:group {"align":"wide","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"center"}} -->
+	<div class="wp-block-group alignwide">
+		<!-- wp:paragraph {"fontSize":"small"} -->
+		<p class="has-small-font-size">
+			<?php
+			printf(
+				/* translators: Copyright notice. %1$s: Year, %2$s: Site title. */
+				esc_html__( '&copy; %1$s %2$s. All rights reserved.', 'wp-bootstrap' ),
+				esc_html( gmdate( 'Y' ) ),
+				esc_html( get_bloginfo( 'name' ) )
+			);
+			?>
+		</p>
+		<!-- /wp:paragraph -->
+	</div>
+	<!-- /wp:group -->
+</div>
+<!-- /wp:group -->

patterns/header-centered.php

@@ -0,0 +1,32 @@
+<?php
+/**
+ * Title: Header - Centered
+ * Slug: wp-bootstrap/header-centered
+ * Categories: header
+ * Block Types: core/template-part/header
+ * Description: Centered header with site title above navigation.
+ *
+ * @package WPBootstrap
+ * @since 0.2.0
+ */
+?>
+<!-- wp:group {"align":"full","layout":{"type":"default"}} -->
+<div class="wp-block-group alignfull">
+	<!-- wp:group {"layout":{"type":"constrained"}} -->
+	<div class="wp-block-group">
+		<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|20"}}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"center"}} -->
+		<div class="wp-block-group alignwide" style="padding-top:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--20)">
+			<!-- wp:site-title {"level":0,"textAlign":"center"} /-->
+			<!-- wp:site-tagline {"textAlign":"center","fontSize":"small"} /-->
+		</div>
+		<!-- /wp:group -->
+		<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|30"}}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"center"}} -->
+		<div class="wp-block-group alignwide" style="padding-top:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--30)">
+			<!-- wp:navigation {"overlayBackgroundColor":"base","overlayTextColor":"contrast","layout":{"type":"flex","justifyContent":"center","flexWrap":"wrap"}} /-->
+			<!-- wp:pattern {"slug":"wp-bootstrap/dark-mode-toggle"} /-->
+		</div>
+		<!-- /wp:group -->
+	</div>
+	<!-- /wp:group -->
+</div>
+<!-- /wp:group -->

patterns/header-transparent.php

@@ -0,0 +1,31 @@
+<?php
+/**
+ * Title: Header - Transparent
+ * Slug: wp-bootstrap/header-transparent
+ * Categories: header
+ * Block Types: core/template-part/header
+ * Description: Transparent header that overlays page content, ideal for hero sections.
+ *
+ * @package WPBootstrap
+ * @since 0.2.0
+ */
+?>
+<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"0","bottom":"0"}}},"layout":{"type":"default"}} -->
+<div class="wp-block-group alignfull" style="padding-top:0;padding-bottom:0">
+	<!-- wp:group {"layout":{"type":"constrained"}} -->
+	<div class="wp-block-group">
+		<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30"}}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
+		<div class="wp-block-group alignwide" style="padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30)">
+			<!-- wp:site-title {"level":0,"style":{"elements":{"link":{"color":{"text":"var:preset|color|base"}}}}} /-->
+			<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"right","verticalAlignment":"center"}} -->
+			<div class="wp-block-group">
+				<!-- wp:navigation {"overlayBackgroundColor":"base","overlayTextColor":"contrast","style":{"elements":{"link":{"color":{"text":"var:preset|color|base"}}}},"layout":{"type":"flex","justifyContent":"right","flexWrap":"wrap"}} /-->
+				<!-- wp:pattern {"slug":"wp-bootstrap/dark-mode-toggle"} /-->
+			</div>
+			<!-- /wp:group -->
+		</div>
+		<!-- /wp:group -->
+	</div>
+	<!-- /wp:group -->
+</div>
+<!-- /wp:group -->

patterns/layout-2-col.php

@@ -0,0 +1,34 @@
+<?php
+/**
+ * Title: Two Columns
+ * Slug: wp-bootstrap/layout-2-col
+ * Categories: wp-bootstrap-layout, columns
+ * Description: A two-column layout with equal width columns, each containing a heading and paragraph.
+ *
+ * @package WPBootstrap
+ * @since 0.2.0
+ */
+?>
+<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|60","bottom":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} -->
+<div class="wp-block-group alignfull" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60)"><!-- wp:columns {"align":"wide","style":{"spacing":{"blockGap":{"left":"var:preset|spacing|50"}}}} -->
+<div class="wp-block-columns alignwide"><!-- wp:column -->
+<div class="wp-block-column"><!-- wp:heading {"level":3,"fontSize":"x-large"} -->
+<h3 class="wp-block-heading has-x-large-font-size"><?php esc_html_e( 'Column One', 'wp-bootstrap' ); ?></h3>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph {"textColor":"secondary"} -->
+<p class="has-secondary-color has-text-color"><?php esc_html_e( 'Add your content here. This column takes up half the available width on larger screens and stacks on mobile devices.', 'wp-bootstrap' ); ?></p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class="wp-block-column"><!-- wp:heading {"level":3,"fontSize":"x-large"} -->
+<h3 class="wp-block-heading has-x-large-font-size"><?php esc_html_e( 'Column Two', 'wp-bootstrap' ); ?></h3>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph {"textColor":"secondary"} -->
+<p class="has-secondary-color has-text-color"><?php esc_html_e( 'Add your content here. This column takes up half the available width on larger screens and stacks on mobile devices.', 'wp-bootstrap' ); ?></p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns --></div>
+<!-- /wp:group -->

patterns/layout-3-col.php

@@ -0,0 +1,44 @@
+<?php
+/**
+ * Title: Three Columns
+ * Slug: wp-bootstrap/layout-3-col
+ * Categories: wp-bootstrap-layout, columns
+ * Description: A three-column layout with equal width columns, each containing a heading and paragraph.
+ *
+ * @package WPBootstrap
+ * @since 0.2.0
+ */
+?>
+<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|60","bottom":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} -->
+<div class="wp-block-group alignfull" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60)"><!-- wp:columns {"align":"wide","style":{"spacing":{"blockGap":{"left":"var:preset|spacing|50"}}}} -->
+<div class="wp-block-columns alignwide"><!-- wp:column -->
+<div class="wp-block-column"><!-- wp:heading {"level":3,"fontSize":"x-large"} -->
+<h3 class="wp-block-heading has-x-large-font-size"><?php esc_html_e( 'Column One', 'wp-bootstrap' ); ?></h3>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph {"textColor":"secondary"} -->
+<p class="has-secondary-color has-text-color"><?php esc_html_e( 'Add your content here. This column takes up one third of the available width on larger screens.', 'wp-bootstrap' ); ?></p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class="wp-block-column"><!-- wp:heading {"level":3,"fontSize":"x-large"} -->
+<h3 class="wp-block-heading has-x-large-font-size"><?php esc_html_e( 'Column Two', 'wp-bootstrap' ); ?></h3>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph {"textColor":"secondary"} -->
+<p class="has-secondary-color has-text-color"><?php esc_html_e( 'Add your content here. This column takes up one third of the available width on larger screens.', 'wp-bootstrap' ); ?></p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class="wp-block-column"><!-- wp:heading {"level":3,"fontSize":"x-large"} -->
+<h3 class="wp-block-heading has-x-large-font-size"><?php esc_html_e( 'Column Three', 'wp-bootstrap' ); ?></h3>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph {"textColor":"secondary"} -->
+<p class="has-secondary-color has-text-color"><?php esc_html_e( 'Add your content here. This column takes up one third of the available width on larger screens.', 'wp-bootstrap' ); ?></p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns --></div>
+<!-- /wp:group -->

patterns/layout-container.php

@@ -0,0 +1,20 @@
+<?php
+/**
+ * Title: Bootstrap Container
+ * Slug: wp-bootstrap/layout-container
+ * Categories: wp-bootstrap-layout
+ * Description: A constrained container with padding, containing a heading and paragraph placeholder.
+ *
+ * @package WPBootstrap
+ * @since 0.2.0
+ */
+?>
+<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|60","bottom":"var:preset|spacing|60","left":"var:preset|spacing|40","right":"var:preset|spacing|40"}}},"layout":{"type":"constrained"}} -->
+<div class="wp-block-group alignfull" style="padding-top:var(--wp--preset--spacing--60);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--60);padding-left:var(--wp--preset--spacing--40)"><!-- wp:heading {"fontSize":"xx-large"} -->
+<h2 class="wp-block-heading has-xx-large-font-size"><?php esc_html_e( 'Heading goes here', 'wp-bootstrap' ); ?></h2>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph -->
+<p><?php esc_html_e( 'This is a content container with constrained width and comfortable padding. Replace this text with your own content.', 'wp-bootstrap' ); ?></p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:group -->

patterns/layout-full-width-section.php

@@ -0,0 +1,20 @@
+<?php
+/**
+ * Title: Full Width Section
+ * Slug: wp-bootstrap/layout-full-width-section
+ * Categories: wp-bootstrap-layout, banner
+ * Description: A full-width section with a primary background color, centered white heading and paragraph.
+ *
+ * @package WPBootstrap
+ * @since 0.2.0
+ */
+?>
+<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|80","bottom":"var:preset|spacing|80"}}},"backgroundColor":"primary","textColor":"base","layout":{"type":"constrained"}} -->
+<div class="wp-block-group alignfull has-base-color has-primary-background-color has-text-color has-background" style="padding-top:var(--wp--preset--spacing--80);padding-bottom:var(--wp--preset--spacing--80)"><!-- wp:heading {"textAlign":"center","fontSize":"xx-large"} -->
+<h2 class="wp-block-heading has-text-align-center has-xx-large-font-size"><?php esc_html_e( 'Full Width Section Heading', 'wp-bootstrap' ); ?></h2>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph {"align":"center","fontSize":"large"} -->
+<p class="has-text-align-center has-large-font-size"><?php esc_html_e( 'This full-width section stands out with a colored background. Use it to highlight important content, announcements, or calls to action.', 'wp-bootstrap' ); ?></p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:group -->

patterns/nav-dark.php

@@ -0,0 +1,31 @@
+<?php
+/**
+ * Title: Navigation - Dark
+ * Slug: wp-bootstrap/nav-dark
+ * Categories: wp-bootstrap-navigation, header
+ * Block Types: core/template-part/header
+ * Description: Dark-themed navigation header with dark background.
+ *
+ * @package WPBootstrap
+ * @since 0.2.0
+ */
+?>
+<!-- wp:group {"align":"full","backgroundColor":"dark","textColor":"base","layout":{"type":"default"}} -->
+<div class="wp-block-group alignfull has-base-color has-dark-background-color has-text-color has-background">
+	<!-- wp:group {"layout":{"type":"constrained"}} -->
+	<div class="wp-block-group">
+		<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30"}}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
+		<div class="wp-block-group alignwide" style="padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30)">
+			<!-- wp:site-title {"level":0,"style":{"elements":{"link":{"color":{"text":"var:preset|color|base"}}}}} /-->
+			<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"right","verticalAlignment":"center"}} -->
+			<div class="wp-block-group">
+				<!-- wp:navigation {"overlayBackgroundColor":"dark","overlayTextColor":"base","style":{"elements":{"link":{"color":{"text":"var:preset|color|base"}}}},"layout":{"type":"flex","justifyContent":"right","flexWrap":"wrap"}} /-->
+				<!-- wp:pattern {"slug":"wp-bootstrap/dark-mode-toggle"} /-->
+			</div>
+			<!-- /wp:group -->
+		</div>
+		<!-- /wp:group -->
+	</div>
+	<!-- /wp:group -->
+</div>
+<!-- /wp:group -->

patterns/nav-offcanvas.php

@@ -0,0 +1,31 @@
+<?php
+/**
+ * Title: Navigation - Offcanvas
+ * Slug: wp-bootstrap/nav-offcanvas
+ * Categories: wp-bootstrap-navigation, header
+ * Block Types: core/template-part/header
+ * Description: Header with offcanvas mobile navigation using Bootstrap offcanvas component.
+ *
+ * @package WPBootstrap
+ * @since 0.2.0
+ */
+?>
+<!-- wp:group {"align":"full","layout":{"type":"default"}} -->
+<div class="wp-block-group alignfull">
+	<!-- wp:group {"layout":{"type":"constrained"}} -->
+	<div class="wp-block-group">
+		<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30"}}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
+		<div class="wp-block-group alignwide" style="padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30)">
+			<!-- wp:site-title {"level":0} /-->
+			<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"right","verticalAlignment":"center"}} -->
+			<div class="wp-block-group">
+				<!-- wp:navigation {"overlayMenu":"always","overlayBackgroundColor":"base","overlayTextColor":"contrast","layout":{"type":"flex","justifyContent":"right","flexWrap":"wrap"}} /-->
+				<!-- wp:pattern {"slug":"wp-bootstrap/dark-mode-toggle"} /-->
+			</div>
+			<!-- /wp:group -->
+		</div>
+		<!-- /wp:group -->
+	</div>
+	<!-- /wp:group -->
+</div>
+<!-- /wp:group -->

patterns/page-about.php

@@ -0,0 +1,92 @@
+<?php
+/**
+ * Title: About Page
+ * Slug: wp-bootstrap/page-about
+ * Categories: wp-bootstrap_page
+ * Description: A full about page layout with hero, story section, and team members.
+ *
+ * @package WPBootstrap
+ * @since 0.2.0
+ */
+?>
+<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|80","bottom":"var:preset|spacing|80"}}},"backgroundColor":"primary","textColor":"base","layout":{"type":"constrained"}} -->
+<div class="wp-block-group alignfull has-base-color has-primary-background-color has-text-color has-background" style="padding-top:var(--wp--preset--spacing--80);padding-bottom:var(--wp--preset--spacing--80)"><!-- wp:heading {"textAlign":"center","level":1,"fontSize":"display"} -->
+<h1 class="wp-block-heading has-text-align-center has-display-font-size"><?php esc_html_e( 'About Us', 'wp-bootstrap' ); ?></h1>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph {"align":"center","fontSize":"large"} -->
+<p class="has-text-align-center has-large-font-size"><?php esc_html_e( 'Learn more about who we are, what we do, and the people behind our mission.', 'wp-bootstrap' ); ?></p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:group -->
+
+<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|70","bottom":"var:preset|spacing|70"}}},"layout":{"type":"constrained"}} -->
+<div class="wp-block-group alignfull" style="padding-top:var(--wp--preset--spacing--70);padding-bottom:var(--wp--preset--spacing--70)"><!-- wp:columns {"align":"wide","style":{"spacing":{"blockGap":{"left":"var:preset|spacing|60"}}}} -->
+<div class="wp-block-columns alignwide"><!-- wp:column {"verticalAlignment":"center"} -->
+<div class="wp-block-column is-vertically-aligned-center"><!-- wp:heading {"fontSize":"xx-large"} -->
+<h2 class="wp-block-heading has-xx-large-font-size"><?php esc_html_e( 'Our Story', 'wp-bootstrap' ); ?></h2>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph -->
+<p><?php esc_html_e( 'Founded with a passion for innovation and excellence, our journey began with a simple idea: to create meaningful solutions that make a real difference. Over the years, we have grown from a small team into a dedicated group of professionals committed to delivering outstanding results.', 'wp-bootstrap' ); ?></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph {"textColor":"secondary"} -->
+<p class="has-secondary-color has-text-color"><?php esc_html_e( 'Today, we continue to push boundaries and challenge conventions. Our approach combines creative thinking with proven methodologies, ensuring that every project we undertake meets the highest standards of quality and craftsmanship.', 'wp-bootstrap' ); ?></p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:column -->
+
+<!-- wp:column {"verticalAlignment":"center"} -->
+<div class="wp-block-column is-vertically-aligned-center"><!-- wp:image {"sizeSlug":"large","style":{"border":{"radius":"0.5rem"}}} -->
+<figure class="wp-block-image size-large" style="border-radius:0.5rem"><img src="" alt="<?php esc_attr_e( 'About us image', 'wp-bootstrap' ); ?>"/></figure>
+<!-- /wp:image --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns --></div>
+<!-- /wp:group -->
+
+<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|70","bottom":"var:preset|spacing|70"}}},"backgroundColor":"light","layout":{"type":"constrained"}} -->
+<div class="wp-block-group alignfull has-light-background-color has-background" style="padding-top:var(--wp--preset--spacing--70);padding-bottom:var(--wp--preset--spacing--70)"><!-- wp:heading {"textAlign":"center","fontSize":"xx-large"} -->
+<h2 class="wp-block-heading has-text-align-center has-xx-large-font-size"><?php esc_html_e( 'Our Team', 'wp-bootstrap' ); ?></h2>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph {"align":"center","textColor":"secondary"} -->
+<p class="has-text-align-center has-secondary-color has-text-color"><?php esc_html_e( 'Meet the people who make it all happen.', 'wp-bootstrap' ); ?></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:columns {"align":"wide","style":{"spacing":{"blockGap":{"left":"var:preset|spacing|40"}}}} -->
+<div class="wp-block-columns alignwide"><!-- wp:column -->
+<div class="wp-block-column"><!-- wp:group {"className":"is-style-card","style":{"spacing":{"padding":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50","left":"var:preset|spacing|40","right":"var:preset|spacing|40"}}},"layout":{"type":"constrained"}} -->
+<div class="wp-block-group is-style-card" style="padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--40)"><!-- wp:heading {"textAlign":"center","level":3} -->
+<h3 class="wp-block-heading has-text-align-center"><?php esc_html_e( 'Jane Doe', 'wp-bootstrap' ); ?></h3>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph {"align":"center","textColor":"secondary"} -->
+<p class="has-text-align-center has-secondary-color has-text-color"><?php esc_html_e( 'Founder & CEO', 'wp-bootstrap' ); ?></p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:group --></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class="wp-block-column"><!-- wp:group {"className":"is-style-card","style":{"spacing":{"padding":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50","left":"var:preset|spacing|40","right":"var:preset|spacing|40"}}},"layout":{"type":"constrained"}} -->
+<div class="wp-block-group is-style-card" style="padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--40)"><!-- wp:heading {"textAlign":"center","level":3} -->
+<h3 class="wp-block-heading has-text-align-center"><?php esc_html_e( 'John Smith', 'wp-bootstrap' ); ?></h3>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph {"align":"center","textColor":"secondary"} -->
+<p class="has-text-align-center has-secondary-color has-text-color"><?php esc_html_e( 'Lead Developer', 'wp-bootstrap' ); ?></p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:group --></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class="wp-block-column"><!-- wp:group {"className":"is-style-card","style":{"spacing":{"padding":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50","left":"var:preset|spacing|40","right":"var:preset|spacing|40"}}},"layout":{"type":"constrained"}} -->
+<div class="wp-block-group is-style-card" style="padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--40)"><!-- wp:heading {"textAlign":"center","level":3} -->
+<h3 class="wp-block-heading has-text-align-center"><?php esc_html_e( 'Emily Johnson', 'wp-bootstrap' ); ?></h3>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph {"align":"center","textColor":"secondary"} -->
+<p class="has-text-align-center has-secondary-color has-text-color"><?php esc_html_e( 'Creative Director', 'wp-bootstrap' ); ?></p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:group --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns --></div>
+<!-- /wp:group -->

patterns/page-contact.php

@@ -0,0 +1,66 @@
+<?php
+/**
+ * Title: Contact Page
+ * Slug: wp-bootstrap/page-contact
+ * Categories: wp-bootstrap_page
+ * Description: A full contact page layout with hero, contact details, business hours, and spacer.
+ *
+ * @package WPBootstrap
+ * @since 0.2.0
+ */
+?>
+<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|80","bottom":"var:preset|spacing|80"}}},"backgroundColor":"primary","textColor":"base","layout":{"type":"constrained"}} -->
+<div class="wp-block-group alignfull has-base-color has-primary-background-color has-text-color has-background" style="padding-top:var(--wp--preset--spacing--80);padding-bottom:var(--wp--preset--spacing--80)"><!-- wp:heading {"textAlign":"center","level":1,"fontSize":"display"} -->
+<h1 class="wp-block-heading has-text-align-center has-display-font-size"><?php esc_html_e( 'Contact Us', 'wp-bootstrap' ); ?></h1>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph {"align":"center","fontSize":"large"} -->
+<p class="has-text-align-center has-large-font-size"><?php esc_html_e( 'We would love to hear from you. Reach out to us anytime.', 'wp-bootstrap' ); ?></p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:group -->
+
+<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|70","bottom":"var:preset|spacing|70"}}},"layout":{"type":"constrained"}} -->
+<div class="wp-block-group alignfull" style="padding-top:var(--wp--preset--spacing--70);padding-bottom:var(--wp--preset--spacing--70)"><!-- wp:columns {"align":"wide","style":{"spacing":{"blockGap":{"left":"var:preset|spacing|60"}}}} -->
+<div class="wp-block-columns alignwide"><!-- wp:column {"verticalAlignment":"top"} -->
+<div class="wp-block-column is-vertically-aligned-top"><!-- wp:heading {"fontSize":"xx-large"} -->
+<h2 class="wp-block-heading has-xx-large-font-size"><?php esc_html_e( 'Get in Touch', 'wp-bootstrap' ); ?></h2>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph -->
+<p><strong><?php esc_html_e( 'Address', 'wp-bootstrap' ); ?></strong><br><?php esc_html_e( '123 Main Street, Suite 100, Anytown, ST 12345', 'wp-bootstrap' ); ?></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p><strong><?php esc_html_e( 'Email', 'wp-bootstrap' ); ?></strong><br><?php esc_html_e( 'info@example.com', 'wp-bootstrap' ); ?></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p><strong><?php esc_html_e( 'Phone', 'wp-bootstrap' ); ?></strong><br><?php esc_html_e( '+1 (555) 123-4567', 'wp-bootstrap' ); ?></p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:column -->
+
+<!-- wp:column {"verticalAlignment":"top"} -->
+<div class="wp-block-column is-vertically-aligned-top"><!-- wp:heading {"fontSize":"xx-large"} -->
+<h2 class="wp-block-heading has-xx-large-font-size"><?php esc_html_e( 'Business Hours', 'wp-bootstrap' ); ?></h2>
+<!-- /wp:heading -->
+
+<!-- wp:list {"className":"is-style-list-unstyled","style":{"spacing":{"blockGap":"var:preset|spacing|20"}}} -->
+<ul class="is-style-list-unstyled"><!-- wp:list-item -->
+<li><strong><?php esc_html_e( 'Monday - Friday:', 'wp-bootstrap' ); ?></strong> <?php esc_html_e( '9:00 AM - 6:00 PM', 'wp-bootstrap' ); ?></li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li><strong><?php esc_html_e( 'Saturday:', 'wp-bootstrap' ); ?></strong> <?php esc_html_e( '10:00 AM - 4:00 PM', 'wp-bootstrap' ); ?></li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li><strong><?php esc_html_e( 'Sunday:', 'wp-bootstrap' ); ?></strong> <?php esc_html_e( 'Closed', 'wp-bootstrap' ); ?></li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns --></div>
+<!-- /wp:group -->
+
+<!-- wp:spacer {"height":"var:preset|spacing|70"} -->
+<div style="height:var(--wp--preset--spacing--70)" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->

patterns/page-services.php

@@ -0,0 +1,94 @@
+<?php
+/**
+ * Title: Services Page
+ * Slug: wp-bootstrap/page-services
+ * Categories: wp-bootstrap_page
+ * Description: A full services page layout with hero, service offerings, and call to action.
+ *
+ * @package WPBootstrap
+ * @since 0.2.0
+ */
+?>
+<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|80","bottom":"var:preset|spacing|80"}}},"backgroundColor":"dark","textColor":"base","layout":{"type":"constrained"}} -->
+<div class="wp-block-group alignfull has-base-color has-dark-background-color has-text-color has-background" style="padding-top:var(--wp--preset--spacing--80);padding-bottom:var(--wp--preset--spacing--80)"><!-- wp:heading {"textAlign":"center","level":1,"fontSize":"display"} -->
+<h1 class="wp-block-heading has-text-align-center has-display-font-size"><?php esc_html_e( 'Our Services', 'wp-bootstrap' ); ?></h1>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph {"align":"center","fontSize":"large"} -->
+<p class="has-text-align-center has-large-font-size"><?php esc_html_e( 'Professional solutions tailored to your needs.', 'wp-bootstrap' ); ?></p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:group -->
+
+<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|70","bottom":"var:preset|spacing|70"}}},"layout":{"type":"constrained"}} -->
+<div class="wp-block-group alignfull" style="padding-top:var(--wp--preset--spacing--70);padding-bottom:var(--wp--preset--spacing--70)"><!-- wp:heading {"textAlign":"center","fontSize":"xx-large"} -->
+<h2 class="wp-block-heading has-text-align-center has-xx-large-font-size"><?php esc_html_e( 'What We Offer', 'wp-bootstrap' ); ?></h2>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph {"align":"center","textColor":"secondary"} -->
+<p class="has-text-align-center has-secondary-color has-text-color"><?php esc_html_e( 'We provide a wide range of services to help your business grow and succeed.', 'wp-bootstrap' ); ?></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:columns {"align":"wide","style":{"spacing":{"blockGap":{"left":"var:preset|spacing|50"}}}} -->
+<div class="wp-block-columns alignwide"><!-- wp:column -->
+<div class="wp-block-column"><!-- wp:heading {"textAlign":"center","level":3,"fontSize":"display"} -->
+<h3 class="wp-block-heading has-text-align-center has-display-font-size"><?php esc_html_e( "\xF0\x9F\x8E\xA8", 'wp-bootstrap' ); ?></h3>
+<!-- /wp:heading -->
+
+<!-- wp:heading {"textAlign":"center","level":3} -->
+<h3 class="wp-block-heading has-text-align-center"><?php esc_html_e( 'Design', 'wp-bootstrap' ); ?></h3>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph {"align":"center","textColor":"secondary"} -->
+<p class="has-text-align-center has-secondary-color has-text-color"><?php esc_html_e( 'Beautiful, user-centered designs that capture your brand identity and engage your audience across all platforms and devices.', 'wp-bootstrap' ); ?></p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class="wp-block-column"><!-- wp:heading {"textAlign":"center","level":3,"fontSize":"display"} -->
+<h3 class="wp-block-heading has-text-align-center has-display-font-size"><?php esc_html_e( "\xE2\x9A\x99\xEF\xB8\x8F", 'wp-bootstrap' ); ?></h3>
+<!-- /wp:heading -->
+
+<!-- wp:heading {"textAlign":"center","level":3} -->
+<h3 class="wp-block-heading has-text-align-center"><?php esc_html_e( 'Development', 'wp-bootstrap' ); ?></h3>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph {"align":"center","textColor":"secondary"} -->
+<p class="has-text-align-center has-secondary-color has-text-color"><?php esc_html_e( 'Robust, scalable web applications built with modern technologies and best practices to ensure performance and reliability.', 'wp-bootstrap' ); ?></p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class="wp-block-column"><!-- wp:heading {"textAlign":"center","level":3,"fontSize":"display"} -->
+<h3 class="wp-block-heading has-text-align-center has-display-font-size"><?php esc_html_e( "\xF0\x9F\x93\x88", 'wp-bootstrap' ); ?></h3>
+<!-- /wp:heading -->
+
+<!-- wp:heading {"textAlign":"center","level":3} -->
+<h3 class="wp-block-heading has-text-align-center"><?php esc_html_e( 'Strategy', 'wp-bootstrap' ); ?></h3>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph {"align":"center","textColor":"secondary"} -->
+<p class="has-text-align-center has-secondary-color has-text-color"><?php esc_html_e( 'Data-driven strategies and consulting to help you achieve your business goals and stay ahead of the competition.', 'wp-bootstrap' ); ?></p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns --></div>
+<!-- /wp:group -->
+
+<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|70","bottom":"var:preset|spacing|70"}}},"backgroundColor":"primary","textColor":"base","layout":{"type":"constrained"}} -->
+<div class="wp-block-group alignfull has-base-color has-primary-background-color has-text-color has-background" style="padding-top:var(--wp--preset--spacing--70);padding-bottom:var(--wp--preset--spacing--70)"><!-- wp:heading {"textAlign":"center","fontSize":"xx-large"} -->
+<h2 class="wp-block-heading has-text-align-center has-xx-large-font-size"><?php esc_html_e( 'Get Started', 'wp-bootstrap' ); ?></h2>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph {"align":"center","fontSize":"medium"} -->
+<p class="has-text-align-center has-medium-font-size"><?php esc_html_e( 'Ready to take your project to the next level? Let us help you build something great.', 'wp-bootstrap' ); ?></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
+<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"base","textColor":"primary"} -->
+<div class="wp-block-button"><a class="wp-block-button__link has-primary-color has-base-background-color has-text-color has-background wp-element-button"><?php esc_html_e( 'Contact Us', 'wp-bootstrap' ); ?></a></div>
+<!-- /wp:button -->
+
+<!-- wp:button {"className":"is-style-outline","style":{"elements":{"link":{"color":{"text":"var:preset|color|base"}}}},"textColor":"base"} -->
+<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-base-color has-text-color has-link-color wp-element-button"><?php esc_html_e( 'View Portfolio', 'wp-bootstrap' ); ?></a></div>
+<!-- /wp:button --></div>
+<!-- /wp:buttons --></div>
+<!-- /wp:group -->

src/js/dark-mode.js

@@ -20,7 +20,9 @@
      */
     function getPreferredTheme() {
         var stored = localStorage.getItem(STORAGE_KEY);
-        if (stored) {
+        // Whitelist: only honour known-good values to prevent attribute injection
+        // from a tampered localStorage (e.g. XSS-written value by another script).
+        if (stored === 'dark' || stored === 'light') {
             return stored;
         }
         return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
@@ -61,6 +63,7 @@
                 var newTheme = currentTheme === 'dark' ? 'light' : 'dark';
                 localStorage.setItem(STORAGE_KEY, newTheme);
                 setTheme(newTheme);
+                announceTheme(newTheme);
             });
         });
     });
@@ -71,4 +74,23 @@
             setTheme(e.matches ? 'dark' : 'light');
         }
     });
+
+    /**
+     * Announce theme change to screen readers via a live region.
+     *
+     * @param {string} theme - 'dark' or 'light'
+     */
+    function announceTheme(theme) {
+        var msg = theme === 'dark' ? 'Dark mode enabled' : 'Light mode enabled';
+        var el = document.getElementById('wp-bootstrap-theme-status');
+        if (!el) {
+            el = document.createElement('div');
+            el.id = 'wp-bootstrap-theme-status';
+            el.setAttribute('role', 'status');
+            el.setAttribute('aria-live', 'polite');
+            el.className = 'visually-hidden';
+            document.body.appendChild(el);
+        }
+        el.textContent = msg;
+    }
 })();

src/scss/_custom.scss

@@ -25,6 +25,41 @@
     }
 }
 
+// Transparent header variant
+.header-transparent {
+    position: absolute;
+    width: 100%;
+    z-index: $zindex-fixed;
+
+    .navbar {
+        background: transparent !important;
+    }
+}
+
+// Force Bootstrap dark mode body colors past any WordPress global styles.
+// WordPress may output body { background-color: ...; color: ...; } via
+// global-styles that overrides Bootstrap's variable-based body styling.
+html[data-bs-theme="dark"] body {
+    background-color: var(--bs-body-bg) !important;
+    color: var(--bs-body-color) !important;
+}
+
+// Dark mode for all form elements — catches plugin-generated controls
+// that lack Bootstrap's .form-select / .form-control classes.
+[data-bs-theme="dark"] {
+    select,
+    input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
+    textarea {
+        background-color: var(--bs-body-bg);
+        color: var(--bs-body-color);
+        border-color: var(--bs-border-color);
+    }
+
+    .offcanvas {
+        --bs-offcanvas-bg: var(--bs-body-bg);
+    }
+}
+
 // Dark mode overrides for block styles with hardcoded colors
 [data-bs-theme="dark"] {
     .is-style-alert-info {
@@ -57,3 +92,46 @@
         background: var(--bs-body-bg);
     }
 }
+
+// Skip link (accessibility)
+.wp-bootstrap-skip-link {
+    position: absolute;
+    top: -100%;
+    left: 0;
+    z-index: $zindex-fixed + 10;
+    padding: 0.5rem 1rem;
+    background: var(--bs-primary);
+    color: #fff;
+    text-decoration: none;
+    font-weight: 600;
+
+    &:focus {
+        top: 0;
+    }
+}
+
+// Post featured image
+.post-thumbnail {
+    aspect-ratio: 16 / 9;
+    object-fit: cover;
+    width: 100%;
+}
+
+// Card thumbnail
+.card-thumbnail {
+    aspect-ratio: 3 / 2;
+    object-fit: cover;
+}
+
+// Sidebar heading
+.sidebar-heading {
+    letter-spacing: 1.6px;
+}
+
+// Hero overlay
+.hero-overlay {
+    background-position: center;
+    background-size: cover;
+    background-repeat: no-repeat;
+    opacity: 0.3;
+}

src/scss/_editor-overrides.scss

@@ -0,0 +1,29 @@
+// Editor-specific overrides
+// Adjustments for the block editor iframe to match frontend appearance
+
+.editor-styles-wrapper {
+    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    line-height: 1.5;
+
+    a {
+        text-decoration-thickness: 1px !important;
+        text-underline-offset: 0.1em;
+    }
+
+    // Alignment overrides matching Bootstrap container widths
+    .alignfull {
+        margin-left: 0;
+        margin-right: 0;
+    }
+
+    .alignwide {
+        max-width: 1140px;
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    // Block gap matching theme.json blockGap
+    > * + * {
+        margin-block-start: 1.5rem;
+    }
+}

src/scss/_variables.scss

@@ -44,3 +44,7 @@ $enable-dark-mode: true;
 
 // Enable reduced motion
 $enable-reduced-motion: true;
+
+// Bootstrap Icons font path (points to copied files in assets/fonts/)
+$bootstrap-icons-font-src: url("../fonts/bootstrap-icons.woff2") format("woff2"),
+                           url("../fonts/bootstrap-icons.woff") format("woff");

src/scss/editor-style.scss

@@ -1,23 +1,25 @@
 /*!
  * WP Bootstrap Theme - Editor Styles
+ * Imports full Bootstrap so WYSIWYG matches the frontend.
  */
 
-// Import Bootstrap functions and variables for consistency
+// 1. Import Bootstrap functions first (needed for variable manipulation)
 @import "bootstrap/scss/functions";
+
+// 2. Override Bootstrap variables BEFORE they're set
 @import "variables";
-@import "bootstrap/scss/variables";
-@import "bootstrap/scss/variables-dark";
-@import "bootstrap/scss/maps";
-@import "bootstrap/scss/mixins";
-@import "bootstrap/scss/root";
 
-// Editor-specific adjustments
-.editor-styles-wrapper {
-    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-    line-height: 1.5;
+// 3. Import all of Bootstrap
+@import "bootstrap/scss/bootstrap";
 
-    a {
-        text-decoration-thickness: 1px !important;
-        text-underline-offset: 0.1em;
-    }
-}
+// 4. WordPress block compatibility
+@import "wordpress";
+
+// 5. Bootstrap Icons
+@import "bootstrap-icons/font/bootstrap-icons";
+
+// 6. Custom styles (dark mode overrides, block styles, etc.)
+@import "custom";
+
+// 7. Editor-specific overrides
+@import "editor-overrides";

src/scss/rtl.scss

@@ -0,0 +1,11 @@
+/*!
+ * WP Bootstrap Theme - RTL Overrides
+ * Right-to-left language support
+ */
+
+// Blockquote accent border (LTR uses border-left, RTL needs border-right)
+.is-style-blockquote-accent {
+    border-left: none;
+    border-right: 4px solid var(--wp--preset--color--primary);
+    border-radius: 0.375rem 0 0 0.375rem;
+}

src/scss/style.scss

@@ -15,5 +15,8 @@
 // 4. WordPress block compatibility
 @import "wordpress";
 
-// 5. Custom styles
+// 5. Bootstrap Icons
+@import "bootstrap-icons/font/bootstrap-icons";
+
+// 6. Custom styles
 @import "custom";

style.css

@@ -7,7 +7,7 @@ Description: A modern WordPress Block Theme built from scratch with Bootstrap 5.
 Requires at least: 6.7
 Tested up to: 6.7
 Requires PHP: 8.3
-Version: 0.1.0
+Version: 1.0.10
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain: wp-bootstrap

styles/05-ember.json

@@ -0,0 +1,86 @@
+{
+    "$schema": "https://schemas.wp.org/wp/6.7/theme.json",
+    "version": 3,
+    "title": "Ember",
+    "settings": {
+        "color": {
+            "palette": [
+                {
+                    "color": "#1c1210",
+                    "name": "Base",
+                    "slug": "base"
+                },
+                {
+                    "color": "#f0e6e0",
+                    "name": "Contrast",
+                    "slug": "contrast"
+                },
+                {
+                    "color": "#e85d26",
+                    "name": "Primary",
+                    "slug": "primary"
+                },
+                {
+                    "color": "#a8a09c",
+                    "name": "Secondary",
+                    "slug": "secondary"
+                },
+                {
+                    "color": "#4ade80",
+                    "name": "Success",
+                    "slug": "success"
+                },
+                {
+                    "color": "#f87171",
+                    "name": "Danger",
+                    "slug": "danger"
+                },
+                {
+                    "color": "#fbbf24",
+                    "name": "Warning",
+                    "slug": "warning"
+                },
+                {
+                    "color": "#fb923c",
+                    "name": "Info",
+                    "slug": "info"
+                },
+                {
+                    "color": "#2a1f1b",
+                    "name": "Light",
+                    "slug": "light"
+                },
+                {
+                    "color": "#3d2117",
+                    "name": "Dark",
+                    "slug": "dark"
+                }
+            ]
+        }
+    },
+    "styles": {
+        "elements": {
+            "button": {
+                "color": {
+                    "background": "var:preset|color|primary",
+                    "text": "var:preset|color|base"
+                },
+                ":hover": {
+                    "color": {
+                        "background": "#c44b1b"
+                    }
+                }
+            },
+            "link": {
+                "color": {
+                    "text": "var:preset|color|primary"
+                },
+                ":hover": {
+                    "color": {
+                        "text": "#c44b1b"
+                    }
+                }
+            }
+        }
+    }
+}

styles/06-arctic.json

@@ -0,0 +1,86 @@
+{
+    "$schema": "https://schemas.wp.org/wp/6.7/theme.json",
+    "version": 3,
+    "title": "Arctic",
+    "settings": {
+        "color": {
+            "palette": [
+                {
+                    "color": "#0d1b2a",
+                    "name": "Base",
+                    "slug": "base"
+                },
+                {
+                    "color": "#e0e8f0",
+                    "name": "Contrast",
+                    "slug": "contrast"
+                },
+                {
+                    "color": "#38bdf8",
+                    "name": "Primary",
+                    "slug": "primary"
+                },
+                {
+                    "color": "#94a3b8",
+                    "name": "Secondary",
+                    "slug": "secondary"
+                },
+                {
+                    "color": "#34d399",
+                    "name": "Success",
+                    "slug": "success"
+                },
+                {
+                    "color": "#fb7185",
+                    "name": "Danger",
+                    "slug": "danger"
+                },
+                {
+                    "color": "#facc15",
+                    "name": "Warning",
+                    "slug": "warning"
+                },
+                {
+                    "color": "#22d3ee",
+                    "name": "Info",
+                    "slug": "info"
+                },
+                {
+                    "color": "#1b2838",
+                    "name": "Light",
+                    "slug": "light"
+                },
+                {
+                    "color": "#0f4c75",
+                    "name": "Dark",
+                    "slug": "dark"
+                }
+            ]
+        }
+    },
+    "styles": {
+        "elements": {
+            "button": {
+                "color": {
+                    "background": "var:preset|color|primary",
+                    "text": "var:preset|color|base"
+                },
+                ":hover": {
+                    "color": {
+                        "background": "#0ea5e9"
+                    }
+                }
+            },
+            "link": {
+                "color": {
+                    "text": "var:preset|color|primary"
+                },
+                ":hover": {
+                    "color": {
+                        "text": "#0ea5e9"
+                    }
+                }
+            }
+        }
+    }
+}

styles/07-amethyst.json

@@ -0,0 +1,86 @@
+{
+    "$schema": "https://schemas.wp.org/wp/6.7/theme.json",
+    "version": 3,
+    "title": "Amethyst",
+    "settings": {
+        "color": {
+            "palette": [
+                {
+                    "color": "#1a1028",
+                    "name": "Base",
+                    "slug": "base"
+                },
+                {
+                    "color": "#e8e0f0",
+                    "name": "Contrast",
+                    "slug": "contrast"
+                },
+                {
+                    "color": "#a78bfa",
+                    "name": "Primary",
+                    "slug": "primary"
+                },
+                {
+                    "color": "#9ca3af",
+                    "name": "Secondary",
+                    "slug": "secondary"
+                },
+                {
+                    "color": "#6ee7b7",
+                    "name": "Success",
+                    "slug": "success"
+                },
+                {
+                    "color": "#fca5a5",
+                    "name": "Danger",
+                    "slug": "danger"
+                },
+                {
+                    "color": "#fde68a",
+                    "name": "Warning",
+                    "slug": "warning"
+                },
+                {
+                    "color": "#c084fc",
+                    "name": "Info",
+                    "slug": "info"
+                },
+                {
+                    "color": "#221538",
+                    "name": "Light",
+                    "slug": "light"
+                },
+                {
+                    "color": "#3b1f6e",
+                    "name": "Dark",
+                    "slug": "dark"
+                }
+            ]
+        }
+    },
+    "styles": {
+        "elements": {
+            "button": {
+                "color": {
+                    "background": "var:preset|color|primary",
+                    "text": "var:preset|color|base"
+                },
+                ":hover": {
+                    "color": {
+                        "background": "#8b5cf6"
+                    }
+                }
+            },
+            "link": {
+                "color": {
+                    "text": "var:preset|color|primary"
+                },
+                ":hover": {
+                    "color": {
+                        "text": "#8b5cf6"
+                    }
+                }
+            }
+        }
+    }
+}

styles/08-rose.json

@@ -0,0 +1,79 @@
+{
+    "$schema": "https://schemas.wp.org/wp/6.7/theme.json",
+    "version": 3,
+    "title": "Rose",
+    "settings": {
+        "color": {
+            "palette": [
+                {
+                    "color": "#FFFBFC",
+                    "name": "Base",
+                    "slug": "base"
+                },
+                {
+                    "color": "#2e1a21",
+                    "name": "Contrast",
+                    "slug": "contrast"
+                },
+                {
+                    "color": "#be185d",
+                    "name": "Primary",
+                    "slug": "primary"
+                },
+                {
+                    "color": "#78716c",
+                    "name": "Secondary",
+                    "slug": "secondary"
+                },
+                {
+                    "color": "#16a34a",
+                    "name": "Success",
+                    "slug": "success"
+                },
+                {
+                    "color": "#dc2626",
+                    "name": "Danger",
+                    "slug": "danger"
+                },
+                {
+                    "color": "#eab308",
+                    "name": "Warning",
+                    "slug": "warning"
+                },
+                {
+                    "color": "#ec4899",
+                    "name": "Info",
+                    "slug": "info"
+                },
+                {
+                    "color": "#fdf2f8",
+                    "name": "Light",
+                    "slug": "light"
+                },
+                {
+                    "color": "#4a1030",
+                    "name": "Dark",
+                    "slug": "dark"
+                }
+            ]
+        }
+    },
+    "styles": {
+        "elements": {
+            "button": {
+                ":hover": {
+                    "color": {
+                        "background": "#9d174d"
+                    }
+                }
+            },
+            "link": {
+                ":hover": {
+                    "color": {
+                        "text": "#9d174d"
+                    }
+                }
+            }
+        }
+    }
+}

styles/09-sand.json

@@ -0,0 +1,79 @@
+{
+    "$schema": "https://schemas.wp.org/wp/6.7/theme.json",
+    "version": 3,
+    "title": "Sand",
+    "settings": {
+        "color": {
+            "palette": [
+                {
+                    "color": "#FEFCF8",
+                    "name": "Base",
+                    "slug": "base"
+                },
+                {
+                    "color": "#292017",
+                    "name": "Contrast",
+                    "slug": "contrast"
+                },
+                {
+                    "color": "#b45309",
+                    "name": "Primary",
+                    "slug": "primary"
+                },
+                {
+                    "color": "#78716c",
+                    "name": "Secondary",
+                    "slug": "secondary"
+                },
+                {
+                    "color": "#15803d",
+                    "name": "Success",
+                    "slug": "success"
+                },
+                {
+                    "color": "#b91c1c",
+                    "name": "Danger",
+                    "slug": "danger"
+                },
+                {
+                    "color": "#d97706",
+                    "name": "Warning",
+                    "slug": "warning"
+                },
+                {
+                    "color": "#d4956b",
+                    "name": "Info",
+                    "slug": "info"
+                },
+                {
+                    "color": "#f5f0e8",
+                    "name": "Light",
+                    "slug": "light"
+                },
+                {
+                    "color": "#3d2c14",
+                    "name": "Dark",
+                    "slug": "dark"
+                }
+            ]
+        }
+    },
+    "styles": {
+        "elements": {
+            "button": {
+                ":hover": {
+                    "color": {
+                        "background": "#92400e"
+                    }
+                }
+            },
+            "link": {
+                ":hover": {
+                    "color": {
+                        "text": "#92400e"
+                    }
+                }
+            }
+        }
+    }
+}

styles/10-lavender.json

@@ -0,0 +1,79 @@
+{
+    "$schema": "https://schemas.wp.org/wp/6.7/theme.json",
+    "version": 3,
+    "title": "Lavender",
+    "settings": {
+        "color": {
+            "palette": [
+                {
+                    "color": "#FCFBFF",
+                    "name": "Base",
+                    "slug": "base"
+                },
+                {
+                    "color": "#1e1b2e",
+                    "name": "Contrast",
+                    "slug": "contrast"
+                },
+                {
+                    "color": "#7c3aed",
+                    "name": "Primary",
+                    "slug": "primary"
+                },
+                {
+                    "color": "#71717a",
+                    "name": "Secondary",
+                    "slug": "secondary"
+                },
+                {
+                    "color": "#059669",
+                    "name": "Success",
+                    "slug": "success"
+                },
+                {
+                    "color": "#dc2626",
+                    "name": "Danger",
+                    "slug": "danger"
+                },
+                {
+                    "color": "#eab308",
+                    "name": "Warning",
+                    "slug": "warning"
+                },
+                {
+                    "color": "#8b5cf6",
+                    "name": "Info",
+                    "slug": "info"
+                },
+                {
+                    "color": "#f3f0ff",
+                    "name": "Light",
+                    "slug": "light"
+                },
+                {
+                    "color": "#3b1f8e",
+                    "name": "Dark",
+                    "slug": "dark"
+                }
+            ]
+        }
+    },
+    "styles": {
+        "elements": {
+            "button": {
+                ":hover": {
+                    "color": {
+                        "background": "#6d28d9"
+                    }
+                }
+            },
+            "link": {
+                ":hover": {
+                    "color": {
+                        "text": "#6d28d9"
+                    }
+                }
+            }
+        }
+    }
+}

styles/11-mint.json

@@ -0,0 +1,79 @@
+{
+    "$schema": "https://schemas.wp.org/wp/6.7/theme.json",
+    "version": 3,
+    "title": "Mint",
+    "settings": {
+        "color": {
+            "palette": [
+                {
+                    "color": "#F8FFFE",
+                    "name": "Base",
+                    "slug": "base"
+                },
+                {
+                    "color": "#14291f",
+                    "name": "Contrast",
+                    "slug": "contrast"
+                },
+                {
+                    "color": "#0d9488",
+                    "name": "Primary",
+                    "slug": "primary"
+                },
+                {
+                    "color": "#6b7280",
+                    "name": "Secondary",
+                    "slug": "secondary"
+                },
+                {
+                    "color": "#16a34a",
+                    "name": "Success",
+                    "slug": "success"
+                },
+                {
+                    "color": "#dc2626",
+                    "name": "Danger",
+                    "slug": "danger"
+                },
+                {
+                    "color": "#ca8a04",
+                    "name": "Warning",
+                    "slug": "warning"
+                },
+                {
+                    "color": "#2dd4bf",
+                    "name": "Info",
+                    "slug": "info"
+                },
+                {
+                    "color": "#ecfdf5",
+                    "name": "Light",
+                    "slug": "light"
+                },
+                {
+                    "color": "#134e4a",
+                    "name": "Dark",
+                    "slug": "dark"
+                }
+            ]
+        }
+    },
+    "styles": {
+        "elements": {
+            "button": {
+                ":hover": {
+                    "color": {
+                        "background": "#0f766e"
+                    }
+                }
+            },
+            "link": {
+                ":hover": {
+                    "color": {
+                        "text": "#0f766e"
+                    }
+                }
+            }
+        }
+    }
+}

styles/12-slate.json

@@ -0,0 +1,86 @@
+{
+    "$schema": "https://schemas.wp.org/wp/6.7/theme.json",
+    "version": 3,
+    "title": "Slate",
+    "settings": {
+        "color": {
+            "palette": [
+                {
+                    "color": "#0f172a",
+                    "name": "Base",
+                    "slug": "base"
+                },
+                {
+                    "color": "#e2e8f0",
+                    "name": "Contrast",
+                    "slug": "contrast"
+                },
+                {
+                    "color": "#3b82f6",
+                    "name": "Primary",
+                    "slug": "primary"
+                },
+                {
+                    "color": "#94a3b8",
+                    "name": "Secondary",
+                    "slug": "secondary"
+                },
+                {
+                    "color": "#22c55e",
+                    "name": "Success",
+                    "slug": "success"
+                },
+                {
+                    "color": "#ef4444",
+                    "name": "Danger",
+                    "slug": "danger"
+                },
+                {
+                    "color": "#eab308",
+                    "name": "Warning",
+                    "slug": "warning"
+                },
+                {
+                    "color": "#06b6d4",
+                    "name": "Info",
+                    "slug": "info"
+                },
+                {
+                    "color": "#1e293b",
+                    "name": "Light",
+                    "slug": "light"
+                },
+                {
+                    "color": "#334155",
+                    "name": "Dark",
+                    "slug": "dark"
+                }
+            ]
+        }
+    },
+    "styles": {
+        "elements": {
+            "button": {
+                "color": {
+                    "background": "var:preset|color|primary",
+                    "text": "var:preset|color|base"
+                },
+                ":hover": {
+                    "color": {
+                        "background": "#2563eb"
+                    }
+                }
+            },
+            "link": {
+                "color": {
+                    "text": "var:preset|color|primary"
+                },
+                ":hover": {
+                    "color": {
+                        "text": "#2563eb"
+                    }
+                }
+            }
+        }
+    }
+}

styles/13-mocha.json

@@ -0,0 +1,86 @@
+{
+    "$schema": "https://schemas.wp.org/wp/6.7/theme.json",
+    "version": 3,
+    "title": "Mocha",
+    "settings": {
+        "color": {
+            "palette": [
+                {
+                    "color": "#1c1412",
+                    "name": "Base",
+                    "slug": "base"
+                },
+                {
+                    "color": "#e7ddd4",
+                    "name": "Contrast",
+                    "slug": "contrast"
+                },
+                {
+                    "color": "#c49a6c",
+                    "name": "Primary",
+                    "slug": "primary"
+                },
+                {
+                    "color": "#a8998a",
+                    "name": "Secondary",
+                    "slug": "secondary"
+                },
+                {
+                    "color": "#6ec98f",
+                    "name": "Success",
+                    "slug": "success"
+                },
+                {
+                    "color": "#e87e7e",
+                    "name": "Danger",
+                    "slug": "danger"
+                },
+                {
+                    "color": "#e5c07b",
+                    "name": "Warning",
+                    "slug": "warning"
+                },
+                {
+                    "color": "#d19a66",
+                    "name": "Info",
+                    "slug": "info"
+                },
+                {
+                    "color": "#2a201a",
+                    "name": "Light",
+                    "slug": "light"
+                },
+                {
+                    "color": "#45342a",
+                    "name": "Dark",
+                    "slug": "dark"
+                }
+            ]
+        }
+    },
+    "styles": {
+        "elements": {
+            "button": {
+                "color": {
+                    "background": "var:preset|color|primary",
+                    "text": "var:preset|color|base"
+                },
+                ":hover": {
+                    "color": {
+                        "background": "#a8804f"
+                    }
+                }
+            },
+            "link": {
+                "color": {
+                    "text": "var:preset|color|primary"
+                },
+                ":hover": {
+                    "color": {
+                        "text": "#a8804f"
+                    }
+                }
+            }
+        }
+    }
+}

styles/14-nebula.json

@@ -0,0 +1,86 @@
+{
+    "$schema": "https://schemas.wp.org/wp/6.7/theme.json",
+    "version": 3,
+    "title": "Nebula",
+    "settings": {
+        "color": {
+            "palette": [
+                {
+                    "color": "#0a1628",
+                    "name": "Base",
+                    "slug": "base"
+                },
+                {
+                    "color": "#d4e4f0",
+                    "name": "Contrast",
+                    "slug": "contrast"
+                },
+                {
+                    "color": "#2dd4bf",
+                    "name": "Primary",
+                    "slug": "primary"
+                },
+                {
+                    "color": "#7e9bb0",
+                    "name": "Secondary",
+                    "slug": "secondary"
+                },
+                {
+                    "color": "#4ade80",
+                    "name": "Success",
+                    "slug": "success"
+                },
+                {
+                    "color": "#f472b6",
+                    "name": "Danger",
+                    "slug": "danger"
+                },
+                {
+                    "color": "#fbbf24",
+                    "name": "Warning",
+                    "slug": "warning"
+                },
+                {
+                    "color": "#67e8f9",
+                    "name": "Info",
+                    "slug": "info"
+                },
+                {
+                    "color": "#112240",
+                    "name": "Light",
+                    "slug": "light"
+                },
+                {
+                    "color": "#1a365d",
+                    "name": "Dark",
+                    "slug": "dark"
+                }
+            ]
+        }
+    },
+    "styles": {
+        "elements": {
+            "button": {
+                "color": {
+                    "background": "var:preset|color|primary",
+                    "text": "var:preset|color|base"
+                },
+                ":hover": {
+                    "color": {
+                        "background": "#14b8a6"
+                    }
+                }
+            },
+            "link": {
+                "color": {
+                    "text": "var:preset|color|primary"
+                },
+                ":hover": {
+                    "color": {
+                        "text": "#14b8a6"
+                    }
+                }
+            }
+        }
+    }
+}

styles/15-obsidian.json

@@ -0,0 +1,86 @@
+{
+    "$schema": "https://schemas.wp.org/wp/6.7/theme.json",
+    "version": 3,
+    "title": "Obsidian",
+    "settings": {
+        "color": {
+            "palette": [
+                {
+                    "color": "#121212",
+                    "name": "Base",
+                    "slug": "base"
+                },
+                {
+                    "color": "#e0e0e0",
+                    "name": "Contrast",
+                    "slug": "contrast"
+                },
+                {
+                    "color": "#ef4444",
+                    "name": "Primary",
+                    "slug": "primary"
+                },
+                {
+                    "color": "#a3a3a3",
+                    "name": "Secondary",
+                    "slug": "secondary"
+                },
+                {
+                    "color": "#4ade80",
+                    "name": "Success",
+                    "slug": "success"
+                },
+                {
+                    "color": "#fb7185",
+                    "name": "Danger",
+                    "slug": "danger"
+                },
+                {
+                    "color": "#fbbf24",
+                    "name": "Warning",
+                    "slug": "warning"
+                },
+                {
+                    "color": "#f97316",
+                    "name": "Info",
+                    "slug": "info"
+                },
+                {
+                    "color": "#1a1a1a",
+                    "name": "Light",
+                    "slug": "light"
+                },
+                {
+                    "color": "#2a2a2a",
+                    "name": "Dark",
+                    "slug": "dark"
+                }
+            ]
+        }
+    },
+    "styles": {
+        "elements": {
+            "button": {
+                "color": {
+                    "background": "var:preset|color|primary",
+                    "text": "var:preset|color|base"
+                },
+                ":hover": {
+                    "color": {
+                        "background": "#dc2626"
+                    }
+                }
+            },
+            "link": {
+                "color": {
+                    "text": "var:preset|color|primary"
+                },
+                ":hover": {
+                    "color": {
+                        "text": "#dc2626"
+                    }
+                }
+            }
+        }
+    }
+}

templates/page-full-width.html

@@ -0,0 +1,9 @@
+<!-- wp:template-part {"slug":"header"} /-->
+
+<!-- wp:group {"tagName":"main","layout":{"type":"default"}} -->
+<main class="wp-block-group">
+<!-- wp:post-content {"align":"full","layout":{"type":"default"}} /-->
+</main>
+<!-- /wp:group -->
+
+<!-- wp:template-part {"slug":"footer"} /-->

templates/page-hero.html

@@ -0,0 +1,14 @@
+<!-- wp:template-part {"slug":"header"} /-->
+
+<!-- wp:group {"tagName":"main","layout":{"type":"default"}} -->
+<main class="wp-block-group">
+<!-- wp:pattern {"slug":"wp-bootstrap/hero-cover"} /-->
+<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group">
+<!-- wp:post-content {"layout":{"type":"constrained"}} /-->
+</div>
+<!-- /wp:group -->
+</main>
+<!-- /wp:group -->
+
+<!-- wp:template-part {"slug":"footer"} /-->

templates/page-landing.html

@@ -0,0 +1,5 @@
+<!-- wp:group {"tagName":"main","layout":{"type":"default"}} -->
+<main class="wp-block-group">
+<!-- wp:post-content {"align":"full","layout":{"type":"default"}} /-->
+</main>
+<!-- /wp:group -->

templates/page-sidebar.html

@@ -0,0 +1,25 @@
+<!-- wp:template-part {"slug":"header"} /-->
+
+<!-- wp:group {"tagName":"main","style":{"spacing":{"margin":{"top":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} -->
+<main class="wp-block-group" style="margin-top:var(--wp--preset--spacing--60)">
+    <!-- wp:columns {"align":"wide","style":{"spacing":{"blockGap":{"left":"var:preset|spacing|60"}}}} -->
+    <div class="wp-block-columns alignwide">
+        <!-- wp:column {"width":"66.66%"} -->
+        <div class="wp-block-column" style="flex-basis:66.66%">
+            <!-- wp:post-featured-image {"style":{"spacing":{"margin":{"bottom":"var:preset|spacing|60"}}}} /-->
+            <!-- wp:post-title {"level":1} /-->
+            <!-- wp:post-content {"align":"full","layout":{"type":"constrained"}} /-->
+        </div>
+        <!-- /wp:column -->
+
+        <!-- wp:column {"width":"33.33%"} -->
+        <div class="wp-block-column" style="flex-basis:33.33%">
+            <!-- wp:template-part {"slug":"sidebar"} /-->
+        </div>
+        <!-- /wp:column -->
+    </div>
+    <!-- /wp:columns -->
+</main>
+<!-- /wp:group -->
+
+<!-- wp:template-part {"slug":"footer"} /-->

theme.json

@@ -215,13 +215,62 @@
                 }
             ]
         },
+        "shadow": {
+            "defaultPresets": false,
+            "presets": [
+                {
+                    "name": "Small",
+                    "slug": "sm",
+                    "shadow": "0 0.125rem 0.25rem rgba(0, 0, 0, 0.075)"
+                },
+                {
+                    "name": "Regular",
+                    "slug": "md",
+                    "shadow": "0 0.5rem 1rem rgba(0, 0, 0, 0.15)"
+                },
+                {
+                    "name": "Large",
+                    "slug": "lg",
+                    "shadow": "0 1rem 3rem rgba(0, 0, 0, 0.175)"
+                }
+            ]
+        },
+        "dimensions": {
+            "aspectRatios": [
+                {
+                    "name": "16:9",
+                    "slug": "16-9",
+                    "ratio": "16/9"
+                },
+                {
+                    "name": "4:3",
+                    "slug": "4-3",
+                    "ratio": "4/3"
+                },
+                {
+                    "name": "1:1",
+                    "slug": "1-1",
+                    "ratio": "1/1"
+                },
+                {
+                    "name": "3:4",
+                    "slug": "3-4",
+                    "ratio": "3/4"
+                }
+            ]
+        },
+        "custom": {
+            "layout": {
+                "contentSize": "720px",
+                "wideSize": "1140px"
+            },
+            "spacing": {
+                "baseline": "1.5rem"
+            }
+        },
         "useRootPaddingAwareAlignments": true
     },
     "styles": {
-        "color": {
-            "background": "var:preset|color|base",
-            "text": "var:preset|color|contrast"
-        },
         "spacing": {
             "blockGap": "1.5rem",
             "padding": {
@@ -450,6 +499,26 @@
             "name": "home-sidebar",
             "postTypes": ["page"],
             "title": "Blog with Sidebar"
+        },
+        {
+            "name": "page-landing",
+            "postTypes": ["page"],
+            "title": "Landing Page (No Header/Footer)"
+        },
+        {
+            "name": "page-full-width",
+            "postTypes": ["page"],
+            "title": "Full Width"
+        },
+        {
+            "name": "page-hero",
+            "postTypes": ["page"],
+            "title": "Page with Hero"
+        },
+        {
+            "name": "page-sidebar",
+            "postTypes": ["page", "post"],
+            "title": "Page with Sidebar"
         }
     ],
     "templateParts": [
@@ -458,11 +527,31 @@
             "name": "header",
             "title": "Header"
         },
+        {
+            "area": "header",
+            "name": "header-centered",
+            "title": "Header - Centered"
+        },
+        {
+            "area": "header",
+            "name": "header-transparent",
+            "title": "Header - Transparent"
+        },
         {
             "area": "footer",
             "name": "footer",
             "title": "Footer"
         },
+        {
+            "area": "footer",
+            "name": "footer-minimal",
+            "title": "Footer - Minimal"
+        },
+        {
+            "area": "footer",
+            "name": "footer-columns",
+            "title": "Footer - Multi-Column"
+        },
         {
             "area": "uncategorized",
             "name": "sidebar",

views/base.html.twig

@@ -0,0 +1,28 @@
+<!doctype html>
+<html {{ language_attributes() }}>
+<head>
+    <meta charset="{{ charset }}">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    {{ wp_head() }}
+</head>
+<body {{ body_class() }}>
+    {{ wp_body_open() }}
+
+    <a class="wp-bootstrap-skip-link" href="#main-content">{{ __('Skip to main content') }}</a>
+
+    {% block header %}
+        {% include 'partials/header.html.twig' %}
+    {% endblock %}
+
+    <main id="main-content" class="{% block main_class %}py-4{% endblock %}">
+        {% block content %}{% endblock %}
+    </main>
+
+    {% block footer %}
+        {# block_template_part('footer') #}
+        {% include 'partials/footer-columns.html.twig' %}
+    {% endblock %}
+
+    {{ wp_footer() }}
+</body>
+</html>

views/components/card-post-grid.html.twig

@@ -0,0 +1,17 @@
+<article class="card h-100">
+    {% if post.thumbnail %}
+        <a href="{{ post.url }}">
+            <img src="{{ post.thumbnail }}" class="card-img-top card-thumbnail"
+                 alt="{{ post.title|e('html_attr') }}"
+                 loading="lazy">
+        </a>
+    {% endif %}
+    <div class="card-body">
+        <h3 class="card-title h6">
+            <a href="{{ post.url }}" class="text-decoration-none text-body">{{ post.title }}</a>
+        </h3>
+        <p class="card-text text-body-secondary small">
+            <time datetime="{{ post.date_iso }}">{{ post.date }}</time>
+        </p>
+    </div>
+</article>

views/components/card-post.html.twig

@@ -0,0 +1,21 @@
+<article class="card mb-4 border-0 border-bottom rounded-0 pb-4">
+    {% if post.thumbnail %}
+        <a href="{{ post.url }}">
+            <img src="{{ post.thumbnail }}" class="card-img-top rounded" alt="{{ post.title|e('html_attr') }}" loading="lazy">
+        </a>
+    {% endif %}
+    <div class="card-body px-0">
+        <h2 class="card-title h4">
+            <a href="{{ post.url }}" class="text-decoration-none text-body">{{ post.title }}</a>
+        </h2>
+        <div class="text-body-secondary small mb-2">
+            <time datetime="{{ post.date_iso }}">{{ post.date }}</time>
+            <span class="mx-1">&middot;</span>
+            <a href="{{ post.author.url }}" class="text-body-secondary text-decoration-none">{{ post.author.name }}</a>
+        </div>
+        <p class="card-text">{{ post.excerpt|raw }}</p>
+        <a href="{{ post.url }}" class="btn btn-outline-primary btn-sm">
+            {{ post.read_more }}
+        </a>
+    </div>
+</article>

views/components/post-loop.html.twig

@@ -0,0 +1,11 @@
+{% if posts|length > 0 %}
+    {% for post in posts %}
+        {% include 'components/card-post.html.twig' with {'post': post} only %}
+    {% endfor %}
+
+    {% include 'partials/pagination.html.twig' %}
+{% else %}
+    <div class="alert alert-secondary" role="alert">
+        {{ __('No posts were found.') }}
+    </div>
+{% endif %}

views/pages/404.html.twig

@@ -0,0 +1,16 @@
+{% extends 'base.html.twig' %}
+
+{% block content %}
+<div class="container text-center py-5">
+    <h1 class="display-1 fw-bold text-body-secondary">404</h1>
+    <h2 class="mb-3">{{ __('Page not found') }}</h2>
+    <p class="lead text-body-secondary mb-4">
+        {{ __('The page you are looking for does not exist, or it has been moved. Please try searching using the form below.') }}
+    </p>
+    <div class="row justify-content-center">
+        <div class="col-md-6">
+            {% include 'partials/search-form.html.twig' %}
+        </div>
+    </div>
+</div>
+{% endblock %}

views/pages/archive.html.twig

@@ -0,0 +1,12 @@
+{% extends 'base.html.twig' %}
+
+{% block content %}
+<div class="container">
+    <h1 class="mb-2">{{ archive.title|raw }}</h1>
+    {% if archive.description %}
+        <div class="lead text-body-secondary mb-4">{{ archive.description|raw }}</div>
+    {% endif %}
+
+    {% include 'components/post-loop.html.twig' %}
+</div>
+{% endblock %}

views/pages/full-width.html.twig

@@ -0,0 +1,18 @@
+{% extends 'base.html.twig' %}
+
+{% block content %}
+<div class="container-fluid px-0">
+    <article>
+        {% if post.thumbnail %}
+            <img src="{{ post.thumbnail }}" class="w-100 mb-4" alt="{{ post.title|e('html_attr') }}">
+        {% endif %}
+        <div class="container">
+            <h1 class="mb-4">{{ post.title }}</h1>
+
+            <div class="post-content">
+                {{ post.content|raw }}
+            </div>
+        </div>
+    </article>
+</div>
+{% endblock %}

views/pages/hero.html.twig

@@ -0,0 +1,21 @@
+{% extends 'base.html.twig' %}
+
+{% block main_class %}{% endblock %}
+
+{% block content %}
+<section class="bg-primary text-white py-5 mb-5{% if post.thumbnail %} position-relative overflow-hidden{% endif %}">
+    {% if post.thumbnail %}
+        <div class="hero-overlay position-absolute top-0 start-0 w-100 h-100" style="background-image: url('{{ post.thumbnail|e('html_attr') }}');"></div>
+    {% endif %}
+    <div class="container position-relative py-5 text-center">
+        <h1 class="display-4 fw-bold">{{ post.title }}</h1>
+    </div>
+</section>
+<div class="container">
+    <article>
+        <div class="post-content">
+            {{ post.content|raw }}
+        </div>
+    </article>
+</div>
+{% endblock %}

views/pages/index.html.twig

@@ -0,0 +1,20 @@
+{% extends 'base.html.twig' %}
+
+{% block content %}
+<div class="container">
+    <h1 class="mb-4">{{ __('Blog') }}</h1>
+
+    {% if layout == 'sidebar' %}
+        <div class="row">
+            <div class="col-lg-8">
+                {% include 'components/post-loop.html.twig' %}
+            </div>
+            <div class="col-lg-4">
+                {% include 'partials/sidebar.html.twig' %}
+            </div>
+        </div>
+    {% else %}
+        {% include 'components/post-loop.html.twig' %}
+    {% endif %}
+</div>
+{% endblock %}

views/pages/landing.html.twig

@@ -0,0 +1,18 @@
+{% extends 'base.html.twig' %}
+
+{% block header %}{% endblock %}
+{% block footer %}{% endblock %}
+
+{% block main_class %}{% endblock %}
+
+{% block content %}
+<div class="container py-5">
+    <article>
+        <h1>{{ post.title }}</h1>
+
+        <div class="post-content">
+            {{ post.content|raw }}
+        </div>
+    </article>
+</div>
+{% endblock %}

views/pages/page-sidebar.html.twig

@@ -0,0 +1,24 @@
+{% extends 'base.html.twig' %}
+
+{% block content %}
+<div class="container">
+    <div class="row">
+        <div class="col-lg-8">
+            <article>
+                <h1 class="mb-4">{{ post.title }}</h1>
+                {% if post.thumbnail %}
+                    <img src="{{ post.thumbnail }}" class="img-fluid rounded mb-4"
+                         alt="{{ post.title|e('html_attr') }}">
+                {% endif %}
+
+                <div class="post-content">
+                    {{ post.content|raw }}
+                </div>
+            </article>
+        </div>
+        <div class="col-lg-4">
+            {% include 'partials/sidebar.html.twig' %}
+        </div>
+    </div>
+</div>
+{% endblock %}

views/pages/page.html.twig

@@ -0,0 +1,22 @@
+{% extends 'base.html.twig' %}
+
+{% block content %}
+<div class="container">
+    <article class="py-4">
+        {% if post.thumbnail %}
+            <figure class="mb-4">
+                <img src="{{ post.thumbnail }}" class="img-fluid rounded"
+                     alt="{{ post.title|e('html_attr') }}">
+            </figure>
+        {% endif %}
+
+        {% if post.title is not empty %}
+            <h1>{{ post.title }}</h1>
+        {% endif %}
+
+        <div class="post-content">
+            {{ post.content|raw }}
+        </div>
+    </article>
+</div>
+{% endblock %}

views/pages/search.html.twig

@@ -0,0 +1,15 @@
+{% extends 'base.html.twig' %}
+
+{% block content %}
+<div class="container">
+    <h1 class="mb-4">
+        {{ __('Search results for: %s')|format('<em>' ~ search_query|e('html') ~ '</em>')|raw }}
+    </h1>
+
+    {% include 'partials/search-form.html.twig' %}
+
+    <div class="mt-4">
+        {% include 'components/post-loop.html.twig' %}
+    </div>
+</div>
+{% endblock %}

views/pages/single.html.twig

@@ -0,0 +1,50 @@
+{% extends 'base.html.twig' %}
+
+{% block content %}
+<div class="container">
+    <article class="py-4">
+        <header class="mb-4">
+            <h1>{{ post.title }}</h1>
+            {% include 'partials/meta.html.twig' %}
+        </header>
+
+        {% if post.thumbnail %}
+            <figure class="mb-4">
+                <img src="{{ post.thumbnail }}" class="img-fluid rounded post-thumbnail"
+                     alt="{{ post.title|e('html_attr') }}"
+                     loading="lazy">
+            </figure>
+        {% endif %}
+
+        <div class="post-content">
+            {{ post.content|raw }}
+        </div>
+
+        {% if post.tags|length > 0 %}
+            <div class="mt-4 mb-4">
+                {% for tag in post.tags %}
+                    <a href="{{ tag.url }}" class="badge bg-secondary text-decoration-none me-1">
+                        {{ tag.name }}
+                    </a>
+                {% endfor %}
+            </div>
+        {% endif %}
+
+        {% include 'partials/post-navigation.html.twig' %}
+        {% include 'partials/comments.html.twig' %}
+    </article>
+
+    {% if more_posts is defined and more_posts|length > 0 %}
+        <section class="py-5 border-top">
+            <h2 class="h4 mb-4">{{ __('More posts') }}</h2>
+            <div class="row row-cols-1 row-cols-md-3 g-4">
+                {% for post in more_posts %}
+                    <div class="col">
+                        {% include 'components/card-post-grid.html.twig' with {'post': post} only %}
+                    </div>
+                {% endfor %}
+            </div>
+        </section>
+    {% endif %}
+</div>
+{% endblock %}

views/partials/comment-item.html.twig

@@ -0,0 +1,40 @@
+<div class="comment d-flex gap-3 mb-4{% if depth > 0 %} ms-5{% endif %}" id="comment-{{ comment.id }}">
+    <div class="flex-shrink-0">
+        <img src="{{ comment.avatar_url }}" alt="{{ comment.author }}"
+             class="rounded-circle" width="40" height="40" loading="lazy">
+    </div>
+    <div class="flex-grow-1">
+        <div class="d-flex align-items-center gap-2 mb-1">
+            <strong class="small">
+                {% if comment.author_url %}
+                    {# author_url is pre-escaped with esc_url() in ContextBuilder #}
+                    <a href="{{ comment.author_url|raw }}" class="text-decoration-none text-body" rel="nofollow">
+                        {{ comment.author }}
+                    </a>
+                {% else %}
+                    {{ comment.author }}
+                {% endif %}
+            </strong>
+            <time class="text-body-secondary small" datetime="{{ comment.date_iso }}">
+                {{ comment.date }}
+            </time>
+            {% if comment.edit_url %}
+                <a href="{{ comment.edit_url }}" class="text-body-secondary small">{{ __('Edit') }}</a>
+            {% endif %}
+        </div>
+        <div class="comment-content small">
+            {{ comment.content|raw }}
+        </div>
+        {% if comment.reply_url %}
+            <div class="mt-1">
+                {{ comment.reply_url|raw }}
+            </div>
+        {% endif %}
+
+        {% if comment.children|length > 0 %}
+            {% for child in comment.children %}
+                {% include 'partials/comment-item.html.twig' with {'comment': child, 'depth': depth + 1} only %}
+            {% endfor %}
+        {% endif %}
+    </div>
+</div>

views/partials/comments.html.twig

@@ -0,0 +1,19 @@
+{% if comments is defined and (comments.is_open or comments.count > 0) %}
+<section class="comments-section border-top pt-5 mt-5" id="comments">
+    <h2 class="h4 mb-4">{{ comments.title }}</h2>
+
+    {% if comments.list|length > 0 %}
+        <div class="comment-list mb-4">
+            {% for comment in comments.list %}
+                {% include 'partials/comment-item.html.twig' with {'comment': comment, 'depth': 0} only %}
+            {% endfor %}
+        </div>
+    {% endif %}
+
+    {% if comments.is_open %}
+        <div class="comment-form mt-4">
+            {{ comments.form|raw }}
+        </div>
+    {% endif %}
+</section>
+{% endif %}

views/partials/dark-mode-toggle.html.twig

@@ -0,0 +1,21 @@
+<button type="button" class="wp-bootstrap-dark-mode-toggle ms-2"
+        data-bs-theme-toggle
+        aria-label="{{ __('Switch to dark mode') }}"
+        data-label-dark="{{ __('Switch to dark mode') }}"
+        data-label-light="{{ __('Switch to light mode') }}"
+        aria-pressed="false">
+    <svg class="wp-bootstrap-sun-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:none;" aria-hidden="true">
+        <circle cx="12" cy="12" r="5"/>
+        <line x1="12" y1="1" x2="12" y2="3"/>
+        <line x1="12" y1="21" x2="12" y2="23"/>
+        <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
+        <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
+        <line x1="1" y1="12" x2="3" y2="12"/>
+        <line x1="21" y1="12" x2="23" y2="12"/>
+        <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>
+        <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
+    </svg>
+    <svg class="wp-bootstrap-moon-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
+    </svg>
+</button>

views/partials/footer-columns.html.twig

@@ -0,0 +1,44 @@
+<footer class="bg-body-tertiary mt-auto">
+    <div class="container py-5">
+        <div class="row">
+            <div class="col-lg-4 mb-4 mb-lg-0">
+                <h5 class="fw-bold">{{ site.name }}</h5>
+                <p class="text-body-secondary">{{ site.description }}</p>
+                <p class="text-body-secondary small">{{ __('A modern WordPress theme built with Bootstrap 5.') }}</p>
+            </div>
+            <div class="col-lg-4 mb-4 mb-lg-0">
+                <h5 class="fw-bold">{{ __('Navigation') }}</h5>
+                {% if footer_menu|length > 0 %}
+                    <nav aria-label="{{ __('Footer navigation') }}">
+                        <ul class="list-unstyled">
+                        {% for item in footer_menu %}
+                            <li class="mb-1">
+                                <a href="{{ item.url }}" class="text-body-secondary text-decoration-none">
+                                    {{ item.title }}
+                                </a>
+                            </li>
+                        {% endfor %}
+                        </ul>
+                    </nav>
+                {% endif %}
+            </div>
+            <div class="col-lg-4">
+                <h5 class="fw-bold">{{ __('About') }}</h5>
+                <p class="text-body-secondary small">
+                    {{ __('This theme is proudly built with Bootstrap 5 and WordPress Full Site Editing.') }}
+                </p>
+            </div>
+        </div>
+        <hr class="my-4">
+        <div class="row align-items-center">
+            <div class="col-md-6">
+                <p class="text-body-secondary small mb-0">&copy; {{ current_year }} {{ site.name }}</p>
+            </div>
+            <div class="col-md-6 text-md-end">
+                <p class="text-body-secondary small mb-0">
+                    {{ __('Powered by %s')|format('<a href="https://wordpress.org" rel="nofollow" class="text-body-secondary">WordPress</a>')|raw }}
+                </p>
+            </div>
+        </div>
+    </div>
+</footer>