woocommerce/woocommerce

Featured product image is not responsive

Open

#42,661 创建于 2021年11月3日

在 GitHub 查看
 (15 评论) (1 反应) (0 负责人)PHP (10,294 star) (10,695 fork)batch import
EnhancementGood First IssueKirigamiblock: featured categoryblock: featured product

描述

Describe the bug

Hi, the woocommerce/featured-product block always uses a single background image size even on small viewports.

To reproduce

Steps to reproduce the behavior:

  1. Add a featured product block on a page/post
  2. view said page/post in frontend
  3. inspect the block element in devtools
  4. the block uses background-image: url(...);. Therefore the browser cannot select an appropriately sized image for the current viewport size.

Expected behavior

The block should use an <img> or <picture> element w/ appropriate srcset and sizes attributes.

Screenshots

If applicable, add screenshots to help explain your problem.

Environment

WordPress (please complete the following information):

  • Core version: 5.8.1
  • WooCommerce version: 5.8.0
  • WooCommerce Blocks version: bundled w/ woocommerce

Desktop (please complete the following information):

  • OS: irrelevant
  • Browser irrelevant
  • Version irrelevant

Smartphone (please complete the following information):

  • Device: irrelevant
  • OS: irrelevant
  • Browser irrelevant
  • Version irrelevant

Additional context

See the core/cover block for an example of how it could be done.

贡献者指南

技术栈
phpjavascriptreactcss
领域
frontend
议题类型
bug
难度面向新贡献者的预计实现难度，1 表示很小改动，5 表示专家级工作。
3
预计时间有经验贡献者完成调查、实现、测试并准备 pull request 的粗略时间范围。
1-3 hours
活动状态议题当前的可参与程度：新鲜、活跃、陈旧、阻塞或等待维护者输入。
active
清晰度议题是否清楚说明期望改动、验收标准和下一步。
clear
前置要求
WordPress block developmentResponsive image techniquesWooCommerce plugin basics
新手友好度1-100 的估计分数，表示该议题对首次贡献者的友好程度。
65
研究方向
Start by examining the source code of the featured product block in the WooCommerce Blocks plugin, likely located in `assets/js/blocks/featured product/`. Look for where the background image is set via CSS. Then study the core/cover block implementation, which uses <img> or <picture> with srcset and sizes attributes, as a reference for the fix. The solution should replace the background image approach with a responsive image element.