Studio Code: widen the default content width and use wide layouts for grids

[youknowriad]

Related issues

• Related to sites built by Studio Code rendering their content in a column narrower than intended.

How AI was used in this PR

Claude Code investigated where the agent's content width comes from, drafted the skill wording and the default change, and ran six FamilyFarm site builds (DeepSeek V4 Flash) to check the outcome. The author reviewed the wording and picked the width ranges and the new defaults.

Proposed Changes

Sites built by Studio Code tended to feel narrow. Two things caused it:

• scaffold_theme set a 720px content width, and the agent was told to "retune" it without any guidance on what a suitable value looks like, so it usually left it alone.
• The block-content skill only described full-bleed and constrained patterns, and never mentioned align: "wide". Card grids, feature rows, and galleries were squeezed into the reading column (about 220px per column in a three-column row) even though wideSize was declared.

This PR makes three small changes:

• The scaffolded theme now defaults to a 1000px content width and a 1280px wide width, which suits the marketing and business pages the agent builds most often.
• The block-content skill gains a "full-bleed section, wide inner content" pattern: columns, grids, and galleries inside a section go align: "wide" so they use the wide width, and the reading column is reserved for text-only blocks.
• The visual-design skill tells the agent how to tune the widths per site type: keep the defaults for marketing pages, narrow to 700–860px for editorial reading columns, and keep wideSize at 1200–1400px.

User impact: new sites get full-width card rows and a wider text column out of the box, and the agent varies the width per site type instead of always shipping the same 720px column.

Testing Instructions

• npm run cli:build, then run studio code with a one-page site prompt such as: Build a farm one page site, known for its animals visits and its local products. The farm is called "FamilyFarm". Use elegant colors and design.
• Check the generated theme.json: settings.layout.contentSize should be around 1000px (not 720px) and wideSize 1200–1400px.
• Check the homepage: multi-column card rows should carry the alignwide class and span the wide width rather than the reading column.
• Six test builds with DeepSeek V4 Flash all used align: "wide" for their grids and chose content widths between 720px and 1080px before the default change and 920px to 1080px after it.

Pre-merge Checklist

• Have you checked for TypeScript, React or other console errors?

🤖 Generated with Claude Code

[wpmobilebot]

📊 Performance Test Results

Comparing bcc1b89 vs trunk

app-size

Metric	trunk	bcc1b89	Diff	Change
App Size (Mac)	1435.61 MB	1435.61 MB	+0.00 MB	⚪ 0.0%

site-editor

Metric	trunk	bcc1b89	Diff	Change
load	1201 ms	1189 ms	12 ms	⚪ 0.0%

site-startup

Metric	trunk	bcc1b89	Diff	Change
siteCreation	7528 ms	7526 ms	2 ms	⚪ 0.0%
siteStartup	3377 ms	3367 ms	10 ms	⚪ 0.0%

---

Results are median values from multiple test runs.

Legend: 🟢 Improvement (faster) | 🔴 Regression (slower) | ⚪ No change (<50ms diff)