VDI ACF Block Scaffold Extension

Scaffold WordPress ACF blocks from a reusable template inside Visual Studio Code.

Features

• Command palette + keybinding to create a new block
• Prompts for a block name and generates a slug automatically
• Copies the block-template files into a new block folder
• Replaces placeholders in the template with the provided name/slug
• Opens the new block files for editing

Requirements

• VS Code 1.80+
• Node.js + npm

Installation

Download the .vsix file from the releases page and install it via the Extensions view in VS Code (click the ellipsis ... and select "Install from VSIX...").

Installation (local development)

1. Install dependencies:

   npm install
   

2. Build the extension:

   npm run compile
   

3. Open this folder in VS Code and press F5 to start an Extension Development Host.

Usage

1. Run the command:
   • Command Palette: VDI: Create ACF Block
   • Keybinding: Ctrl+Alt+B (Cmd+Alt+B on macOS)
2. Enter a block name (e.g. "Testimonial").
3. The extension creates a new block folder under the parent directory and opens the files.

Configuration

vdiAcfBlockScaffold.parentDirectory

• Workspace-relative path where new blocks are created.
• Default: views/blocks

Example settings.json:

{
  "vdiAcfBlockScaffold.parentDirectory": "views/blocks"
}

Template placeholders

The following placeholders are replaced in template files:

• {{BLOCK_NAME}} - Human-readable name (e.g. "Testimonial")
• {{BLOCK_SLUG}} - Slug (e.g. "testimonial")

Template structure

block-template/ - Template directory copied into the new block
├── block.json
├── block-template.php -> {{BLOCK_SLUG}}.php
└── block-template.css -> {{BLOCK_SLUG}}.css

Notes

The extension will not overwrite an existing block folder or files. If a block slug already exists, creation is aborted with an error message.