Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Dhruval-678 wants to merge 5 commits into
base: trunk
Choose a base branch
from
Open

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

Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
3022887
Added inline script to cleanup dominant color CSS variable on image load
Dhruval-678 Apr 9, 2026
df10388
Resplve PHPlint issue
Dhruval-678 Apr 9, 2026
c62068b
Modify the package
Dhruval-678 Apr 9, 2026
181ef03
Remove version from inline script and pass it as null
Dhruval-678 Apr 13, 2026
ca674e3
Use explicit in_footer script args
Dhruval-678 May 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 29 additions & 0 deletions plugins/dominant-color-images/hooks.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -179,6 +179,35 @@ function dominant_color_add_inline_style(): void {
}
add_action( 'wp_enqueue_scripts', 'dominant_color_add_inline_style' );

/**
* Add 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.
*
* @since 1.2.1
Comment thread
b1ink0 marked this conversation as resolved.
Outdated
*/
function dominant_color_add_cleanup_script(): void {
$script = <<<'JS'
document.addEventListener(
"load",
(event) => {
if (
event.target instanceof HTMLImageElement &&
event.target.hasAttribute("data-dominant-color")
) {
event.target.style.removeProperty("--dominant-color");
}
},
{ capture: true },
);
JS;
Comment on lines +192 to +204

@westonruter westonruter May 8, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@westonruter westonruter May 18, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This has now been merged: #2469

Please indent all lines of the nowdoc.

@westonruter westonruter May 18, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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().

@mukeshpanchal27 mukeshpanchal27 May 18, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

+1 ☝️

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

@mukeshpanchal27 mukeshpanchal27 Apr 13, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@westonruter westonruter Apr 13, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@westonruter westonruter Apr 13, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

@Dhruval-678 Dhruval-678 Apr 13, 2026

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@mukeshpanchal27
Requested changes has been applied.

Kindly have a look.

wp_enqueue_script( 'dominant-color-cleanup' );
wp_add_inline_script( 'dominant-color-cleanup', $script );
}
add_action( 'wp_enqueue_scripts', 'dominant_color_add_cleanup_script' );

/**
* Displays the HTML generator tag for the Image Placeholders plugin.
*
Expand Down
Loading