“Dominant Color” option enabled, it overwrites style (only on the frontend)

Hi @gyurmey,

Thanks for reaching out. If you have the “Dominant Color” option enabled it’s normal that the --dominant-color styling changes appear within an image. It’s also normal that the data-dominant-color and data-has-transparency attributes appear. The styling rule only applies to the parent image, before it fully loads. You’ll see examples of this, and find out more how it works below:
https://github.com/WordPress/performance/issues/19

If you’re finding that the styling conflicts with another plugins styling rules please share the URL of any page with this image and we can take a look.

@jamesosborne, thank you for your response. I understand what you are saying, but my point is that enabling this option resets the styles entered on the editor side.

Before:

style="border-width:111px;border-radius:100px"

After:

style="--dominant-color: #a0a0a0;"

• This reply was modified 1 year, 11 months ago by Gyurmey.

Apologies, I see. You had some inline styling prior to enabling that option, and it’s removing this styling. Let me check this out and report back to you here. While I’m doing so do you have a third party plugin active that also features lazy loading or has image related features?

No, I don’t have any plugins installed (except PL).

However, I also noticed that in some cases it is the other way around. Editor styles override style --dominant-color.

Thanks for your patience on this. I’ve been testing this and I can confirm that the “Dominants Color” configuration does replace existing inline styling. I’ve opened a GitHub issue on this, which you can keep track of below. Many thanks for bringing this to our attention.
https://github.com/WordPress/performance/issues/577

I’ve also tested our various methods of adding some inline styling, with the default WordPress editors image block not providing inline styling features, and possibly making it more difficult to provide inline styling possibilities.

You may also wish to define a class within any block, and use this to style any images as a workaround if that suits. This doesn’t conflict with the “Dominants Color” setting.

I’ll close this support topic as we move this to the plugins GitHub repository,. Do feel free to chime in to that related GitHub issue, or follow it’s progress by subscribing. Thanks again for reporting. The team will review the GitHub issue and decide further on this.