WAIT: Dynamic Background image & color ACF content doesn't work on class level

Bugs
1

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)

On a class level, this doesn’t work for some reason. I need to put this data outside of the class, so on the element itself to make it work.

I’ve seen this issue in 2.0 and applies to:

  1. Background Image
  2. Color (RAW through Select on an Options page in ACF)

There might be more, but I really don’t have the time to check that out within this project.

I don’t see why this is logical? Is this a bug or actually by choice, and why?

2

Hi Boy,
Welcome to the forum, and thanks so much for your report!

Could it be that you are inside a loop? If so, this is the expected behavior, as the class is always the same, but the content may be different depending on whether or not a background image or color is present. Effectively, the last class “wins”/decides what happens.

If you apply the styles within a loop to the ID (and use dynamic data), the element IDs are converted into a class + data-query-loop-index anyway. The index ensures that the styles are individual.

Best regards,
timmse