Allow filtering globalVariables just-in-time

Feature Requests / Improvements
3

Temporary workaround solution

Absent a proper filter the best way I came up with was to set the global variables to look for an override in their assignments. So in the global variable panel I set them like

header-background-color

var( --header-background-color-override, var(--base) )

header-text-color

var( --header-text-color-override, var(--white) )

Rendering Overrides

add_action( 'wp_head', 'pm_render_custom_css_variables', 2 );

/**
 * Outputs custom header styles based on ACF fields.
 *
 * @return void
 */
function pm_render_custom_css_variables() {
	if ( is_admin() ) {
		return;
	}

	$overrides = pm_get_template_header_variables();

	// Check if at least one custom color field is set
	if ( ! empty( $overrides ) ) {
		// Start building the CSS output
		$custom_css = "<style id=\"custom-header-stylings\" type=\"text/css\">\n:root {\n";

		$custom_css .= "/* Custom Stylings Based on ACF Template Fields */ \n";

		// Loop through each variable and append it
		foreach ( $overrides as $name => $value ) {
			// Set the override variable
			$safe_value  = esc_attr( $value );
			$custom_css .= "    --$name-override: {$safe_value};\n";
		}

		$custom_css .= "}\n</style>\n";

		// Output the custom CSS
		echo $custom_css;
	}
}

This will render out the overloads needed on a per post basis. This should even work with file based assets rather than inline.