DocsPress Blocks adds two landing-page blocks and thirteen documentation blocks to Gutenberg. Use these guides to choose a block, configure it in the editor, or serialize it directly in Markdown for DocsPress publishing.
Every component guide includes at least three rendered examples: a practical baseline plus creative variations that exercise different content, presentation, or interaction states.
Block catalog
| Block | Best for |
|---|---|
| Hero | A prominent landing-page introduction with actions and media |
| Audience Paths | Routing readers to distinct documentation journeys |
| Colorful Code | One highlighted, annotated, or diff-aware code example |
| Code Tabs | Equivalent examples in multiple languages or tools |
| Callout | Notes, tips, warnings, risks, and success messages |
| Flow | A connected, numbered procedure |
| Diagram | A compact flow or sequence diagram |
| API Request / Response | A static or runnable HTTP exchange |
| Fields / Schema | Parameters, properties, options, and environment variables |
| Terminal Session | A copyable command with optional read-only output |
| Live Code Playground | Editable HTML, CSS, and JavaScript with a sandboxed preview |
| Result | The outcome of a task, check, or deployment |
| File Tree | A compact, optionally collapsible project structure |
| Prompt | A reusable AI prompt with model, mode, and context |
| Interactive Troubleshooter | A short branching decision tree |
Open the Kitchen Sink to see all blocks together and compare their visual states.
Add and edit a block
- Open a Page or template in the WordPress block editor.
- Select Add block and search for the block by its display name.
- Edit primary content directly in the canvas.
- Use the Block sidebar for structure, behavior, and presentation settings.
- Preview keyboard interaction and responsive layout before publishing.
All DocsPress blocks support an HTML anchor, additional CSS classes, Global Styles colors and typography, spacing, borders, minimum height, sticky positioning, and shadows. Hero and Audience Paths also support wide and full alignment. Diagram, Live Code Playground, and Interactive Troubleshooter support wide alignment.
Author blocks in Markdown
DocsPress preserves a dynamic block as one self-closing Gutenberg comment:
<!-- wp:docspress/block-name {"attribute":"value"} /-->Follow these rules when generating or editing the comment:
- Put the comment directly in Markdown. Do not wrap the actual block in a code fence.
- Use compact, valid JSON. Escape quotes, newlines, backslashes, and control characters.
- Use only attributes registered by that block and only documented enum values.
- Do not add rendered HTML after a dynamic block comment.
- Keep rich-text attributes as safe HTML fragments, such as
<p>Helpful detail.</p>. - Install and activate a matching version of DocsPress Blocks on the WordPress site.
DocsPress converts HTML-sensitive attribute characters to WordPress-safe Unicode escapes during publishing. This prevents the block editor from treating otherwise equivalent JSON as invalid content.
Choose the smallest useful block
Prefer ordinary Markdown headings, paragraphs, lists, and tables until a DocsPress block provides a concrete benefit: safer copy actions, semantic status, controlled interaction, responsive visualization, or editor-managed structured data. A smaller block is easier to maintain than a composite that repeats the same information.
Use Colorful Code for one source listing and Code Tabs only for genuine alternatives. Use Terminal Session for a command readers copy but do not run in the page. Use API Request / Response when the HTTP method, headers, body, response, or live execution is part of the lesson.