Background image with a gradient is not lazy-loaded on WordPress 7.1 (Quote, Pullquote, Verse, Post Content, Accordion)

从 $default_watchers 数组（inc/lazyload_replacer.php 中的第 127-132 行）开始，这是唯一决定哪些内容会被隐藏并懒加载的列表；确认这些选择器如何到达 inc/admin.php 中的 CSS 隐藏规则（大约第 998-1009 行）以及传给脚本的 backgroundLazySelectors 值（大约第 614 行）。用 issue 中的 Quote 区块标记复现，并检查 document.querySelector('.img-gradient').matches(optimoleData.backgroundLazySelectors) 是否变为 true，同时仅图片的情况和 Group/Cover 仍像之前一样表现。完成意味着合并后的 background-image 的原始 gradient 形式和 preset var(--wp--preset--gradient--...) 形式都能被匹配，且不会让 WordPress 7.0.x 布局出现回归。

Description

WordPress 7.1 adds background.gradient support to the Group, Quote, Pullquote, Verse, Post Content and Accordion blocks. The default theme.json turns it on, and the editor now saves the gradient to style.background.gradient. When a block has both a gradient and a background image, core writes them as one value:

background-image:linear-gradient(...), url('https://.../hero.jpg');background-size:cover;

Optimole's default background lazy-load watchers only look for background-image:url( / background:url(, plus a class rule for Cover and Group. The combined value starts with the gradient, so on Quote, Pullquote, Verse, Post Content and Accordion no watcher matches. The background-image: none !important hide rule is never applied and the image downloads on page load, even far below the fold.

On WordPress 7.0.x the same design is lazy-loaded. There the gradient comes from the Color panel as background:linear-gradient(...) and the image as a separate background-image:url(...), which matches [style*="background-image:url("]. Group is still lazy-loaded on 7.1 because of its class-based watcher.

Expected: a block with a gradient and a background image is lazy-loaded the same way as a block with only a background image.

Step-by-step reproduction instructions

1. WordPress 7.1.3, a block theme (e.g. Twenty Twenty-Five), Optimole 4.2.17 connected. Enable lazy load and background lazy load:

   wp optimole setting update lazyload on
   wp optimole setting update bg_replacer on
   

2. Upload a JPG and keep its URL: IMG=$(wp media import ./hero.jpg --porcelain=url)
3. Create a page with a tall spacer, then two Quote blocks. The first has only the image. The second has the image and a gradient:

   wp post create --post_type=page --post_status=publish --post_title="BG gradient test" --post_content="<!-- wp:spacer {\"height\":\"2000px\"} --><div style=\"height:2000px\" aria-hidden=\"true\" class=\"wp-block-spacer\"></div><!-- /wp:spacer -->
   <!-- wp:quote {\"className\":\"img-only\",\"style\":{\"background\":{\"backgroundImage\":{\"url\":\"$IMG\",\"source\":\"file\"}}}} --><blockquote class=\"wp-block-quote img-only\"><!-- wp:paragraph --><p>Image only</p><!-- /wp:paragraph --></blockquote><!-- /wp:quote -->
   <!-- wp:quote {\"className\":\"img-gradient\",\"style\":{\"background\":{\"backgroundImage\":{\"url\":\"$IMG\",\"source\":\"file\"},\"gradient\":\"linear-gradient(135deg,rgb(6,147,227) 0%,rgb(155,81,224) 100%)\"}}} --><blockquote class=\"wp-block-quote img-gradient\"><!-- wp:paragraph --><p>Image + gradient</p><!-- /wp:paragraph --></blockquote><!-- /wp:quote -->"
   

   (In the editor this is: Quote block > Styles > Background > pick an image and a gradient.)
4. Open the page in a private window with DevTools open on Network > Img. Do not scroll. The hero image is requested right away. With only the first Quote on the page, it is not requested until you scroll.
5. In the console:

   document.querySelector('.img-only').matches(optimoleData.backgroundLazySelectors)      // true
   document.querySelector('.img-gradient').matches(optimoleData.backgroundLazySelectors)  // false
   

6. Optional: repeat on WordPress 7.0.3 with a gradient set from Color > Background and the same image. The block is lazy-loaded.

A PHP CLI check that runs the real 7.0.3 and 7.1.3 style engine and tests the output against the watchers in inc/lazyload_replacer.php:127-132 gives:

7.0.3 color gradient + image:  background:linear-gradient(...);background-image:url('.../hero.jpg');background-size:cover;
  wp-block-quote  lazy-loaded: YES via [style*="background-image:url("]
7.1.3 background gradient + image:  background-image:linear-gradient(...), url('.../hero.jpg');background-size:cover;
  wp-block-quote  lazy-loaded: NO (no default watcher matches)
  wp-block-group  lazy-loaded: YES via [class*="wp-block-group"][style*="background-image"]

A preset gradient behaves the same way: background-image:var(--wp--preset--gradient--...), url(...).

Screenshots, screen recording, code snippet or Help Scout ticket

Default watchers, https://github.com/Codeinwp/optimole-wp/blob/v4.2.17/inc/lazyload_replacer.php#L127-L132

$default_watchers = [
	'[class*="wp-block-cover"][style*="background-image"]',
	'[style*="background-image:url("]', '[style*="background-image: url("]',
	'[style*="background:url("]', '[style*="background: url("]',
	'[class*="wp-block-group"][style*="background-image"]',
];

These selectors are the only thing that decides what gets hidden and lazy-loaded: https://github.com/Codeinwp/optimole-wp/blob/v4.2.17/inc/admin.php#L998-L1009 (CSS hide rule) and https://github.com/Codeinwp/optimole-wp/blob/v4.2.17/inc/admin.php#L614 (backgroundLazySelectors for the lazy-load script).

Core 7.1 merges the gradient and the image into one background-image: https://github.com/WordPress/WordPress/blob/7.1.3/wp-includes/style-engine/class-wp-style-engine.php#L523-L529

if ( isset( $css_declarations['background-image'] ) && isset( $parsed_styles['declarations']['background-image'] ) ) {
	$css_declarations['background-image'] = $css_declarations['background-image'] . ', ' . $parsed_styles['declarations']['background-image'];
}

The block support passes the gradient on: https://github.com/WordPress/WordPress/blob/7.1.3/wp-includes/block-supports/background.php#L94-L98. The block supports are in https://github.com/WordPress/WordPress/blob/7.1.3/wp-includes/blocks/quote/block.json#L33-L41 (also pullquote, verse, post-content, accordion, group).

Workaround: add the block classes (e.g. .wp-block-quote.has-background) to the background lazy-load selectors setting. A possible fix is a default watcher that matches an image anywhere in the value, e.g. [style*="background-image"][style*="url("].

Environment info

Optimole 4.2.17 (master has the same watchers). WordPress 7.1.0 and later (checked against 7.1.3); not affected on 7.0.x. PHP version does not matter (checked with PHP 8.4).

Is the issue you are reporting a regression

No. This is not an Optimole regression. The same block design is lazy-loaded on WordPress 7.0.x, and the change comes from the WordPress 7.1 core output. #717 covered the same kind of gap for Group backgrounds in WordPress 6.4.

Found while writing the WordPress compatibility checks for Optimole.