# Divi Integration Addon

Divi Integration Addon is a compatibility layer that brings **JetEngine** and **JetSmartFilters** blocks into the **Divi 5 Module Library**.

Instead of reimplementing JetEngine logic, this plugin maps JetEngine block settings to Divi module attributes and renders output through JetEngine server-side renderers. The result is a Divi-native editing experience with JetEngine-compatible frontend behavior.

## Changelog

### 0.9.0
- Initial realease

## Why this plugin exists

JetEngine and JetSmartFilters are block/Elementor-oriented by default. Divi users need:

- module-level controls in Divi panels,
- consistent server-rendered output,
- access to listing/filter functionality without rebuilding templates manually.

This plugin solves that by registering Divi modules that mirror JetEngine/Smart Filters blocks and passing settings to the original rendering layer.

## Core capabilities

- Registers JetEngine and JetSmartFilters modules in Divi 5.
- Keeps module attributes aligned with JetEngine block attributes.
- Uses server-side rendering for preview and frontend output.
- Exposes Content / Design / Advanced settings in Divi UI.
- Maps custom SVG icons into Divi icon library.
- Supports module styles via Divi style API + PHP style callbacks.

## Available modules

### JetEngine modules

- `Dynamic Field`
- `Dynamic Image`
- `Dynamic Repeater`
- `Dynamic Meta`
- `Dynamic Link`
- `Dynamic Terms`
- `Listing Grid`
- `Listing Calendar`
- `Maps Listing`

### JetSmartFilters modules

- `Select Filter`
- `Checkboxes Filter`
- `Radio Filter`
- `Range Filter`
- `Check Range Filter`
- `Date Range Filter`
- `Date Period Filter`
- `Rating Filter`
- `Color Image`
- `Search`
- `Sorting`
- `Pagination`
- `Apply Button`
- `Active Filters`
- `Active Tags`
- `Remove Filters`
- `Alphabet`
- `Hidden`

## What each block does

### JetEngine modules

- `Dynamic Field` – Outputs a single dynamic value from post/object meta, options, or context with optional formatting and callbacks.
- `Dynamic Image` – Renders dynamic images (featured image, meta image, avatar, etc.) with optional linking, sizing, fit, and caption.
- `Dynamic Repeater` – Loops through repeater-like data and renders each item by a format template.
- `Dynamic Meta` – Displays common post meta items (date, author, comments) with prefixes/suffixes and link options.
- `Dynamic Link` – Builds dynamic links from object fields/meta/options with custom label, icon, and link attributes.
- `Dynamic Terms` – Shows taxonomy terms for the current object with delimiter, prefix/suffix, icon, sorting, and fallback options.
- `Listing Grid` – Renders JetEngine listing items in a grid/masonry/slider layout with query, load more, and visibility controls.
- `Listing Calendar` – Displays listing items in calendar layout grouped by date/meta date with date-range and query controls.
- `Maps Listing` – Displays listing items on a map with marker configuration, clustering, popup behavior, and query controls.

### JetSmartFilters modules

- `Select Filter` – Dropdown filter for connected providers/lists.
- `Checkboxes Filter` – Multi-select checkbox filter for terms/meta/options.
- `Radio Filter` – Single-choice radio filter.
- `Range Filter` – Numeric range filter with slider and optional inputs.
- `Check Range Filter` – Predefined range buckets rendered as selectable options.
- `Date Range Filter` – Start/end date range filtering.
- `Date Period Filter` – Predefined date periods (today, week, month, etc.).
- `Rating Filter` – Filters by rating values/intervals.
- `Color Image` – Visual swatch/image-based filter options.
- `Search` – Text search filter for provider content.
- `Sorting` – Sort selector (order/orderby) for provider results.
- `Pagination` – Paged navigation / load-more control for filtered results.
- `Apply Button` – Explicit apply trigger for filters configured in submit mode.
- `Active Filters` – Shows currently applied filters with per-item remove actions.
- `Active Tags` – Displays active filter tags/chips and supports clearing.
- `Remove Filters` – One-click reset/clear all filters action.
- `Alphabet` – A–Z style filter for first-letter matching.
- `Hidden` – Hidden helper filter used to pass fixed/dynamic query values.

## How it works

### 1) Module metadata

Each module has `module.json` in `src/components/<module>/`.

This defines:

- module name and icon,
- Divi attribute schema,
- style decorations/groups,
- panel structure consumed by Divi.

At build time this JSON is copied to `modules-json/<module>/module.json` and used by PHP registration.

### 2) Editor integration (React/TS)

Each module usually includes:

- `settings-content.tsx` – Content panel fields,
- `settings-design.tsx` – Design groups,
- `settings-advanced.tsx` – Advanced groups,
- `edit.tsx` – module wrapper + SSR preview,
- `styles.tsx` – Divi style definitions,
- `types.ts` – typed attributes,
- `index.ts` – module registration object.

Editor preview uses shared `ServerSideRender` component, passing converted Divi attrs to module render endpoints.

### 3) Server registration and rendering (PHP)

For each module, PHP class in `includes/components/.../modules/*.php`:

- registers module JSON via `ModuleRegistration::register_module(...)`,
- provides `render_callback(...)`,
- optionally defines `module_styles(...)`, `module_script_data(...)`, `module_classnames(...)`.

`render_callback` delegates to JetEngine render instances (for example `dynamic-field`, `listing-grid`, `maps-listing`) and wraps output in Divi module rendering pipeline.

### 4) Shared data bridge

The plugin localizes JetEngine editor config to `window.JetEngineDiviViews`:

- attribute schemas,
- options lists (listings, taxonomies, callbacks, image sizes, etc.),
- active modules and provider settings.

This keeps Divi settings synchronized with JetEngine data sources.

## Requirements

- WordPress
- Divi 5 (module library APIs)
- JetEngine (required for JetEngine modules)
- JetSmartFilters (required for filter modules)

## Installation

1. Install and activate JetEngine.
2. (Optional) Install and activate JetSmartFilters.
3. Install and activate this plugin.
4. Open Divi Builder and search modules by JetEngine/Smart Filters names.

## Development

### Prerequisites

- Node.js `>=18`
- npm `>=10`

### Commands

```bash
npm install
npm run start
npm run build
```

`npm run start` watches source files.
`npm run build` creates production bundles in `assets/` and copies module JSON files.

## Repository structure

- `src/components/` – Divi module implementations (TS/React)
- `src/icons/` – icon map used by Divi icon library
- `src/jet-engine.ts` – JetEngine module registration entry
- `src/jet-smart-filters.ts` – JetSmartFilters module registration entry
- `src/module-icons.ts` – icon registration hook
- `includes/components/` – PHP component/module classes
- `includes/module-render.php` – shared rendering bridge
- `modules-json/` – built/copied module schemas for PHP registration
- `assets/` – compiled JS/CSS bundles

## Styling model

- Divi style controls are declared in module JSON decorations.
- TS `styles.tsx` maps attrs to frontend CSS via Divi style components.
- PHP `module_styles()` mirrors style output for server-side rendering consistency.

Project convention:

- If both `margin` and `padding` are present for one UI area, they should be exposed as a single `Spacing` control.
- Border radius should not be duplicated if already covered by border control.

## Adding a new module

1. Create `src/components/<module>/` files (module JSON, settings, edit, styles, types, index).
2. Add icon in `src/icons/<module>/index.tsx` and export it via `src/icons/index.ts`.
3. Register icon in `src/module-icons.ts`.
4. Register module in `src/jet-engine.ts` or `src/jet-smart-filters.ts`.
5. Add PHP module class in `includes/components/.../modules/<module>.php`.
6. Register dependency in the component `register_modules()` method.
7. Ensure `modules-json/<module>/module.json` exists (copied from source).
8. Run `npm run build` and validate module appears in Divi.

## Notes and limitations

- Some complex Gutenberg repeaters are represented in Divi as simplified fields where needed.
- Final output still depends on JetEngine/JetSmartFilters internals and active modules.
- Build warnings from Sass legacy API may appear; they do not block output.

## License

Copyright © Crocoblock.
Use and distribution are governed by the plugin/package license.
