Missing a semicolon between the properties

Thanks for reaching out @gyurmey. Can you share an example URL where you’re encountering this?

I ask as I suspect another plugin, or your theme, maybe be adding the object-position styling without an ending semicolon, rather than the Performance Lab plugin adding a prefix semicolon. You can see how we add the dominant color inline styling over on the plugins GitHub repository.

@jamesosborne, here is the link.

I noticed that the problem occurs when using a featured image.

WP: 6.1.1 & 6.2-beta-2
Theme: TT3
Gutenberg: 15.1.1 & without

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

Thanks for sharing @gyurmey, much appreciated. From recreating a similar environment to your own, with the same WordPress version on an InstaWP site with the same theme I don’t encounter the same.

So I can check this further with the team can you share whether you have any additional plugins active, or can you recreate this on another disposable WordPress site?

Note also that the Performance Lab plugin only adds the --dominant-color: #736e5e; styling (with semi colon). It’s possible that what you’re encountering is more theme related, but I will check this further.

Hi @jamesosborne, this is a completely new installation.

Magic login.

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

Appreciate you going to the trouble of setting up another site for testing (and love the thumbs up emojis!).

I’ve been able to recreate the same issue as you’re reporting. The issue doesn’t seem to be Performance Lab related, as you’ll see in this recording. When using a cover block, with a featured image, you’ll notice that without using the Performance Lab plugin there is no closing semicolon after the object-position: 100% 0% inline styling. There should be a closing semi colon, and this is output from the cover block and not the Performance Lab plugin. With the dominant color styling added via Performance Lab, we do include a closing semi colon. If the clover block is not adding a semi colin to the end of it’s inline styling, when the Performance Lab (and other plugins I suspect) add code, it will be added to the end of existing inline styling.

Before closing this topic I’ll confirm this is the case with the team and report back to you here. If necessary, we can submit an issue or pull request on the cover block library, over on the WordPress/gutenberg repository. I’ll let you know here. Thank you!

@jamesosborne, thank you!

Many thanks for raising this, and for your patience while we investigated further. I’ve opened a GitHub issue on the Gutenberg repository based on your findings. I noticed also from testing that this isn’t specific to using the featured image. If you apply inline styling to any Cover image (by changing the Focal Point Picker for example) the same occurs. https://github.com/WordPress/gutenberg/issues/48258

From discussing your findings with the team, they also suggested that it may be possible for the Performance Lab plugin to check how we’re adding styling to elements if there is already some inline styling. It may be possible for us to place a prefix semi closing rule in such cases where third party plugins or WordPress Core doesn’t close individual rules. I therefore created a GitHub issue on the Performance Lab repo for the team to review further:
https://github.com/WordPress/performance/issues/658

So to summarize, you did discover a potential improvement for both WordPress core, and the Performance Lab plugin. Many thanks for sharing! One workaround I found for this, while the GitHub issues are being reviewed, is to replace your cover blocks with a new cover block. From my testing the block related styling will only apply if you modify the “Focal Point Picker” settings. Feel free to give that a try.

As we’ve migrated your query to a GitHub issue I’ll close this support topic. Do however, feel free to subscribe to, or chime in on any of this issues for updates and thanks again for raising this.

If you’re a Performance Lab user for some time be sure to also share your plugin feedback.