RC1: Dynamic Content Colors not reflected in builder

Beta
#1

I’m digging the ability to use dynamic content to set color values :smiley:

However, while the colors are coming through properly on the front end, the builder doesn’t reflect the values for me.

Basic setup:

  • ACF Color Picker Field set up for categories

    image
    image1010×572 67.4 KB

  • In the Pro builder, I’m using the DC referencing that value {{dc:acf:term_field field="category_accent_primary"}}.
    image

  • Within the builder, you can see the DC value, however the color preview just reflects whatever the previously selected color was. In this specific case, transparent:

  • On the front end though, the value does come through correctly.
    image

Saving and refreshing the page doesn’t seem to change anything. I’m guessing this might just be a temporary limitation until you revamp the color picker stuff, but figured I’d flag it now in case it’s not on your radar. Makes it tricky to actually use DC for colors if you can’t see it reflected properly in the builder.

1 Like
#2

Thank you! Confirmed. Looks like there’s also some inconsistencies with using looper data. Looking into it. Once corrected, you’ll still see {{dc:acf:term_field ... in the color preview (until we revisit that UI) but it should reflect properly in the preview and front end.

2 Likes
#3

@alexander, I also noticed this dynamic content works in the Global CSS (:partying_face:). Should I expect this to continue working in the future? (I could have sworn I’d tried this in previous versions, and it hadn’t worked then – so just wanted to make sure this is intentional before I make some CSS changes to take advantage of this new hotness)

#4

Hi @devinelston,

All fixed. And yes! Global CSS (and Page CSS) is also supported. We shuffled some things around to allow dynamic content to be part of the post processing. Just be careful because if your output introduces a syntax error it could break all the CSS to follow.

#5

Heck yeah, that’s awesome. Thanks!

#6

You’re welcome!

#7

@alexander, noticing a couple issues still.

  1. Once you put dynamic code in the color picker, when you click into the color picker again, it displays transparent rather than the value. For example, I set {{dc:acf:term_field field="category_accent_dark"}}. Close the color picker and I see the {{dc:acf:term_fi... preview. But when I click to open the color picker, it shows transparent. (In the Dev Toolbox, it shows the correct dc value though)

  2. I may be doing something wrong, but it appears that if you use the same dc color value for multiple items on a page, it doesn’t work after the first one. For example, a headline set to {{dc:acf:term_field field="category_accent_dark"}} and then a text field lower on the page with the same {{dc:acf:term_field field="category_accent_dark"}} value. And the second text field doesn’t get the value unless I add something like fallback=""and make it in some way different from the first one (so if I do a fallback color on the first one, I have to do a different color on the second, etc.)

(After playing with it a bit more, if I add a unique value to each DC field, like {{dc:acf:term_field field="x" 1}}, {{dc:acf:term_field field="x" 2}}, etc., it all works like I’d expect)

#8

Thanks @devinelston,

Checking into this today before we get the next point release out.

#9

Thanks again! Got both of these sorted out for the next point release.

#10

Awesome, thanks @alexander!

#11

:+1: you’re welcome!

#12

@alexander, one of the things I love about this new support for DC in more places is the ability to use it for gradients via custom CSS. However, it does not reflect within the builder when I add the relevant CSS to the CSS editors.

For example, add a class to a section. Open the Page CSS, target that class, and add a BG Gradient. In the builder, it will not preview. However, saving and jumping over to the front end shows the BG Gradient as expected.

image
image2056×220 30.9 KB

Also, within the CSS panel, it will list all sorts of errors. I’m guessing that’s in some way related. Unless I’m doing that all wrong :man_shrugging:

image
image1326×870 139 KB

#13

Also, same issue for just using a single color. For example, I targeted all the h classes inside “the content” to change their color on certain blog layouts. Doesn’t show in the builder, but does on the front end.

#14

Hi @devinelston,

I checked this out and see what you mean there. Unfortunately we might need to go back to the drawing board here… Those linting rules are provided by WordPress and they can’t be extended. The most I can think of at the moment would be a way to disable them but that’s not ideal. Have some notes on this for when we can circle back to it.

1 Like