search

soflyy / oxygen-bugs-and-features

Bug Reports & Feature Requests for Oxygen
https://oxygenbuilder.com/
314 stars 29 forks source link

Three problems with data attributes in Oxygen Builder #2427

Open kevingeary opened 3 years ago

kevingeary commented 3 years ago

Describe the bug

Using 3.9 Alpha. Haven't tested on 3.8...

(1) When applying data attributes to a span, the span disappears until reload. This may be the same with other elements as well but I haven't tested it.

(2) Data attributes inherit styles they're not supposed to inherit (only in the builder).

I've created tooltips that use :before and :after pseudo elements. When applying classes to change the style of the pseudo elements, the data attribute / span text inherits the class styles even though only its pseudo elements are being targeted.

[class*="bg--"][data-tooltip]:before, [class*="bg--"][data-tooltip]:after { --tooltip-bg: var(--bg-color); }

This code properly applies the background color to the before and after pseudo elements, but Oxygen Builder also interprets that this background color should be applied to the span text itself when that's clearly not the directive.

I believe this is due to Oxygen Builder's inability to interpret or style data attributes in the builder...

(3) Data attributes can't be targeted with CSS in the builder.

To try and resolve the above issue, I targeted anything with a specific data attribute in order to try and overrride the styling of the span text.

'[data-tooltip] { background: none !important; }'

I then tried to change ANYTHING about [data-tooltip] and no styles get applied in the builder even though all styles show up on the front end.

IF YOU CAN'T PROVIDE A SANDBOX REPRODUCTION: Steps required to reproduce the bug: Steps to reproduce the behavior:

  1. Add a data attribute to a span in Oxygen builder (click the "apply" button at bottom and the span will disappear).
  2. Reload the builder to make the span re-appear.
  3. Try to target and style that data attribute via a stylesheet in the builder. You'll see that no styling ever shows up in the builder even though styling will appear properly on the front end after save.
KittenCodes commented 3 years ago

@kevingeary I've replicated point 1 and 3, and reported those internally. Would you be able to replicate point 2 on our Sandbox site please? If you have time to do so, that would be appreciated. You can set up a Sandbox site here: https://oxygenbuilder.com/try.