10up-block-development

Guide WordPress developers through building Gutenberg blocks with 10up standards.

87|32|Updated Jul 3, 2015
One-click install
npx skills add https://github.com/petenelson/wp-rest-api-log --skill 10up-block-development
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: 10up-block-development
Source: https://github.com/petenelson/wp-rest-api-log/tree/main/.claude/skills/10up-block-development
Command: npx skills add https://github.com/petenelson/wp-rest-api-log --skill 10up-block-development

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Gutenberg block development and maintenance can be error-prone and time-consuming without standardized patterns and tooling. This skill provides a structured blueprint aligned with 10up engineering standards to create, modify, and deprecate blocks, ensuring consistent metadata, rendering, and editor components.

Core Features & Use Cases

  • Establishes block.json metadata, dynamic PHP rendering, and preferred patterns (useBlockProps) for robust server-side rendering.
  • Enforces deprecation handling to prevent "Invalid block" errors during attribute or markup changes.
  • Includes guidance with references for block.json, deprecations, and markup best practices to accelerate team adoption and onboarding.

Quick Start

Create a new dynamic block following the guide and wire up block.json, PHP rendering, and editor components.

Frequently Asked Questions about 10up-block-development

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

FAQPage Schema
How do I fix invalid block errors when updating Gutenberg block markup?

Invalid block errors during markup or attribute updates are fixed by implementing block deprecations. Defining a deprecation workflow handles older content structures, preventing errors and ensuring existing blocks remain valid when their underlying markup changes.

How do I set up block.json for a dynamic WordPress block?

Setting up block.json for a dynamic WordPress block involves defining metadata, attributes, and render callbacks. This configuration connects editor components with PHP rendering templates to ensure robust server-side rendering and maintainable code.

What is the best way to use useBlockProps in Gutenberg block development?

The best way to use useBlockProps in Gutenberg block development is applying it to wrapper elements within editor components. This ensures blocks correctly inherit default styles, alignment classes, and behavior required by the WordPress block editor.

When do I need to add deprecations to a WordPress block?

You need to add deprecations to a WordPress block whenever you alter its saved markup or modify existing attributes. This workflow prevents invalid block errors by mapping older content structures to the new block configuration.

Do I need PHP rendering templates for Gutenberg blocks?

PHP rendering templates are required for dynamic Gutenberg blocks. They handle server-side rendering by generating HTML on the server, which ensures better performance and allows blocks to display data-driven content directly on the front end.

Can I use this approach to update existing blocks without breaking content?

Yes, updating existing blocks without breaking content requires a structured deprecation workflow. By properly mapping old block attributes and markup to new configurations, you ensure previously saved content remains valid and functional.