shield_lock
JinDaGe
← Back to skills
extension
Category: AI Agent CapabilitiesNo API key required

block-scaffolds

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.

personAuthor: jakexiaohubgithub
open_in_newRepositorydownloadDownload package

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