Create Block

Scaffold a new ACF Gutenberg block with block.json, fields.json, and render.php

phucbm 55c30f0 1.0 KB Updated

File contents

Read [@/knowledge/acf-blocks/conventions.md](/knowledge/acf-blocks/conventions.md) and [@/knowledge/acf-blocks/fields.md](/knowledge/acf-blocks/fields.md), then:

  1. Ask the user for:

    • Block name — kebab-case slug, e.g. hero-banner
    • Block title — human-readable, e.g. Hero Banner
    • Block description — one sentence (optional)
    • Needs frontend JS? — pass --js if yes
    • Needs admin preview? — pass --admin if yes (interactive blocks only)
  2. Run the script from the theme root:

    node $(claude plugin path wp-blocks-dev)/scripts/create-block.js <name> --title="<title>" --description="<description>" [--js] [--admin]
    
  3. Show the script output, then remind:

    • Add ACF fields in WordPress admin → Field Groups
    • After editing fields.json, run date +%s and update the modified value
    • If --js was used, run pnpm ts-build or pnpm ts-watch

phucbm/wp-blocks-dev/tree/main/skills/create-block commit 55c30f0d37

Frequently asked questions

npx skillmds@latest add phucbm/create-block