Copy-paste scaffolds for Oh My Brand! blocks. Templates for block.json, render.php, helpers.php, view.ts, style.css, and tests. Use when creating new blocks.
Ready-to-use templates for creating new blocks in the Oh My Brand! FSE theme.
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 |
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 |
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 |
| File | Template | Purpose |
|---|---|---|
view.test.ts | view.test.ts | Vitest Web Component tests |
HelpersTest.php | helpers.test.php | PHPUnit helper tests |
# 1. Create directory
mkdir -p src/blocks/my-block
# 2. Copy templates from references/
# 3. Replace placeholders
# 4. Build: pnpm run build
# 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