I built out a documentation site for the insane block markup associated with WordPress's Gutenberg blocks. There was sparse documentation around this, and parsing the WP Block GitHub was ridiculous, especially as someone trying to push production work out into the world.
Why This Exists
- Block comment syntax is often poorly documented
- HTML output varies between themes and contexts
- FSE markup quirks are scattered across various resources
- Real-world examples are hard to find in one place
What the site provides
- ✅ Complete HTML markup reference for WordPress core blocks
- ✅ Interactive examples with syntax highlighting
- ✅ Copy-paste ready code snippets
- ✅ Block validation tools
- ✅ FSE quirks and gotchas documentation
- ✅ Best practices and guidelines
- ✅ Comprehensive resource directory
Features
Comprehensive Block Documentation
- Core Blocks: Complete documentation for most common WordPress core blocks
- Markup Examples: Real-world HTML output with explanations
- Properties Reference: Detailed attribute and property documentation
Developer Tools
- Block Validator: Validate your block markup for errors
- Pattern Library: Ready-made block combinations
- Code Highlighting: Syntax-highlighted examples throughout
Learning Resources
- Best Practices: WordPress block development guidelines
- FSE Quirks: Known issues and workarounds
- Resource Directory: Curated links to essential tools and documentation
Contributions and feedback welcome 🤘
Documentation Site: https://www.wpblockdocs.com/
GitHub: https://github.com/house-of-giants/wp-block-docs
Top comments (0)