Feature · Gutenberg · Blockenberg
Typography control: a shared font popover and Google Fonts loader
Typography is not a separate block. Blocks that expose a TypographyControl in their inspector share one script. Published pages load only the Google families actually used in those attributes.
Get Blockenberg
Blockenberg is a Gutenberg block library. These features are plugin-wide editor tools, not Elementor extensions.
What it actually does
Default typography object keys: family, sizeDesktop/Tablet/Mobile + sizeUnit, weight, transform, style, decoration, lineHeight* + unit, letterSpacing* + unit, wordSpacing* + unit.
Front-end loader runs on wp_enqueue_scripts only for singular posts with blocks. It walks parsed blocks named blockenberg/*, finds attributes whose key ends with Typo or starts with typo, and if family is not in the system list (Arial, Georgia, Helvetica, Tahoma, Times New Roman, Trebuchet MS, Verdana), enqueues https://fonts.googleapis.com/css2?family=…:wght@300;400;500;600;700;800;900&display=swap.
Where it lives in WordPress
In the editor, open a Blockenberg block that has a typography control (often labeled Title Typography or similar). Script handle bkbg-typography-control is registered on init so block scripts can depend on it. wp_localize_script exposes window.bkbgGoogleFonts from bkbg_google_fonts_list() in assets/php/google-fonts.php. The control also sets window.bkbgTypographyControl, window.bkbgTypoCssVars, and window.bkbgLoadGoogleFont.
How to use it
- Select a text-heavy Blockenberg block. Open the typography popover on the control that uses TypographyControl.
- Pick a family. Google list is injected as bkbgGoogleFonts. System fonts will not enqueue a Google request.
- Set desktop size, then tablet/mobile. Each device has its own size/line-height/spacing fields.
- Publish a singular post/page. The PHP walker only runs on singular views with blocks.
- Confirm the network tab. You should see fonts.googleapis.com only for non-system families actually stored on blocks.
Controls and behavior
| Piece | What the plugin does |
|---|---|
| family | Triggers Google Fonts enqueue unless it is in the system list (Arial, Georgia, Helvetica, Tahoma, Times New Roman, Trebuchet MS, Verdana). |
| bkbg_google_fonts_list() | PHP list localized as window.bkbgGoogleFonts for the popover. |
| size / lineHeight / letterSpacing / wordSpacing | Per desktop, tablet, mobile with units. |
| weight / transform / style / decoration | Standard CSS font properties. |
When this is the right tool
- Matching a heading to a brand Google font without a separate fonts plugin.
- Smaller type on mobile via sizeMobile without custom CSS.
Notes from the code
Archives and non-singular templates do not run this walker — only singular posts/pages. blockenberg.com.
FAQ
Font looks fine in the editor but not on the blog index.
Google Fonts enqueue is hooked for singular posts only.
Can I use a custom hosted font?
The loader is Google CSS2 URLs plus a system-font skip list. Custom files need your theme or Custom CSS.
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.
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.