AgentSkillsCN

block-scaffolds

Oh My Brand!区块的复制粘贴式脚手架。包括block.json、render.php、helpers.php、view.ts、style.css以及测试文件的模板。在创建新区块时，请使用这些模板。

SKILL.md
--- frontmatter
name: block-scaffolds
description: 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.
metadata:
  author: Wesley Smits
  version: "1.0.0"

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:

PlaceholderReplace WithExample
BLOCK_NAMEkebab-case namegallery, hero-section
BLOCK_TITLEHuman-readable titleGallery Carousel
BLOCK_CLASSPascalCase classGalleryCarousel
BLOCK_DESCRIPTIONShort descriptionImage gallery with carousel
CATEGORYBlock categorymedia, text, design
ICONDashicon nameformat-gallery, admin-home
FIELD_NAMEACF field namegallery_images

Native Block Scaffolds

For blocks built with @wordpress/scripts in src/blocks/:

FileTemplatePurpose
block.jsonblock-json-native.jsonBlock metadata
render.phprender-native.phpServer-side render
helpers.phphelpers-native.phpHelper functions
view.tsview.tsFrontend Web Component
style.cssstyle.cssFrontend styles
edit.tsxedit.tsxEditor component

ACF Block Scaffolds

For ACF PRO blocks in blocks/acf-{name}/:

FileTemplatePurpose
block.jsonblock-json-acf.jsonACF block metadata
render.phprender-acf.phpRender template
helpers.phphelpers-acf.phpHelper functions

Test Scaffolds

FileTemplatePurpose
view.test.tsview.test.tsVitest Web Component tests
HelpersTest.phphelpers.test.phpPHPUnit helper tests

Quick Start

Native Block

bash
# 1. Create directory
mkdir -p src/blocks/my-block

# 2. Copy templates from references/
# 3. Replace placeholders
# 4. Build: pnpm run build

ACF Block

bash
# 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