Likes feature loads unminified render-blocking CSS on every page

[westonruter]

Impacted plugin

Jetpack

Quick summary

Similar to #44532, I found that the when I enable the Likes feature, I am getting the CSS for the feature added to every page, even though the Like block isn't on the page.

Furthermore, I notice that the CSS is not minified and not inlined:

<link rel='stylesheet' id='jetpack_likes-css' href='https://example.com/wp-content/plugins/jetpack/modules/likes/style.css?ver=15.4' media='all' />

The stylesheet needs to be minified, conditionally-enqueued, and the path data needs to be added to the stylesheet so it is eligible for inlining so it needn't be render-blocking.

This is part of #8195.

Steps to reproduce

1. Enable the Likes feature
2. View a page that doesn't have the Likes block added to a block template.
3. See render-blocking unminified stylesheet added to the HEAD.

Site owner impact

More than 60% of the total website/platform users

Severity

Moderate

What other impact(s) does this issue have?

No response

If a workaround is available, please outline it here.

No response

Platform (Simple and/or Atomic)

Self-hosted

[sgomes]

Regarding the conditional enqueuing, likes/style.css and the Likes feature as a whole far precede the existence of blocks in WordPress.

As far as I can tell, this stylesheet is being used for the Likes feature across both classic and block themes, but perhaps someone who is more familiar with the feature can elaborate further?

[westonruter]

This was also the case for the Subscriptions module. Note the fix for Subscriptions in #44555 was to conditionally enqueue when the feature is used and to only enqueue unconditionally if not a block theme.

[sgomes]

In the process of attempting to fix this issue, I got to a point where I think there might be nothing to fix at all.

As far as I can tell, the intent behind the option below is to enable the Like button on all posts:

This adds it to every post on the site, regardless of whether it uses a Like block anywhere, and regardless of whether it's using a classic or block theme. This means that you can end up with two Like buttons if you both use a Like block and have the option enabled:

So it seems to me that this is working as intended, in that anyone wanting to selectively have Like blocks depending on post or template should disable the global option and add the blocks where necessary. Following that approach, both the CSS and the JS for the feature will only be loaded when the block is present.

@jeherve : Is my understanding correct here?

[jeherve]

anyone wanting to selectively have Like blocks depending on post or template should disable the global option and add the blocks where necessary

Right, exactly. This is something we make clear for the Sharing buttons feature right above this one, but we do not show the notice for the Like block:

In short @westonruter, if you use the Like block in your posts or in one of your templates in the site editor, you can disable the Likes feature in Jetpack > Settings > Sharing.

I'll add this notice to the Likes card as well.