Question 165130 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Can I add default module styles on Divi custom modules w/ Dynamic CSS enabled in WordPress?

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

Tags:

2

Answers


  1. 0

    As there doesn’t seem to be a filter for $grid_items_deps found in ET_Dynamic_Assets::get_global_assets_list you can use the et_global_assets_list filter.

    You’ll probably find you need to add_filter earlier than when your module class is initialized, perhaps one level back in the constructor of your extension class.

    function init() {
    parent::init();

    /** Removed other code the sake of simplicity **/

    add_filter( 'et_required_module_assets', array($this,  'include_module_assets') );
}

// Make sure we include gutters3_grid_items
public function include_early_global_assets($global_asset_list, $assets_args, $dynamic_assets_class){
    $assets_prefix    = et_get_dynamic_assets_path();
    $gutters_3_grid_path = $assets_prefix . '/css/gutters3_grid_items.css';
    $global_asset_list['some_custom_blog'] = array(
        'css' => $gutters_3_grid_path
    );
    return $global_asset_list;
}

    Hopefully ET adds a filter in the future for $grid_items_deps in the near future. They do seem to be getting a little better with providing filters, still many more could be added.

    If anyone knows of a better solution I’d be keen know, as there is an issue with the below that we include gutters3_grid_items.css even when not using a grid layout.

    Cheers

    Login or Signup to reply.
  2. 0

    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;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search