Front-End Styles No Longer Working

[dtcblyth]

The Problem:

Since updating to Pub-Alpha 1, none of my 3P module styles are being output on the front-end. I have being generating styles mostly the same way since Dev-Alpha, and suddenly it’s not working anymore. Furthermore, I can see that since Pub-Alpha, ET are suddenly no longer using individual trait files for the various aspects of the front-end module. I have so many questions about this, namely:

1) Why this late change? 2) Are we also required to refactor our modules? 3) Is this change the likely reason behind why my front-end styles are no longer being generated?

Another problem, most likely related, is that in some of my modules I am now seeing Array to string conversion in... warnings being generate by my style trait functions. These warnings tend to appear on the first load following a save, then dissappear on the second load... pressumably after the page is cached. Once again, this was not happening prior to Pub-Alpha 1.

I really need a quick answer on this. I don’t want to waist time trying to track down the cause of this if it is a bug. And, if it is not a bug and I need to refactor all my module front-end styles, then I need to get on to that as quickly as possible.

Example:

To give a little more insight into how I structure my styles I have put a simplified code sample below. I like to modularise my styles in separate styles traits, more-or-less organised by element, as I find this helps for more complex modules. See below:

ModuleStylesTrait.php:

// Namespace.
namespace DVMD\SH\Modules\SimpleHeading\SimpleHeadingTraits;

// Namespaces.
use ET\Builder\FrontEnd\Module\Style;

// Trait.
trait ModuleStylesTrait {

  // Namespaces.
  use ModuleCustomCssTrait;
  use StylesFunctions\StylesHeadingTrait;
  use StylesFunctions\StylesSubheadingTrait;
  // etc...

  public static function module_styles($args) {

    // Attributes.
    $attrs    = $args['attrs'] ?? [];
    $elements = $args['elements'] ?? [];
    $settings = $args['settings'] ?? [];

    // @to-do: Remove when this bug is resolved.
    // See: https://discord.com/channels/1041765492907589683/1272140571724746916
    if (empty($attrs)) return;

    // Styles.
    Style::add([
      'id'            => $args['id'],
      'name'          => $args['name'],
      'orderIndex'    => $args['orderIndex'],
      'storeInstance' => $args['storeInstance'],
      'styles'        => [

        // Element styles.
        self::stylesHeading($args['orderClass'], $elements),
        self::stylesSubheading($args['orderClass'], $elements),
        // etc...

        // Module.
        $elements->style([
          'attrName'   => 'module',
          'styleProps' => [
            'disabledOn' => [
              'disabledModuleVisibility' => $settings['disabledModuleVisibility'] ?? null,
            ],
            'advancedStyles' => [
              [
                'componentName' => 'divi/css',
                'props' => [
                  'attr' => $attrs['css'] ?? [],
                  'cssFields' => self::module_custom_css(),
                ],
              ],
            ],
          ],
        ]),
      ],
    ]);
  }
}

StylesFunctions/StylesHeadingTrait.php:

// Namespace.
namespace DVMD\SH\Modules\SimpleHeading\SimpleHeadingTraits\StylesFunctions;

// Trait.
trait StylesHeadingTrait {

  private static function stylesHeading($orderClass, $elements) {

    // Styles.
    return implode('', array(

      "{$orderClass} .dvmd_simple_heading_heading { 
        padding-bottom: 0;
      }",

      $elements->style([
        'attrName' => 'heading',
      ]),

    ));
  }
}

What I’ve Tried:

From the quick testing I have done... in the example above, if I move this...

$elements->style([
  'attrName' => 'heading',
]),

... into the main module_styles() function it works, but keeping it in a separate stylesHeading() function, as I have been doing since Dev-Alpha, no longer works.

Also, declaring static styles, like this...

"{$orderClass} .dvmd_simple_heading_heading { 
  padding-bottom: 0;
}",

... no longer seems to work in any configuration.

[ayubadiputra]

Hi @dtcblyth, sorry for being late to reply. There was a fundamental change related to Style::add and this effects how it works now. You can read the explanation here.

Some following up TODO to make sure this changes fully addressed:

• [x] Explain the new changes in Discord post.
• [x] Merge release blog post for next release version. There will be blog post to explain the situation on the next release.
• [x] Update code example in d5-extension-example-modules.

[ayubadiputra]

This task is blocked by D5 :: Fatal Error :: Fix fatal error due to missing file in Parent Module.

[ayubadiputra]

BTW, we provided code example in Divi Extension Example Modules here D5 :: Module Styles :: Add example of style output value format in FE module styles. With this example added, I'm going to close and resolve this issue. Feel free to open new one if you guys have other questions, thanks!