Media · Gutenberg
Product 360° block for WordPress
Drag or auto-spin through a sequence of images for immersive 360° product views.
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
Drag or auto-spin through a sequence of images for immersive 360° product views.
Inspector panels on this block: Frames (' + totalFrames +, Viewer, Behaviour. Those titles come from index.js, not from a shared template.
Where to find it
Gutenberg inserter → Media → search “Product 360°” (block name `blockenberg/product-360` in block.json). Style it in the sidebar after insert.
How to use Product 360° block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Product 360°”, insert it. Category: Media.
- Configure inspector controls that exist on this block. Open Frames (' + totalFrames +. Set “Width (px)”, “Height (px)”, “Radius (px)”, “Drag Sensitivity”.
- Check the published page. The view script reads HTML data attributes: data-opts. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Width (px) | Numeric range control in the inspector. Range 200–1400. block.json default: 600. Saved as `viewerWidth`. |
| Height (px) | Numeric range control in the inspector. Range 120–900. block.json default: 400. Saved as `viewerHeight`. |
| Radius (px) | Numeric range control in the inspector. Range 0–40. block.json default: 16. Saved as `viewerRadius`. |
| Drag Sensitivity | Numeric range control in the inspector. Range 1–20. block.json default: 4. Saved as `dragSensitivity`. |
| Auto Spin | On/off toggle in the inspector. Off by default. Saved as `autoSpin`. |
| Auto Speed (frames/sec) | Numeric range control in the inspector. Range 5–240. block.json default: 60. Saved as `autoSpeed`. |
| Show Progress Bar | On/off toggle in the inspector. On by default. Saved as `showProgress`. |
| Show Controls (prev/next) | On/off toggle in the inspector. On by default. Saved as `showControls`. |
| Show Hint | On/off toggle in the inspector. On by default. Saved as `showHint`. |
| Hint Text | Text field in the inspector. block.json default: Drag to rotate. Saved as `hintText`. |
| Hint | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `hintTypo`. |
| Viewer BG | Color control in the inspector. block.json default: #f1f5f9. Saved as `bgColor`. |
| Progress | Color control in the inspector. block.json default: #6366f1. Saved as `progressColor`. |
| Hint Text | Color control in the inspector. block.json default: #64748b. Saved as `hintColor`. |
| Controls BG | Color control in the inspector. block.json default: #ffffff. Saved as `controlsBg`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts.
- An IntersectionObserver starts work when the block enters the viewport.
When this is the right block
- Drag or auto-spin through a sequence of images for immersive 360° product views — that is the job of Product 360°, not a generic content block.
- Use it when you need the editor control labeled “Width (px)”, which exists on this block’s inspector.
- Inserter grouping: video, animation, and rich media sections.
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 Product 360° block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Product 360°”. It sits under Media. After insert, open Frames (' + totalFrames + and set “Width (px)”, “Height (px)”, “Radius (px)”, “Drag Sensitivity”.
What makes Product 360° different from other Blockenberg blocks?
Drag or auto-spin through a sequence of images for immersive 360° product views. Inspector labels on this block include “Width (px)”, “Height (px)”, “Radius (px)”, “Drag Sensitivity”.
Is the Product 360° Gutenberg block free?
Yes. Product 360° ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Product 360° 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: Frames (' + totalFrames +, Viewer, Behaviour).
Related media blocks
Audio Player
Custom-styled audio player with cover art, track info, and branded controls. Perfect for podcasts and soundclips.
Background Video
A looping autoplay background video section with overlay and InnerBlocks content — distinct from video players or popups.
Before / After Grid
A grid of interactive before/after image comparison sliders — show multiple transformations, makeovers, or design iterations in one layout.
Before/After Slider
Compare two images with a draggable slider handle.
Device Mockup
Display a screenshot or image inside a realistic device frame — phone, tablet, laptop, or browser window.
Embed / iFrame
Responsive iframe embed for Calendly, Typeform, Google Forms, Airtable, YouTube, Vimeo, or any URL. Full aspect-ratio control and loading options.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Product 360° from the Gutenberg inserter.