feat: Bootstrap 5 block renderer, widget cards, and sidebar post layout (v1.1.0)
All checks were successful
Create Release Package / PHP Lint (push) Successful in 1m7s
Create Release Package / Build Release (push) Successful in 1m41s

Add BlockRenderer class injecting Bootstrap classes into 8 core block types
(table, button, buttons, image, search, quote, pullquote, list) via per-block
render_block filters using WP_HTML_Tag_Processor.

Add WidgetRenderer class wrapping sidebar widgets in Bootstrap card components
with h4 heading hierarchy via dynamic_sidebar_params and widget_block_content
filters.

Add widget SCSS stylesheet for list styling, search input-group, tag cloud
pills, and card-flush list positioning.

Add single-sidebar.html.twig as the default post template with two-column
Bootstrap layout (col-lg-8 content, col-lg-4 sidebar). Full-width available
via template selection.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-02-28 23:43:43 +01:00
parent 9904bf508a
commit 3165e60639
16 changed files with 955 additions and 49 deletions

View File

@@ -10,8 +10,10 @@ A modern WordPress Block Theme built from scratch with Bootstrap 5. Features res
- **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
- **Block Renderer** -- Automatic Bootstrap 5 class injection on 8 core block types (table, button, image, search, quote, pullquote, list) via `render_block` filters
- **Widget Renderer** -- Sidebar widgets wrapped in Bootstrap cards with proper heading hierarchy
- **Block Styles** -- 18 custom styles mapping Bootstrap components to WordPress blocks (including List Group)
- **Custom Templates** -- Landing (no header/footer), full-width, hero, sidebar page templates; blog posts default to sidebar layout
- **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
@@ -98,6 +100,8 @@ WordPress style variation colors are bridged to Bootstrap CSS custom properties
| `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 |
| `BlockRenderer` | Injects Bootstrap 5 classes into core block HTML via `render_block` filters |
| `WidgetRenderer` | Wraps sidebar widgets in Bootstrap card components |
### Navigation Menus
@@ -110,7 +114,15 @@ If no menu is assigned, the primary location falls back to listing published pag
### 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.
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. All sidebar widgets are automatically wrapped in Bootstrap card components with consistent heading styles.
### Block Renderer
The `BlockRenderer` class hooks per-block `render_block_{$name}` filters (more performant than a single `render_block` filter) and uses WordPress's `WP_HTML_Tag_Processor` for safe, idempotent class injection. Only active on the frontend — admin, REST API, and AJAX requests are skipped. Child themes can modify the block-to-handler map via the `wp_bootstrap_block_renderer_blocks` filter.
### Widget Renderer
The `WidgetRenderer` class transforms sidebar widget output into Bootstrap card components. It hooks `dynamic_sidebar_params` for wrapper HTML and `widget_block_content` for inner content adjustments (heading level downgrade from `<h2>` to `<h4>`). The card structure uses `card-body` with `card-title` inside, ensuring valid HTML whether or not a widget outputs a title.
### Project Structure
@@ -118,6 +130,7 @@ The theme registers a **Sidebar** widget area. When widgets are assigned via **A
wp-bootstrap/
+-- assets/ Compiled CSS, JS, fonts
+-- inc/
| +-- Block/ BlockRenderer, WidgetRenderer
| +-- Template/ TemplateController, ContextBuilder, NavWalker
| +-- Twig/ TwigService singleton
+-- languages/ Translation files (.pot, .po)