Your docs can use PinkDocs blocks and core WordPress (Gutenberg) blocks together. This article shows every block with a live example, so you can see how each one looks in your help centre and choose the right one. For each PinkDocs block’s settings in detail, see the PinkDocs blocks reference.
Add a block
Open the block inserter
In the editor, click the + button at the top left, or type / on an empty line.
Search for the block
Type the block name, such as Table or Steps. Type PinkDocs to see every PinkDocs block.
Insert and set it up
Press Enter to insert the block, then use the toolbar and the Settings sidebar to change its options.
PinkDocs article blocks
Use these blocks inside your docs.
Alert
Use alerts for information readers must not miss. Choose the type in the Settings sidebar.
Steps
Use steps for any task with more than two actions in order. Each step can hold text, lists, images, code and alerts.
Open the settings
Go to PinkDocs → Settings.
Change the option
Turn on the setting you need.
Save your changes
Click Save Changes.
Tabs
Use tabs when readers need one of several options, such as different themes or hosting panels.
Go to Appearance → Editor and click Styles.
Go to Appearance → Customize and click Additional CSS.
Code block
Use the PinkDocs Code block for code readers will copy. It adds syntax highlighting, a copy button and an optional file name.
Multi-language code block
Use this block to show the same example in several languages. Readers switch languages with tabs.
File tree
Use the file tree block to show folders and files, such as a theme or project layout. Folders open and close, readers can move through the tree with the keyboard, and you can highlight the file you want them to look at.
- app
- layout.tsx
- page.tsx
- api
- auth
- route.ts
- route.tshandles webhooks
- public
- logo.svg
- package.json
- tsconfig.json
FAQ
Use the FAQ block for common questions at the end of an article. 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 PinkDocs button for one clear call to action, such as a download.
Icon cards
Use icon cards for feature overviews or links to related guides.
PinkDocs homepage and overview blocks
Use these blocks on your docs homepage and overview pages. They’re shown here as examples only. Don’t use them inside normal articles.
Image cards
Use image cards for visual links to your most important guides, two per row. Add an image to each card in the Settings sidebar.
Popular guides
Start with these guides.
Category articles
Use category articles to list every category and its articles automatically. New docs appear without editing the page.
Browse by topic
Every category and its articles.
Get Started
10 docsCustomise
8 docsAPI reference
5 docsAI Features
12 docsMiscellaneous
7 docsChangelog
Use the changelog block to show your latest releases. It shows releases once the changelog is turned on and has at least one release.
Changelog
Track all the latest updates, improvements, and bug fixes.
Hero section with search
Use this block at the top of your docs homepage so readers can search straight away.
How can we help?
Search guides and answers for PinkDocs.
Hero section
Use this block at the top of an overview page with one main button.
PinkDocs documentation
Everything you need to build a great help centre.
Hero with image
Use this block when you want to show a screenshot beside the hero text. Choose the image in the Settings sidebar.
📷 Image placeholder: add a screenshot to the Hero with image block above.
Core text blocks
Paragraph
Use paragraphs for most of your content. Format text with the toolbar: bold for buttons and menu names, italic for emphasis, links to other docs, inline code for file names and values, highlight for key words, strikethrough for removed options, keyboard keys such as Ctrl + S, and H2O or 103 for subscript and superscript.
Heading
Use headings to split a doc into sections. PinkDocs uses them to build the table of contents. Use H2 for main sections, H3 for sub-sections and H4 for small groups inside a sub-section.
This is an H4 heading
Don’t skip levels. Always use an H2 before an H3, and an H3 before an H4.
List
Use a bulleted list for options or items in no particular order:
- Knowledge bases
- Categories
- Subcategories, nested with Tab
- Docs
Use a numbered list for short sequences. For tasks with more than two steps, use the PinkDocs Steps block instead.
- Open the doc.
- Click Update.
Quote
Use a quote to show something a customer or another source said. For tips and warnings, use the PinkDocs Alert block instead.
PinkDocs cut our support tickets in half in the first month.
A PinkDocs customer
Pullquote
Use a pullquote to highlight one key message in a long overview or announcement.
Write one doc per task, and start with what the reader wants to do.
PinkDocs writing guide
Code
The core Code block shows code without syntax highlighting. For code readers will copy, use the PinkDocs Code block above.
https://yoursite.com/wp-json/pinkdocs/v1/mcpPreformatted
Use preformatted text to keep exact spacing, such as folder structures or log output.
wp-content/ ├── plugins/pinkdocs/ └── themes/your-child-theme/pinkdocs/
Verse
Use verse for text where line breaks matter, such as an address or a short message.
PinkDocs Support pinkdocs.com/account Monday to Friday
Details
Use details to hide optional information until the reader clicks. For a list of questions, use the PinkDocs FAQ block instead.
Click to show advanced options
This content stays hidden until the reader opens it. Use it for advanced settings most readers don’t need.
Table
Use tables to compare settings, options or plans. Keep them to three or four columns so they read well on mobile.
| Block | Use it for | Example |
|---|---|---|
| Table | Comparisons | Plan features |
| List | Options | Supported themes |
| Details | Optional information | Advanced settings |
Core media blocks
Image
Use images for screenshots. Place each screenshot directly after the step it shows, add alt text describing it, and crop it to the relevant part of the screen.
Other media blocks
These blocks need a file or link before they display, so add your own media to try them.
| Block | Use it for | Tip |
|---|---|---|
| Gallery | Several related screenshots | Use two or three images per row. |
| Media & Text | A screenshot beside its explanation | Good for feature overviews. |
| Cover | A banner with text over an image | Use on overview pages, not in articles. |
| Video | Screen recordings you host | Keep videos under two minutes. |
| Audio | Podcast episodes or voice notes | Add a transcript below. |
| File | Downloads, such as PDFs or sample files | Name files clearly. |
| Embed | YouTube, Loom or Vimeo videos | Paste the video link on its own line. |
📷 Image placeholder: add a Gallery, Media & Text or Embed example here once you have media to show.
Core design blocks
Buttons
Use the core Buttons block when you need two buttons side by side. For a single call to action, use the PinkDocs Button block.
Columns
Use columns to place content side by side, such as a before and after comparison. Columns stack on mobile.
Before
Readers search through long pages to find one setting.
After
Readers find the setting in seconds with live search.
Group
Use a group to wrap several blocks together and give them a shared background or spacing.
Grouped content
This heading and paragraph share one background because they’re inside a Group block.
Separator
Use a separator to divide large sections, like the lines between the sections of this article.
Spacer
Use a spacer to add empty space between blocks. Use it sparingly, because PinkDocs already spaces blocks evenly.
Core blocks or PinkDocs blocks?
| You want to show… | Use |
|---|---|
| A tip, note or warning | PinkDocs Alert, not Quote |
| A task with several steps | PinkDocs Steps, not a numbered list |
| Code readers will copy | PinkDocs Code block, not core Code |
| Common questions | PinkDocs FAQ, not Details |
| Options readers choose between | PinkDocs Tabs, not Columns |
| One main action | PinkDocs Button |
| Text, headings, tables and images | Core blocks |