Bug - Pro 5.0.8 Dynamic Content in Color Pickers and Unit Picker Controls (re-share)

[strobley]

Hi Themeco,

Pro 5.0.8, WP 5.8 clean local install.

Using dynamic content in color pickers and unit picker controls seem a little hit and miss depending on the element.

On the Dropdown element for example, when dynamic content set in Global > Colors it appears to work for background, border, boxshadow colors. However, I set the same dynamic content value in the Dropdown controls it does not work.

The Toggles do seem to work.

I notice the Dropdown renders the following, the problem looks like its placing in the inline CSS variable styles in the markup id attribute instead of style.

<div id="--tco-dc1ew-2:hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.5);;--tco-dc1ew-3:hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.5);;" class="x-dropdown m1ew-11 m1ew-13 m1ew-15 e1832-16 x-active" data-x-stem="dr" data-x-stem-root="" data-x-toggleable="e1832-16" aria-hidden="false" style="inset: 61.25px auto auto 1238.22px;"><div class="x-div e1832-17 m1ew-3 m1ew-5 m1ew-6 m1ew-7"><div class="x-text x-text-headline e1832-18 m1ew-16 m1ew-17 m1ew-1a"><div class="x-text-content"><div class="x-text-content-text"><h6 class="x-text-content-text-primary">Featured</h6></div></div></div><div class="x-div e1832-19 m1ew-3 m1ew-4 m1ew-5 m1ew-8"><a class="x-anchor x-anchor-button has-graphic e1832-20 m1ew-c m1ew-f m1ew-j m1ew-k m1ew-m m1ew-n m1ew-p m1ew-q m1ew-r m1ew-s m1ew-z m1ew-1" tabindex="0" href="#">

This may well be happening for other elements to. The Toggle renders the following which seems to work.

<a class="x-anchor x-anchor-toggle has-particle e1832-7 m1ew-c m1ew-d m1ew-e m1ew-f m1ew-g m1ew-h m1ew-i m1ew-j" tabindex="0" style="--tco-dc1ew-0:hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.15);;--tco-dc1ew-1:hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.15);;" data-x-toggle="1" data-x-toggleable="e1832-7" data-x-toggle-hover="1" aria-controls="e1832-7-dropdown" aria-expanded="false" aria-haspopup="true" aria-label="Toggle Dropdown Content"><div class="x-anchor-content"><div class="x-anchor-text"><span class="x-anchor-text-primary">The-Text-Toggle</span></div></div></a>

I also wanted to ask. what the expected return format of Dynamic Content when used in element controls? As you notice, I return HLSA split by hue, saturation, lightness which are pre-define css variables in my stylesheet, with alpha

hsla(var(--color-h), var(--color-s), var(--color-l), 0.5);

When using this approach Dynamic Content approach the element builder controls it generates and duplicate an inline variable for each of the H, S and L color components with the same properties.

EDIT UPDATE1 I am not sure if it duplciates or not. For example on a the Dropdown > Toggle, I only set the Primary Text color to use Dynamic Content and nothing else. This does create two identical inline CSS variables. I also believe an inline CSS variable is created for where ever Dynamic Content used in a element. So if I set background, border, boxshadow and text-color for example this would create 4 inline CSS variables on top of duplicated text-color. I am sure this is something you’re looking at for the next update, if the same Dynamic Content value is used for background, border, boxshadow and text-color to deduplicate and only create one inline CSS variable.

… All said however just being able to use Dynamic Content in the pickers is AWESOME

EDIT UPDATE2, the same issue occurs using Dynamic Content in the element controls with the Off Canvas and Modal elements - as with Dropdown, the inline CSS variable styles are in the markup id attribute instead of style.

Also another strange behaviour, when using Dynamic Content in Global > Colors the colors do not apply in Preview. Where as for the elements where Dynamic Content works within the element controls, like the Headline, the colors do apply in Preview when used in the control but do not Preview when using Global > Colors.

[tristup]

Hi @strobley,

Thanks for reaching out.
I have tried to replicate it in my local environment, but unfortunately, the issue is not been found. Can you please explain the steps along with some screenshots, it helps us to replicate it on our end?

Thanks

[strobley]

Sure @tristup

Step 1. custom CSS either in Pro or child theme add the following

:root {
    --my-css-color: #f00;
}

Step 2. Following Feature Requests: Dynamic Content Provider like a shortcode

add_filter('cs_dynamic_content_custom', function ($result, $field, $args = array()) {

    $result = 'var(--' . $field . ')';

    return $result;

}, 10, 3);

Step 3. Add Headline element and set the box shadow or background color to

{{dc:custom:my-css-color}}

Save and view. You should see in preview the box shadow or background change to red and also the frontend.

Step 4. Add a Dropdown, Modal or Off Canvas element. Then not the in the toggle, but the Dropdown, Modal or Off Canvas element set the box shadow or background color to

{{dc:custom:my-css-color}}

Save and view. You should see this does not work. You can double check by also adding this same dynamic content to the Toggle background color, it will work here only for the Toggle.

In the frontend, when you inspect the background color for the Dropdown, Modal or Off Canvas you will see in HTML markup that for the id attribute there are inline CSS variables generared and id will look something like

<div id="--tco-dc1ew-0:var(--my-css-color);--tco-dc1ew-1:var(--my-css-color); etc...

these inline styles should added to the style attribute of HTML, not the id. If you pass to @alexander or @kory they will understand .

[tristup]

Hi @strobley,

Thank you very much for the detailed explanation of the steps. I have tried the steps you explained and found the issue you described here.
I suspect this could be a bug on the latest version theme and have reported it to the developers for investigation.

Thanks