[codex] Add HTML-to-blocks theme generation workflow#3846
Draft
draganescu wants to merge 4 commits into
Draft
Conversation
…s to Studio AI Ports a 3-skill, 18-tool HTML-design -> block-theme pipeline into the Studio agent: self-contained SKILL.md runbooks (html-to-blocks, blocks-to-theme, visual-fidelity) plus native defineTool wrappers that drive a vendored Node engine as a child process (the engine's @wordpress/blocks + playwright deps stay out of the Vite bundle). Engine excluded from tsc/eslint; deps symlinked. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
During the first end-to-end studio code run the agent could not author the scaffold_block_theme args (parts/templates/pages, tokenMap.custom, media paths) against the tool's loose JSON schema, hitting cryptic TypeErrors. Add upfront arg validation with actionable messages and the expected shapes, default tokenMap.custom, resolve media from mockup/ with skip-and-record on missing files, and turn page-resolution failures into errors that list valid page keys. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
Comment on lines
+54
to
+56
| return String(value || '') | ||
| .replace(/<script[\s\S]*?<\/script>/gi, '') | ||
| .replace(/<style[\s\S]*?<\/style>/gi, '') |
Comment on lines
+54
to
+55
| return String(value || '') | ||
| .replace(/<script[\s\S]*?<\/script>/gi, '') |
|
|
||
| export function cleanText(value) { | ||
| return String(value || '') | ||
| .replace(/<script[\s\S]*?<\/script>/gi, '') |
| for (const [label, text] of themeTexts) { | ||
| // www.w3.org appears as the xmlns of inline data-URI SVGs — a namespace | ||
| // identifier, never fetched | ||
| const remotes = (text.match(/https?:\/\/[^"')\s]+/g) || []).filter((u) => !u.includes('schemas.wp.org') && !u.includes('gnu.org') && !u.includes('www.w3.org')); |
| for (const [label, text] of themeTexts) { | ||
| // www.w3.org appears as the xmlns of inline data-URI SVGs — a namespace | ||
| // identifier, never fetched | ||
| const remotes = (text.match(/https?:\/\/[^"')\s]+/g) || []).filter((u) => !u.includes('schemas.wp.org') && !u.includes('gnu.org') && !u.includes('www.w3.org')); |
| for (const [label, text] of themeTexts) { | ||
| // www.w3.org appears as the xmlns of inline data-URI SVGs — a namespace | ||
| // identifier, never fetched | ||
| const remotes = (text.match(/https?:\/\/[^"')\s]+/g) || []).filter((u) => !u.includes('schemas.wp.org') && !u.includes('gnu.org') && !u.includes('www.w3.org')); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Related issues
How AI was used in this PR
AI was used to build and iterate on the proof-of-concept Studio AI workflow, including the html-to-blocks engine integration, block-theme conversion skills, and follow-up routing fixes that make Studio load the new workflow from natural-language prompts and slash commands. The resulting code and generated site behavior were reviewed locally with focused tests and typechecking.
Proposed Changes
Testing Instructions
24.15.0from.nvmrc.npx eslint --fix apps/cli/ai/system-prompt.ts tools/common/ai/slash-commands.ts.npm test -- apps/cli/ai/tests/system-prompt.test.ts apps/studio/src/components/studio-code-session/composer/slash-autocomplete.test.ts.npm run typecheck.html-to-blocks, builds a workspace, then loadsblocks-to-themebefore installing the final site.Pre-merge Checklist