This repository has been archived by the owner on Feb 23, 2024. It is now read-only.
Add size settings to the Product Image block
#10034
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
albarin
added
block: single product
|
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 |
woocommercebot
requested review from
a team and
kmanijak
and removed request for
a team
|
Size Change: +756 B (0%) Total Size: 1.18 MB
ℹ️ View Unchanged
|
kmanijak
reviewed
Jun 30, 2023
There was a problem hiding this comment.
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.
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.
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 |
kmanijak
approved these changes
Jul 3, 2023
There was a problem hiding this comment.
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 |
4 tasks
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR adds size settings: width, height, and scale to the
Product Imageblock.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 Heropattern, theProduct Featured Imageis replaced by theProduct Imagewith the height setting set to 300px.Fixes #10024
Screenshots
Testing
User-Facing Testing
Product Image settings
Single Productblock.Product Imageblock and open the settings sidebar.Image sizesettings are shown in the sidebar.Product Hero pattern
Product Heropattern.Product Image.WooCommerce Visibility
Changelog