Feature · Gutenberg · Blockenberg
Layout system: shared spacing and background CSS for every block
The layout system is the CSS engine behind the Advanced tab. It is not a “Layout block” you insert. Section, row, and column additionally depend on bkbg-layout-system stylesheet.
Get Blockenberg
Blockenberg is a Gutenberg block library. These features are plugin-wide editor tools, not Elementor extensions.
What it actually does
Attribute prefixes include bkbgMargin*, bkbgPadding*, bkbgZIndex*, bkbgBg* (color, image, gradient, hover), bkbgBorder*, bkbgShadow*, bkbgHideDesktop|Tablet|Mobile, bkbgCssId, bkbgCssClasses.
Desktop rules are inlined on the wrapper. Tablet and mobile rules are extra <style> blocks with media queries. Hover background/border/shadow get separate CSS.
Section, row, and column style handles list bkbg-layout-system as a dependency so structural blocks get the shared layout CSS on the front end.
Where it lives in WordPress
Same Advanced tab as Inspector Tabs. Front-end CSS is generated in the render_block filter in blockenberg.php. Shared variables live in assets/css/layout.css (registered as bkbg-layout-system).
How to use it
- Select a Blockenberg block. Open Advanced.
- Set desktop spacing first. Then switch the device UI in the control and set Tablet/Mobile.
- Add background or border only if needed. Hover styles are separate attributes.
- Optional CSS ID. For theme CSS or jump links — injected during render.
- View the page at tablet width. Inline desktop CSS will not show tablet overrides in a desktop-only glance.
Controls and behavior
| Piece | What the plugin does |
|---|---|
| register_block_type_args | Merges layout attributes onto every blockenberg/* type. |
| render_block | Turns attributes into CSS + ID/classes. |
| layout.css | Shared layout variables; required by section/row/column. |
| Hide on device | CSS hide flags per breakpoint. |
When this is the right tool
- A full-width section with different padding on mobile.
- A card with a hover gradient and a box shadow that does not exist on General.
Notes from the code
The main plugin file raises memory_limit because each block gets hundreds of extra attributes. Disable unused blocks in Block Manager if editors feel heavy. blockenberg.com.
FAQ
Why is layout.css not on every block?
It is a dependency for section, row, and column. Other blocks still get inline CSS from render_block.
Can I use this on core Paragraph?
No. The filter only runs when blockName starts with blockenberg/.
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.
Inspector tabs: General vs Advanced on every Blockenberg block
A BlockEdit higher-order component (inspector-tabs.js) injects General / Advanced tabs on all blockenberg/* blocks and registers shared layout attributes.
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.