Divi 5 Background Color from ACF Color Field

I'm trying really hard not to be the developer on my team at Ambrosia Digital, but I sometimes put myself in this spot as I continue to work on improving our own website and marketing. For context, I am currently running our business website on Divi version 5.0.0-public-beta.9.3 and WordPress 6.9.1. For the record, with just a few days until Divi 5 goes to General Availability (GA), or officially live (February 26) and supported, the folks at Elegant Themes are definitely still working hard to make sure the software is stable, and were very quick to reply to me when I reported a bug related to this topic.

I have been retooling our website to operate as a full StoryBrand style site. Since becoming a Certified StoryBrand Guide I have realized the need to be able to demonstrate that we do what we preach. One of the key elements of that model is that for each service we provide, we need a landing page built in StoryBrand style. In order to ensure consistency of structure and content, I created a StoryBrand BrandScript WireFrame Divi Template (that's a mouthful!) and a corresponding ACF field group and CPT for our services. I'm still tweaking the template and content for the first service that will use this (our Hosting and Managed Services) and thus where my story starts.

I had the content laid out, but realized that for each section I was going to want either a background image and background color (either just so or as a fallback). I had originally setup an ACF image field for each section, but now I needed to add a background color. Background colors can be set using Dynamic Data in Divi 5, and therefore can use an ACF field.

But unfortunately, it didn't work.

So I started with one section and removed the image I had placed there in the post data, and set the background color (rather random, but I like green, so I used #3aad34 (actually I started with the rgba version of this, but during diagnosis I switched the field to hex due to recommendation from ChatGPT. But that wasn't the cause of the problem). I did not get this value for the background color, and actually had Transparent. Even looking at the Dev Inspector there was no reference to my color in the different CSS settings for the element (a row).

This was not a caching problem. But it could have been so my diagnostic process was slowed down by clearing multiple levels of caching during each test.

Eventually I just started adding error_log messages into the Divi code until I got to the core code section involved.

I was a little surprised to find a member function of class Utils (wp_content/themes/Divi/includes/builder-5/server/Packages/StyleLibrary/Utils/Utils.php) devoted specifically to Dynamic ACF Color Fields (_resolve_acf_color_field_value()) but I can see where the ACF field could express things in different formats. The member function is called from another member function called "resolve_dynamic_variable()".

Now, ACF fields are stored in post meta entries. So you need the ID of the post you are referencing, and the meta_key. In _resolve_acf_color_field_value(), the code makes the call to retrieve the value. But it is getting a null response. I checked the database data, and the correct data is there, the correct meta_key was used, but the post_id used by the code was the post_id of the Divi Template and not the post itself. So, I backtracked a little... the calling function actually creates a global value and stores (what it thinks is) the post_id there. Then _resolve_acf_color_field_value() retrieves the value from that global... but if that value is null, it makes a fallback call to "get_the_ID()". At this point in the flow of code, that call provides the ID of the Template and not the Post. There is another function "get_queried_object_id()" that should actually provide the ID of the Post being processed. When I changed the fallback call to get_queried_object_id(), the background color worked.

So, I changed this:

            // Get the post ID from global context (set by DynamicData processing) or current post.
            global $et_dynamic_data_post_id;
            $post_id = $et_dynamic_data_post_id ?? get_the_ID();

To this:

            // Get the post ID from global context (set by DynamicData processing) or current post.
            global $et_dynamic_data_post_id;
            $post_id = $et_dynamic_data_post_id ?? get_queried_object_id();

The Null Coalescing Operator (??) is actually new to me, but pretty cool. The ?? means that if the value to the left is null, then instead of returning that value, return the value on the right.

You probably realize that this code change will go away with the next update... I will simply, on this website, have to check after each update and see if I need to patch this again or not. I have reported this to Elegant Themes, so I am hopeful they can implement the most appropriate fix as soon as possible.

For what it is worth, this is not a recommendation to change vendor code willy nilly. Or at all. Usually I try to find a way to use a hook to solve problems like this, but in this case that was either not practical or will just require too much time to investigate. ChatGPT tried to provide me a hook-based solution that I could drop into functions.php, but that didn't end up working.

Overall, Divi5 has been an excellent upgrade to an already powerful tool. Ambrosia has built a total of 3 live websites from scratch on Divi5 with very little trouble. Our own website was converted from Divi4 using the Divi 5 Migrator. Overall, we are loving it!