Feature · Gutenberg · Blockenberg
Icon picker: one control for Dashicons, SVG, and images
Blocks do not each ship a different icon UI. They call bkbgIconPicker.IconPickerControl (editor) and buildFrontendIcon (front). The same file is registered with WordPress deps for the editor and without them for the front.
Get Blockenberg
Blockenberg is a Gutenberg block library. These features are plugin-wide editor tools, not Elementor extensions.
What it actually does
The picker includes a Dashicons list with search, an SVG path dictionary (check, arrow, star, heart, bolt, and more), special SVG markup for disc/square, and an image upload path.
Editor APIs: IconPickerControl, buildEditorIcon, buildSaveIcon, iconPickerProps. Front: buildFrontendIcon. Data: svgPaths, dashicons, iconTypeOptions.
Block scripts list bkbg-icon-picker in the shared editor dependency array in blockenberg.php. Frontend scripts depend on bkbg-icon-picker-frontend.
Where it lives in WordPress
Any Blockenberg block that shows an icon control (buttons, lists, feature grids, etc.). Scripts: bkbg-icon-picker (editor) and bkbg-icon-picker-frontend (front), both pointing at assets/js/icon-picker.js.
How to use it
- Insert a block that has an icon. Open General (or the icon panel).
- Choose icon type. Dashicon vs bundled SVG vs image.
- Search Dashicons or pick an SVG name. The control filters the dashicon list as you type.
- Or upload an image. Stored as media; the frontend builder outputs an img.
- Check the front end. Interactive blocks load icon-picker-frontend with their frontend.js.
Controls and behavior
| Piece | What the plugin does |
|---|---|
| iconType | Which renderer to use. |
| Dashicons subset | Not every WordPress dashicon — the file ships a curated list. |
| svgPaths | Inline path data for bundled icons. |
| Image upload | Media library ID/URL via the picker. |
When this is the right tool
- A feature list with consistent check icons.
- A CTA button with an uploaded brand glyph instead of a dashicon.
Notes from the code
If a block’s frontend.js is missing from the dependency list, icons may render in the editor only. That is a per-block enqueue issue, not a second picker. blockenberg.com.
FAQ
Can I paste Font Awesome CSS classes?
The picker is Dashicons, bundled SVG paths, or an image — not a FA kit.
Why is the icon missing on the published page?
The block’s frontend.js must depend on bkbg-icon-picker-frontend, which the plugin registers globally.
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.
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).
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.