eds-block-development

EDS blocks require a /blocks/{name} directory with JS, CSS, README.md, EXAMPLE.md, and test.html files. Export a default decorate(block) function that processes Google Docs table structures and returns the decorated block element following Adobe Edge Delivery Services patterns.

The decorate function receives a block element, extracts content from Google Docs table structures, and transforms it into your block's DOM. Use proven patterns to map table rows and cells to block data, then apply styling with reserved class names and safe suffixes to avoid conflicts.

EDS blocks enforce specific reserved class-name conventions and safe suffix patterns to prevent conflicts. Adhere to Google Docs header-driven block naming and avoid reserved keywords when naming your block and its internal classes to ensure consistency across your Content Driven Development environment.

Yes, include a test.html file in your block's directory to validate your decorate function logic and content extraction patterns. Test against actual Google Docs table structures to verify your implementation handles edge cases and applies styling correctly before production deployment.

This covers both creating new blocks in /blocks/ and editing existing block JS and CSS files. Whether you're building a fresh overlay block or refining an existing component's decorate logic, follow the same file layout and content extraction patterns to maintain consistency.