Building Blocks

What problem does it solve?

Developing AEM Edge Delivery blocks requires adherence to specific patterns for JavaScript decoration, CSS styling, and content model integration. This skill provides a structured guide, ensuring developers build high-quality, performant, and maintainable blocks that align with platform best practices.

Core Features & Use Cases

• Structured Development Workflow: Guides through the entire block development process, from understanding content models and finding similar blocks to implementing JS decoration, CSS styling, and comprehensive testing.
• Code Quality & Best Practices: Enforces guidelines for JavaScript (DOM manipulation, performance) and CSS (scoping, responsiveness, custom properties) to ensure robust and maintainable code.
• Integrated Testing & Documentation: Automatically invokes the testing-blocks skill for validation and provides guidance on creating both developer and author-facing documentation.
• Use Case: When creating a new "carousel" block, this skill walks you through setting up the block's files, writing efficient JavaScript to transform authored content into an interactive carousel, applying scoped CSS for responsive design, and ensuring all code meets quality standards before deployment.

Quick Start

Example: Basic JavaScript decoration for a new block

blocks/my-block/my-block.js

/**

• decorate the block
• @param {Element} block the block */ export default async function decorate(block) { const wrapper = document.createElement('div'); wrapper.className = 'my-block-content'; wrapper.append(...block.children); # Move existing content into wrapper block.append(wrapper); }

Example: Basic CSS styling for a new block

blocks/my-block/my-block.css

main .my-block { padding: 1rem; background-color: var(--background-color); }

main .my-block .my-block-content { display: flex; gap: 1rem; }