Browser: Chrome 110 OS: macOS / Windows / Linux / etc. URL: Link to a page that illustrates this issue Video: Short screen recording that illustrates this issue (free tool: jam.dev)
It appears that the dynamic color (via ACF color picker) does not apply to the icon element. Manually adding color works just fine. When using dynamic, looking at markup reflects the element does not receive the color or fill properties. Manually adding the color, it works so those properties appear.
Hopefully images are clear enough to express the problem.
Can you please show how you set up the ACF fields?
My assumption: Youāre using a repeater for the list items, but the ACF color is outside the repeater, right? If so, you canāt get the color field value inside the repeater.
There are two ways to work around:
Add the acf color to the whole list (Typography Ā» color), and change the text color accordingly.
Use the ACF get_field function to retrieve the value. Make sure to add the get_field function to the allowed function names and add this to the raw color field of your icon: {echo:get_field(āacf_colorā)} (change the field name accordingly).
Since you had brought it up and itās related to this issue, on #2, Iāve been banging my head trying to get it to work, and nothing happens. Could you clarify what I might be doing wrong? I looked at your links and all that with the documentation. I added the filter in functions file, I added the ACF function (get_field) to the return in the functions file, and I added the {echo:xxxx} (note, Iāve tried get_sub_field and get_field) to the RAW field of the color. Nothing is happening. No background-color property is being rendered at any point. Here are two images show the implementation:
Is there any āstyleā set on the button? If so, set it to none.
Also, you can add the echo dynamic data tag to a basic text element to test if thereās any output.
Hey, sorry for the delay in response. I tested a basic text element on the same loop level of the button and it took the color applied by {echo:get_field(āacf_modules_hero_module_hero_secondary_colorā)} in the RAW field. I also verified the style on the button is set to none. Interestingly, I have the dynamic RAW output applied to typography color of the grandparent wrapper (named buttons in picture) to all these elements, and when I added an ICON element, it automatically inherited the selected color dynamically set in RAW of the grandparentās typography color. Perhaps there is something funky going on with the button element after all?
Hereās an image. Whatās being shown is the text and icon are inheriting the green, and the button text is black and unstyled, despite the RAW being applied directly to it (background or text color, neither is working).
Summary: You are using an ACF flexible content field that contains two color picker fields and a repeater. You want to use the two color picker fields within your repeater - but they are defined outside the repeater, namely in the flexible content.
This is basically exactly what I suspected at the beginning, but I didnāt know that you were using flexible content, so you canāt get any further with get_field or get_sub_field alone, see: ACF | Flexible Content
The function to retrieve fields (in your case, colors) from the flexible content looks something like this:
// Get Flexible Content Colors in Repeater
function flexColors() {
if( have_rows('modules') ):
// Loop through rows.
while ( have_rows('modules') ) : the_row();
// Case: Hero Module
if( get_row_layout() == 'hero_module' ):
$primary = get_sub_field('hero_primary_color');
$secondary = get_sub_field('hero_secondary_color');
endif;
// End loop.
endwhile;
// Return the colors
return array($primary, $secondary);
// No value.
else :
// Do nothing...
endif;
}
To output the primary color, use {echo:flexColors:array_value|0} and for the secondary color {echo:flexColors:array_value|1}.
Thanks - I guess Iām confused why those fields are working on some elements and not others, which arenāt in a repeater. Like why isnāt the dynamic working on the divider, why does it work on the text link color but not the background of it, etc.
