[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-automattic-block-creator":3,"mdc--d720jf-key":36,"related-org-automattic-block-creator":1046,"related-repo-automattic-block-creator":1229},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":11,"stars":25,"repoUrl":26,"updatedAt":27,"license":28,"forks":29,"topics":30,"repo":31,"sourceUrl":34,"mdContent":35},"block-creator","create WordPress Gutenberg blocks","Create, edit, build, and review a custom WordPress Gutenberg block plugin inside a Studio-backed site.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},"automattic","Automattic","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Fautomattic.png",[12,16,19,22],{"name":13,"slug":14,"type":15},"WordPress","wordpress","tag",{"name":17,"slug":18,"type":15},"Plugin Development","plugin-development",{"name":20,"slug":21,"type":15},"Block Editor","block-editor",{"name":23,"slug":24,"type":15},"Frontend","frontend",7,"https:\u002F\u002Fgithub.com\u002FAutomattic\u002Fbuild-with-wordpress","2026-04-06T18:03:30.309512",null,1,[],{"repoUrl":26,"stars":25,"forks":29,"topics":32,"description":33},[],"Build and manage WordPress websites and applications on your chosen AI surface. ","https:\u002F\u002Fgithub.com\u002FAutomattic\u002Fbuild-with-wordpress\u002Ftree\u002FHEAD\u002Fskills\u002Fblock-creator","---\nname: block-creator\ndescription: Create, edit, build, and review a custom WordPress Gutenberg block plugin inside a Studio-backed site.\n---\n\n# Block Creator\n\nUse this skill when the user wants to create or modify a custom Gutenberg block inside a local Studio site.\n\n## Ownership\n\nThis skill is the single entry point for custom block work. It owns:\n\n- block plugin workflow inside a Studio site\n- structural decisions such as static versus dynamic blocks\n- implementation rules for block plugin code\n\nUse `studio` for review and iteration after the block is built into a site.\n\n## Workflow\n\n### 1. Verify Studio readiness\n\nUse `studio` so the selected site can be managed and reviewed with Studio tools.\n\n### 2. Resolve the target site\n\nUse Studio tools to:\n\n- list available sites\n- select or confirm the working site\n- start it if needed\n- fetch the site path and URL\n\nOnce you begin the actual block implementation workflow, call `record_workflow_event` with `workflow: \"block-build\"` and `stage: \"started\"`.\n\n### 3. Understand the request\n\nIf the request is vague, clarify:\n\n- what the block should display\n- whether it needs live data\n- whether it needs frontend interaction\n\n### 4. Decide static or dynamic\n\nDefault to a static block unless the user clearly needs server-rendered data.\n\nUse a static block when the content can be serialized at edit time.\nUse a dynamic block when the frontend output depends on server-side data or computation.\n\nKeep the implementation consistent with standard Gutenberg block conventions.\n\n### 5. Generate identifiers\n\nCreate:\n\n- a human block name in Title Case\n- a kebab-case slug\n- a registry name like `create-block\u002F{slug}` unless the project already has a namespace\n\n### 6. Scaffold the plugin in the selected Studio site\n\nCreate the plugin directory here:\n\n```text\n\u003Csite-path>\u002Fwp-content\u002Fplugins\u002F\u003Cslug>\u002F\n\u003Csite-path>\u002Fwp-content\u002Fplugins\u002F\u003Cslug>\u002Fsrc\u002F\n```\n\nThen write:\n\n- `\u003Cslug>.php`\n- `package.json`\n- `readme.txt`\n- `src\u002Fblock.json`\n- `src\u002Findex.js`\n- `src\u002Fedit.js`\n- `src\u002Fsave.js`\n- `src\u002Frender.php`\n- `src\u002Fview.js`\n- `src\u002Fstyle.scss`\n- `src\u002Feditor.scss`\n\nAfter the build, compiled assets live in `build\u002F`.\n\nUse the selected Studio site as the root for all block-related files.\n\n## Core rules\n\n### 1. Keep `view.js` plain JavaScript\n\n`view.js` runs on the frontend.\n\n- no JSX\n- no React\n- no imports from `@wordpress\u002F*`\n- use DOM APIs directly\n\n### 2. Match editor and frontend output\n\nThe editor preview should look and behave as close to the frontend as possible.\n\n- use matching class names\n- use real block UI, not placeholder boxes unless absolutely necessary\n- keep style rules shared when possible\n\n### 3. Be proactive with controls\n\nPrefer controls the editor already provides when they fit the request.\n\nPrefer components such as:\n\n- `InspectorControls`\n- `BlockControls`\n- `RichText`\n- `MediaUpload`\n- `ToggleControl`, `RangeControl`, `SelectControl`, `TextControl`\n\nPrefer `supports` in `block.json` when WordPress can provide built-in UI for color, spacing, or typography.\n\n## Core file guidance\n\n### package.json\n\nUse `@wordpress\u002Fscripts` for build tooling. Keep the package minimal and aligned with the block's actual needs.\n\nInclude build scripts that support the current task rather than copying a large default scaffold.\n\n### block.json\n\nKeep metadata valid and minimal. Use only the fields the block actually needs.\n\n### PHP plugin bootstrap\n\nThe plugin main file should:\n\n- guard direct access with `if ( ! defined( 'ABSPATH' ) ) { exit; }`\n- wrap function definitions with `function_exists`\n- register the block from `build\u002F`\n\n## HTML rule\n\nEach block should render a single wrapper element. Do not accidentally nest identical wrapper tags.\n\n## Defaults\n\nIf unsure:\n\n- make it static\n- use `design` or `widgets` category depending on the block\n- include editor controls for the attributes the user will obviously want to change\n\n## PHP standards\n\n- no closing `?>` at end of file\n- guard functions with `function_exists`\n- use escaping like `esc_html()`, `esc_attr()`, or `wp_kses_post()` where appropriate\n\n## Studio workflow\n\nInside the block plugin directory, prefer:\n\n```bash\npnpm install\npnpm exec wp-scripts build\n```\n\nIf the generated block package is being used outside this repo and only npm is available, `npm install && npx wp-scripts build` is fine too.\n\nAfter a successful build:\n\n- activate the plugin with `wp_cli`\n- insert the block into a test page or post with `wp_cli`\n- follow the review and iteration workflow in `studio`\n- call `record_workflow_event` with `workflow: \"block-build\"` and `stage: \"completed\"`\n\nWhen editing an existing block:\n\n1. locate the block project in the selected site's `wp-content\u002Fplugins\u002F`\n2. identify affected files based on the change request\n3. update only the necessary files\n4. rebuild\n5. re-run activation or page setup steps if needed\n6. follow the review and iteration workflow in `studio`\n\n## Error recovery\n\nWhen a build fails:\n\n1. read the full error output\n2. identify the exact file and issue\n3. fix only the relevant file\n4. rebuild without reinstalling packages\n5. retry up to 3 times before escalating to the user\n",{"data":37,"body":38},{"name":4,"description":6},{"type":39,"children":40},"root",[41,49,55,62,67,87,101,107,114,125,131,136,159,188,194,199,217,223,228,233,238,244,249,275,281,286,298,303,405,417,422,428,442,452,481,487,492,510,516,521,526,596,617,623,628,640,645,650,655,661,666,701,707,712,718,723,757,763,817,823,828,877,890,895,952,957,1001,1007,1012,1040],{"type":42,"tag":43,"props":44,"children":45},"element","h1",{"id":4},[46],{"type":47,"value":48},"text","Block Creator",{"type":42,"tag":50,"props":51,"children":52},"p",{},[53],{"type":47,"value":54},"Use this skill when the user wants to create or modify a custom Gutenberg block inside a local Studio site.",{"type":42,"tag":56,"props":57,"children":59},"h2",{"id":58},"ownership",[60],{"type":47,"value":61},"Ownership",{"type":42,"tag":50,"props":63,"children":64},{},[65],{"type":47,"value":66},"This skill is the single entry point for custom block work. It owns:",{"type":42,"tag":68,"props":69,"children":70},"ul",{},[71,77,82],{"type":42,"tag":72,"props":73,"children":74},"li",{},[75],{"type":47,"value":76},"block plugin workflow inside a Studio site",{"type":42,"tag":72,"props":78,"children":79},{},[80],{"type":47,"value":81},"structural decisions such as static versus dynamic blocks",{"type":42,"tag":72,"props":83,"children":84},{},[85],{"type":47,"value":86},"implementation rules for block plugin code",{"type":42,"tag":50,"props":88,"children":89},{},[90,92,99],{"type":47,"value":91},"Use ",{"type":42,"tag":93,"props":94,"children":96},"code",{"className":95},[],[97],{"type":47,"value":98},"studio",{"type":47,"value":100}," for review and iteration after the block is built into a site.",{"type":42,"tag":56,"props":102,"children":104},{"id":103},"workflow",[105],{"type":47,"value":106},"Workflow",{"type":42,"tag":108,"props":109,"children":111},"h3",{"id":110},"_1-verify-studio-readiness",[112],{"type":47,"value":113},"1. Verify Studio readiness",{"type":42,"tag":50,"props":115,"children":116},{},[117,118,123],{"type":47,"value":91},{"type":42,"tag":93,"props":119,"children":121},{"className":120},[],[122],{"type":47,"value":98},{"type":47,"value":124}," so the selected site can be managed and reviewed with Studio tools.",{"type":42,"tag":108,"props":126,"children":128},{"id":127},"_2-resolve-the-target-site",[129],{"type":47,"value":130},"2. Resolve the target site",{"type":42,"tag":50,"props":132,"children":133},{},[134],{"type":47,"value":135},"Use Studio tools to:",{"type":42,"tag":68,"props":137,"children":138},{},[139,144,149,154],{"type":42,"tag":72,"props":140,"children":141},{},[142],{"type":47,"value":143},"list available sites",{"type":42,"tag":72,"props":145,"children":146},{},[147],{"type":47,"value":148},"select or confirm the working site",{"type":42,"tag":72,"props":150,"children":151},{},[152],{"type":47,"value":153},"start it if needed",{"type":42,"tag":72,"props":155,"children":156},{},[157],{"type":47,"value":158},"fetch the site path and URL",{"type":42,"tag":50,"props":160,"children":161},{},[162,164,170,172,178,180,186],{"type":47,"value":163},"Once you begin the actual block implementation workflow, call ",{"type":42,"tag":93,"props":165,"children":167},{"className":166},[],[168],{"type":47,"value":169},"record_workflow_event",{"type":47,"value":171}," with ",{"type":42,"tag":93,"props":173,"children":175},{"className":174},[],[176],{"type":47,"value":177},"workflow: \"block-build\"",{"type":47,"value":179}," and ",{"type":42,"tag":93,"props":181,"children":183},{"className":182},[],[184],{"type":47,"value":185},"stage: \"started\"",{"type":47,"value":187},".",{"type":42,"tag":108,"props":189,"children":191},{"id":190},"_3-understand-the-request",[192],{"type":47,"value":193},"3. Understand the request",{"type":42,"tag":50,"props":195,"children":196},{},[197],{"type":47,"value":198},"If the request is vague, clarify:",{"type":42,"tag":68,"props":200,"children":201},{},[202,207,212],{"type":42,"tag":72,"props":203,"children":204},{},[205],{"type":47,"value":206},"what the block should display",{"type":42,"tag":72,"props":208,"children":209},{},[210],{"type":47,"value":211},"whether it needs live data",{"type":42,"tag":72,"props":213,"children":214},{},[215],{"type":47,"value":216},"whether it needs frontend interaction",{"type":42,"tag":108,"props":218,"children":220},{"id":219},"_4-decide-static-or-dynamic",[221],{"type":47,"value":222},"4. Decide static or dynamic",{"type":42,"tag":50,"props":224,"children":225},{},[226],{"type":47,"value":227},"Default to a static block unless the user clearly needs server-rendered data.",{"type":42,"tag":50,"props":229,"children":230},{},[231],{"type":47,"value":232},"Use a static block when the content can be serialized at edit time.\nUse a dynamic block when the frontend output depends on server-side data or computation.",{"type":42,"tag":50,"props":234,"children":235},{},[236],{"type":47,"value":237},"Keep the implementation consistent with standard Gutenberg block conventions.",{"type":42,"tag":108,"props":239,"children":241},{"id":240},"_5-generate-identifiers",[242],{"type":47,"value":243},"5. Generate identifiers",{"type":42,"tag":50,"props":245,"children":246},{},[247],{"type":47,"value":248},"Create:",{"type":42,"tag":68,"props":250,"children":251},{},[252,257,262],{"type":42,"tag":72,"props":253,"children":254},{},[255],{"type":47,"value":256},"a human block name in Title Case",{"type":42,"tag":72,"props":258,"children":259},{},[260],{"type":47,"value":261},"a kebab-case slug",{"type":42,"tag":72,"props":263,"children":264},{},[265,267,273],{"type":47,"value":266},"a registry name like ",{"type":42,"tag":93,"props":268,"children":270},{"className":269},[],[271],{"type":47,"value":272},"create-block\u002F{slug}",{"type":47,"value":274}," unless the project already has a namespace",{"type":42,"tag":108,"props":276,"children":278},{"id":277},"_6-scaffold-the-plugin-in-the-selected-studio-site",[279],{"type":47,"value":280},"6. Scaffold the plugin in the selected Studio site",{"type":42,"tag":50,"props":282,"children":283},{},[284],{"type":47,"value":285},"Create the plugin directory here:",{"type":42,"tag":287,"props":288,"children":293},"pre",{"className":289,"code":291,"language":47,"meta":292},[290],"language-text","\u003Csite-path>\u002Fwp-content\u002Fplugins\u002F\u003Cslug>\u002F\n\u003Csite-path>\u002Fwp-content\u002Fplugins\u002F\u003Cslug>\u002Fsrc\u002F\n","",[294],{"type":42,"tag":93,"props":295,"children":296},{"__ignoreMap":292},[297],{"type":47,"value":291},{"type":42,"tag":50,"props":299,"children":300},{},[301],{"type":47,"value":302},"Then write:",{"type":42,"tag":68,"props":304,"children":305},{},[306,315,324,333,342,351,360,369,378,387,396],{"type":42,"tag":72,"props":307,"children":308},{},[309],{"type":42,"tag":93,"props":310,"children":312},{"className":311},[],[313],{"type":47,"value":314},"\u003Cslug>.php",{"type":42,"tag":72,"props":316,"children":317},{},[318],{"type":42,"tag":93,"props":319,"children":321},{"className":320},[],[322],{"type":47,"value":323},"package.json",{"type":42,"tag":72,"props":325,"children":326},{},[327],{"type":42,"tag":93,"props":328,"children":330},{"className":329},[],[331],{"type":47,"value":332},"readme.txt",{"type":42,"tag":72,"props":334,"children":335},{},[336],{"type":42,"tag":93,"props":337,"children":339},{"className":338},[],[340],{"type":47,"value":341},"src\u002Fblock.json",{"type":42,"tag":72,"props":343,"children":344},{},[345],{"type":42,"tag":93,"props":346,"children":348},{"className":347},[],[349],{"type":47,"value":350},"src\u002Findex.js",{"type":42,"tag":72,"props":352,"children":353},{},[354],{"type":42,"tag":93,"props":355,"children":357},{"className":356},[],[358],{"type":47,"value":359},"src\u002Fedit.js",{"type":42,"tag":72,"props":361,"children":362},{},[363],{"type":42,"tag":93,"props":364,"children":366},{"className":365},[],[367],{"type":47,"value":368},"src\u002Fsave.js",{"type":42,"tag":72,"props":370,"children":371},{},[372],{"type":42,"tag":93,"props":373,"children":375},{"className":374},[],[376],{"type":47,"value":377},"src\u002Frender.php",{"type":42,"tag":72,"props":379,"children":380},{},[381],{"type":42,"tag":93,"props":382,"children":384},{"className":383},[],[385],{"type":47,"value":386},"src\u002Fview.js",{"type":42,"tag":72,"props":388,"children":389},{},[390],{"type":42,"tag":93,"props":391,"children":393},{"className":392},[],[394],{"type":47,"value":395},"src\u002Fstyle.scss",{"type":42,"tag":72,"props":397,"children":398},{},[399],{"type":42,"tag":93,"props":400,"children":402},{"className":401},[],[403],{"type":47,"value":404},"src\u002Feditor.scss",{"type":42,"tag":50,"props":406,"children":407},{},[408,410,416],{"type":47,"value":409},"After the build, compiled assets live in ",{"type":42,"tag":93,"props":411,"children":413},{"className":412},[],[414],{"type":47,"value":415},"build\u002F",{"type":47,"value":187},{"type":42,"tag":50,"props":418,"children":419},{},[420],{"type":47,"value":421},"Use the selected Studio site as the root for all block-related files.",{"type":42,"tag":56,"props":423,"children":425},{"id":424},"core-rules",[426],{"type":47,"value":427},"Core rules",{"type":42,"tag":108,"props":429,"children":431},{"id":430},"_1-keep-viewjs-plain-javascript",[432,434,440],{"type":47,"value":433},"1. Keep ",{"type":42,"tag":93,"props":435,"children":437},{"className":436},[],[438],{"type":47,"value":439},"view.js",{"type":47,"value":441}," plain JavaScript",{"type":42,"tag":50,"props":443,"children":444},{},[445,450],{"type":42,"tag":93,"props":446,"children":448},{"className":447},[],[449],{"type":47,"value":439},{"type":47,"value":451}," runs on the frontend.",{"type":42,"tag":68,"props":453,"children":454},{},[455,460,465,476],{"type":42,"tag":72,"props":456,"children":457},{},[458],{"type":47,"value":459},"no JSX",{"type":42,"tag":72,"props":461,"children":462},{},[463],{"type":47,"value":464},"no React",{"type":42,"tag":72,"props":466,"children":467},{},[468,470],{"type":47,"value":469},"no imports from ",{"type":42,"tag":93,"props":471,"children":473},{"className":472},[],[474],{"type":47,"value":475},"@wordpress\u002F*",{"type":42,"tag":72,"props":477,"children":478},{},[479],{"type":47,"value":480},"use DOM APIs directly",{"type":42,"tag":108,"props":482,"children":484},{"id":483},"_2-match-editor-and-frontend-output",[485],{"type":47,"value":486},"2. Match editor and frontend output",{"type":42,"tag":50,"props":488,"children":489},{},[490],{"type":47,"value":491},"The editor preview should look and behave as close to the frontend as possible.",{"type":42,"tag":68,"props":493,"children":494},{},[495,500,505],{"type":42,"tag":72,"props":496,"children":497},{},[498],{"type":47,"value":499},"use matching class names",{"type":42,"tag":72,"props":501,"children":502},{},[503],{"type":47,"value":504},"use real block UI, not placeholder boxes unless absolutely necessary",{"type":42,"tag":72,"props":506,"children":507},{},[508],{"type":47,"value":509},"keep style rules shared when possible",{"type":42,"tag":108,"props":511,"children":513},{"id":512},"_3-be-proactive-with-controls",[514],{"type":47,"value":515},"3. Be proactive with controls",{"type":42,"tag":50,"props":517,"children":518},{},[519],{"type":47,"value":520},"Prefer controls the editor already provides when they fit the request.",{"type":42,"tag":50,"props":522,"children":523},{},[524],{"type":47,"value":525},"Prefer components such as:",{"type":42,"tag":68,"props":527,"children":528},{},[529,538,547,556,565],{"type":42,"tag":72,"props":530,"children":531},{},[532],{"type":42,"tag":93,"props":533,"children":535},{"className":534},[],[536],{"type":47,"value":537},"InspectorControls",{"type":42,"tag":72,"props":539,"children":540},{},[541],{"type":42,"tag":93,"props":542,"children":544},{"className":543},[],[545],{"type":47,"value":546},"BlockControls",{"type":42,"tag":72,"props":548,"children":549},{},[550],{"type":42,"tag":93,"props":551,"children":553},{"className":552},[],[554],{"type":47,"value":555},"RichText",{"type":42,"tag":72,"props":557,"children":558},{},[559],{"type":42,"tag":93,"props":560,"children":562},{"className":561},[],[563],{"type":47,"value":564},"MediaUpload",{"type":42,"tag":72,"props":566,"children":567},{},[568,574,576,582,583,589,590],{"type":42,"tag":93,"props":569,"children":571},{"className":570},[],[572],{"type":47,"value":573},"ToggleControl",{"type":47,"value":575},", ",{"type":42,"tag":93,"props":577,"children":579},{"className":578},[],[580],{"type":47,"value":581},"RangeControl",{"type":47,"value":575},{"type":42,"tag":93,"props":584,"children":586},{"className":585},[],[587],{"type":47,"value":588},"SelectControl",{"type":47,"value":575},{"type":42,"tag":93,"props":591,"children":593},{"className":592},[],[594],{"type":47,"value":595},"TextControl",{"type":42,"tag":50,"props":597,"children":598},{},[599,601,607,609,615],{"type":47,"value":600},"Prefer ",{"type":42,"tag":93,"props":602,"children":604},{"className":603},[],[605],{"type":47,"value":606},"supports",{"type":47,"value":608}," in ",{"type":42,"tag":93,"props":610,"children":612},{"className":611},[],[613],{"type":47,"value":614},"block.json",{"type":47,"value":616}," when WordPress can provide built-in UI for color, spacing, or typography.",{"type":42,"tag":56,"props":618,"children":620},{"id":619},"core-file-guidance",[621],{"type":47,"value":622},"Core file guidance",{"type":42,"tag":108,"props":624,"children":626},{"id":625},"packagejson",[627],{"type":47,"value":323},{"type":42,"tag":50,"props":629,"children":630},{},[631,632,638],{"type":47,"value":91},{"type":42,"tag":93,"props":633,"children":635},{"className":634},[],[636],{"type":47,"value":637},"@wordpress\u002Fscripts",{"type":47,"value":639}," for build tooling. Keep the package minimal and aligned with the block's actual needs.",{"type":42,"tag":50,"props":641,"children":642},{},[643],{"type":47,"value":644},"Include build scripts that support the current task rather than copying a large default scaffold.",{"type":42,"tag":108,"props":646,"children":648},{"id":647},"blockjson",[649],{"type":47,"value":614},{"type":42,"tag":50,"props":651,"children":652},{},[653],{"type":47,"value":654},"Keep metadata valid and minimal. Use only the fields the block actually needs.",{"type":42,"tag":108,"props":656,"children":658},{"id":657},"php-plugin-bootstrap",[659],{"type":47,"value":660},"PHP plugin bootstrap",{"type":42,"tag":50,"props":662,"children":663},{},[664],{"type":47,"value":665},"The plugin main file should:",{"type":42,"tag":68,"props":667,"children":668},{},[669,680,691],{"type":42,"tag":72,"props":670,"children":671},{},[672,674],{"type":47,"value":673},"guard direct access with ",{"type":42,"tag":93,"props":675,"children":677},{"className":676},[],[678],{"type":47,"value":679},"if ( ! defined( 'ABSPATH' ) ) { exit; }",{"type":42,"tag":72,"props":681,"children":682},{},[683,685],{"type":47,"value":684},"wrap function definitions with ",{"type":42,"tag":93,"props":686,"children":688},{"className":687},[],[689],{"type":47,"value":690},"function_exists",{"type":42,"tag":72,"props":692,"children":693},{},[694,696],{"type":47,"value":695},"register the block from ",{"type":42,"tag":93,"props":697,"children":699},{"className":698},[],[700],{"type":47,"value":415},{"type":42,"tag":56,"props":702,"children":704},{"id":703},"html-rule",[705],{"type":47,"value":706},"HTML rule",{"type":42,"tag":50,"props":708,"children":709},{},[710],{"type":47,"value":711},"Each block should render a single wrapper element. Do not accidentally nest identical wrapper tags.",{"type":42,"tag":56,"props":713,"children":715},{"id":714},"defaults",[716],{"type":47,"value":717},"Defaults",{"type":42,"tag":50,"props":719,"children":720},{},[721],{"type":47,"value":722},"If unsure:",{"type":42,"tag":68,"props":724,"children":725},{},[726,731,752],{"type":42,"tag":72,"props":727,"children":728},{},[729],{"type":47,"value":730},"make it static",{"type":42,"tag":72,"props":732,"children":733},{},[734,736,742,744,750],{"type":47,"value":735},"use ",{"type":42,"tag":93,"props":737,"children":739},{"className":738},[],[740],{"type":47,"value":741},"design",{"type":47,"value":743}," or ",{"type":42,"tag":93,"props":745,"children":747},{"className":746},[],[748],{"type":47,"value":749},"widgets",{"type":47,"value":751}," category depending on the block",{"type":42,"tag":72,"props":753,"children":754},{},[755],{"type":47,"value":756},"include editor controls for the attributes the user will obviously want to change",{"type":42,"tag":56,"props":758,"children":760},{"id":759},"php-standards",[761],{"type":47,"value":762},"PHP standards",{"type":42,"tag":68,"props":764,"children":765},{},[766,779,789],{"type":42,"tag":72,"props":767,"children":768},{},[769,771,777],{"type":47,"value":770},"no closing ",{"type":42,"tag":93,"props":772,"children":774},{"className":773},[],[775],{"type":47,"value":776},"?>",{"type":47,"value":778}," at end of file",{"type":42,"tag":72,"props":780,"children":781},{},[782,784],{"type":47,"value":783},"guard functions with ",{"type":42,"tag":93,"props":785,"children":787},{"className":786},[],[788],{"type":47,"value":690},{"type":42,"tag":72,"props":790,"children":791},{},[792,794,800,801,807,809,815],{"type":47,"value":793},"use escaping like ",{"type":42,"tag":93,"props":795,"children":797},{"className":796},[],[798],{"type":47,"value":799},"esc_html()",{"type":47,"value":575},{"type":42,"tag":93,"props":802,"children":804},{"className":803},[],[805],{"type":47,"value":806},"esc_attr()",{"type":47,"value":808},", or ",{"type":42,"tag":93,"props":810,"children":812},{"className":811},[],[813],{"type":47,"value":814},"wp_kses_post()",{"type":47,"value":816}," where appropriate",{"type":42,"tag":56,"props":818,"children":820},{"id":819},"studio-workflow",[821],{"type":47,"value":822},"Studio workflow",{"type":42,"tag":50,"props":824,"children":825},{},[826],{"type":47,"value":827},"Inside the block plugin directory, prefer:",{"type":42,"tag":287,"props":829,"children":833},{"className":830,"code":831,"language":832,"meta":292,"style":292},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","pnpm install\npnpm exec wp-scripts build\n","bash",[834],{"type":42,"tag":93,"props":835,"children":836},{"__ignoreMap":292},[837,854],{"type":42,"tag":838,"props":839,"children":841},"span",{"class":840,"line":29},"line",[842,848],{"type":42,"tag":838,"props":843,"children":845},{"style":844},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[846],{"type":47,"value":847},"pnpm",{"type":42,"tag":838,"props":849,"children":851},{"style":850},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[852],{"type":47,"value":853}," install\n",{"type":42,"tag":838,"props":855,"children":857},{"class":840,"line":856},2,[858,862,867,872],{"type":42,"tag":838,"props":859,"children":860},{"style":844},[861],{"type":47,"value":847},{"type":42,"tag":838,"props":863,"children":864},{"style":850},[865],{"type":47,"value":866}," exec",{"type":42,"tag":838,"props":868,"children":869},{"style":850},[870],{"type":47,"value":871}," wp-scripts",{"type":42,"tag":838,"props":873,"children":874},{"style":850},[875],{"type":47,"value":876}," build\n",{"type":42,"tag":50,"props":878,"children":879},{},[880,882,888],{"type":47,"value":881},"If the generated block package is being used outside this repo and only npm is available, ",{"type":42,"tag":93,"props":883,"children":885},{"className":884},[],[886],{"type":47,"value":887},"npm install && npx wp-scripts build",{"type":47,"value":889}," is fine too.",{"type":42,"tag":50,"props":891,"children":892},{},[893],{"type":47,"value":894},"After a successful build:",{"type":42,"tag":68,"props":896,"children":897},{},[898,909,919,929],{"type":42,"tag":72,"props":899,"children":900},{},[901,903],{"type":47,"value":902},"activate the plugin with ",{"type":42,"tag":93,"props":904,"children":906},{"className":905},[],[907],{"type":47,"value":908},"wp_cli",{"type":42,"tag":72,"props":910,"children":911},{},[912,914],{"type":47,"value":913},"insert the block into a test page or post with ",{"type":42,"tag":93,"props":915,"children":917},{"className":916},[],[918],{"type":47,"value":908},{"type":42,"tag":72,"props":920,"children":921},{},[922,924],{"type":47,"value":923},"follow the review and iteration workflow in ",{"type":42,"tag":93,"props":925,"children":927},{"className":926},[],[928],{"type":47,"value":98},{"type":42,"tag":72,"props":930,"children":931},{},[932,934,939,940,945,946],{"type":47,"value":933},"call ",{"type":42,"tag":93,"props":935,"children":937},{"className":936},[],[938],{"type":47,"value":169},{"type":47,"value":171},{"type":42,"tag":93,"props":941,"children":943},{"className":942},[],[944],{"type":47,"value":177},{"type":47,"value":179},{"type":42,"tag":93,"props":947,"children":949},{"className":948},[],[950],{"type":47,"value":951},"stage: \"completed\"",{"type":42,"tag":50,"props":953,"children":954},{},[955],{"type":47,"value":956},"When editing an existing block:",{"type":42,"tag":958,"props":959,"children":960},"ol",{},[961,972,977,982,987,992],{"type":42,"tag":72,"props":962,"children":963},{},[964,966],{"type":47,"value":965},"locate the block project in the selected site's ",{"type":42,"tag":93,"props":967,"children":969},{"className":968},[],[970],{"type":47,"value":971},"wp-content\u002Fplugins\u002F",{"type":42,"tag":72,"props":973,"children":974},{},[975],{"type":47,"value":976},"identify affected files based on the change request",{"type":42,"tag":72,"props":978,"children":979},{},[980],{"type":47,"value":981},"update only the necessary files",{"type":42,"tag":72,"props":983,"children":984},{},[985],{"type":47,"value":986},"rebuild",{"type":42,"tag":72,"props":988,"children":989},{},[990],{"type":47,"value":991},"re-run activation or page setup steps if needed",{"type":42,"tag":72,"props":993,"children":994},{},[995,996],{"type":47,"value":923},{"type":42,"tag":93,"props":997,"children":999},{"className":998},[],[1000],{"type":47,"value":98},{"type":42,"tag":56,"props":1002,"children":1004},{"id":1003},"error-recovery",[1005],{"type":47,"value":1006},"Error recovery",{"type":42,"tag":50,"props":1008,"children":1009},{},[1010],{"type":47,"value":1011},"When a build fails:",{"type":42,"tag":958,"props":1013,"children":1014},{},[1015,1020,1025,1030,1035],{"type":42,"tag":72,"props":1016,"children":1017},{},[1018],{"type":47,"value":1019},"read the full error output",{"type":42,"tag":72,"props":1021,"children":1022},{},[1023],{"type":47,"value":1024},"identify the exact file and issue",{"type":42,"tag":72,"props":1026,"children":1027},{},[1028],{"type":47,"value":1029},"fix only the relevant file",{"type":42,"tag":72,"props":1031,"children":1032},{},[1033],{"type":47,"value":1034},"rebuild without reinstalling packages",{"type":42,"tag":72,"props":1036,"children":1037},{},[1038],{"type":47,"value":1039},"retry up to 3 times before escalating to the user",{"type":42,"tag":1041,"props":1042,"children":1043},"style",{},[1044],{"type":47,"value":1045},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"items":1047,"total":1228},[1048,1067,1082,1096,1113,1128,1140,1155,1171,1182,1197,1213],{"slug":1049,"name":1049,"fn":1050,"description":1051,"org":1052,"tags":1053,"stars":1064,"repoUrl":1065,"updatedAt":1066},"annotate","collect visual feedback with browser annotation tools","Open a browser with visual annotation tools. The user clicks elements on their site and leaves feedback — the agent reads annotations and makes changes. Use this when the user wants to point at specific elements to fix, tweak, or redesign.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1054,1055,1058,1061],{"name":23,"slug":24,"type":15},{"name":1056,"slug":1057,"type":15},"Productivity","productivity",{"name":1059,"slug":1060,"type":15},"UX Copy","ux-copy",{"name":1062,"slug":1063,"type":15},"UX Design","ux-design",484,"https:\u002F\u002Fgithub.com\u002FAutomattic\u002Fstudio","2026-05-06T05:40:01.516544",{"slug":1068,"name":1068,"fn":1069,"description":1070,"org":1071,"tags":1072,"stars":1064,"repoUrl":1065,"updatedAt":1081},"block-content","write editable WordPress block markup","Write editable WordPress block markup for local Studio sites, including core\u002Fhtml limits, block-theme layout rules, full-width sections, validation, and skeleton-first page\u002FCSS recipes.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1073,1074,1077,1080],{"name":20,"slug":21,"type":15},{"name":1075,"slug":1076,"type":15},"CSS","css",{"name":1078,"slug":1079,"type":15},"HTML","html",{"name":13,"slug":14,"type":15},"2026-05-27T07:01:55.629681",{"slug":1083,"name":1083,"fn":1084,"description":1085,"org":1086,"tags":1087,"stars":1064,"repoUrl":1065,"updatedAt":1095},"hosting-plans-helper","provide WordPress.com hosting plan information","Answer WordPress.com plan, pricing, upgrade, and feature-tier questions (plan names, what each tier unlocks — plugins, themes, custom code, SSH, hosting — and current prices) from authoritative live data. Load before answering ANY plan, pricing, or feature-gating question; never answer these from memory.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1088,1091,1094],{"name":1089,"slug":1090,"type":15},"Pricing","pricing",{"name":1092,"slug":1093,"type":15},"Reference","reference",{"name":13,"slug":14,"type":15},"2026-07-02T07:42:33.654791",{"slug":1097,"name":1097,"fn":1098,"description":1099,"org":1100,"tags":1101,"stars":1064,"repoUrl":1065,"updatedAt":1112},"liberate","migrate websites to WordPress","Import and rebuild a website from a closed platform (Wix, Squarespace, Webflow, Shopify, GoDaddy, Hostinger, HubSpot, Weebly) into a Studio WordPress site. Extracts pages\u002Fposts\u002Fproducts + media, then reconstructs the design as editable blocks + WooCommerce OR as a high-fidelity replica theme. Invoke when the user wants to migrate, import, liberate, or rebuild a site from one of these platforms.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1102,1105,1108,1111],{"name":1103,"slug":1104,"type":15},"CMS","cms",{"name":1106,"slug":1107,"type":15},"Migration","migration",{"name":1109,"slug":1110,"type":15},"Web Development","web-development",{"name":13,"slug":14,"type":15},"2026-07-09T06:47:33.454311",{"slug":1114,"name":1114,"fn":1115,"description":1116,"org":1117,"tags":1118,"stars":1064,"repoUrl":1065,"updatedAt":1127},"need-for-speed","run frontend performance audits for WordPress sites","Run a frontend performance audit on a WordPress site and get actionable optimization recommendations.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1119,1122,1123,1126],{"name":1120,"slug":1121,"type":15},"Audit","audit",{"name":23,"slug":24,"type":15},{"name":1124,"slug":1125,"type":15},"Performance","performance",{"name":13,"slug":14,"type":15},"2026-05-06T05:40:06.433267",{"slug":1129,"name":1129,"fn":1130,"description":1131,"org":1132,"tags":1133,"stars":1064,"repoUrl":1065,"updatedAt":1139},"plugin-recommendations","recommend WordPress plugins for site features","Choose recommended plugins and plugin-provided blocks for features core WordPress blocks do not cover - ecommerce (WooCommerce), forms and newsletters (Jetpack), online courses and quizzes (Sensei LMS), polls, surveys and ratings (Crowdsignal), spam protection (Akismet) - while keeping generated content editable and avoiding raw HTML fallbacks. Any request to sell products or build a shop, store, or storefront requires WooCommerce with products.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1134,1137,1138],{"name":1135,"slug":1136,"type":15},"Content Creation","content-creation",{"name":17,"slug":18,"type":15},{"name":13,"slug":14,"type":15},"2026-05-27T07:01:58.249105",{"slug":1141,"name":1141,"fn":1142,"description":1143,"org":1144,"tags":1145,"stars":1064,"repoUrl":1065,"updatedAt":1154},"rank-me-up","run on-page SEO audits for WordPress sites","Run an on-page SEO audit on a WordPress site and get actionable recommendations to improve search visibility.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1146,1147,1150,1153],{"name":1120,"slug":1121,"type":15},{"name":1148,"slug":1149,"type":15},"Marketing","marketing",{"name":1151,"slug":1152,"type":15},"SEO","seo",{"name":13,"slug":14,"type":15},"2026-05-06T05:40:05.196367",{"slug":1156,"name":1156,"fn":1157,"description":1158,"org":1159,"tags":1160,"stars":1064,"repoUrl":1065,"updatedAt":1170},"site-spec","gather specifications for new WordPress sites","Gather the site name and layout preference before building a WordPress site. Run this before creating any new site.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1161,1163,1166,1169],{"name":1162,"slug":741,"type":15},"Design",{"name":1164,"slug":1165,"type":15},"Product Management","product-management",{"name":1167,"slug":1168,"type":15},"Specs","specs",{"name":13,"slug":14,"type":15},"2026-05-06T05:40:02.739409",{"slug":1172,"name":1172,"fn":1173,"description":1174,"org":1175,"tags":1176,"stars":1064,"repoUrl":1065,"updatedAt":1181},"studio-cli","manage local WordPress sites with Studio CLI","Use the Studio CLI to manage local WordPress sites, authentication, and preview sites. Invoke this skill when you need to run Studio CLI commands, manage sites, or troubleshoot site issues.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1177,1180],{"name":1178,"slug":1179,"type":15},"CLI","cli",{"name":13,"slug":14,"type":15},"2026-04-06T18:02:57.150231",{"slug":1183,"name":1183,"fn":1184,"description":1185,"org":1186,"tags":1187,"stars":1064,"repoUrl":1065,"updatedAt":1196},"taxonomist","optimize WordPress category taxonomy","Analyze and optimize a WordPress site's category taxonomy. Exports all posts, uses AI to suggest an improved category structure — merging duplicates, retiring dead categories, creating missing ones, writing descriptions, and re-categorizing posts. Run this when the user wants to clean up or improve their categories.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1188,1191,1194,1195],{"name":1189,"slug":1190,"type":15},"Content Strategy","content-strategy",{"name":1192,"slug":1193,"type":15},"Data Cleaning","data-cleaning",{"name":1151,"slug":1152,"type":15},{"name":13,"slug":14,"type":15},"2026-05-06T05:40:03.966799",{"slug":1198,"name":1198,"fn":1199,"description":1200,"org":1201,"tags":1202,"stars":1064,"repoUrl":1065,"updatedAt":1212},"visual-design","plan and execute visual design direction","Plan and execute high-quality visual direction for site creation, redesign, layout, typography, color, motion, and visual polish.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1203,1206,1207,1210],{"name":1204,"slug":1205,"type":15},"Animation","animation",{"name":1162,"slug":741,"type":15},{"name":1208,"slug":1209,"type":15},"Typography","typography",{"name":1211,"slug":1198,"type":15},"Visual Design","2026-07-24T05:40:57.887452",{"slug":1214,"name":1214,"fn":1215,"description":1216,"org":1217,"tags":1218,"stars":1064,"repoUrl":1065,"updatedAt":1227},"visual-polish","verify and polish website visual design","Verify and polish a built or redesigned site by diagnosing rendered-DOM issues against intent and fixing them in a planned, batched screenshot-and-fix loop.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1219,1222,1223,1226],{"name":1220,"slug":1221,"type":15},"Debugging","debugging",{"name":23,"slug":24,"type":15},{"name":1224,"slug":1225,"type":15},"Screenshots","screenshots",{"name":1211,"slug":1198,"type":15},"2026-06-06T07:09:59.809812",81,{"items":1230,"total":1306},[1231,1244,1251,1263,1272,1283,1295],{"slug":1232,"name":1232,"fn":1233,"description":1234,"org":1235,"tags":1236,"stars":25,"repoUrl":26,"updatedAt":1243},"auditing","audit WordPress sites for performance and accessibility","Audit a Studio-backed WordPress site for performance, accessibility, and visible frontend quality issues, then recommend or validate improvements.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1237,1240,1241,1242],{"name":1238,"slug":1239,"type":15},"Accessibility","accessibility",{"name":1120,"slug":1121,"type":15},{"name":1124,"slug":1125,"type":15},{"name":13,"slug":14,"type":15},"2026-04-06T18:03:27.759352",{"slug":4,"name":4,"fn":5,"description":6,"org":1245,"tags":1246,"stars":25,"repoUrl":26,"updatedAt":27},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1247,1248,1249,1250],{"name":20,"slug":21,"type":15},{"name":23,"slug":24,"type":15},{"name":17,"slug":18,"type":15},{"name":13,"slug":14,"type":15},{"slug":1252,"name":1252,"fn":1253,"description":1254,"org":1255,"tags":1256,"stars":25,"repoUrl":26,"updatedAt":1262},"design-previews-creator","generate WordPress design preview options","Generate three parallel design preview options for a Studio-backed site and collect the user's preferred direction before theme implementation.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1257,1258,1261],{"name":1162,"slug":741,"type":15},{"name":1259,"slug":1260,"type":15},"Themes","themes",{"name":13,"slug":14,"type":15},"2026-04-06T18:03:34.089094",{"slug":1264,"name":1264,"fn":1265,"description":1266,"org":1267,"tags":1268,"stars":25,"repoUrl":26,"updatedAt":1271},"plugin-creator","create WordPress plugins","Create or update a custom WordPress plugin for site functionality that should not live in a theme or a block. Use when the user needs reusable behavior, admin\u002Fsettings UI, hooks, REST endpoints, scheduled tasks, integrations, or server-side logic for a Studio-backed site.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1269,1270],{"name":17,"slug":18,"type":15},{"name":13,"slug":14,"type":15},"2026-04-06T18:03:31.59652",{"slug":1273,"name":1273,"fn":1274,"description":1275,"org":1276,"tags":1277,"stars":25,"repoUrl":26,"updatedAt":1282},"site-creator","create WordPress sites from a brief","Create a WordPress site from a rough idea using Studio and shared WordPress skills.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1278,1281],{"name":1279,"slug":1280,"type":15},"Local Development","local-development",{"name":13,"slug":14,"type":15},"2026-04-06T18:03:35.335664",{"slug":98,"name":98,"fn":1284,"description":1285,"org":1286,"tags":1287,"stars":25,"repoUrl":26,"updatedAt":1294},"run local WordPress development with Studio","Use WordPress Studio for local WordPress development, preferring MCP and falling back to the Studio CLI when needed.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1288,1289,1290,1293],{"name":1178,"slug":1179,"type":15},{"name":1279,"slug":1280,"type":15},{"name":1291,"slug":1292,"type":15},"MCP","mcp",{"name":13,"slug":14,"type":15},"2026-04-06T18:03:26.516124",{"slug":1296,"name":1296,"fn":1297,"description":1298,"org":1299,"tags":1300,"stars":25,"repoUrl":26,"updatedAt":1305},"theme-creator","create WordPress block themes","Create a modern WordPress block theme.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1301,1302,1303,1304],{"name":1162,"slug":741,"type":15},{"name":23,"slug":24,"type":15},{"name":1259,"slug":1260,"type":15},{"name":13,"slug":14,"type":15},"2026-04-06T18:03:29.048538",8]