# wpdevelopers/essential-addons-for-elementor-lite architecture

> Architecture diagram of the GitHub repository wpdevelopers/essential-addons-for-elementor-lite, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-06-27). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/wpdevelopers/essential-addons-for-elementor-lite
- Repository: https://github.com/wpdevelopers/essential-addons-for-elementor-lite

## Overview

1. **Project type and runtime boundary**
   - This is a **WordPress plugin**: *Essential Addons for Elementor*.
   - The primary runtime is **PHP inside WordPress**, with **JavaScript/CSS** for Elementor editor widgets, frontend behavior, and admin dashboards.
   - The plugin depends on **Elementor** and integrates heavily with **WooCommerce** and several form/documentation plugins.

2. **Top-level plugin bootstrap**
   - The entry points are `essential_adons_elementor.php` and `index.php`, with autoloading via `autoload.php` and Composer metadata in `composer.json`.
   - `config.php` and `includes/Classes/Bootstrap.php` likely coordinate initialization, versioning, and feature registration.
   - `includes/Classes/Elements_Manager.php` is the central registry for widgets/elements, while `includes/Classes/Asset_Builder.php` and `includes/Traits/Enqueue.php` handle asset orchestration.

3. **Core architecture: traits + class-based plugin services**
   - The plugin uses a **mixed class/trait architecture** under `includes/Classes` and `includes/Traits`.
   - Traits such as `Core`, `Elements`, `Controls`, `Admin`, `Enqueue`, `Ajax_Handler`, `Template_Query`, and `Library` partition major responsibilities.
   - This suggests shared behavior is composed into multiple classes rather than inherited through a deep hierarchy.

4. **Widgets/elements subsystem**
   - Each Elementor widget is represented as a PHP class under `includes/Elements`, for example `Post_Grid.php`, `Advanced_Data_Table.php`, `Login_Register.php`, `Woo_Product_Grid.php`, etc.
   - These classes define Elementor controls, frontend rendering, and feature-specific integration logic.
   - Widget-specific markup is often separated into template fragments under `includes/Template`, keeping render logic and presentation modular.

5. **Extensions subsystem**
   - Free and pro-style enhancements live under `includes/Extensions`, such as `Reading_Progress.php`, `Wrapper_Link.php`, `Image_Masking.php`, `Liquid_Glass_Effect.php`, and `Table_of_Content.php`.
   - These are not standalone widgets in the same sense; they act as **behavioral extensions** or page-level capabilities that augment Elementor content.
   - Their frontend counterparts are implemented in `src/js/view` and `src/css/view`.

6. **Control layer and editor experience**
   - Custom Elementor controls are defined under `includes/Controls`, including `EAEL_Background.php`, `EAEL_Choose.php`, `EAEL_Gradient_Text.php`, and `Select2.php`.
   - These controls shape the widget authoring experience in the Elementor editor and are reflected in the editor-facing JS under `src/js/edit`.
   - The repository also contains documentation for control patterns and widget development in `docs/architecture` and `.claude/rules`.

7. **Frontend asset pipeline**
   - Source assets live in `src/js` and `src/css`, with many widget-specific files under `view` and editor-specific files under `edit`.
   - Built/distributed assets are committed under `assets/front-end` and `assets/admin`, including shared libraries such as `swiper`, `isotope`, `magnific-popup`, `plyr`, `tooltipster`, `full-calendar`, `gsap`, and `quill`.
   - This indicates a compile step transforms source assets into distributable plugin assets, likely via `webpack.config.js`, `postcss.config.js`, and Babel configuration.

8. **Admin UI subsystem**
   - The plugin includes standalone admin applications under `includes/templates/admin`.
   - Notably, there are Vite-based React apps for the **EA dashboard** and **quick setup wizard**:
     - `includes/templates/admin/eael-dashboard`
     - `includes/templates/admin/quick-setup`
   - These apps have their own `src`, `dist`, and `vite.config.js`, showing a separate frontend build boundary from the WordPress/PHP runtime.

9. **Dynamic data and AJAX flows**
   - Dynamic widget behavior is handled through `includes/Traits/Ajax_Handler.php`, `includes/Traits/Template_Query.php`, and docs in `docs/architecture/dynamic-data`.
   - This area covers server-side querying, load-more/pagination, login/register flows, third-party integrations, and WooCommerce-specific data retrieval.
   - The architecture is therefore split between **static editor configuration** and **runtime server-driven rendering/data fetching**.

10. **Platform integrations and compatibility boundaries**
   - Major integrations are built into widget classes and traits for:
     - **WooCommerce**: cart, checkout, product gallery/grid/list/compare/carousel, add-to-cart, price/rating/images.
     - **Forms**: Gravity Forms, WPForms, Ninja Forms, Fluent Forms, Formstack, Caldera, weForms, Contact Form 7.
     - **Docs/knowledge base**: BetterDocs widgets.
     - **Social/content sources**: Facebook Feed, Twitter Feed, Business Reviews, Event Calendar, Typeform, EmbedPress.
   - Compatibility support is centralized in `includes/Classes/Compatibility_Support.php`.

11. **Template and rendering structure**
   - Reusable PHP view fragments are grouped under `includes/Template`, organized by widget family and preset.
   - Examples include multiple preset layouts for `Post-Grid`, `Woo-Product-Carousel`, `Woo-Product-Gallery`, and WooCommerce cart/checkout helpers.
   - This structure suggests a pattern of **widget class → data preparation → template preset selection → render output**.

12. **Packaging, release, and QA tooling**
   - The repo has GitHub Actions workflows in `.github/workflows` for assets, build/archive, and release automation.
   - There is end-to-end testing under `tests/e2e` using **Playwright**, with a WordPress setup plugin (`tests/e2e/mu-plugins/e2e-setup.php`) and template fixtures.
   - Code style and safety are enforced via `phpcs.xml.dist`, Husky pre-commit hooks, Prettier configs, and repository-specific CLAUDE rules.

13. **Distribution and WordPress.org readiness**
   - Files like `.distignore`, `.wordpress-org/blueprints/blueprint.json`, `readme.txt`, and `wpml-config.xml` show the plugin is prepared for WordPress.org-style distribution and multilingual compatibility.
   - The `languages` directory and POT file indicate gettext-based localization is part of the release artifact.
   - `assets/index.php`, `includes/index.php`, and `src/index.php` are typical hardening files to prevent directory browsing.

14. **How the main data flow works**
   - WordPress loads the plugin bootstrap.
   - The bootstrap registers widgets, extensions, assets, notices, and compatibility services.
   - In Elementor editor mode, widget classes expose controls and React/JS-enhanced editing experiences.
   - On the frontend, widget classes render PHP templates and enqueue the matching CSS/JS bundle from `assets/front-end`.
   - For dynamic widgets, AJAX/server queries fetch or filter data at runtime rather than relying only on static markup.

15. **Key architectural boundary to capture in a diagram**
   - The most important boundary is between:
     - **PHP plugin core**: registration, rendering, data retrieval, admin logic
     - **Built JS/CSS assets**: editor interactions, frontend effects, admin dashboards
   - Secondary boundaries are between **free widgets vs extensions**, and **core plugin logic vs external services** like WooCommerce, Elementor, form plugins, and review/event APIs.

Main entry points: [`includes/Classes/Elements_Manager.php`](https://github.com/wpdevelopers/essential-addons-for-elementor-lite/blob/master/includes/Classes/Elements_Manager.php) (Elements manager), [`includes/Classes/Bootstrap.php`](https://github.com/wpdevelopers/essential-addons-for-elementor-lite/blob/master/includes/Classes/Bootstrap.php) (Bootstrap), [`includes/Elements`](https://github.com/wpdevelopers/essential-addons-for-elementor-lite/tree/master/includes/Elements) (Core widgets), [`assets/admin`](https://github.com/wpdevelopers/essential-addons-for-elementor-lite/tree/master/assets/admin) (Admin assets)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_g1["Plugin Core"]
  node_n1["Main plugin<br/>PHP entry"]
  node_n2["Autoloading<br/>bootstrap<br/>[autoload.php]"]
  node_n3["Config<br/>settings<br/>[config.php]"]
  node_n4["Bootstrap<br/>orchestrator<br/>[Bootstrap.php]"]
  node_n5["Elements manager<br/>registry"]
  node_n6["Asset builder<br/>assets<br/>[Asset_Builder.php]"]
  node_n7{{"Shared traits<br/>composition"}}
end

subgraph group_g2["Widgets"]
  node_n8["Core widgets"]
  node_n9["Woo widgets"]
  node_n10["Form widgets"]
  node_n11["Docs & feeds<br/>widgets"]
  node_n12["Widget templates<br/>render views"]
end

subgraph group_g3["Extensions"]
  node_n13["Content extensions"]
  node_n14{{"Editor controls"}}
end

subgraph group_g4["Assets & Admin"]
  node_n15["Admin dashboard<br/>React app"]
  node_n16["Quick setup<br/>React app"]
  node_n17["Frontend bundles<br/>JS/CSS build"]
  node_n18["Admin assets<br/>JS/CSS build"]
  node_n19["Asset source<br/>src pipeline"]
end

subgraph group_g5["Integrations"]
  node_n20(("Elementor<br/>platform"))
  node_n21(("WooCommerce"))
  node_n22(("Third-party plugins<br/>compatibility"))
end

node_n1 -->|"loads"| node_n2
node_n1 -->|"reads"| node_n3
node_n2 -->|"boots"| node_n4
node_n4 -->|"registers"| node_n5
node_n4 -->|"registers"| node_n6
node_n4 -.->|"composes"| node_n7
node_n5 -->|"loads"| node_n8
node_n5 -->|"loads"| node_n9
node_n5 -->|"loads"| node_n10
node_n5 -->|"loads"| node_n11
node_n8 -->|"renders via"| node_n12
node_n9 -->|"renders via"| node_n12
node_n10 -->|"integrates with"| node_n22
node_n11 -->|"integrates with"| node_n22
node_n13 -->|"pairs with"| node_n17
node_n14 -->|"extends editor"| node_n20
node_n17 -->|"built from"| node_n19
node_n18 -->|"built from"| node_n19
node_n15 -->|"outputs to"| node_n18
node_n16 -->|"outputs to"| node_n18
node_n8 -->|"depends on"| node_n20
node_n9 -->|"depends on"| node_n21
node_n10 -->|"depends on"| node_n20
node_n11 -->|"depends on"| node_n20

click node_n1 "https://github.com/wpdevelopers/essential-addons-for-elementor-lite/blob/master/essential_adons_elementor.php"
click node_n2 "https://github.com/wpdevelopers/essential-addons-for-elementor-lite/blob/master/autoload.php"
click node_n3 "https://github.com/wpdevelopers/essential-addons-for-elementor-lite/blob/master/config.php"
click node_n4 "https://github.com/wpdevelopers/essential-addons-for-elementor-lite/blob/master/includes/Classes/Bootstrap.php"
click node_n5 "https://github.com/wpdevelopers/essential-addons-for-elementor-lite/blob/master/includes/Classes/Elements_Manager.php"
click node_n6 "https://github.com/wpdevelopers/essential-addons-for-elementor-lite/blob/master/includes/Classes/Asset_Builder.php"
click node_n7 "https://github.com/wpdevelopers/essential-addons-for-elementor-lite/tree/master/includes/Traits"
click node_n8 "https://github.com/wpdevelopers/essential-addons-for-elementor-lite/tree/master/includes/Elements"
click node_n9 "https://github.com/wpdevelopers/essential-addons-for-elementor-lite/tree/master/includes/Elements"
click node_n10 "https://github.com/wpdevelopers/essential-addons-for-elementor-lite/tree/master/includes/Elements"
click node_n11 "https://github.com/wpdevelopers/essential-addons-for-elementor-lite/tree/master/includes/Elements"
click node_n12 "https://github.com/wpdevelopers/essential-addons-for-elementor-lite/tree/master/includes/Template"
click node_n13 "https://github.com/wpdevelopers/essential-addons-for-elementor-lite/tree/master/includes/Extensions"
click node_n14 "https://github.com/wpdevelopers/essential-addons-for-elementor-lite/tree/master/includes/Controls"
click node_n15 "https://github.com/wpdevelopers/essential-addons-for-elementor-lite/tree/master/includes/templates/admin/eael-dashboard"
click node_n16 "https://github.com/wpdevelopers/essential-addons-for-elementor-lite/tree/master/includes/templates/admin/quick-setup"
click node_n17 "https://github.com/wpdevelopers/essential-addons-for-elementor-lite/tree/master/assets/front-end"
click node_n18 "https://github.com/wpdevelopers/essential-addons-for-elementor-lite/tree/master/assets/admin"
click node_n19 "https://github.com/wpdevelopers/essential-addons-for-elementor-lite/tree/master/src"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_n1,node_n2,node_n3,node_n4,node_n5,node_n6,node_n7 toneBlue
class node_n8,node_n9,node_n10,node_n11,node_n12 toneAmber
class node_n13,node_n14 toneMint
class node_n15,node_n16,node_n17,node_n18,node_n19 toneRose
class node_n20,node_n21,node_n22 toneIndigo
```

## Components

### Plugin Core

PHP bootstrap, service wiring, registries, and shared runtime logic.

- [Main plugin](https://github.com/wpdevelopers/essential-addons-for-elementor-lite/blob/master/essential_adons_elementor.php): PHP entry · Primary WordPress plugin entry point and bootstrap handoff. · `essential_adons_elementor.php`
- [Autoloading](https://github.com/wpdevelopers/essential-addons-for-elementor-lite/blob/master/autoload.php): bootstrap · Loads classes and initializes plugin wiring. · `autoload.php`
- [Config](https://github.com/wpdevelopers/essential-addons-for-elementor-lite/blob/master/config.php): settings · Central configuration and version/runtime constants. · `config.php`
- [Bootstrap](https://github.com/wpdevelopers/essential-addons-for-elementor-lite/blob/master/includes/Classes/Bootstrap.php): orchestrator · Coordinates plugin startup, registration, and lifecycle hooks. · `includes/Classes/Bootstrap.php`
- [Elements manager](https://github.com/wpdevelopers/essential-addons-for-elementor-lite/blob/master/includes/Classes/Elements_Manager.php): registry · Central registry for Elementor widgets and element definitions. · `includes/Classes/Elements_Manager.php`
- [Asset builder](https://github.com/wpdevelopers/essential-addons-for-elementor-lite/blob/master/includes/Classes/Asset_Builder.php): assets · Builds and registers plugin frontend/admin asset bundles. · `includes/Classes/Asset_Builder.php`
- [Shared traits](https://github.com/wpdevelopers/essential-addons-for-elementor-lite/tree/master/includes/Traits): composition · Trait-based shared behavior used across core services and widgets. · `includes/Traits`

### Widgets

Elementor widget classes and their template-driven rendering.

- [Core widgets](https://github.com/wpdevelopers/essential-addons-for-elementor-lite/tree/master/includes/Elements): widgets · Representative Elementor widget classes for layout, content, and UI blocks. · `includes/Elements`
- [Woo widgets](https://github.com/wpdevelopers/essential-addons-for-elementor-lite/tree/master/includes/Elements): widgets · WooCommerce-facing widget classes for shop, cart, checkout, and product views. · `includes/Elements`
- [Form widgets](https://github.com/wpdevelopers/essential-addons-for-elementor-lite/tree/master/includes/Elements): widgets · Form-plugin integrations exposed as Elementor widgets. · `includes/Elements`
- [Docs & feeds](https://github.com/wpdevelopers/essential-addons-for-elementor-lite/tree/master/includes/Elements): widgets · Content-source widgets for docs, social feeds, calendar, and reviews. · `includes/Elements`
- [Widget templates](https://github.com/wpdevelopers/essential-addons-for-elementor-lite/tree/master/includes/Template): render views · Reusable PHP fragments selected by widget and preset during rendering. · `includes/Template`

### Extensions

Elementor behavior extensions that augment existing content.

- [Content extensions](https://github.com/wpdevelopers/essential-addons-for-elementor-lite/tree/master/includes/Extensions): extensions · Page-level behaviors such as wrapper links, masking, progress, and text effects. · `includes/Extensions`
- [Editor controls](https://github.com/wpdevelopers/essential-addons-for-elementor-lite/tree/master/includes/Controls): controls · Custom Elementor controls for authoring and design-time configuration. · `includes/Controls`

### Assets & Admin

Frontend bundles, admin React apps, and build outputs.

- [Admin dashboard](https://github.com/wpdevelopers/essential-addons-for-elementor-lite/tree/master/includes/templates/admin/eael-dashboard): React app · Standalone Vite-built dashboard UI for plugin administration and promotion. · `includes/templates/admin/eael-dashboard`
- [Quick setup](https://github.com/wpdevelopers/essential-addons-for-elementor-lite/tree/master/includes/templates/admin/quick-setup): React app · Standalone Vite-built onboarding and setup wizard. · `includes/templates/admin/quick-setup`
- [Frontend bundles](https://github.com/wpdevelopers/essential-addons-for-elementor-lite/tree/master/assets/front-end): JS/CSS build · Compiled distributable frontend and editor assets consumed by WordPress. · `assets/front-end`
- [Admin assets](https://github.com/wpdevelopers/essential-addons-for-elementor-lite/tree/master/assets/admin): JS/CSS build · Compiled admin-side styles, scripts, icons, and promotional assets. · `assets/admin`
- [Asset source](https://github.com/wpdevelopers/essential-addons-for-elementor-lite/tree/master/src): src pipeline · Source JavaScript and SCSS that compile into distributable plugin assets. · `src`

### Integrations

External platforms and compatibility boundaries used by widgets and services.

- **Elementor**: platform · Primary page builder runtime the plugin extends.
- **WooCommerce**: commerce · Shop, cart, checkout, and product data source.
- **Third-party plugins**: compatibility · Form, docs, embed, and social integrations supported by widgets and traits.

## Connections

- Main plugin → Autoloading: loads · Plugin entry loads the autoloader.
- Main plugin → Config: reads · Bootstrap uses shared configuration.
- Autoloading → Bootstrap: boots · Autoloaded classes initialize through the bootstrap orchestrator.
- Bootstrap → Elements manager: registers · Bootstrap delegates widget registration to the elements manager.
- Bootstrap → Asset builder: registers · Bootstrap initializes frontend/admin asset orchestration.
- Bootstrap → Shared traits: composes · Core services share behavior via traits.
- Elements manager → Core widgets: loads · Core registry loads standard Elementor widgets.
- Elements manager → Woo widgets: loads · Core registry loads WooCommerce widgets.
- Elements manager → Form widgets: loads · Core registry loads form widgets.
- Elements manager → Docs & feeds: loads · Core registry loads docs, feed, and calendar widgets.
- Core widgets → Widget templates: renders via · Widgets select preset PHP templates for output.
- Woo widgets → Widget templates: renders via · Commerce widgets use dedicated WooCommerce template fragments.
- Form widgets → Third-party plugins: integrates with · Form widgets connect to external form plugins.
- Docs & feeds → Third-party plugins: integrates with · Docs, feed, embed, and review widgets connect to external services.
- Content extensions → Frontend bundles: pairs with · Extensions have matching frontend view assets.
- Editor controls → Elementor: extends editor · Custom controls shape Elementor editor experiences.
- Frontend bundles → Asset source: built from · Frontend bundles are compiled from source assets.
- Admin assets → Asset source: built from · Admin assets are compiled from source assets and admin app outputs.
- Admin dashboard → Admin assets: outputs to · Dashboard app is packaged into admin assets.
- Quick setup → Admin assets: outputs to · Setup wizard is packaged into admin assets.
- Core widgets → Elementor: depends on · Widgets are built for the Elementor runtime.
- Woo widgets → WooCommerce: depends on · Commerce widgets depend on WooCommerce data and behavior.
- Form widgets → Elementor: depends on · Form widgets are exposed inside Elementor.
- Docs & feeds → Elementor: depends on · Content-source widgets are exposed inside Elementor.