wordpressthemesdivi

How do I include default module styles on Divi custom modules when Dynamic CSS is enabled?


I've created a custom module based on Divi's Blog module. Ever since the 4.10 the module's grid layout does not work anymore because of the Dynamic CSS feature. When this is enabled Divi basically only loads the required assets when a specific module is used. So if the Divi Blog Module is not in the page the required CSS is not included and my custom module displays bad.

I saw a filter that should force the assets of a default module and used it inside my custom module:

//force the blog assets to be included inside this custom module
function include_module_assets($assets_list) {
    return ['et_pb_blog'];
}
add_filter( 'et_required_module_assets', 'include_module_assets' );

Now this adds some column styles, but the column widths are not being set. So there are still some styles that are not being loaded.

Anybody experienced this yet with their Divi extensions?

Thanks


Solution

  • Divi dynamic asset loading for custom modules can be quite frustrating.
    Always check Divi/includes/builder/feature/dynamic-assets/class-dynamic-assets.php for all the required CSS AND JS dependencies.

    For a custom Blog, first, you have to load the basic dependencies with et_required_module_assets filter:

    function fzs_divi_check_if_module_exists($module, $content) {
        $content = is_string( $content ) ? $content : '';
        $module_exists = preg_match( '/\[' . $module . ' /', $content );
        return $module_exists;
    }
    
    add_filter('et_required_module_assets', 'fzs_custom_module_dependencies', 10, 2);
    function fzs_custom_module_dependencies($required_assets, $all_content) {
        $blog_module_slug = 'your_custom_blog_slug'; //replace as you want
        if (fzs_divi_check_if_module_exists($blog_module_slug, $all_content)) {
            array_push($required_assets, 'et_pb_blog'); //Load blog CSS
            //Load (the very outdated and abandoned) salvattore
            wp_enqueue_script(
                'salvattore',
                ET_BUILDER_URI . '/feature/dynamic-assets/assets/js/salvattore.js',
                array(), ET_CORE_VERSION, true
            );
        }
    
        return $required_assets;
    }
    

    Then, for some modules (like Blog), which require grids, you also have to load them with et_global_assets_list filter:

    add_filter('et_global_assets_list', 'fzs_add_dynamic_grid_dependencies', 10, 3);
    function fzs_add_dynamic_grid_dependencies($early_global_asset_list, $assets_args, $dynamic_assets_class) {
        $gutter_widths = $assets_args['gutter_widths'];
        $gutter_length = $assets_args['gutter_length'];
        $speciality = $assets_args['specialty_used'];
        $grid_items = true; //Must be true for Blog grid
        $early_global_asset_list['fzs_custom_grid_dependencies'] = 
            $dynamic_assets_class->get_gutters_asset_list(
                $gutter_length, $gutter_widths, $speciality, $grid_items
            );
        return $early_global_asset_list;
    }