Feature · Gutenberg · Blockenberg
Inspector tabs: General vs Advanced on every Blockenberg block
You do not add Inspector Tabs as a block. The plugin filters editor.BlockEdit so every Blockenberg block’s sidebar has General (that block’s own controls) and Advanced (shared layout system).
Get Blockenberg
Blockenberg is a Gutenberg block library. These features are plugin-wide editor tools, not Elementor extensions.
What it actually does
inspector-tabs.js builds an attribute map for every blockenberg/* block: margin and padding per side per device (desktop / Tablet / Mobile) with units and linked toggles; z-index per device; CSS ID and CSS classes; background type/color/image/gradient (normal and hover); border type/width/color/radius (normal and hover); box shadow (normal and hover); hide on desktop/tablet/mobile.
WordPress would strip unknown attributes on the server. blockenberg.php hooks register_block_type_args and merges the same bkbg* attributes so they survive prepare_attributes_for_render. Core Dimensions/spacing supports are unset to avoid duplicate UIs.
On the front, render_block injects desktop styles inline on the wrapper and tablet/mobile rules in <style> tags with media queries, plus CSS ID/classes.
Where it lives in WordPress
Edit any Blockenberg block in the Gutenberg editor. The inspector (right sidebar) shows two tabs labeled General and Advanced. Script handle bkbg-inspector-tabs, enqueued on enqueue_block_editor_assets.
How to use it
- Insert any Blockenberg block. Open the block sidebar.
- Use General for block-specific content. That is the original inspector for that block.
- Open Advanced for layout. Margin, padding, background, border, shadow, CSS ID/classes, hide per device.
- Set tablet/mobile variants. Attributes use Tablet and Mobile suffixes; the PHP renderer emits matching media queries.
- Publish and view the front end. Do not judge responsive spacing only in the desktop canvas.
Controls and behavior
| Piece | What the plugin does |
|---|---|
| General tab | The block’s own controls (not the layout system). |
| Margin / Padding | Per side, per device, with units and linked lock. |
| Background | Color, image (responsive), or gradient; hover variants. |
| Hide desktop/tablet/mobile | Boolean attributes bkbgHideDesktop / Tablet / Mobile. |
| CSS ID / CSS Classes | Injected in render_block for reliability. |
When this is the right tool
- Spacing a marketing block without wrapping it in extra groups.
- A hover gradient on a card that the block’s General tab does not expose.
- Hiding a block on mobile without a duplicate page.
Notes from the code
Inner row/column blocks with a parent in block.json are skipped from the public docs library, but they still receive the same inspector HOC if they are blockenberg/*. Product: blockenberg.com.
FAQ
Where did Gutenberg’s Dimensions panel go?
Blockenberg unsets core spacing/dimensions supports so Advanced is the single spacing UI.
Why did my padding disappear after save?
Server-side attribute registration exists specifically so WP does not strip bkbg* keys. Update the plugin if you are on a fork without that filter.
Is this Elementor’s Advanced tab?
No. It is Gutenberg inspector UI. The layout idea is similar; the implementation is block attributes + render_block.
Other plugin features
Block Manager: enable and disable Gutenberg blocks
A wp-admin dashboard that stores disabled block names in blockenberg_disabled_blocks and skips those folders during register_block_type and asset registration.
Layout system: shared spacing and background CSS for every block
Server-registered bkbg* attributes and a render_block filter that prints desktop inline CSS plus tablet/mobile media queries. layout.css is shared by section/row/column.
Typography control: a shared font popover and Google Fonts loader
window.bkbgTypographyControl is a reusable popover. On the front, blockenberg.php scans *Typo / typo* attributes for family and enqueues Google Fonts CSS2 URLs (skipping system fonts).
Icon picker: one control for Dashicons, SVG, and images
window.bkbgIconPicker exposes IconPickerControl, editor/save builders, and a frontend DOM builder. Icon types include Dashicons, bundled SVG paths, and media uploads.
Block categories: how Blockenberg groups 600+ blocks
block_categories_all prepends twelve Blockenberg categories so the inserter lists them above generic groups. Each block.json sets category; the dashboard uses the same labels.
Get Blockenberg
Install the plugin from WordPress.org, then use this feature in the native block editor.