Pad main in scaffolded themes so WooCommerce default templates clear the header and footer

[youknowriad]

Related issues

• None

How AI was used in this PR

Claude Code diagnosed the issue on two agent-built shop sites (measured the rendered gaps in a browser), proposed the fix, and applied it. The selector was corrected after live-testing against WooCommerce's single-product template. Reviewed by the author.

Proposed Changes

Shops built by Studio Code render the WooCommerce pages (shop, product, cart, checkout, my account) with no vertical space between the header and the content, and between the content and the footer, while the site's own pages look right.

The cause is a contract the scaffolded theme sets up but only half honours. scaffold_theme zeroes WordPress's root block gap (.wp-site-blocks > * + *) so full-bleed sections can butt edge to edge, and agent-authored pages carry their own padding. WooCommerce's default block templates render a bare main and rely on that root gap for breathing room, so they collapse against the header and footer. The agent has been patching this per page with body-class rules during polish, and on one site it wrote its own archive-product.html without header or footer parts.

This PR keeps WooCommerce's default templates in play and fixes the theme side instead:

• The scaffolded style.css pairs the root-gap reset with vertical padding on main, using the theme's spacing presets. Any template the theme does not author (WooCommerce today, other plugins tomorrow) gets its space back with no plugin-specific rules. The page-no-title template opts out with an is-flush class, since its full-bleed sections own the rhythm.
• The plugin-recommendations skill tells the agent to rely on WooCommerce's default templates when possible and to keep header and footer parts if it ever does override one.
• The block-content and visual-polish skills get one-clause additions: keep both rules together, and check the space around main on Woo pages.

User impact: newly scaffolded shop sites get consistent spacing on every WooCommerce page without per-page hacks. Existing sites are unchanged.

Testing Instructions

• npm test -- apps/cli/ai/tests/tools.test.ts -t scaffold
• Build a shop with Studio Code on a fresh site (custom theme via scaffold_theme, WooCommerce installed) and open Shop, a product, Cart and Checkout. The content should sit clear of the header and footer on each page. A page assigned the "Page (no title)" template should still start flush under the header.
• Agent evals were not run for this change; the theme and shop cases are the ones affected if someone wants to run them.

Pre-merge Checklist

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

🤖 Generated with Claude Code

[wpmobilebot]

📊 Performance Test Results

Comparing d82dce5 vs trunk

app-size

Metric	trunk	d82dce5	Diff	Change
App Size (Mac)	1435.62 MB	1435.62 MB	+0.00 MB	⚪ 0.0%

site-editor

Metric	trunk	d82dce5	Diff	Change
load	1196 ms	1208 ms	+12 ms	⚪ 0.0%

site-startup

Metric	trunk	d82dce5	Diff	Change
siteCreation	7535 ms	7521 ms	14 ms	⚪ 0.0%
siteStartup	3364 ms	3374 ms	+10 ms	⚪ 0.0%

---

Results are median values from multiple test runs.

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