Added inline script to cleanup dominant color CSS variable on image load by Dhruval-678 · Pull Request #2448 · WordPress/performance

Dhruval-678 · 2026-04-09T06:34:06Z

Summary

Changes

Added inline script to cleanup dominant color CSS variable on image load.
This script removes the --dominant-color CSS variable from images after they load,
preventing issues with dynamically loaded or lazily-loaded images.

Use of AI Tools

Clude code

github-actions · 2026-04-09T06:34:18Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @Dogway.

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Unlinked contributors: Dogway.

Co-authored-by: Dhruval-678 <dhruval04@git.wordpress.org>
Co-authored-by: b1ink0 <b1ink0@git.wordpress.org>
Co-authored-by: mukeshpanchal27 <mukesh27@git.wordpress.org>
Co-authored-by: westonruter <westonruter@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

codecov · 2026-04-09T06:48:31Z

Codecov Report

❌ Patch coverage is 0% with 6 lines in your changes missing coverage. Please review.
✅ Project coverage is 69.28%. Comparing base (8d1741e) to head (ca674e3).
⚠️ Report is 67 commits behind head on trunk.

Files with missing lines	Patch %	Lines
plugins/dominant-color-images/hooks.php	0.00%	6 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##            trunk    #2448      +/-   ##
==========================================
- Coverage   69.33%   69.28%   -0.06%     
==========================================
  Files          90       90              
  Lines        7749     7755       +6     
==========================================
  Hits         5373     5373              
- Misses       2376     2382       +6

Flag	Coverage Δ
multisite	`69.28% <0.00%> (-0.06%)`	⬇️
single	`35.70% <0.00%> (-0.03%)`	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

mukeshpanchal27 · 2026-04-13T10:45:18Z

+  { capture: true },
+);
+JS;
+	wp_register_script( 'dominant-color-cleanup', false, array(), DOMINANT_COLOR_IMAGES_VERSION, true );


Suggested change

wp_register_script( 'dominant-color-cleanup', false, array(), DOMINANT_COLOR_IMAGES_VERSION, true );

wp_register_script( 'dominant-color-cleanup', false, array(), null, true ); // phpcs:ignore WordPress.WP.EnqueuedResourceParameters.MissingVersion

IMO we don’t need to update the script version here. Versioning isn’t really necessary, and we can just pass null instead.

This is similar to how scripts are registered in the View Transitions plugin.

WDYT @westonruter

Correct. It is an inline script, so the version is not used.

The sniff should be updated to not earn when null is used for a script with a false src, but that's out of scope here.

@mukeshpanchal27
Requested changes has been applied.

Kindly have a look.

westonruter · 2026-05-08T19:17:47Z

+document.addEventListener(
+  "load",
+  (event) => {
+    if (
+      event.target instanceof HTMLImageElement &&
+      event.target.hasAttribute("data-dominant-color")
+    ) {
+      event.target.style.removeProperty("--dominant-color");
+    }
+  },
+  { capture: true },
+);
+JS;


We can indent this properly once we upgrade to PHP 7.4: #2340

This has now been merged: #2469

Please indent all lines of the nowdoc.

Or actually, shouldn't this actually be made available in a JS file? Then we'll get linting performed on it and we can get it minified. The JS file can be loaded with file_get_contents().

westonruter · 2026-05-08T19:18:27Z

+  { capture: true },
+);
+JS;
+	wp_register_script( 'dominant-color-cleanup', false, array(), null, true ); // phpcs:ignore WordPress.WP.EnqueuedResourceParameters.MissingVersion


Let's be explicit about the args:

Suggested change

wp_register_script( 'dominant-color-cleanup', false, array(), null, true ); // phpcs:ignore WordPress.WP.EnqueuedResourceParameters.MissingVersion

wp_register_script( 'dominant-color-cleanup', false, array(), null, array( 'in_footer' => true ) ); // phpcs:ignore WordPress.WP.EnqueuedResourceParameters.MissingVersion

@westonruter

Requested changes has been applied.

Kindly have a look.

mukeshpanchal27 · 2026-05-18T06:59:23Z

Screen.Recording.2026-05-18.at.12.18.50.PM.mov

It looks like the background color disappears after the image loads. I’m pretty sure some non tech folks will raise this concern in the future 😄

Is there a way to detect whether the image has object-fit: contain; applied? In the block editor, we can identify this via image-related attributes/settings, but I’m not sure how we can reliably detect this for Elementor.

Added inline script to cleanup dominant color CSS variable on image load

3022887

Resplve PHPlint issue

df10388

b1ink0 added [Plugin] Image Placeholders Issues for the Image Placeholders plugin (formerly Dominant Color Images) [Type] Bug An existing feature is broken labels Apr 9, 2026

b1ink0 added this to the dominant-color-images n.e.x.t milestone Apr 9, 2026

b1ink0 reviewed Apr 9, 2026

View reviewed changes

Comment thread plugins/dominant-color-images/hooks.php Outdated

b1ink0 requested a review from westonruter April 9, 2026 06:56

Modify the package

c62068b

mukeshpanchal27 requested changes Apr 13, 2026

View reviewed changes

Remove version from inline script and pass it as null

181ef03

Dhruval-678 requested a review from mukeshpanchal27 April 13, 2026 12:42

westonruter reviewed May 8, 2026

View reviewed changes

Use explicit in_footer script args

ca674e3

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Added inline script to cleanup dominant color CSS variable on image load#2448

Added inline script to cleanup dominant color CSS variable on image load#2448
Dhruval-678 wants to merge 5 commits into
WordPress:trunkfrom
Dhruval-678:issue/2432

Dhruval-678 commented Apr 9, 2026 •

edited

Loading

github-actions Bot commented Apr 9, 2026 •

edited

Loading

Uh oh!

codecov Bot commented Apr 9, 2026 •

edited

Loading

mukeshpanchal27 Apr 13, 2026

westonruter Apr 13, 2026

westonruter Apr 13, 2026

Dhruval-678 Apr 13, 2026

westonruter May 8, 2026

westonruter May 18, 2026

westonruter May 18, 2026

mukeshpanchal27 May 18, 2026

westonruter May 8, 2026

Dhruval-678 May 18, 2026

mukeshpanchal27 commented May 18, 2026

Labels

4 participants

	wp_register_script( 'dominant-color-cleanup', false, array(), DOMINANT_COLOR_IMAGES_VERSION, true );
	wp_register_script( 'dominant-color-cleanup', false, array(), null, true ); // phpcs:ignore WordPress.WP.EnqueuedResourceParameters.MissingVersion

Conversation

Dhruval-678 commented Apr 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

Use of AI Tools

github-actions Bot commented Apr 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Unlinked Accounts

Uh oh!

codecov Bot commented Apr 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mukeshpanchal27 commented May 18, 2026

Labels

4 participants

Dhruval-678 commented Apr 9, 2026 •

edited

Loading

github-actions Bot commented Apr 9, 2026 •

edited

Loading

codecov Bot commented Apr 9, 2026 •

edited

Loading