Developers · Gutenberg
API Reference block for WordPress
Display API endpoint documentation with method badge, parameters table, and request/response code examples.
Get Blockenberg
Free Gutenberg block in Blockenberg. The inspector controls and front-end behavior on this page come from this block’s source, not a shared stub.
What it actually does
Display API endpoint documentation with method badge, parameters table, and request/response code examples.
Inspector panels on this block: Endpoint Settings, Code Examples, Parameters (' + a.params.length +, Header Colors, Method Colors. Those titles come from index.js, not from a shared template.
Behavior controls: “Location” options: Path, Query, Body, Header; “Type” options: string, integer, number, boolean, array; “Authentication Type” options: No Auth, Bearer Token, API Key, Basic Auth; “Request Language” options: cURL, JavaScript, Python, PHP, Go.
Where to find it
Gutenberg inserter → Developers → search “API Reference” (block name `blockenberg/api-reference` in block.json). Style it in the sidebar after insert.
How to use API Reference block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “API Reference”, insert it. Category: Developers.
- Configure inspector controls that exist on this block. Open Endpoint Settings. Set “Name”, “Location”, “Type”, “Required”.
- Check the published page. The view script reads HTML data attributes: data-opts, data-rendered, data-tab. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Name | Text field in the inspector. |
| Location | Select control; the chosen value is saved on the block. Options: Path; Query; Body; Header. |
| Type | Select control; the chosen value is saved on the block. Options: string; integer; number; boolean; array; object. |
| Required | On/off toggle in the inspector. |
| Description | Text field in the inspector. |
| Example | Text field in the inspector. |
| HTTP Method | Select control; the chosen value is saved on the block. block.json default: GET. Saved as `method`. |
| Base URL | Text field in the inspector. block.json default: https://api.example.com. Saved as `baseUrl`. |
| Endpoint Path | Text field in the inspector. block.json default: /api/v1/users/{id}. Saved as `endpoint`. |
| Authentication Type | Select control; the chosen value is saved on the block. Options: No Auth; Bearer Token; API Key; Basic Auth. block.json default: bearer. Saved as `authType`. |
| Show Base URL | On/off toggle in the inspector. On by default. Saved as `showBaseUrl`. |
| Show Auth Badge | On/off toggle in the inspector. On by default. Saved as `showAuth`. |
| Show Copy Button | On/off toggle in the inspector. On by default. Saved as `showCopyButton`. |
| Request Language | Select control; the chosen value is saved on the block. Options: cURL; JavaScript; Python; PHP; Go. block.json default: curl. Saved as `requestLang`. |
| Code Theme | Select control; the chosen value is saved on the block. Options: Dark; Light. block.json default: dark. Saved as `codeTheme`. |
| Border Radius | Numeric range control in the inspector. Range 0–20. block.json default: 8. Saved as `borderRadius`. |
| Header Background | Color control in the inspector. block.json default: #1e1e2e. Saved as `headerBg`. |
| Header Text | Color control in the inspector. block.json default: #e2e8f0. Saved as `headerColor`. |
| Header Colors — Border | Color control in the inspector. block.json default: #e2e8f0. Saved as `borderColor`. |
| Table Background | Color control in the inspector. block.json default: #ffffff. Saved as `tableBg`. |
| Table Alt Row | Color control in the inspector. block.json default: #f8fafc. Saved as `tableAltBg`. |
| GET | Color control in the inspector. block.json default: #22c55e. Saved as `getBg`. |
| POST | Color control in the inspector. block.json default: #3b82f6. Saved as `postBg`. |
| PUT | Color control in the inspector. block.json default: #f59e0b. Saved as `putBg`. |
| PATCH | Color control in the inspector. block.json default: #8b5cf6. Saved as `patchBg`. |
| DELETE | Color control in the inspector. block.json default: #ef4444. Saved as `deleteBg`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts, data-rendered, data-tab.
When this is the right block
- Display API endpoint documentation with method badge, parameters table, and request/response code examples — that is the job of API Reference, not a generic content block.
- Use it when you need the editor control labeled “Name”, which exists on this block’s inspector.
- It matches pages about api, rest, endpoint.
- Inserter grouping: docs sites, utilities, and developer landing pages.
Notes from the implementation
viewScript: this folder’s frontend.js is enqueued on the front end for this block.
FAQ
How do I add the API Reference block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “API Reference”. It sits under Developers. After insert, open Endpoint Settings and set “Name”, “Location”, “Type”, “Required”.
What makes API Reference different from other Blockenberg blocks?
Display API endpoint documentation with method badge, parameters table, and request/response code examples. Inspector labels on this block include “Name”, “Location”, “Type”, “Required”.
Is the API Reference Gutenberg block free?
Yes. API Reference ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style API Reference to match my theme?
Yes. Blockenberg’s shared typography and color panels apply here, plus any block-specific style controls listed on this page (panels: Endpoint Settings, Code Examples, Parameters (' + a.params.length +, Header Colors).
Related developers blocks
Code Tabs
Multi-language tabbed code viewer with syntax highlighting. Show the same snippet in JavaScript, Python, PHP, and more.
GitHub Card
Display a GitHub user profile or repository card with live stats fetched from the GitHub API.
JSON Formatter
Validate, format (pretty-print), and minify JSON with syntax highlighting and one-click copy.
Base64 Encoder / Decoder
Encode plain text to Base64 or decode Base64 back to text. Supports Unicode, URL-safe Base64 and one-click copy.
Clipboard Copy
Display a copyable code, coupon, or text with a one-click copy button.
Code Block
Syntax-highlighted code block with copy button, line numbers, and multiple themes.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert API Reference from the Gutenberg inserter.