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 all 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 n.e.x.t
*/
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(), null, array( 'in_footer' => true ) ); // phpcs:ignore WordPress.WP.EnqueuedResourceParameters.MissingVersion
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