The Blocksify editor UI API, exposed as the runtime bag on window.blocksify.editor, provides curated editor components and helper utilities to extensions.
Use the runtime bag when an extension needs Blocksify’s active editor primitives, the Repeater’s frame and controls, the Popover’s frame, responsive helpers, interaction presets, icon helpers, and matching editor CSS without bundling a copy of the Free plugin source.
What is the runtime bag?
The runtime bag is the public editor UI surface exposed by the blocksify-editor-ui script handle. Free enqueues the handle in the block editor and assigns a frozen object to window.blocksify.editor.
Published runtime bag.
window.blocksify.editor = Object.freeze( {
...editorUi,
Repeater,
Popover,
ResponsiveField,
StylingRepeater,
buildSparsePreviewCss,
GapControl,
formatGap,
interactions,
generateUid,
useStableUid,
blockUidClass,
resolveResponsive,
responsiveKey,
getResponsiveInheritedFrom,
useActiveDevice,
useIsHoverMode,
IconLibrary,
SwatchButton,
renderIcon,
isRenderableIcon,
version: 2,
} );The editorUi bag includes ten primitives: PopoverSection, Fieldset, FieldRow, TextField, Select, SegmentedControl, SegmentedTabs, OptionList, NumericField, and RecordPicker. The handle also bundles the related frame and control styles.
Why extensions should use it
A Pro-owned block or inspector panel does not automatically receive the same ui prop that Free passes to catalog editors. The runtime bag gives that code the active Free plugin’s components at runtime.
- Extensions avoid snapshot drift from bundled component copies.
- Free can ship component CSS through the same handle.
- Pro can depend on the handle the same way WordPress packages depend on
wp.elementorwp.components.
Exported keys
UI primitives
| Key | What it is |
PopoverSection | Section wrapper for grouped popover controls. |
Fieldset | Grouped field container with legend support. |
FieldRow | Row layout for one editor field and its label. |
TextField | Text input primitive used by Blocksify controls. |
Select | Select input primitive for option lists. |
SegmentedControl | Segmented option control for compact choices. |
SegmentedTabs | Segmented tab control for switching related panels. |
OptionList | Selectable list primitive for option groups. |
NumericField | Numeric input primitive with Blocksify field behavior. |
RecordPicker | Record selection primitive for post-like data. |
Styling and layout
| Key | What it is |
Repeater | Shared frame and controls for ordered editor items. |
Popover | Shared popover frame for Blocksify editor controls. |
ResponsiveField | Responsive-aware field wrapper. |
StylingRepeater | Styling repeater control for rule groups and properties. |
buildSparsePreviewCss | Builds sparse preview CSS from styling values. |
GapControl | Gap editor control used by Blocksify layout UI. |
formatGap | Formats gap values for control display and output. |
Responsive helpers and uid helpers
| Key | What it is |
generateUid | Creates a Blocksify uid string. |
useStableUid | React hook that keeps a stable uid on block attributes. |
blockUidClass | Builds the CSS class for a block uid. |
resolveResponsive | Resolves a responsive value for the current device. |
responsiveKey | Builds a device-specific responsive attribute key. |
getResponsiveInheritedFrom | Finds the device that supplies an inherited responsive value. |
useActiveDevice | React hook for the active editor preview device. |
useIsHoverMode | React hook for Blocksify hover editing mode. |
Icons and interactions
| Key | What it is |
IconLibrary | Blocksify icon library data for editor UI. |
SwatchButton | Swatch button component for visual choices. |
renderIcon | Renders a Blocksify icon value. |
isRenderableIcon | Checks whether an icon value can be rendered. |
interactions | Interaction presets and helpers exported for editor controls. |
version | Runtime bag version. Blocksify 1.2.0 exposes 2. |
DEWP wiring
Use Dependency Extraction Webpack Plugin request mapping so imports resolve to the runtime global and the generated asset file depends on blocksify-editor-ui.
Map the import to the global.
// webpack.config.js
requestToExternal: ( request ) =>
request === '@blocksify-free/editor' ? [ 'blocksify', 'editor' ] : undefined,
requestToHandle: ( request ) =>
request === '@blocksify-free/editor' ? 'blocksify-editor-ui' : undefined,Import named components in the extension.
import { Repeater, FieldRow, NumericField } from '@blocksify-free/editor';At runtime, that import resolves to window.blocksify.editor.Repeater, window.blocksify.editor.FieldRow, and window.blocksify.editor.NumericField. The generated asset dependencies ensure the handle loads first.
Additive contract
The bag is additive. Blocksify can add keys, but exposed keys should not be removed or renamed without a deprecation path because every key is a public API commitment.
Use version for feature detection when an extension can run against more than one installed Free version.
Guard runtime keys.
const editor = window.blocksify && window.blocksify.editor;
if ( editor && editor.version >= 2 && editor.SegmentedTabs ) {
// Use the shared Blocksify tabs primitive.
}What belongs in the bag?
Exposure is curated, not automatic. A new primitive should be added to the shared editorUi bag; a new shared frame or control component should be imported by the editor UI entry and assigned a key.
Use the broader hooks overview for PHP filters, block registration surfaces, and JavaScript hook filters. Use this runtime bag only for shared editor UI components, such as extension editors for Content Loop or Form integrations.