Gutenberg Block
The DICOM Viewer Gutenberg block is the recommended way to add medical image viewers to your pages and posts.
Inserting the Block
- Edit or create a post or page in the WordPress block editor.
- Click the + button to add a new block.
- Search for DICOM Viewer or scroll to find it.
- Click the DICOM Viewer block to insert it.
The block is inserted into your page as a placeholder. The actual viewer renders on the frontend.
Selecting a File
- With the block inserted, click Select DICOM File in the block placeholder.
- A media picker dialog opens — select a
.dcmfile or.ziparchive from your media library. - If the file isn’t in your library yet, click Upload Files to add it.
- Once selected, the block shows an interactive preview in the editor.
Block Settings Panel
When the block is selected, the right sidebar shows these setting groups:
| Group | Purpose |
|---|---|
| Settings | File URL, sizing, info/download visibility, front-end controls, and anonymization |
| Default View | Captured viewport defaults such as series, slice, zoom, pan, and window/level |
| Grid Layout | Layout mode, columns, auto-grid threshold, reference lines, and selector toggles |
All settings are optional — unset values inherit the global defaults from DICOM Viewer. The editor preview stays interactive, and the current viewport is captured automatically when you save or update the post.
Alignment
The block supports the wide and full alignment options (available via the alignment control in the block toolbar).
Block Settings
This page documents all attributes available in the DICOM Viewer Gutenberg block (dicom-viewer/viewer).
File Selection
| Attribute | Type | Default | Description |
|---|---|---|---|
attachmentId | number | 0 | WordPress media library attachment ID of the DICOM file or ZIP |
fileUrl | string | "" | Direct URL to a DICOM file (used when attachment ID is not set) |
Note: Provide either attachmentId or fileUrl, not both. attachmentId is preferred because it integrates with WordPress’s media library and permissions.
Display Settings
| Attribute | Type | Default | Description |
|---|---|---|---|
height | string | "" | CSS height of the viewer (e.g., 480px, 60vh). Empty = use global default from settings |
width | string | "" | CSS width or max-width of the viewer wrapper (e.g., 100%, 960px). Empty = use the default full width |
Viewer Controls
| Attribute | Type | Default | Description |
|---|---|---|---|
showInfo | string | "" | Show the Info button: "yes", "no", or "" (inherit global). Warning: Info overlay may display PHI. |
showDownload | string | "" | Show or hide the download link: "yes", "no", or "" (inherit global) |
showPanControl | string | "" | Show or hide the Pan tool on the front end |
showZoomControl | string | "" | Show or hide the Zoom tool and zoom buttons on the front end |
showWLControl | string | "" | Show or hide the window/level controls on the front end |
showNavButtons | string | "" | Show or hide the next / previous slice buttons on the front end |
showSlider | string | "" | Show or hide the slice slider on the front end |
Note: Boolean attributes use string values ("yes" / "no") rather than true/false because an empty string is needed to represent "inherit global default".
Anonymization
| Attribute | Type | Default | Description |
|---|---|---|---|
anonLevel | string | "" | Tag redaction level: off, basic, standard, strict, or "" (inherit global default) |
See Anonymization Settings for details on each level.
Layout & Grid
| Attribute | Type | Default | Description |
|---|---|---|---|
layout | string | "" | Layout mode: auto, single, grid, or "" (inherit global default) |
gridCols | number | 0 | Grid columns (1–4). 0 = use global default. Only applies when layout is grid. |
gridMinSeries | number | 0 | Series threshold for auto-grid activation (0 = use global default). Only applies when layout is auto. |
refLines | string | "" | Show reference lines in grid: "yes", "no", or "" (inherit global default) |
showSeriesSelector | string | "" | Show or hide the series selector UI on the front end |
showPaneSelector | string | "" | Show or hide the pane count selector in grid mode |
See Grid Layout for details.
Older saved content may still contain a seriesDisplay attribute. In current versions this is only kept for legacy compatibility, mainly for none to hide the selector on older embeds.
Single-Pane Viewport Defaults
These attributes preset the viewer’s zoom, pan, and window/level when the page loads. They only apply to the single-pane view (not grid layout).
| Attribute | Type | Default | Description |
|---|---|---|---|
defaultSeries | number | 0 | Zero-based series index to display on load |
defaultSlide | number | 0 | Zero-based slice index within the series |
defaultZoom | number | 0 | Zoom factor (1.0 = 100%, 2.0 = 200%, etc.) |
defaultPanX | number | 0 | Horizontal pan offset in pixels |
defaultPanY | number | 0 | Vertical pan offset in pixels |
defaultWC | number | 0 | Starting window center |
defaultWW | number | 0 | Starting window width |
Multi-Pane Viewport Defaults
These attributes preset the state of each pane in grid layout. Values are comma-separated (one per pane).
| Attribute | Type | Default | Description |
|---|---|---|---|
defaultPanes | number | 0 | Number of grid panes to open initially |
defaultSlides | string | "" | Comma-separated slice indices (e.g., 0,5,10 for three panes) |
defaultZooms | string | "" | Comma-separated zoom factors |
defaultPanXs | string | "" | Comma-separated horizontal pan offsets |
defaultPanYs | string | "" | Comma-separated vertical pan offsets |
defaultWCs | string | "" | Comma-separated window center values |
defaultWWs | string | "" | Comma-separated window width values |
defaultPaneSeries | string | "" | Comma-separated series indices for each pane |
Example: To open 3 panes showing slices 0, 5, and 10 with zoom 1.5x each:
defaultPanes: 3
defaultSlides: "0,5,10"
defaultZooms: "1.5,1.5,1.5"
defaultPanXs: "0,0,0"
defaultPanYs: "0,0,0"
defaultWCs: "40,40,40"
defaultWWs: "400,400,400"
Block Supports
- Alignment:
wideandfullare supported - HTML: HTML editing is disabled for this block
Inheritance & Defaults
All unset (empty string or 0) attributes inherit from the global settings under DICOM Viewer. This makes it easy to set site-wide defaults and override only on specific blocks where needed.
To check what the global defaults are, visit the appropriate Admin Settings tab.