Widgets

Widgets are the content units placed inside columns. Widgets are defined in a registry and render using shortcodes on the frontend.

Where to find widget definitions

• Registry and dialog tab definitions: admin/assets/js/src/page-builder/config/widgetTypes.js
• Dialog state mapping: usePageBuilderStore.js (look for DIALOG_ID_MAP / TYPE_FROM_DIALOG_ID)
• Frontend renderer: public/class-sanil-website-builder-public.php

Common widget fields and patterns

• widget_uid — unique id for each widget instance
• widget_type — string type from registry
• widget_values — JSON string containing widget-specific settings
• show_desktop / show_mobile — visibility flags

Adding a widget

1. Add an entry to WIDGET_TYPES in widgetTypes.js with type, label, icon, defaultValues, and dialogTabs.
2. Update usePageBuilderStore.js mappings so the dialog state maps back to the widget type.
3. Update frontend handler (shortcode renderer) in public/class-sanil-website-builder-public.php to render the widget output.

Widget examples

• posts — posts listing grid with sanilwb_columns, sanilwb_type, etc.
• image — responsive image with link options
• button — CTA button with style and alignment options