### Install Node Dependencies Source: https://devalpha.elegantthemes.com/docs/tutorials/module/beginner/create-simple-quick-module Installs the necessary project dependencies using npm. This command should be run in the `/visual-builder` directory. It may create `package-lock.json` and the `node_modules` folder. ```bash cd visual-builder npm install ``` -------------------------------- ### Install Composer Dependencies Source: https://devalpha.elegantthemes.com/docs/tutorials/module/intermediate/converting-module/converting-static-module This command installs Composer dependencies and generates the autoloader file for PHP. It should be run from the `d5-tutorial-module-conversion/divi-5` directory. ```bash composer install ``` -------------------------------- ### Convert D4 Extension Example Modules (Divi 5) Source: https://devalpha.elegantthemes.com/docs/dev-roadmap This task involves converting example modules from Divi 4 extensions to automatically generated module settings in Divi 5. It streamlines the module development process and ensures compatibility. ```PHP Convert d5-extension-example-modules into auto generated module settings ``` -------------------------------- ### Install Project Dependencies (Shell) Source: https://devalpha.elegantthemes.com/docs/tutorials/module/intermediate/converting-module/creating-divi-4-module This command installs all the necessary project dependencies listed in the package.json file using npm. This step is crucial before building the project and updates the package-lock.json file. ```shell npm install ``` -------------------------------- ### Divi Module Shortcode Example (Basic) Source: https://devalpha.elegantthemes.com/docs/explanations/why Illustrates a basic Divi module using a shortcode with a single attribute for font size. This was a straightforward approach in earlier versions of Divi. ```php [et_pb_module font_size="14px"] ``` -------------------------------- ### Example: Custom Style Declarations (PHP) Source: https://devalpha.elegantthemes.com/docs/tutorials/module/intermediate/converting-module/converting-dynamic-module This example demonstrates how to provide custom style declarations as an array to the 'styles' property of the Style::add method. It shows how to define individual style declarations with selectors and declarations, including support for at-rules like media queries. ```php Style::add([ 'id' => $args['id'], 'name' => $args['name'], 'orderIndex' => $args['orderIndex'], 'storeInstance' => $args['storeInstance'], 'styles' => [ // Current output from `get_statements` function is in array format. [ [ 'atRules' => false, 'selector' => '.selector .sub-selector-1', 'declaration' => 'color: purple;' ], ], // Multiple current output from `get_statements` function is in array format. [ [ 'atRules' => false, 'selector' => '.selector .sub-selector-2', 'declaration' => 'color: red;' ], [ 'atRules' => '@media only screen and (max-width: 767px)', 'selector' => '.selector .sub-selector-2', 'declaration' => 'color: green;' ], ], // Current output from $elements is in array format. $elements->style([ 'attrName' => 'heading', ]), ], ]); ``` -------------------------------- ### Install Project Dependencies (npm) Source: https://devalpha.elegantthemes.com/docs/tutorials/general/advanced/create-custom-builder-bar-button Installs all the necessary project dependencies listed in the package.json file using npm. This command is essential before building the plugin assets. ```bash npm install ``` -------------------------------- ### NPM Package JSON Configuration for Divi 5 Visual Builder Source: https://devalpha.elegantthemes.com/docs/tutorials/module/intermediate/converting-module/creating-divi-4-module This JSON file defines the project's metadata and dependencies for a Divi 5 Visual Builder component. It includes development dependencies like Babel and Webpack, along with scripts for starting a development server and building the project for production. Ensure Node.js and NPM are installed before using this configuration. ```json { "name": "d5-tutorial-module-conversion", "version": "1.0.0", "description": "D5 Tutorial for module conversion from Divi 4 to Divi 5", "main": "src/index.js", "author": "Elegant Themes", "license": "GPL2", "private": false, "devDependencies": { "@babel/core": "^7.21.0", "@babel/preset-env": "^7.20.2", "@babel/preset-react": "^7.18.6", "babel-loader": "^9.1.2", "thread-loader": "^3.0.4", "webpack": "^5.75.0", "webpack-cli": "^5.0.1" }, "scripts": { "start": "NODE_ENV=development webpack -w --config webpack.config.js --progress", "build": "NODE_ENV=production webpack --config webpack.config.js --progress" } } ``` -------------------------------- ### Create Project Files with Command Line Source: https://devalpha.elegantthemes.com/docs/tutorials/module/intermediate/converting-module/converting-dynamic-module This command-line instruction creates a directory structure and empty files for the Divi 5 project. It utilizes `mkdir -p` for directory creation and `touch` for file creation, simplifying the initial setup. ```bash mkdir -p \ divi-5/server/Modules/DynamicModule/DynamicModuleTraits \ divi-5/visual-builder/src/modules/dynamic-module && \ touch \ divi-5/server/Modules/RESTRegistration.php \ divi-5/server/Modules/DynamicModule/DynamicModule.php \ divi-5/server/Modules/DynamicModule/DynamicModuleController.php \ divi-5/server/Modules/DynamicModule/DynamicModuleTraits/CustomCssTrait.php \ divi-5/server/Modules/DynamicModule/DynamicModuleTraits/ModuleClassnamesTrait.php \ divi-5/server/Modules/DynamicModule/DynamicModuleTraits/ModuleScriptDataTrait.php \ divi-5/server/Modules/DynamicModule/DynamicModuleTraits/ModuleStylesTrait.php \ divi-5/server/Modules/DynamicModule/DynamicModuleTraits/RenderCallbackTrait.php \ divi-5/server/Modules/DynamicModule/DynamicModuleTraits/RenderContentTrait.php \ divi-5/visual-builder/src/modules/dynamic-module/conversion-outline.js \ divi-5/visual-builder/src/modules/dynamic-module/custom-css.js \ divi-5/visual-builder/src/modules/dynamic-module/edit.jsx \ divi-5/visual-builder/src/modules/dynamic-module/index.js \ divi-5/visual-builder/src/modules/dynamic-module/module-classnames.js \ divi-5/visual-builder/src/modules/dynamic-module/module-script-data.js \ divi-5/visual-builder/src/modules/dynamic-module/module-styles.jsx \ divi-5/visual-builder/src/modules/dynamic-module/module.json \ divi-5/visual-builder/src/modules/dynamic-module/placeholder-content.js \ divi-5/visual-builder/src/modules/dynamic-module/settings-advanced.jsx \ divi-5/visual-builder/src/modules/dynamic-module/settings-content.jsx \ divi-5/visual-builder/src/modules/dynamic-module/settings-design.jsx ``` -------------------------------- ### Divi Module Shortcode Example (Advanced) Source: https://devalpha.elegantthemes.com/docs/explanations/why Demonstrates the complexity of Divi module shortcodes with the introduction of responsive, hover, and sticky options. Each option adds attributes, leading to a bloated shortcode structure and performance issues. ```php [et_pb_module font_size="14px" font_size_tablet="12px" font_size_phone="10px" font_size_last_edited="on|desktop" font_size__hover="11px" font_size__hover_last_edited="on" font_size__sticky="13px" font_size__sticky_last_edited="on" ] ``` -------------------------------- ### Divi 4 Module Attributes Example (Shortcode) Source: https://devalpha.elegantthemes.com/docs/tutorials/module/beginner/module-attributes Illustrates the structure of module attributes in Divi 4, which uses shortcode and a single level for attributes, including responsive, hover, and sticky options. ```text [et_pb_text // Responsive Options width="40px" width_tablet="30px" width_phone="20px" width_last_edited="on|desktop" // Hover Options width__hover_enabled="on" width__hover="42px" // Sticky Options width__sticky_enabled="on|desktop" width__sticky="44px" ] ``` -------------------------------- ### Main Plugin File Setup (PHP) Source: https://devalpha.elegantthemes.com/docs/tutorials/module/intermediate/converting-module/creating-dynamic-divi-4-module This PHP code sets up the main plugin file for a Divi module conversion tutorial. It defines constants for paths and URLs, registers required module files, and enqueues scripts for the Visual Builder. It relies on WordPress and Divi core functions. ```php ``` -------------------------------- ### Setup Composer Autoloader for Divi 5 Source: https://devalpha.elegantthemes.com/docs/tutorials/module/intermediate/converting-module/converting-static-module This JSON file configures Composer for the Divi 5 module conversion. It defines the package name and sets up PSR-4 autoloading to map the 'DTMC\Modules\' namespace to the 'server/Modules/' directory. ```json { "name": "divi/d5-tutorial-module-conversion", "autoload": { "psr-4": { "DTMC\\Modules\\": "server/Modules/" } }, "require": {} } ``` -------------------------------- ### Build Visual Builder Component (Shell) Source: https://devalpha.elegantthemes.com/docs/tutorials/module/intermediate/converting-module/creating-divi-4-module This command executes the build script defined in the package.json file, typically bundling all assets into a single JavaScript file for the Divi Visual Builder. This command should be run after installing dependencies. ```shell npm run build ``` -------------------------------- ### Add Custom Config to AGMS Tutorial (Divi 5) Source: https://devalpha.elegantthemes.com/docs/dev-roadmap This is a tutorial focused on how to set custom configurations for AGMS (presumably Advanced Global Module Settings) within Divi 5. It guides developers on customizing module settings. ```PHP Tutorial :: How to set custom config on AGMS ``` -------------------------------- ### Divi 4 Content Format: Shortcode Example Source: https://devalpha.elegantthemes.com/docs/introducing-divi-5/content-formatting Demonstrates the shortcode structure used to save content in Divi 4, including sections, rows, columns, and modules like Call to Action. ```html [et_pb_section fb_built="1" theme_builder_area="post_content" _builder_version="4.17.6" _module_preset="default"] [et_pb_row _builder_version="4.17.6" _module_preset="default" theme_builder_area="post_content"] [et_pb_column _builder_version="4.17.6" _module_preset="default" type="4_4" theme_builder_area="post_content"] [et_pb_cta title="Your Title Goes Here" button_text="Click Here" background_color="#960000" _builder_version="4.17.6" _module_preset="default" theme_builder_area="post_content" hover_enabled="0" sticky_enabled="0"]

Your content goes here. 

[/et_pb_cta] [/et_pb_column] [/et_pb_row] [/et_pb_section] ``` -------------------------------- ### Creating Native Tab UI in Divi using ButtonOptions Component Source: https://devalpha.elegantthemes.com/docs/tutorials/module/advanced/customize-module-settings-output/adding-custom-sub-tabs This example shows how to leverage the `ButtonOptions` component (or `divi/button-options`) with the `tabUi: true` option to create a native tab interface within Divi modules. This is fundamental for both persistent and non-persistent tab implementations. ```javascript { // ... other component options tabUi: true } ``` -------------------------------- ### Registering a Divi 5 Module using `module.json` (PHP) Source: https://devalpha.elegantthemes.com/docs/explanations/module/anatomy-of-module This snippet demonstrates how to register a Divi 5 module using the `module.json` file. It involves passing the path to the `module.json` and additional arguments to the `ModuleRegistration::register_module()` method. This approach aligns with WordPress block editor's `block.json`. ```php ``` -------------------------------- ### SVG with Definitions and Paths for Divi Module Icons Source: https://devalpha.elegantthemes.com/docs/explanations/module/module-icon-design-guide This example demonstrates an SVG for Divi module icons, including a 'defs' section for styling and 'path' elements. It's crucial to remove any inline styling or external CSS references within the SVG code, as Divi handles styling dynamically. Multiple paths are permitted. ```svg ``` -------------------------------- ### Register and Render 'Simple Quick Module' Frontend - PHP Source: https://devalpha.elegantthemes.com/docs/tutorials/module/beginner/create-simple-quick-module This PHP code defines the 'D5TutorialSimpleQuickModule' class, which handles the frontend rendering of a custom module. It implements the 'DependencyInterface' for initialization, registers the module with WordPress using `ModuleRegistration::register_module`, and provides callbacks for styling, script data, classnames, and the main HTML output. ```php [ D5TutorialSimpleQuickModule::class, 'render_callback' ], ] ); } /** * Render module style. */ public static function module_styles( $args ) { $attrs = $args['attrs'] ?? []; $elements = $args['elements']; Style::add( [ 'id' => $args['id'], 'name' => $args['name'], 'orderIndex' => $args['orderIndex'], 'storeInstance' => $args['storeInstance'], 'styles' => [ // Module. $elements->style( [ 'attrName' => 'module', 'styleProps' => [ 'disabledOn' => [ 'disabledModuleVisibility' => $args['settings']['disabledModuleVisibility'] ?? null, ], ], ] ), // Title. $elements->style( [ 'attrName' => 'title', ] ), // Content. $elements->style( [ 'attrName' => 'content', ] ), ], ] ); } /** * Render module script data. */ public static function module_script_data( $args ) { $elements = $args['elements']; // Element Script Data Options. $elements->script_data( [ 'attrName' => 'module', ] ); } /** * Render module classnames. */ public static function module_classnames( $args ) { $classnames_instance = $args['classnamesInstance']; $attrs = $args['attrs']; // Module. $classnames_instance->add( ElementClassnames::classnames( [ 'attrs' => $attrs['module']['decoration'] ?? [], ] ) ); } /** * Render module HTML output. */ public static function render_callback( $attrs, $content, $block, $elements ) { // Title. $title = $elements->render( [ 'attrName' => 'title', ] ); // Content. $content = $elements->render( [ 'attrName' => 'content', ] ); // Module Inner. // Essentially, this is the module content. // Were wrapping the title and content in a div with class `et_pb_module_inner`. $module_inner = HTMLUtility::render( [ 'tag' => 'div', 'attributes' => [ 'class' => 'et_pb_module_inner', ], 'childrenSanitizer' => 'et_core_esc_previously', 'children' => $title . $content, ] ``` -------------------------------- ### Divi 5 Module PHP Plugin Registration and Script Enqueuing Source: https://devalpha.elegantthemes.com/docs/tutorials/module/beginner/create-simple-quick-module This PHP file is responsible for registering the Divi 5 module and enqueuing the necessary Visual Builder scripts. It serves as the entry point for the plugin. ```php Default Content

" } ] } } ``` -------------------------------- ### Divi 5 Module Server-Side Rendering and Styling (PHP) Source: https://devalpha.elegantthemes.com/docs/tutorials/module/beginner/create-simple-quick-module This PHP file provides the server-side methods required for rendering HTML, defining module classnames, applying module styles, and outputting script data for the Divi 5 module. ```php

%1$s

%2$s
', esc_html( $attrs['title'] ), wp_kses_post( $attrs['content'] ) ); } // Module classnames function simple_quick_module_classnames( $classnames, $attrs ) { // Add custom classnames return $classnames; } // Module styles function simple_quick_module_styles( $styles, $attrs ) { // Return CSS styles return ""; } // Script data output function simple_quick_module_script_data( $data, $attrs ) { // Add custom data for the frontend script return $data; } ``` -------------------------------- ### PHP: Register and Render Recent Posts Module Source: https://devalpha.elegantthemes.com/docs/tutorials/module/beginner/server-side-rendering-element This PHP code snippet defines the D5TutorialSimpleQuickModule class, responsible for registering and rendering a 'Simple Quick Module' that displays recent posts. It includes methods for initialization, module registration, styling, script data, classnames, and the main render callback. ```php [ self::class, 'render_callback' ], ] ); } /** * Render module style. */ public static function module_styles( $args ) { $attrs = $args['attrs'] ?? []; $elements = $args['elements']; Style::add( [ 'id' => $args['id'], 'name' => $args['name'], 'orderIndex' => $args['orderIndex'], 'storeInstance' => $args['storeInstance'], 'styles' => [ // Module. $elements->style( [ 'attrName' => 'module', 'styleProps' => [ 'disabledOn' => [ 'disabledModuleVisibility' => $args['settings']['disabledModuleVisibility'] ?? null, ], ], ] ), // Title. $elements->style( [ 'attrName' => 'title', ] ), // Content. $elements->style( [ 'attrName' => 'content', ] ), ], ] ); } /** * Render module script data. */ public static function module_script_data( $args ) { $elements = $args['elements']; // Element Script Data Options. $elements->script_data( [ 'attrName' => 'module', ] ); } /** * Render module classnames. */ public static function module_classnames( $args ) { $classnames_instance = $args['classnamesInstance']; $attrs = $args['attrs']; // Module. $classnames_instance->add( ElementClassnames::classnames( [ 'attrs' => $attrs['module']['decoration'] ?? [], ] ) ); } /** * Render module HTML output. */ public static function render_callback( $attrs, $content, $block, $elements ) { // Title. $title = $elements->render( [ 'attrName' => 'title', ] ); // Content. $content = $elements->render( [ 'attrName' => 'content', ] ); // Render list of recent posts and its div wrapper. $recent_posts = HTMLUtility::render( [ 'tag' => 'div', 'attributes' => [ 'class' => 'd5-tut-simple-quick-module-recent-posts', ], 'childrenSanitizer' => 'et_core_esc_previously', 'children' => self::render_recent_post( [ // Placeholder for actual render_recent_post function call continuation ] ), ] ); return "
{$title} {$content} {$recent_posts}
"; } /** * Render list of recent posts. */ public static function render_recent_post($args) { // Assuming $args contains necessary data for rendering posts // This is a placeholder and needs actual implementation $posts = get_posts(array('numberposts' => 5)); // Example: Get latest 5 posts $post_list_items = ''; if (!empty($posts)) { foreach ($posts as $post) { $post_list_items .= sprintf( '
  • %2$s
    • ', get_permalink($post->ID), get_the_title($post->ID) ); } } return sprintf( '', $post_list_items ); } } ``` -------------------------------- ### Divi 5 Content Format: Serialized Block Example Source: https://devalpha.elegantthemes.com/docs/introducing-divi-5/content-formatting Illustrates the serialized block format used in Divi 5, which is analogous to Gutenberg's content saving method. This example shows the equivalent of the Divi 4 structure. ```html ``` -------------------------------- ### Create Project Files and Directories (Bash) Source: https://devalpha.elegantthemes.com/docs/tutorials/module/intermediate/converting-module/converting-static-module This bash command creates necessary directories and empty files for a Divi module conversion. It uses `mkdir -p` to create nested directories and `touch` to create empty files. Ensure you are in the `d5-tutorial-module-conversion` directory before running. ```bash mkdir -p \ divi-5/server/Modules/StaticModule/StaticModuleTraits \ divi-5/visual-builder/build divi-5/visual-builder/src/modules/static-module && \ touch \ divi-5/divi-5.php \ divi-5/composer.json \ divi-5/server/Modules/Modules.php \ divi-5/server/Modules/StaticModule/StaticModule.php \ divi-5/server/Modules/StaticModule/StaticModuleTraits/CustomCssTrait.php \ divi-5/server/Modules/StaticModule/StaticModuleTraits/ModuleClassnamesTrait.php \ divi-5/server/Modules/StaticModule/StaticModuleTraits/ModuleScriptDataTrait.php \ divi-5/server/Modules/StaticModule/StaticModuleTraits/ModuleStylesTrait.php \ divi-5/server/Modules/StaticModule/StaticModuleTraits/RenderCallbackTrait.php \ divi-5/visual-builder/webpack.config.js \ divi-5/visual-builder/package.json \ divi-5/visual-builder/package-lock.json \ divi-5/visual-builder/build/d5-tutorial-module-conversion.js \ divi-5/visual-builder/src/index.js \ divi-5/visual-builder/src/modules/index.js \ divi-5/visual-builder/src/modules/static-module/conversion-outline.js \ divi-5/visual-builder/src/modules/static-module/custom-css.js \ divi-5/visual-builder/src/modules/static-module/edit.jsx \ divi-5/visual-builder/src/modules/static-module/index.js \ divi-5/visual-builder/src/modules/static-module/module-classnames.js \ divi-5/visual-builder/src/modules/static-module/module-script-data.jsx \ divi-5/visual-builder/src/modules/static-module/module-styles.jsx \ divi-5/visual-builder/src/modules/static-module/module.json \ divi-5/visual-builder/src/modules/static-module/settings-advanced.jsx \ divi-5/visual-builder/src/modules/static-module/settings-content.jsx \ divi-5/visual-builder/src/modules/static-module/settings-design.jsx ``` -------------------------------- ### Get Divi Module Events Data (JavaScript) Source: https://devalpha.elegantthemes.com/docs/code-snippets/hook-functions This snippet demonstrates how to use `useSelect` hooks to retrieve event-related module data from Divi. It includes functions to get selected modules, hovered modules, check module selection status, and retrieve dragged modules. These hooks typically return arrays or specific module data based on the selector. ```javascript // Get selected modules const selectedModules = useSelect(select => select('divi/events').getSelectedModules(), [] ); // Get hovered module const hoveredModule = useSelect(select => select('divi/events').getHoveredModule(), [] ); // Check if module is selected const isModuleSelected = useSelect(select => select('divi/events').isSelectedModule(moduleId), [moduleId] ); // Get dragged modules const draggedModules = useSelect(select => select('divi/events').getDraggedModules(), [] ); ``` -------------------------------- ### Attribute Variants Example in Divi 4 Source: https://devalpha.elegantthemes.com/docs/introducing-divi-5/divi-5-principles Illustrates the five variants of attributes across breakpoints (title, title_tablet, title_phone) and states (title__hover, title__sticky) in the current Divi 4 version. ```plaintext // Breakpoints title title_tablet title_phone // States title__hover title__sticky ``` -------------------------------- ### Render Divi Module and Register Dependency Source: https://devalpha.elegantthemes.com/docs/tutorials/module/beginner/create-simple-quick-module This PHP code renders a Divi module with specified attributes and elements, then registers this module as a dependency for the Divi module library. ```php ); // This are the module elements that will be rendered in the frontend. $module_elements = $elements->style_components( [ 'attrName' => 'module', ] ); // This are the children of the module container, which are the module elements and the module inner. $module_container_children = $module_elements . $module_inner; return Module::render( [ // FE only. 'orderIndex' => $block->parsed_block['orderIndex'], 'storeInstance' => $block->parsed_block['storeInstance'], // VB equivalent. 'attrs' => $attrs, 'elements' => $elements, 'id' => $block->parsed_block['id'], 'moduleClassName' => 'd5_tut_simple_quick_module', 'name' => $block->block_type->name, 'classnamesFunction' => [ D5TutorialSimpleQuickModule::class, 'module_classnames' ], 'moduleCategory' => $block->block_type->category, 'stylesComponent' => [ D5TutorialSimpleQuickModule::class, 'module_styles' ], 'scriptDataComponent' => [ D5TutorialSimpleQuickModule::class, 'module_script_data' ], 'children' => $module_container_children, ] ); } } // Register module. add_action( 'divi_module_library_modules_dependency_tree', function( $dependency_tree ) { $dependency_tree->add_dependency( new D5TutorialSimpleQuickModule() ); } ); ``` -------------------------------- ### GET /dtmc/v1/module-data/dynamic-module Source: https://devalpha.elegantthemes.com/docs/tutorials/module/intermediate/converting-module/converting-dynamic-module This endpoint is used by the Divi 5 Visual Builder component to fetch dynamic data for the Dynamic Module. It requires a 'title' parameter in the request data. ```APIDOC ## GET /dtmc/v1/module-data/dynamic-module ### Description Fetches dynamic data for the Divi 5 Dynamic Module. This endpoint is designed to be called from the Visual Builder component using the `useFetch` hook. ### Method GET ### Endpoint /dtmc/v1/module-data/dynamic-module ### Parameters #### Query Parameters None #### Request Body - **title** (string) - Required - The title of the module to fetch data for. ### Request Example ```json { "title": "Example Module Title" } ``` ### Response #### Success Response (200) - **data** (string) - The HTML content to render for the dynamic module. #### Response Example ```json { "data": "
    Rendered Module Content
    " } ``` #### Error Response - **error** (string) - Description of the error if the fetch fails. ``` ``` -------------------------------- ### Placeholder Content Configuration for New Modules Source: https://devalpha.elegantthemes.com/docs/tutorials/module/beginner/server-side-rendering-element This object defines the default placeholder content for newly inserted modules. It specifies initial values for background color, module title, and module content, ensuring a basic structure is present upon module creation. These settings are applied to desktop view by default. ```javascript placeholderContent: { module: { decoration: { background: { desktop: { value: { color: '#DFDFDF', }, }, }, }, }, title: { innerContent: { desktop: { value: 'Module Title', }, }, }, content: { innerContent: { desktop: { value: 'Module Content', }, }, }, } ```