superpowers-sage:wp-block-native

Name: superpowers-sage:wp-block-native
Availability: InStock
Author: Hekivo

Implement native Gutenberg blocks in Sage/Roots WordPress projects with block.json metadata.

13|Updated Mar 19, 2026

Search Tags:#vite #wordpress #gutenberg #block.json #innerblocks #native blocks #server-side-render

Ready to run

npx skills add https://github.com/hekivo/superpowers-sage --skill superpowers-sage-wp-block-native-hekivo

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: superpowers-sage:wp-block-native
Source: https://github.com/hekivo/superpowers-sage/tree/main/skills/wp-block-native
Command: npx skills add https://github.com/hekivo/superpowers-sage --skill superpowers-sage-wp-block-native-hekivo

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It helps you build complex native Gutenberg blocks when ACF Composer falls short, so you can deliver correct editor behavior and reliable front-end output.

Core Features & Use Cases

InnerBlocks nesting, templates, and locking: Create parent blocks with nested block regions that support adding, reordering, and removing children.
Block transforms, variations, and deprecations: Implement full Gutenberg capabilities for richer authoring, migration safety, and backward compatibility.
Editor-first React with dynamic PHP rendering: Use ServerSideRender for live previews and a PHP render_callback for data-driven front-end output.

Use case: you need a “Hero” block with rich editor controls, nested content areas, and safe markup evolution—without relying on ACF field scaffolding.

Quick Start

Ask your AI assistant to generate a native Gutenberg block setup for Sage using block.json (apiVersion 3), a React edit component with InnerBlocks, and a PHP dynamic render template that echoes $content.

Frequently Asked Questions about superpowers-sage:wp-block-native

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I build native Gutenberg blocks in a Sage theme without ACF Composer?▼

Build native Gutenberg blocks in Sage without ACF by defining block.json metadata with apiVersion 3, then implementing a React edit component alongside a PHP render template using ServerSideRender and get_block_wrapper_attributes for front-end output.

Can I use InnerBlocks nesting and locking in a custom WordPress block?▼

You can implement InnerBlocks in custom WordPress blocks to create parent blocks with nested regions that support adding, reordering, and removing children, including template locking configurations for strict content structures.

Does Sage support ServerSideRender for dynamic PHP block output?▼

Yes, Sage supports ServerSideRender for dynamic PHP block output by utilizing a render.php template with get_block_wrapper_attributes, allowing data-driven front-end rendering while maintaining live editor previews.

What is the best way to handle block deprecations and transforms in Gutenberg?▼

The best way to handle block deprecations and transforms in Gutenberg is to explicitly define migration paths and variations in block.json, ensuring backward compatibility and safe markup evolution when block structures change.

When should I avoid ACF Composer for WordPress block development?▼

Avoid ACF Composer when your WordPress block requires JS-heavy editor UIs, complex InnerBlocks nesting, or dynamic ServerSideRender capabilities that exceed standard ACF field scaffolding limitations.