Extension Build Pipeline

The end-to-end pipeline a Divi Extension goes through, from a clean local environment to a packaged plugin.

Phase map

flowchart LR
  A[Local env setup] --> B[Scaffold extension]
  B --> C[Edit module PHP class]
  B --> D[Edit module JSX component]
  C --> E[yarn start]
  D --> E
  E --> F[Test in Divi Builder]
  F --> G{All good?}
  G -->|no| C
  G -->|yes| H[yarn build]
  H --> I[Package plugin]
  I --> J[Distribute]

Phase 1 — Local environment

Source: Divi Development Environment.

• Install Docker (Mac / Windows / Linux installer matrix on the source page).
• Install the latest LTS NodeJS.
• Install Yarn.
• Install gettext (used for translations during release).
• Pull the official Divi development Docker image.
• Bring up the local WordPress.

After this phase you have a WordPress site at a localhost URL with Divi installed and ready.

Phase 2 — Scaffold the extension

Source: Create A Divi Extension.

• Run create-divi-extension to scaffold the plugin directory.
• Answer the CLI prompts (plugin name, slug, author).
• Run yarn install inside the plugin directory.
• Activate the plugin in WordPress.

After this phase you have an empty extension with a single "Hello World" example module.

Phase 3 — Build the module

Source: Create A Divi Builder Module.

• Rename HelloWorld.php to your module's PascalCase name (e.g. SimpleHeader.php).
• Rename HelloWorld.jsx to match.
• Define settings in get_fields() (see Defining Module Settings and Advanced Field Types for the parameter vocabulary).
• Implement render() on the PHP side.
• Implement render() on the React side using JSX.
• Update includes/modules/index.js to import/export your new module.
• Add CSS in style.css.

Phase 4 — Compile & test

• Run yarn start to watch JSX and compile on save.
• Reload the visual builder and look for your module under the "+" insert menu.
• Iterate until settings, rendering, and CSS all behave correctly.

Phase 5 — Package

• Run yarn build to produce a production build.
• Run yarn zip (or your project's equivalent) to package the plugin folder.
• Distribute via the Divi Marketplace, your own marketplace, or direct delivery.

Cross-references

• For deeper module concepts: Modules section.
• For hooks that fire during module rendering: Divi Module Hooks.
• For runtime JavaScript registration: Divi Builder JavaScript API.