PinkDocs includes custom Gutenberg blocks designed for documentation. This article lists every block, explains when to use it and shows a live example.
Add a PinkDocs block
Open the block inserter
In the editor, click the + button at the top left, or type / on an empty line.
Search for PinkDocs
Type PinkDocs to see every PinkDocs block, or type the block name, such as Steps.
📷 Image placeholder: the block inserter showing the PinkDocs blocks.
Insert and fill in the block
Click the block to insert it, then type your content. Use the Settings sidebar to change the block's options.
All blocks at a glance
| Block | Type | Use it for |
|---|---|---|
| Alert | Article | Notes, tips, warnings, errors and success messages |
| Steps | Article | Procedures readers follow in order |
| Tabs | Article | Alternatives readers choose one of |
| Code block | Article | Code, commands and config |
| Multi-language code block | Article | The same example in several languages |
| FAQ | Article | Expandable common questions |
| Button | Article | One clear call to action |
| Icon cards | Article or overview | Feature overviews and related links |
| Image cards | Overview | Visual links to guides |
| Category articles | Overview | An automatic list of categories and their docs |
| Changelog | Overview | Your latest releases |
| Hero section with search | Landing page | A heading, description and search box |
| Hero section | Landing page | A heading, description and one button |
| Hero with image | Landing page | A hero with an image beside the text |
Article blocks
Alert
Use alerts for information readers must not miss. Choose a type in the Settings sidebar: Info, Note, Success, Warning or Error. Add an optional title.
Steps
Use steps for any task with more than two actions in order. Each step has a title and its own content, which can include text, lists, images, code and alerts.
Write a short step title
Start the title with a verb, such as Open settings.
Add the details
Explain exactly what to click or type.
Add a screenshot
Place a screenshot inside the step it illustrates.
Tabs
Use tabs when readers need one of several options, such as instructions for different themes, hosting panels or operating systems.
Go to Appearance → Editor.
Go to Appearance → Customize.
Code block
Use the code block for code, commands and file contents. It adds syntax highlighting and a copy button. Set the language and an optional file name in the Settings sidebar.
Multi-language code block
Use this block to show the same example in several languages. Readers switch between languages with tabs.
FAQ
Use the FAQ block for common questions at the end of an article or on overview pages. Each question expands to show its answer.
Example questions
It shows a list of questions that readers click to expand.
Two to six questions work best at the end of an article.
Button
Use a button for one main action, such as downloading a file or opening a settings page. Don't use buttons for ordinary links. Set the link, size, width and alignment in the Settings sidebar.
Icon cards
Use icon cards for feature overviews or links to related guides. Each card has an icon, a title, a short description and an optional link.
Overview and landing page blocks
Use these blocks on your docs homepage and overview pages, not inside normal articles.
| Block | What it does | Main settings |
|---|---|---|
| Image cards | Visual cards linking to guides, two per row | Section title, description, image, link and button text for each card |
| Category articles | Lists every category with its articles, and updates automatically | Section title, description, articles per category |
| Changelog | Shows your latest releases | Number of entries, title, view all link |
| Hero section with search | Large heading, description and search box | Heading, description, placeholder, version tag, quick links |
| Hero section | Large heading, description and one button | Heading, description, button text and link, version tag |
| Hero with image | A hero with an image beside the text | Heading, description, button, image and alt text |
📷 Image placeholder: a docs homepage built with Hero section with search, Image cards and Category articles.