@blockbite/agent-context 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/examples/README.md +23 -0
- package/examples/dynamic-template-reference/fields.yaml +61 -0
- package/examples/dynamic-template-reference/manifest.json +8 -0
- package/examples/dynamic-template-reference/module.ts +12 -0
- package/examples/dynamic-template-reference/recipe.json +5 -0
- package/examples/dynamic-template-reference/seeds.json +44 -0
- package/examples/dynamic-template-reference/style.css +156 -0
- package/examples/dynamic-template-reference/template.liquid +59 -0
- package/index.json +239 -0
- package/mcp-tools.json +222 -0
- package/package.json +24 -0
- package/references/block-dsl.md +257 -0
- package/references/islands.md +111 -0
- package/references/tailwind-utilities.md +108 -0
- package/skills/analyze-template/SKILL.md +20 -0
- package/skills/block-style/SKILL.md +101 -0
- package/skills/connect/SKILL.md +25 -0
- package/skills/connection-status/SKILL.md +38 -0
- package/skills/create-template-draft/SKILL.md +55 -0
- package/skills/design-tokens/SKILL.md +54 -0
- package/skills/document-blueprint/SKILL.md +166 -0
- package/skills/figma-design-to-code/SKILL.md +126 -0
- package/skills/figma-site-builder/SKILL.md +209 -0
- package/skills/frame-draft-link/SKILL.md +77 -0
- package/skills/islands-list/SKILL.md +24 -0
- package/skills/project-select/SKILL.md +19 -0
- package/skills/projects-list/SKILL.md +17 -0
- package/skills/render-preview/SKILL.md +20 -0
- package/skills/sandbox-status/SKILL.md +18 -0
- package/skills/site-motion-pass/SKILL.md +88 -0
- package/skills/site-reviewer/SKILL.md +107 -0
- package/skills/sync-plan/SKILL.md +20 -0
- package/skills/template-figma/SKILL.md +123 -0
- package/skills/template-new/SKILL.md +221 -0
- package/skills/template-preview/SKILL.md +115 -0
- package/skills/template-refine/SKILL.md +135 -0
- package/skills/update-template-draft/SKILL.md +36 -0
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: site-reviewer
|
|
3
|
+
description: Review BlockBite site builds without mutating files, writing actionable markdown reports for Figma-to-site parity, document-blueprint order, reusable dynamic-template inventory, token drift, dynamic-content contracts, Alpine/ESM errors, responsive layout, and console/network failures.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Site Reviewer
|
|
7
|
+
|
|
8
|
+
Use this skill for review-only passes. Do not mutate files, run imports, register templates, sync dynamic content, or alter the database.
|
|
9
|
+
|
|
10
|
+
Write reports to:
|
|
11
|
+
|
|
12
|
+
```text
|
|
13
|
+
<workspace>/dev/reviews/<site>/<page>-review.md
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
## Scope
|
|
17
|
+
|
|
18
|
+
Review against available Figma nodes, the site plan, island inventory, page blueprint map, template packages, seed files, previews, and browser/runtime checks.
|
|
19
|
+
|
|
20
|
+
If Figma access is unavailable, state that limitation and review only the local build artifacts and runtime behavior.
|
|
21
|
+
|
|
22
|
+
## Read First
|
|
23
|
+
|
|
24
|
+
- `<workspace>/dev/plans/<site>/site-plan.md`
|
|
25
|
+
- `<workspace>/dev/plans/<site>/island-inventory.md`
|
|
26
|
+
- `<workspace>/dev/plans/<site>/page-blueprint-map.md`
|
|
27
|
+
- `<workspace>/dev/plans/<site>/token-map.md`
|
|
28
|
+
- `dev/skills/document-blueprint/SKILL.md`
|
|
29
|
+
- `dev/skills/template-preview/SKILL.md`
|
|
30
|
+
- relevant template package files
|
|
31
|
+
- relevant `document-blueprints/<page>/blueprint.json` and `sections/*.seed.json`
|
|
32
|
+
|
|
33
|
+
## Checks
|
|
34
|
+
|
|
35
|
+
Check:
|
|
36
|
+
|
|
37
|
+
- blueprint section order against the locked page map
|
|
38
|
+
- missing or extra islands
|
|
39
|
+
- duplicate templates that should be reused
|
|
40
|
+
- page-specific duplicate slugs for overlapping designs
|
|
41
|
+
- generic fallback components where Figma expects specific structure, such as mixed-height carousel cards
|
|
42
|
+
- header/footer dynamic-template and theme-pattern registration plan
|
|
43
|
+
- token drift between Figma, `token-map.md`, and `dev/css/design-tokens.css`
|
|
44
|
+
- image/media ratio, crop, focal, and asset mismatches
|
|
45
|
+
- missing SVG asset fields for editable icons/decorative SVGs
|
|
46
|
+
- dynamic-content contracts: source type, field handles, repeater handles, seed shape, and Liquid paths
|
|
47
|
+
- blueprint seed files for reused templates
|
|
48
|
+
- Alpine failures, especially `x-collapse` when Alpine collapse is missing
|
|
49
|
+
- ESM/CDN registration and module loading failures
|
|
50
|
+
- desktop and mobile layout, overflow, text clipping, z-index, and interaction state
|
|
51
|
+
- console errors, network failures, and `window.BlockBiteDebug?.errors` when available
|
|
52
|
+
|
|
53
|
+
## Browser Review
|
|
54
|
+
|
|
55
|
+
When reviewing block editor or frontend client-side behavior, inspect browser console, network failures, and relevant runtime logs before writing findings. Use those errors to identify the failing path.
|
|
56
|
+
|
|
57
|
+
Review at least:
|
|
58
|
+
|
|
59
|
+
- desktop viewport
|
|
60
|
+
- mobile viewport
|
|
61
|
+
- initial load
|
|
62
|
+
- interaction states for nav, FAQ, sliders, tabs, filters, marquees, and reveals when present
|
|
63
|
+
|
|
64
|
+
## Report Format
|
|
65
|
+
|
|
66
|
+
Write markdown with:
|
|
67
|
+
|
|
68
|
+
```markdown
|
|
69
|
+
# <Page> Review
|
|
70
|
+
|
|
71
|
+
## Summary
|
|
72
|
+
|
|
73
|
+
- Reviewed: <preview/page URL or file-backed view>
|
|
74
|
+
- Figma: <file key/node ids or unavailable>
|
|
75
|
+
- Status: pass | needs changes | blocked
|
|
76
|
+
|
|
77
|
+
## Findings
|
|
78
|
+
|
|
79
|
+
### P1 - <short title>
|
|
80
|
+
|
|
81
|
+
- Island: <slug or n/a>
|
|
82
|
+
- Blueprint section: <key or n/a>
|
|
83
|
+
- File: <path or n/a>
|
|
84
|
+
- Evidence: <specific observed mismatch or error>
|
|
85
|
+
- Suggested fix: <actionable fix>
|
|
86
|
+
|
|
87
|
+
## Open Questions
|
|
88
|
+
|
|
89
|
+
- <question>
|
|
90
|
+
|
|
91
|
+
## Checks Run
|
|
92
|
+
|
|
93
|
+
- <command or browser check>
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
Severity:
|
|
97
|
+
|
|
98
|
+
- `P0`: blocks page use, import safety, or runtime boot.
|
|
99
|
+
- `P1`: significant design/content/interaction mismatch.
|
|
100
|
+
- `P2`: polish, maintainability, or minor responsive issue.
|
|
101
|
+
- `P3`: optional improvement.
|
|
102
|
+
|
|
103
|
+
Findings must be actionable and grounded in a file path, island slug, blueprint section key, URL, screenshot observation, console error, or Figma node. If no issues are found, say so and list any review gaps.
|
|
104
|
+
|
|
105
|
+
## Finish
|
|
106
|
+
|
|
107
|
+
Return only the report path, status, highest severity, and short summary of findings. Do not apply fixes in the reviewer pass.
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: sync-plan
|
|
3
|
+
description: Create or diff a draft BlockBite sync plan that compares workspace template packages with the database records. Use when the user wants to know what would change before syncing. Never applies changes.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# BlockBite sync plan
|
|
7
|
+
|
|
8
|
+
## Steps
|
|
9
|
+
|
|
10
|
+
1. Ensure a project is selected.
|
|
11
|
+
2. To draft a plan, call `blockbite-sync-plan-create` with
|
|
12
|
+
`{ "slug": "<slug>" }` or `{ "view": "templates/<slug>/template.liquid" }`.
|
|
13
|
+
3. To see explicit current-state comparisons, call `blockbite-sync-plan-diff`
|
|
14
|
+
with the same target.
|
|
15
|
+
4. Summarize the proposed additions/updates and current state for the user.
|
|
16
|
+
|
|
17
|
+
## Notes
|
|
18
|
+
|
|
19
|
+
- Both tools are read-only and never apply changes to posts, Site Editor
|
|
20
|
+
entities, or workspace files.
|
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: template-figma
|
|
3
|
+
description: Build or refine a BlockBite Studio dynamic template from a Figma frame or node link using Figma MCP. Use when the user provides or wants to provide a Figma frame/node URL, wants a Figma design converted into a BlockBite template, or wants a generated Figma template cleaned up into a maintainable dynamic template package.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Template Figma
|
|
7
|
+
|
|
8
|
+
Use Figma MCP to turn a frame or node into a maintainable BlockBite Studio dynamic template.
|
|
9
|
+
|
|
10
|
+
Before mapping Figma layers to DSL tags, read `../references/block-dsl.md` when it exists.
|
|
11
|
+
For BlockBite-specific Tailwind utilities such as `area-[...]`, `grid-area-[...]`, and `children:*`, read `../references/tailwind-utilities.md` when it exists.
|
|
12
|
+
When mapping Figma colors or typography to token-backed Tailwind classes, run `wp bb design-tokens db-to-local` if needed and read `<workspace>/dev/css/design-tokens.css`.
|
|
13
|
+
|
|
14
|
+
## Agent Contract
|
|
15
|
+
|
|
16
|
+
The agent is the interface; WP-CLI is only the executor. Do not rely on interactive CLI prompts. Resolve the Figma URL and target slug from the chat, ask only for missing required values, then run commands with full flags.
|
|
17
|
+
|
|
18
|
+
## Build Mode Contract
|
|
19
|
+
|
|
20
|
+
Treat BlockBite's reported build mode as authoritative:
|
|
21
|
+
|
|
22
|
+
- auto-build: after template, style, script, or block-style edits, run `ddev wp bb autobuild`; if Node.js is unavailable, open the signed browser fallback URL.
|
|
23
|
+
- custom-build: do not use the signed browser runner; use the project-specific frontend build pipeline.
|
|
24
|
+
- Default to auto-build for template and site work unless `wp bb learn`, `wp bb init`, or `dev/template-start/latest.json` explicitly reports custom-build.
|
|
25
|
+
- Do not infer custom-build from development manifests in mounted plugins or neighboring projects.
|
|
26
|
+
- Do not start, repair, shim, or mutate external Vite/Webpack setup unless the user explicitly asks for plugin development or custom-build work.
|
|
27
|
+
- If autobuild stalls or fails, report the runner status and stop before changing build setup.
|
|
28
|
+
|
|
29
|
+
## Inputs
|
|
30
|
+
|
|
31
|
+
Require:
|
|
32
|
+
|
|
33
|
+
- Figma frame or node URL
|
|
34
|
+
- target template slug
|
|
35
|
+
- intended source type: `block_instance`, `post_type`, `collection`, `single`, or `hook`
|
|
36
|
+
- desired dynamic fields and repeaters when known
|
|
37
|
+
|
|
38
|
+
If a handoff JSON exists, read it first and use its answers.
|
|
39
|
+
|
|
40
|
+
Choose the source type before mapping fields:
|
|
41
|
+
|
|
42
|
+
- Use `block_instance` for content owned by the inserted template block instance.
|
|
43
|
+
- Use `post_type` for CPT/single-post templates that read the current post's BlockBite source fields directly.
|
|
44
|
+
- Use `block_instance` plus `post_relation` only when the editor should manually select related posts for this template instance.
|
|
45
|
+
|
|
46
|
+
Do not use a relation field to simulate the current CPT item. Relation-backed patterns read nested data such as `props.fields.work.source.work.client`; `post_type` templates read direct fields such as `props.fields.client` or `section.fields.client`.
|
|
47
|
+
|
|
48
|
+
## Figma Workflow
|
|
49
|
+
|
|
50
|
+
Load the Figma context through the available Figma MCP tooling. Inspect layout, typography, spacing, repeated groups, imagery, and interactive states.
|
|
51
|
+
|
|
52
|
+
Map design structure into:
|
|
53
|
+
|
|
54
|
+
- section-level `fields`
|
|
55
|
+
- repeated groups as `subcollections`
|
|
56
|
+
- local template assets only when needed
|
|
57
|
+
- shared workspace block styles for reusable button/card/control variants
|
|
58
|
+
- Tailwind classes compatible with BlockBite runtime
|
|
59
|
+
|
|
60
|
+
Avoid preserving noisy generated wrappers when a simpler structure matches the design.
|
|
61
|
+
|
|
62
|
+
## Required Package
|
|
63
|
+
|
|
64
|
+
Write or refine `<workspace>/templates/<slug>/` with:
|
|
65
|
+
|
|
66
|
+
- `template.liquid`
|
|
67
|
+
- `recipe.json`
|
|
68
|
+
- `seeds.json`
|
|
69
|
+
- `fields.yaml`
|
|
70
|
+
- `manifest.json`
|
|
71
|
+
- `style.css`
|
|
72
|
+
- `module.ts`
|
|
73
|
+
|
|
74
|
+
Use the standard runtime prelude:
|
|
75
|
+
|
|
76
|
+
```liquid
|
|
77
|
+
{% assign seed_data = 'seeds.json' | bb_seed %}
|
|
78
|
+
{% assign data = item | bb_source %}
|
|
79
|
+
{% assign props = live | ternary: data, seed_data %}
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
After choosing fields, compare `fields.yaml`, `recipe.json`, `seeds.json`, and Liquid paths. Repeater handles must stay identical across all files; for example, `subcollections.information` must not become `subcollections.items` in Liquid.
|
|
83
|
+
|
|
84
|
+
Supported `fields.yaml` field types are: `string`, `text`, `textarea`, `richtext`, `media`, `image`, `file`, `link`, `svg`, `number`, `integer`, `float`, `boolean`, `bool`, `toggle`, `select`, `radio`, `date`, `datetime`, `color`, `email`, `telephone`, `url`, `password`, and `post_relation`.
|
|
85
|
+
|
|
86
|
+
Map Figma imagery intended for editor selection to `type: media`, not `type: string`. `type: image` and `type: file` are accepted aliases that normalize to `media`. Only use a URL/string field for an intentionally typed external URL. Media fields store object payloads, so render them via `bb_media` or `bb-image`/`core-image` media props instead of treating the value as a bare string.
|
|
87
|
+
|
|
88
|
+
Map Figma icons or decorative SVG assets to `type: svg`. Use `kind: icon` for icon assets and `kind: shape` for shape assets; `kind` defaults to `icon`. Do not invent `type: icon`.
|
|
89
|
+
|
|
90
|
+
## Shared Styles Boundary
|
|
91
|
+
|
|
92
|
+
Do not put Figma island styling or global `html`, `body`, `button`, `input`,
|
|
93
|
+
typography, background, or reset rules in `<workspace>/app/styles-shared/*.css`.
|
|
94
|
+
|
|
95
|
+
`app/styles-shared/shared.css` is bundled into `app.bundle.css` and loaded in
|
|
96
|
+
block editor previews as well as the frontend. Use it only for intentionally
|
|
97
|
+
shared, scoped component or template-family classes. Put frontend-only global
|
|
98
|
+
page styles in `app/styles-app/app.css` or the theme stylesheet. Put island
|
|
99
|
+
styles in `<workspace>/templates/<slug>/style.css`.
|
|
100
|
+
|
|
101
|
+
## CLI Flow
|
|
102
|
+
|
|
103
|
+
Register or update through WP-CLI:
|
|
104
|
+
|
|
105
|
+
```bash
|
|
106
|
+
ddev wp bb dynamic-template create --slug=<slug>
|
|
107
|
+
ddev wp bb dynamic-content create --slug=<slug> --source-type=<block_instance|post_type|collection|single|hook> --fields=<template-or-source-folder>/fields.yaml
|
|
108
|
+
ddev wp bb source import-seeds --slug=<slug> --file=wp-content/blockbite/templates/<slug>/seeds.json
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
For CPT-bound templates, use `--source-type=post_type` and the source schema for that CPT, for example `--fields=work/fields.yaml`. Use `block_instance` only for inserted, instance-owned template content.
|
|
112
|
+
|
|
113
|
+
If rows already exist, use `dynamic-template update` and `dynamic-content sync`.
|
|
114
|
+
|
|
115
|
+
If the registered slug and filesystem view differ, update the template path separately:
|
|
116
|
+
|
|
117
|
+
```bash
|
|
118
|
+
ddev wp bb dynamic-template path --slug=<slug> --view=templates/v1/<slug>/template.liquid
|
|
119
|
+
```
|
|
120
|
+
|
|
121
|
+
## Finish
|
|
122
|
+
|
|
123
|
+
Verify the template renders with seed data, confirm dynamic fields are editable, and note any Figma details that could not be represented exactly in the runtime.
|
|
@@ -0,0 +1,221 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: template-new
|
|
3
|
+
description: Create a new BlockBite Studio dynamic template package from a short brief. Use when the user wants a new template/section such as FAQ, hero, cards, services, statistics, team, testimonial, CTA, or a custom section, including creating package files, dynamic fields, seed data, and registering/importing through WP-CLI.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Template New
|
|
7
|
+
|
|
8
|
+
Create a full BlockBite Studio dynamic template package in the active workspace.
|
|
9
|
+
|
|
10
|
+
Before authoring DSL tags, read `../references/block-dsl.md` when it exists.
|
|
11
|
+
For BlockBite-specific Tailwind utilities such as `area-[...]`, `grid-area-[...]`, and `children:*`, read `../references/tailwind-utilities.md` when it exists.
|
|
12
|
+
When token-backed Tailwind classes matter, run `wp bb design-tokens db-to-local` if needed and read `<workspace>/dev/css/design-tokens.css`.
|
|
13
|
+
|
|
14
|
+
## Agent Contract
|
|
15
|
+
|
|
16
|
+
The agent is the interface; WP-CLI is only the executor. Do not rely on interactive CLI prompts. Resolve the slug/type from the chat, ask only for missing required values, then run commands with full flags.
|
|
17
|
+
|
|
18
|
+
## Build Mode Contract
|
|
19
|
+
|
|
20
|
+
Treat BlockBite's reported build mode as authoritative:
|
|
21
|
+
|
|
22
|
+
- auto-build: after template, style, script, or block-style edits, run `ddev wp bb autobuild`; if Node.js is unavailable, open the signed browser fallback URL.
|
|
23
|
+
- custom-build: do not use the signed browser runner; use the project-specific frontend build pipeline.
|
|
24
|
+
- Default to auto-build for template and site work unless `wp bb learn`, `wp bb init`, or `dev/template-start/latest.json` explicitly reports custom-build.
|
|
25
|
+
- Do not infer custom-build from development manifests in mounted plugins or neighboring projects.
|
|
26
|
+
- Do not start, repair, shim, or mutate external Vite/Webpack setup unless the user explicitly asks for plugin development or custom-build work.
|
|
27
|
+
- If autobuild stalls or fails, report the runner status and stop before changing build setup.
|
|
28
|
+
|
|
29
|
+
## Required Package
|
|
30
|
+
|
|
31
|
+
Write the package under `<workspace>/templates/<slug>/` with:
|
|
32
|
+
|
|
33
|
+
- `template.liquid`
|
|
34
|
+
- `recipe.json`
|
|
35
|
+
- `seeds.json`
|
|
36
|
+
- `fields.yaml`
|
|
37
|
+
- `manifest.json`
|
|
38
|
+
- `style.css`
|
|
39
|
+
- `module.ts`
|
|
40
|
+
|
|
41
|
+
Use the current local template style. If a similar template exists, read it first and mirror its runtime conventions.
|
|
42
|
+
|
|
43
|
+
## Runtime Pattern
|
|
44
|
+
|
|
45
|
+
Choose the dynamic-content source type before writing files:
|
|
46
|
+
|
|
47
|
+
- Use `block_instance` when the content belongs to the inserted template block instance.
|
|
48
|
+
- Use `post_type` when the template renders inside a CPT/single post context and should read the current post's BlockBite source fields.
|
|
49
|
+
- Use `block_instance` with a `post_relation` field only when the editor must manually pick a related post or posts for that template instance.
|
|
50
|
+
|
|
51
|
+
Do not model a CPT-bound island as `block_instance` plus `post_relation` just because it renders on a CPT template. That nests data under the relation field and produces paths such as `props.fields.work.source.work.client`. A CPT-bound island should use `post_type` and read the current post source payload directly, such as `props.fields.client` or, when the local template variable is named `section`, `section.fields.client`.
|
|
52
|
+
|
|
53
|
+
Start `template.liquid` with:
|
|
54
|
+
|
|
55
|
+
```liquid
|
|
56
|
+
{% assign seed_data = 'seeds.json' | bb_seed %}
|
|
57
|
+
{% assign data = item | bb_source %}
|
|
58
|
+
{% assign props = live | ternary: data, seed_data %}
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
Read single fields from `props.fields.<handle>`.
|
|
62
|
+
Read repeaters from `props.subcollections.<handle>`.
|
|
63
|
+
If the template assigns `section = props`, keep the same direct payload model and read `section.fields.<handle>` and `section.subcollections.<handle>`.
|
|
64
|
+
Use `{{ value | bb_str | raw }}` for editable text output.
|
|
65
|
+
|
|
66
|
+
For `post_relation` fields with `metadata.include_source: true`, selected post source fields are nested under the relation item, for example `props.fields.work.source.work.client`. Use that shape only for relation-backed patterns, not for `post_type` templates.
|
|
67
|
+
|
|
68
|
+
## Fill Layers
|
|
69
|
+
|
|
70
|
+
For hero backgrounds, overlays, and visual layers, use the child DSL API:
|
|
71
|
+
|
|
72
|
+
```liquid
|
|
73
|
+
<bb-group tag="section" class="relative isolate min-h-[720px] overflow-hidden">
|
|
74
|
+
<bb-fills>
|
|
75
|
+
<bb-fill type="image" field="{{ props.fields.hero_artwork }}" class="opacity-70" />
|
|
76
|
+
<bb-fill type="gradient" class="bg-gradient-to-b from-black/20 to-black/70" />
|
|
77
|
+
</bb-fills>
|
|
78
|
+
|
|
79
|
+
...
|
|
80
|
+
</bb-group>
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
Do not put fills directly on `<bb-group>` props. Do not use absolutely
|
|
84
|
+
positioned `<core-image>` or `<bb-image>` nodes for images that are only
|
|
85
|
+
background/fill layers. Use `bb-fill type="image"` with a `media` field so the
|
|
86
|
+
editor inline preview and media picker can treat the image as editable fill
|
|
87
|
+
media. Keep foreground content above fills with normal stacking classes such as
|
|
88
|
+
`relative z-10`.
|
|
89
|
+
|
|
90
|
+
## Field Contract
|
|
91
|
+
|
|
92
|
+
`fields.yaml` is schema-only:
|
|
93
|
+
|
|
94
|
+
```yaml
|
|
95
|
+
version: 1
|
|
96
|
+
|
|
97
|
+
fields:
|
|
98
|
+
title:
|
|
99
|
+
type: string
|
|
100
|
+
label: Title
|
|
101
|
+
required: false
|
|
102
|
+
|
|
103
|
+
subcollections:
|
|
104
|
+
items:
|
|
105
|
+
label: Items
|
|
106
|
+
fields:
|
|
107
|
+
heading:
|
|
108
|
+
type: string
|
|
109
|
+
label: Heading
|
|
110
|
+
required: false
|
|
111
|
+
text:
|
|
112
|
+
type: richtext
|
|
113
|
+
label: Text
|
|
114
|
+
required: false
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
Use top-level `fields` for section-level content. Use `subcollections` for repeated cards, FAQ rows, stats, people, logos, and slides.
|
|
118
|
+
|
|
119
|
+
Supported field types are: `string`, `text`, `textarea`, `richtext`, `media`, `image`, `file`, `link`, `svg`, `number`, `integer`, `float`, `boolean`, `bool`, `toggle`, `select`, `radio`, `date`, `datetime`, `color`, `email`, `telephone`, `url`, `password`, and `post_relation`.
|
|
120
|
+
|
|
121
|
+
Use `type: media` for WordPress media picker fields. `type: image` and `type: file` are accepted aliases, but they normalize to `media`. Do not model editable images as `image_url: type: string` unless the editor must manually type an external URL. Media field values are objects with `url`, `alt`, `sizes`, and attachment metadata; in Liquid, normalize them with `bb_media` or pass them to `bb-image`/`core-image` media props.
|
|
122
|
+
|
|
123
|
+
Use `type: svg` for the SVG asset picker. Add `kind: icon` for the icon picker or `kind: shape` for the shape picker; `kind` defaults to `icon`. Do not use `type: icon`.
|
|
124
|
+
|
|
125
|
+
Before authoring Liquid access paths, compare `fields.yaml`, `recipe.json`, and `seeds.json` handles. Repeater handles must match exactly. If the schema uses `subcollections.information`, do not loop over `subcollections.items`.
|
|
126
|
+
|
|
127
|
+
## CLI Flow
|
|
128
|
+
|
|
129
|
+
When the type is known, inspect shipped source-pattern metadata before creating files:
|
|
130
|
+
|
|
131
|
+
```bash
|
|
132
|
+
ddev wp bb template patterns --type=<type>
|
|
133
|
+
```
|
|
134
|
+
|
|
135
|
+
If a suitable variant exists, scaffold from it:
|
|
136
|
+
|
|
137
|
+
```bash
|
|
138
|
+
ddev wp bb template scaffold --slug=<slug> --type=<type> --variant=<variant>
|
|
139
|
+
```
|
|
140
|
+
|
|
141
|
+
This copies a whitelabel source pattern, compiles DSL to block JSON/AST artifacts, writes the runtime `template.liquid`, and creates the package contract files.
|
|
142
|
+
|
|
143
|
+
If no pattern fits, start with the generic file scaffold:
|
|
144
|
+
|
|
145
|
+
```bash
|
|
146
|
+
ddev wp bb template scaffold --slug=<slug> --type=<type>
|
|
147
|
+
```
|
|
148
|
+
|
|
149
|
+
Then edit the generated files to match the user's request. Pattern variants are starting points, not final design decisions.
|
|
150
|
+
|
|
151
|
+
Before database registration, run:
|
|
152
|
+
|
|
153
|
+
```bash
|
|
154
|
+
ddev wp bb doctor
|
|
155
|
+
```
|
|
156
|
+
|
|
157
|
+
If doctor reports missing BlockBite tables or columns, stop and report the exact missing tables/columns to the user. Do not add, remove, alter, or migrate database tables automatically.
|
|
158
|
+
|
|
159
|
+
Treat SQL warnings plus a success message as failure until `wp bb doctor` passes and the target rows are verified.
|
|
160
|
+
|
|
161
|
+
After writing files and passing doctor, use the site CLI from the WordPress project root:
|
|
162
|
+
|
|
163
|
+
```bash
|
|
164
|
+
ddev wp bb dynamic-template create --slug=<slug>
|
|
165
|
+
ddev wp bb dynamic-content create --slug=<slug> --source-type=<block_instance|post_type|collection|single|hook> --fields=<template-or-source-folder>/fields.yaml
|
|
166
|
+
ddev wp bb source import-seeds --slug=<slug> --file=<workspace>/templates/<slug>/seeds.json
|
|
167
|
+
```
|
|
168
|
+
|
|
169
|
+
For regular inserted sections, use `--source-type=block_instance --fields=<slug>/fields.yaml`.
|
|
170
|
+
For a CPT-bound template or sidebar island, use `--source-type=post_type` and the CPT source schema, for example `--fields=work/fields.yaml` when the current `work` post is the source of truth.
|
|
171
|
+
|
|
172
|
+
Use the absolute workspace seed path. Do not assume `wp-content/blockbite/...`; Bedrock projects usually use `web/app/blockbite/...`.
|
|
173
|
+
|
|
174
|
+
If rows already exist, use `dynamic-template update` and `dynamic-content sync`. If existence is uncertain, prefer the command error over guessing: run create, and if it reports an existing slug, switch to update/sync.
|
|
175
|
+
|
|
176
|
+
`wp bb dynamic-template package --slug=<slug>` exists, but it only generates `recipe.json`, `fields.yaml`, and `seeds.json` after `template.liquid` already exists. It is not a full package scaffold.
|
|
177
|
+
|
|
178
|
+
When the template package lives in a nested folder or the registered slug does not match the filesystem view, register or repoint the full view path separately:
|
|
179
|
+
|
|
180
|
+
```bash
|
|
181
|
+
ddev wp bb dynamic-template path --slug=<slug> --view=templates/v1/<slug>/template.liquid
|
|
182
|
+
```
|
|
183
|
+
|
|
184
|
+
`dynamic-template path`, `dynamic-template create/update`, and `dynamic-content create/sync` are separate operations.
|
|
185
|
+
|
|
186
|
+
For complex islands, inspect one real live payload before finalizing Liquid paths. Verify whether data is direct (`fields.client`, `subcollections.information`) or relation-nested (`fields.work.source.work.client`) and remove any stale preassigned `work_*` variables that duplicate direct bindings.
|
|
187
|
+
|
|
188
|
+
## Alpine And CDN
|
|
189
|
+
|
|
190
|
+
If the template needs interactivity, use Alpine attributes directly. For collapsible panels use:
|
|
191
|
+
|
|
192
|
+
```html
|
|
193
|
+
x-show="..." x-collapse x-cloak
|
|
194
|
+
```
|
|
195
|
+
|
|
196
|
+
Assume Alpine and configured CDN libraries are already loaded unless verification shows otherwise.
|
|
197
|
+
|
|
198
|
+
For frontend runtime errors, open the current frontend page with
|
|
199
|
+
`#blockbite-debug-panel`, inspect the Client JS chapter, and read
|
|
200
|
+
`window.BlockBiteDebug?.errors` in the browser console before guessing from
|
|
201
|
+
bundled stack traces.
|
|
202
|
+
|
|
203
|
+
## Shared Styles Boundary
|
|
204
|
+
|
|
205
|
+
Do not put template-specific styling or global `html`, `body`, `button`,
|
|
206
|
+
`input`, typography, background, or reset rules in
|
|
207
|
+
`<workspace>/app/styles-shared/*.css`.
|
|
208
|
+
|
|
209
|
+
`app/styles-shared/shared.css` is bundled into `app.bundle.css` and loaded in
|
|
210
|
+
block editor previews as well as the frontend. Use it only for intentionally
|
|
211
|
+
shared, scoped component or template-family classes. Put frontend-only global
|
|
212
|
+
page styles in `app/styles-app/app.css` or the theme stylesheet. Put island
|
|
213
|
+
styles in `<workspace>/templates/<slug>/style.css`.
|
|
214
|
+
|
|
215
|
+
## Shared Block Styles
|
|
216
|
+
|
|
217
|
+
If the template needs a reusable visual variant for a block, especially `bb/button`, check `<workspace>/blocks/<namespace>/<block>` before inlining long Tailwind classes. Prefer the `block-style` skill/workflow for shared styles, then use the style from the template.
|
|
218
|
+
|
|
219
|
+
## Finish
|
|
220
|
+
|
|
221
|
+
Verify JSON files with `jq`, inspect generated files, run the relevant WP-CLI commands, and report template slug, template id, content id, and source import result.
|
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: template-preview
|
|
3
|
+
description: Create a seed-backed aggregate BlockBite dynamic-template preview package that renders multiple workspace templates in one Liquid view without creating a WordPress page or relying on separate blockbite_preview URLs.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Template Preview
|
|
7
|
+
|
|
8
|
+
Create or update an aggregate preview package for reviewing several dynamic templates together.
|
|
9
|
+
|
|
10
|
+
Use this when the user wants a preview page with multiple created templates, a homepage-section stack, or a quick review surface that avoids assembling `bb/dynamic-template` blocks in WordPress content.
|
|
11
|
+
|
|
12
|
+
If the preview source is a document blueprint, use the `document-blueprint` skill and the `bb_document_blueprint` filter instead of manually listing child templates.
|
|
13
|
+
For BlockBite-specific Tailwind utilities such as `area-[...]`, `grid-area-[...]`, and `children:*`, read `../references/tailwind-utilities.md` when it exists.
|
|
14
|
+
|
|
15
|
+
## Contract
|
|
16
|
+
|
|
17
|
+
- Do not create or update a WordPress page for the preview.
|
|
18
|
+
- Do not register the preview package as a dynamic-template row unless the user explicitly asks.
|
|
19
|
+
- Prefer an aggregate preview package over separate `blockbite_preview` links for multi-section review.
|
|
20
|
+
- Render each child template with seed data only.
|
|
21
|
+
- Validate referenced template packages before handing over the preview view.
|
|
22
|
+
|
|
23
|
+
## Preview Package
|
|
24
|
+
|
|
25
|
+
Create the preview under:
|
|
26
|
+
|
|
27
|
+
```text
|
|
28
|
+
<workspace>/templates/preview-<slug>/
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
Required files:
|
|
32
|
+
|
|
33
|
+
- `template.liquid`
|
|
34
|
+
- `fields.yaml`
|
|
35
|
+
- `seeds.json`
|
|
36
|
+
- `recipe.json`
|
|
37
|
+
- `manifest.json`
|
|
38
|
+
- `style.css`
|
|
39
|
+
- `module.ts`
|
|
40
|
+
|
|
41
|
+
The metadata files can be minimal because preview content comes from referenced child templates:
|
|
42
|
+
|
|
43
|
+
```yaml
|
|
44
|
+
version: 1
|
|
45
|
+
|
|
46
|
+
fields: {}
|
|
47
|
+
subcollections: {}
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
```json
|
|
51
|
+
{
|
|
52
|
+
"fields": {},
|
|
53
|
+
"subcollections": {}
|
|
54
|
+
}
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
Use `template.liquid` as the aggregate view. Render child templates with the `bb_template_preview` filter so each child gets its own `seeds.json` context:
|
|
58
|
+
|
|
59
|
+
```liquid
|
|
60
|
+
<main class="min-h-screen bg-white text-neutral-950" data-bb-preview="home">
|
|
61
|
+
{{ 'templates/nav/template.liquid' | bb_template_preview | raw }}
|
|
62
|
+
{{ 'templates/home-hero/template.liquid' | bb_template_preview | raw }}
|
|
63
|
+
{{ 'templates/services/template.liquid' | bb_template_preview | raw }}
|
|
64
|
+
{{ 'templates/footer/template.liquid' | bb_template_preview | raw }}
|
|
65
|
+
</main>
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
Do not use plain `{% render 'child/template.liquid' %}` for standard dynamic-template packages. It inherits the parent preview context, so `seeds.json | bb_seed` can resolve the preview package seed instead of the child template seed.
|
|
69
|
+
|
|
70
|
+
For document blueprint previews, use the blueprint shortcut instead:
|
|
71
|
+
|
|
72
|
+
```liquid
|
|
73
|
+
<main class="bb-document-blueprint-preview" data-bb-document-blueprint-preview="design-to-production">
|
|
74
|
+
{{ "design-to-production" | bb_document_blueprint | raw }}
|
|
75
|
+
</main>
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
This renders sections from `document-blueprints/<slug>/blueprint.json` with their blueprint seed files and does not write to WordPress content or dynamic content sources.
|
|
79
|
+
|
|
80
|
+
## Workflow
|
|
81
|
+
|
|
82
|
+
1. Resolve the template slugs and intended order from the chat or existing homepage/island notes.
|
|
83
|
+
2. Confirm each referenced view exists, usually `templates/<slug>/template.liquid`.
|
|
84
|
+
3. Run or request the normal workspace validation:
|
|
85
|
+
|
|
86
|
+
```bash
|
|
87
|
+
ddev wp bb validate
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
4. Create or update `templates/preview-<slug>/template.liquid` with one `bb_template_preview` call per child.
|
|
91
|
+
5. Keep preview-specific CSS minimal. Prefer Tailwind classes in `template.liquid`; use `style.css` only for preview-only framing or temporary diagnostics.
|
|
92
|
+
6. If scripts or styles changed in child templates, follow the reported build mode and run the relevant build before visual review.
|
|
93
|
+
|
|
94
|
+
## Preview View
|
|
95
|
+
|
|
96
|
+
Use the file-backed view when a URL is needed:
|
|
97
|
+
|
|
98
|
+
```text
|
|
99
|
+
/?blockbite_preview=1&template=true&view=templates/preview-<slug>/template.liquid
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
If that route is unreliable in the current environment, still leave the aggregate package in place and report the view path:
|
|
103
|
+
|
|
104
|
+
```text
|
|
105
|
+
templates/preview-<slug>/template.liquid
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
## Finish
|
|
109
|
+
|
|
110
|
+
Report:
|
|
111
|
+
|
|
112
|
+
- preview package path
|
|
113
|
+
- referenced template views in render order
|
|
114
|
+
- validation/build commands run
|
|
115
|
+
- any referenced templates that were missing or failed to render
|