Possible Need for Sticky Placeholder

Request:

In the same way that we now have a {{:hover}} placeholder to control the position of the :hover pseudo-class, it’s possible that we also need a {{sticky}} placeholder to control the postion of the .et_pb_sticky class.

Why:

I have a module in which I need to be able to apply hover and sticky styles to a pseudo-element of the main element. The main selector for the pseudo-element looks like this {$orderClass}:after. Currently, when Divi applies the sticky class, the selector ends up looking like this myClass:after.et_pb_sticky... which doesn’t work. It needs to be myClass.et_pb_sticky:after.

What I Have Tried:

I have tried setting a custom sticky selector, like this:

CommonStyle::style([
  'selector'   => "{$orderClass}:after",
  'property'   => 'background',
  'attr'       => $attrs['module']['advanced']['background'] ?? [],
  'selectors'  => [
    'desktop'  => [
      'value'  => "{$orderClass}:after",
      'hover'  => "{$orderClass}{{:hover}}:after",
      'sticky' => "{$orderClass}.et_pb_sticky:after"
    ]
  ]
]),

However, the selector ends up looking like this {$orderClass}.et_pb_sticky:after.et_pb_sticky.

Solution:

One possible solution would be to use a {{sticky}} placeholder, like this:

CommonStyle::style([
  'selector'   => "{$orderClass}:after",
  'property'   => 'background',
  'attr'       => $attrs['module']['advanced']['background'] ?? [],
  'selectors'  => [
    'desktop'  => [
      'value'  => "{$orderClass}:after",
      'hover'  => "{$orderClass}{{:hover}}:after",
      'sticky' => "{$orderClass}{{sticky}}:after"
    ]
  ]
]),

Other Considerations:

This brings up an interesting question... why is the custom sticky attribute appending the .et_pb_sticky class anyway? The custom hover attribute doesn’t append the :hover pseudo-class if the customer selector already includes :hover or {{:hover}}.

With the custom hover attribute, I can specify a selector like this {$orderClass}{{:hover}}:after, or this {$orderClass}:hover:after, and the selector will not be further modified by Divi. However, with the custom sticky attribute, this is not true.

With the custom sticky attribute, if I specify a selector like this {$orderClass}{{sticky}}:after, or this {$orderClass}.et_pb_sticky:after, I will end up with selectors like {$orderClass}{{sticky}}:after.et_pb_sticky, or {$orderClass}.et_pb_sticky:after.et_pb_sticky.

elegantthemes / Divi-Beta