Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

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

Aperta Adatta ai principianti
  • Qualcosa non va?
#1,203 3 commenti 0 reazioni 1 assegnatario Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

@girishpanchal30 ci sta già lavorando.

Dal 29/10/2026.

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
78/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
php, wordpress
Ambito
frontend, performance

Direzione di ricerca

Parti dall'array $default_watchers in inc/lazyload_replacer.php (righe 127-132), l'unica lista che decide cosa viene nascosto e caricato in lazy load; conferma come quei selettori arrivano alla regola CSS di occultamento in inc/admin.php (intorno alle righe 998-1009) e al valore backgroundLazySelectors passato allo script (intorno alla riga 614). Riproduci con il markup del blocco Quote dell'issue e verifica che document.querySelector('.img-gradient').matches(optimoleData.backgroundLazySelectors) passi a true, mentre il caso solo immagine e Group/Cover continuano a comportarsi come prima. Fatto significa che sia la forma grezza del gradiente sia la forma preset var(--wp--preset--gradient--...) del background-image unito vengono confrontate senza regressioni nel layout di WordPress 7.0.x.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

bug
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.

Lingua principale
PHP
Stelle
74
Fork
14
Merge medio
1g 21h
PR unite (30g)
30

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di Codeinwp/optimole-wp

Tutte le issue di Codeinwp/optimole-wp

Issue simili

Altre issue su PHP

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.