How To Register Settings/Elements With Transitions Feature

The Problem:

In D4 we could register our settings and element classes with the Divi transitions feature using the get_transition_fields_css_props() function. For example:

// Field definition.
'rule_color'         =>  array(
  'label'            =>  esc_html__('Rule Color', 'dvmd-simple-heading'),
  'description'      =>  esc_html__('Here you can choose a color for the rule.'),
  'option_category'  => 'color_option',
  'custom_color'     =>  true,
  'tab_slug'         => 'advanced',
  'toggle_slug'      => 'rule',
  'type'             => 'color-alpha',
  'mobile_options'   =>  true,
  'responsive'       =>  true,
  'sticky'           =>  true,
  'hover'            => 'tabs',
  'default_on_front' =>  et_builder_accent_color(),
),

// Transitions.
public function get_transition_fields_css_props() {

  // Properties.
  $fields = parent::get_transition_fields_css_props();

  // Rule color.
  $fields['rule_color'] = array('border-color' => '%%order_class%% .dvmd_simple_heading_rule');

  // Return.
  return $fields;
}

In D5, we can define the field like this:

"rule": {
  "type": "object",
  "settings": {
    "advanced": {
      "color": {
        "groupType": "group-item",
        "item": {
          "label": "Rule Color",
          "description": "Here you can choose a color for the rule.",
          "groupSlug": "designRule",
          "attrName": "rule.advanced.color",
          "priority": 11,
          "render": true,
          "component": {
            "type": "field",
            "name": "divi/color-picker"
          }
        }
      }
    }
  }
}

And print the styles like this:

<CommonStyle 
  attr={attrs?.rule?.advanced?.color}
  property={'border-color'} 
  selector={`${orderClass} .dvmd_simple_heading_rule`}
/>

But, as far as I can see, there is no way to register this field with the D5 transitions mechanism. Currently, no transition effects are applied to this field/style when hover or sticky styles are used.

What I have tried:

I’ve tried this in Pub-Alpha 1.1 and I can’t get it to work in the VB or on the front-end.

I have tried this in the Visual Builder:

<CommonStyle 
  attr={attrs?.rule?.advanced?.color}
  property={'border-color'} 
  selector={`${orderClass} .dvmd_simple_heading_rule`}
/>

And this on the front-end:

CommonStyle::style([
  'attr'      => $attrs['rule']['advanced']['color'] ?? [],
  'selector'  => "{$orderClass} .dvmd_simple_heading_rule",
  'property'  => 'border-color',
]),

Also this:

$elements->style(
 [
   'attrName'   => 'rule',
   'styleProps' => [
     'advancedStyles' => [
       [
         'componentName' => 'divi/common',
         'props'         => [
           'attr'        => $attrs['rule']['advanced']['color'] ?? [],
           'selector'    => "{$orderClass} .dvmd_simple_heading_rule",
           'property'    => 'border-color',
         ],
       ],
     ],
   ],
 ],
),

elegantthemes / Divi-Beta

How To Register Settings/Elements With Transitions Feature #112

The Problem:

What I have tried: