5e1896d98a
* Fix typo in HTML markup of ProductImage block placeholder Typo caused rendering of incorrect HTML attributes: width and height of Product Image placeholder that were anyway ignored by the browser * Remove inline styles (width and height) from ImagePlaceholder in ProductElements > Image block Inline height took precedence over the inherited styles which made the placeholder image skewed (in loading and loaded state). Removal of those styles allows the ImagePlaceholder to adapt the height to the available space keeping the ratio or inherit the styles from the parent * Remove inline styles (width and height) from placeholder image in ProductImage.php block Inline styles applied to the placeholder image of ProductImage block were overriden by other styles with higher specificity, which made them redundant. Additionally, corresponding styles were removed from the placeholder image from Editor code as they caused UI glitches. Additional proof that it's safe to remove them is in the first commit in this branch, the purpose of which was to fix those styles as there was a typo which corrupted them and eventually inline width and height were ignored by the browser and not applied to the element * Add test to check placeholder image renders without width and height inline attributes This is to prevent adding inline width and height attributes so the sizing of the placeholder image is controlled by the inherited styles or element styles, in the same way as a regular product image * Fix TypeScript errors in the block test file of Product Image * Add generic alt text to placeholder image Alt text added in this commit is a generic text, not description of the actual image. That's because the image itself is set externally through the settings and may change over time * Revert adding placeholder image alt text and add comments to make the empty alt explicit After a Github discussion: https://github.com/woocommerce/woocommerce-blocks/pull/7651\#discussion_r1019560494 it was decided the placeholder should NOT have alt text as it serves the purpose of decorative image. According to the guidelines decorative images should not have alt text: https://www.w3.org/WAI/tutorials/images/decorative/. Comments were added also to other places where it happens * bot: update checkstyle.xml Co-authored-by: Karol Manijak <karolm@Karols-MacBook-Pro.local> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> |
||
|---|---|---|
| .. | ||
| block-error-boundary | ||
| button | ||
| cart-checkout | ||
| checkbox-list | ||
| chip | ||
| combobox | ||
| country-input | ||
| drawer | ||
| filter-element-label | ||
| filter-placeholder | ||
| filter-reset-button | ||
| filter-submit-button | ||
| form | ||
| form-token-field | ||
| formatted-monetary-amount | ||
| label | ||
| load-more-button | ||
| loading-mask | ||
| noninteractive | ||
| pagination | ||
| price-slider | ||
| product-list | ||
| product-name | ||
| product-price | ||
| product-rating | ||
| quantity-selector | ||
| radio-control | ||
| radio-control-accordion | ||
| read-more | ||
| reviews | ||
| sidebar-layout | ||
| sort-select | ||
| spinner | ||
| state-input | ||
| summary | ||
| tabs | ||
| textarea | ||
| title | ||
| README.md | ||
README.md
WooCommerce Blocks - General Purpose Components
These are shared components used in WooCommerce blocks, and may be used in the store front end (shopper experience) as well as the editor or admin dashboard.
See Components & Storybook doc for more information.