Skip to content

Commit d7584d9

Browse files
ashleyshawashleyshaw
committed
feat: add sidebar template part and blog with sidebar template
- Created sidebar.php pattern with i18n and Block Types: core/template-part/sidebar - Search widget - Recent posts widget - Categories widget - Tags widget - Archives widget - Created parts/sidebar.html referencing the sidebar pattern - Created home-sidebar.html template (Blog with Sidebar) - Two-column layout: 66.66% content, 33.33% sidebar - Uses query-posts-list pattern for main content - Registered as custom template in theme.json - Updated theme.json: - Added sidebar template part with area: sidebar - Added home-sidebar custom template for pages - Updated documentation: - patterns/README.md: Added sidebar to Meta Patterns and Block Types tables - parts/README.md: Added sidebar and comments sections, updated theme.json example - templates/README.md: Added home-sidebar to Archive Templates table
1 parent d4e9753 commit d7584d9

File tree

7 files changed

+153
-0
lines changed

7 files changed

+153
-0
lines changed

‎parts/README.md‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,40 @@ Query pagination for post lists.
113113

114114
**Block Types:** `core/query`
115115

116+
### `sidebar.html`
117+
118+
Blog sidebar with widgets (search, recent posts, categories, tags, archives).
119+
120+
**Pattern Reference:**
121+
122+
```html
123+
<!-- wp:pattern {"slug":"{{theme_slug}}/sidebar"} /-->
124+
```
125+
126+
**Pattern Location:** `patterns/sidebar.php`
127+
128+
**Block Types:** `core/template-part/sidebar`
129+
130+
**Usage in templates:**
131+
132+
```html
133+
<!-- wp:template-part {"slug":"sidebar"} /-->
134+
```
135+
136+
### `comments.html`
137+
138+
Comments section for posts.
139+
140+
**Pattern Reference:**
141+
142+
```html
143+
<!-- wp:pattern {"slug":"{{theme_slug}}/comments"} /-->
144+
```
145+
146+
**Pattern Location:** `patterns/comments.php`
147+
148+
**Block Types:** `core/comments`
149+
116150
## Template Part Areas
117151

118152
Template parts are registered in `theme.json`:
@@ -130,6 +164,11 @@ Template parts are registered in `theme.json`:
130164
"title": "Footer",
131165
"area": "footer"
132166
},
167+
{
168+
"name": "sidebar",
169+
"title": "Sidebar",
170+
"area": "sidebar"
171+
},
133172
{
134173
"name": "post-meta",
135174
"title": "Post Meta",
@@ -139,6 +178,11 @@ Template parts are registered in `theme.json`:
139178
"name": "pagination",
140179
"title": "Pagination",
141180
"area": "uncategorized"
181+
},
182+
{
183+
"name": "comments",
184+
"title": "Comments",
185+
"area": "uncategorized"
142186
}
143187
]
144188
}
@@ -152,20 +196,25 @@ flowchart LR
152196
subgraph Areas["Template Part Areas"]
153197
HeaderArea["header<br/>Site Header"]
154198
FooterArea["footer<br/>Site Footer"]
199+
SidebarArea["sidebar<br/>Sidebar"]
155200
Uncategorized["uncategorized<br/>General Parts"]
156201
end
157202
158203
subgraph Parts["Parts"]
159204
H["header.html"]
160205
F["footer.html"]
206+
S["sidebar.html"]
161207
PM["post-meta.html"]
162208
PG["pagination.html"]
209+
C["comments.html"]
163210
end
164211
165212
H --> HeaderArea
166213
F --> FooterArea
214+
S --> SidebarArea
167215
PM --> Uncategorized
168216
PG --> Uncategorized
217+
C --> Uncategorized
169218
```
170219

171220
## Why Pattern References?

‎parts/sidebar.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<!-- wp:pattern {"slug":"{{theme_slug}}/sidebar"} /-->

‎patterns/README.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,12 @@ flowchart TB
9494
| Post Meta | `post-meta.php` | Post metadata (author, date, categories, tags) |
9595
| Pagination | `pagination.php` | Query pagination with Previous/Next links |
9696

97+
### Widget Patterns
98+
99+
| Pattern | File | Block Types | Description |
100+
|---------|------|-------------|-------------|
101+
| Sidebar | `sidebar.php` | `core/template-part/sidebar` | Sidebar with search, recent posts, categories, tags, and archives |
102+
97103
## Pattern Structure
98104

99105
Each pattern file uses PHP with WordPress block markup. All patterns include:
@@ -171,6 +177,7 @@ Block Types allow patterns to be suggested as replacements for specific blocks:
171177
|------------|---------|-----------------|
172178
| `core/template-part/header` | Suggested for header template parts | `header.php` |
173179
| `core/template-part/footer` | Suggested for footer template parts | `footer.php` |
180+
| `core/template-part/sidebar` | Suggested for sidebar template parts | `sidebar.php` |
174181
| `core/query` | Suggested for query blocks | `query-posts-list.php`, `query-posts-grid.php` |
175182

176183
## Template Types

‎patterns/sidebar.php‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<?php
2+
/**
3+
* Title: Sidebar
4+
* Slug: {{theme_slug}}/sidebar
5+
* Description: A sidebar with search, recent posts, categories, tags, and archives widgets.
6+
* Categories: {{theme_slug}}-components
7+
* Keywords: sidebar, widgets, search, categories, tags, archives
8+
* Block Types: core/template-part/sidebar
9+
* Viewport Width: 400
10+
*/
11+
?>
12+
<!-- wp:group {"layout":{"type":"constrained"}} -->
13+
<div class="wp-block-group" role="complementary" aria-label="<?php esc_attr_e( 'Blog sidebar', '{{theme_slug}}' ); ?>">
14+
<!-- wp:heading {"level":2,"className":"screen-reader-text"} -->
15+
<h2 class="wp-block-heading screen-reader-text"><?php esc_html_e( 'Sidebar', '{{theme_slug}}' ); ?></h2>
16+
<!-- /wp:heading -->
17+
18+
<!-- wp:search {"label":"<?php esc_attr_e( 'Search', '{{theme_slug}}' ); ?>","showLabel":false,"placeholder":"<?php esc_attr_e( 'Search…', '{{theme_slug}}' ); ?>","buttonText":"<?php esc_attr_e( 'Search', '{{theme_slug}}' ); ?>"} /-->
19+
20+
<!-- wp:separator -->
21+
<hr class="wp-block-separator has-alpha-channel-opacity"/>
22+
<!-- /wp:separator -->
23+
24+
<!-- wp:heading {"level":3} -->
25+
<h3 class="wp-block-heading"><?php esc_html_e( 'Recent Posts', '{{theme_slug}}' ); ?></h3>
26+
<!-- /wp:heading -->
27+
28+
<!-- wp:latest-posts {"postsToShow":5,"displayPostDate":true} /-->
29+
30+
<!-- wp:separator -->
31+
<hr class="wp-block-separator has-alpha-channel-opacity"/>
32+
<!-- /wp:separator -->
33+
34+
<!-- wp:heading {"level":3} -->
35+
<h3 class="wp-block-heading"><?php esc_html_e( 'Categories', '{{theme_slug}}' ); ?></h3>
36+
<!-- /wp:heading -->
37+
38+
<!-- wp:categories {"showPostCounts":true} /-->
39+
40+
<!-- wp:separator -->
41+
<hr class="wp-block-separator has-alpha-channel-opacity"/>
42+
<!-- /wp:separator -->
43+
44+
<!-- wp:heading {"level":3} -->
45+
<h3 class="wp-block-heading"><?php esc_html_e( 'Tags', '{{theme_slug}}' ); ?></h3>
46+
<!-- /wp:heading -->
47+
48+
<!-- wp:tag-cloud {"numberOfTags":20} /-->
49+
50+
<!-- wp:separator -->
51+
<hr class="wp-block-separator has-alpha-channel-opacity"/>
52+
<!-- /wp:separator -->
53+
54+
<!-- wp:heading {"level":3} -->
55+
<h3 class="wp-block-heading"><?php esc_html_e( 'Archives', '{{theme_slug}}' ); ?></h3>
56+
<!-- /wp:heading -->
57+
58+
<!-- wp:archives {"showPostCounts":true} /-->
59+
</div>
60+
<!-- /wp:group -->

‎templates/README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,7 @@ flowchart TD
9898
| Template | Purpose | Pattern Used | Fallback |
9999
|----------|---------|--------------|----------|
100100
| `home.html` | Blog posts page | `query-posts-grid` | `index.html` |
101+
| `home-sidebar.html` | Blog with sidebar | `query-posts-list`, `sidebar` | `home.html` |
101102
| `author.html` | Author archive | `author-header`, `query-posts-grid` | `archive.html` |
102103
| `category.html` | Category archive | `archive-header`, `query-posts-list` | `archive.html` |
103104
| `tag.html` | Tag archive | `archive-header`, `query-posts-grid` | `archive.html` |

‎templates/home-sidebar.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
2+
3+
<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
4+
<main class="wp-block-group">
5+
<!-- wp:columns {"style":{"spacing":{"blockGap":{"left":"var:preset|spacing|large"}}}} -->
6+
<div class="wp-block-columns">
7+
<!-- wp:column {"width":"66.66%"} -->
8+
<div class="wp-block-column" style="flex-basis:66.66%">
9+
<!-- wp:pattern {"slug":"{{theme_slug}}/query-posts-list"} /-->
10+
</div>
11+
<!-- /wp:column -->
12+
13+
<!-- wp:column {"width":"33.33%"} -->
14+
<div class="wp-block-column" style="flex-basis:33.33%">
15+
<!-- wp:template-part {"slug":"sidebar"} /-->
16+
</div>
17+
<!-- /wp:column -->
18+
</div>
19+
<!-- /wp:columns -->
20+
</main>
21+
<!-- /wp:group -->
22+
23+
<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

‎theme.json‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -307,6 +307,13 @@
307307
"postTypes": [
308308
"page"
309309
]
310+
},
311+
{
312+
"name": "home-sidebar",
313+
"title": "Blog (with Sidebar)",
314+
"postTypes": [
315+
"page"
316+
]
310317
}
311318
],
312319
"templateParts": [
@@ -320,6 +327,11 @@
320327
"title": "Footer",
321328
"area": "footer"
322329
},
330+
{
331+
"name": "sidebar",
332+
"title": "Sidebar",
333+
"area": "sidebar"
334+
},
323335
{
324336
"name": "post-meta",
325337
"title": "Post Meta",

0 commit comments

Comments
 (0)