-
Notifications
You must be signed in to change notification settings - Fork 221
Add size settings to the Product Image
block
#10034
Conversation
The release ZIP for this PR is accessible via:
Script Dependencies ReportThere is no changed script dependency between this branch and trunk. This comment was automatically generated by the TypeScript Errors Report
assets/js/atomic/blocks/product-elements/image/block.tsx
assets/js/atomic/blocks/product-elements/image/test/block.test.tsx assets/js/blocks/cart/cart-cross-sells-product-list/cart-cross-sells-product.tsx |
Size Change: +756 B (0%) Total Size: 1.18 MB
ℹ️ View Unchanged
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Great work!
I found one difference between editor and frontend when image is set to wider than available space. In Editor image shows in full scale, while in frontend it's cropped and horizontally centered. That may be discouraging to use by merchants if they see the content overlapping in editor. But I'm actually not sure which version should be expected one 🤔
Editor | Frontend |
---|---|
}, | ||
] } | ||
/> | ||
{ height && ( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think the Scale option could be available if either height
or width
is provided. Is there a reason to use only height
as a condition?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I basically followed the same logic as in the Post Featured Image
block in Gutenberg.
@kmanijak Thanks for the review, good catch! Not sure either which should be the expected one. I pushed a fix following again the |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I pushed a fix following again the Post Feature Image which allows the image to be wider than the available space. WDYT?
I found one thing a bit disturbing: the image is at the top of the content on the frontend, while it's below in the editor:
Editor | Frontend |
---|---|
But I checked and Post Featured Image behaves exactly the same, so I think that deserves an upstream fix. I'm approving then, but what do you think about creating an issue in Gutenberg?
Thanks @kmanijak! I fixed the issue for the |
This PR adds size settings: width, height, and scale to the
Product Image
block.This work is part of the block improvements needed in some blocks to make them more flexible to achieve the new pattern designs.
Also, in the
Product Hero
pattern, theProduct Featured Image
is replaced by theProduct Image
with the height setting set to 300px.Fixes #10024
Screenshots
Testing
User-Facing Testing
Product Image settings
Single Product
block.Product Image
block and open the settings sidebar.Image size
settings are shown in the sidebar.Product Hero pattern
Product Hero
pattern.Product Image
.WooCommerce Visibility
Changelog