80 lines
2.0 KiB
Markdown
80 lines
2.0 KiB
Markdown
# 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](https://git.keithsolomon.net/keith/VsCode-Block-Scaffold/-/releases) and install it via the Extensions view in VS Code (click the ellipsis `...` and select "Install from VSIX...").
|
|
|
|
## Installation (local development)
|
|
|
|
1. Install dependencies:
|
|
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
2. Build the extension:
|
|
|
|
```bash
|
|
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`:
|
|
|
|
```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
|
|
|
|
```plaintext
|
|
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.
|