Block Scaffolds
Ready-to-use templates for creating new blocks in the Oh My Brand! FSE theme.
When to Use
- Creating a new native WordPress block
- Creating a new ACF block
- Starting test files for blocks
- Quick copy-paste for block files
Placeholders
Replace these placeholders in all templates:
| Placeholder | Replace With | Example |
|---|---|---|
BLOCK_NAME | kebab-case name | gallery, hero-section |
BLOCK_TITLE | Human-readable title | Gallery Carousel |
BLOCK_CLASS | PascalCase class | GalleryCarousel |
BLOCK_DESCRIPTION | Short description | Image gallery with carousel |
CATEGORY | Block category | media, text, design |
ICON | Dashicon name | format-gallery, admin-home |
FIELD_NAME | ACF field name | gallery_images |
Native Block Scaffolds
For blocks built with @wordpress/scripts in src/blocks/:
| File | Template | Purpose |
|---|---|---|
block.json | block-json-native.json | Block metadata |
render.php | render-native.php | Server-side render |
helpers.php | helpers-native.php | Helper functions |
view.ts | view.ts | Frontend Web Component |
style.css | style.css | Frontend styles |
edit.tsx | edit.tsx | Editor component |
ACF Block Scaffolds
For ACF PRO blocks in blocks/acf-{name}/:
| File | Template | Purpose |
|---|---|---|
block.json | block-json-acf.json | ACF block metadata |
render.php | render-acf.php | Render template |
helpers.php | helpers-acf.php | Helper functions |
Test Scaffolds
| File | Template | Purpose |
|---|---|---|
view.test.ts | view.test.ts | Vitest Web Component tests |
HelpersTest.php | helpers.test.php | PHPUnit helper tests |
Quick Start
Native Block
# 1. Create directory
mkdir -p src/blocks/my-block
# 2. Copy templates from references/
# 3. Replace placeholders
# 4. Build: pnpm run build
ACF Block
# 1. Create directory
mkdir -p blocks/acf-my-block
# 2. Copy templates from references/
# 3. Replace placeholders
# 4. Create field group in WP Admin > ACF
# 5. Register in functions.php $acf_blocks array
Related Skills
- native-block-development - Block structure guide
- acf-block-registration - ACF blocks guide
- web-components - View script patterns
- block-editor-components - Edit component patterns
- vitest-testing - TypeScript testing
- phpunit-testing - PHP testing