Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

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

Abierto Apto para principiantes
  • ¿Algo no está bien?
#1,203 3 comentarios 0 reacciones 1 asignado Ver en GitHub

Los mantenedores suelen responder en 1 día

@girishpanchal30 ya está trabajando en esto.

Desde el 29/10/2026.

  • #1212 de @girishpanchal30 — abierto

Evaluación

Dificultad
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
78/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
php, wordpress
Área
frontend, performance

Línea de trabajo

Empieza en el array $default_watchers de inc/lazyload_replacer.php (líneas 127-132), la única lista que decide qué se oculta y se carga de forma diferida; confirma cómo llegan esos selectores a la regla CSS de ocultación en inc/admin.php (alrededor de las líneas 998-1009) y al valor backgroundLazySelectors pasado al script (alrededor de la línea 614). Reproduce con el marcado del bloque Quote del issue y comprueba que document.querySelector('.img-gradient').matches(optimoleData.backgroundLazySelectors) cambia a true, mientras que el caso solo de imagen y Group/Cover siguen comportándose como antes. Hecho significa que tanto la forma de gradiente sin procesar como la forma predefinida var(--wp--preset--gradient--...) del background-image fusionado coinciden sin provocar regresiones en el layout de WordPress 7.0.x.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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.

Lenguaje dominante
PHP
Estrellas
74
Forks
14
Merge medio
1 d 21 h
PR fusionados (30 d)
30

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de Codeinwp/optimole-wp

Todos los issues de Codeinwp/optimole-wp

Issues similares

Más issues de PHP

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.