This repository has been archived by the owner on Feb 23, 2024. It is now read-only.
Product Gallery: Polish Gallery in full view mode #10947
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
…-on-sale-badge-block
…ge-block' of https://github.com/woocommerce/woocommerce-blocks into 10751-product-gallery-block-add-support-for-on-sale-badge-block
…-on-sale-badge-block
…block' of https://github.com/woocommerce/woocommerce-blocks into 9941-product-gallery-block-add-zoom-to-the-large-image-block
…large-image-block
…ocks into 9941-product-gallery-block-add-zoom-to-the-large-image-block
…large-image-block
Co-authored-by: Alexandre Lara <allexandrelara@gmail.com>
…large-image-block
…ocks into 9942-product-gallery-block-add-full-screen-gallery
…ocks into 9942-product-gallery-block-add-full-screen-gallery
…ocks into 9942-product-gallery-block-add-full-screen-gallery
|
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
🎉 🎉 This PR does not introduce new TS errors. |
|
Size Change: -106 B (0%) Total Size: 1.47 MB
ℹ️ View Unchanged
|
thealexandrelara
suggested changes
Sep 14, 2023
There was a problem hiding this comment.
Code is looking good, you've made an excellent progress on enhancing the full screen view. I have some issues that I've found while testing though:
Selected image is different from the image on the Full screen view
I noticed that after selecting a thumbnail image and clicking on the Large Image block, the image that opens is different from the selected one:
CleanShot.2023-09-14.at.16.52.55.mp4
It seems the context is different for each view (standard and fullscreen). I'm wondering if we will need to move the selectedImageId property from the context to the state in the Interactivity API store to make it global. However, this would be an issue when we have more than one Product Gallery on the same page unless we find a way to generate a unique id for each instance of the Product Gallery block 🤔
Padding and Thumbnails block on mobile sizes
When using the tablet view, the padding is missing at the top. For the mobile view, there is a lack of padding at the top and at the bottom, and it seems there is an excessive padding at the sides.
Regarding the thumbnails they are occupying too much space on these smaller screens, but I believe it would be better to address this in a separate PR, probably the solution would be to move the thumbnails block to the bottom of the Large Image block when on mobile, what do you think?
| Laptop | Tablet | iPhone SE |
|---|---|---|
 |
 |
 |
When clicking on the Previous/Next buttons, the dialog opens
I don't know if this issue is occurring because currently we have no handler for the click on the Next/Previous buttons, but currently when clicking on them, will also trigger the action that opens the dialog:
CleanShot.2023-09-14.at.17.21.09.mp4
Blank space
I'm using a 5k monitor and it seems there is too much blank space around the block:
I was looking how Amazon handled this scenario, and it seems that basically they make the image occupy 100% of the dialog height and also center the image:
| }, | ||
| }, | ||
| dialog: { | ||
| handleClick: ( { context }: Store ) => { |
There was a problem hiding this comment.
I believe it would be better if we specify what this action is responsible for, for instance: handleCloseButtonClick would bring more clarity that this action is responsible for closing the dialog.
…o product-gallery-full-screen-dialog-css
…o product-gallery-full-screen-dialog-css
|
Thanks, @thealexandrelara for your review! Sorry for the late update, but I was busy with other tasks! Selected image is different from the image on the Full screen viewFixed with ae6dc94 When clicking on the Previous/Next buttons, the dialog opensFixed with ded8a7f Regarding:
I created a dedicated issue: woocommerce/woocommerce#42217. We need to find how to resolve these issues using the layout blocks of Gutenberg. Furthermore, you will notice another style regression in full-view mode:
@danieldudzic did a great job with #10867 but introduced some regression, including this one. Before fixing this CSS, I prefer to wait for @danieldudzic to fix the other regressions. |
…o product-gallery-full-screen-dialog-css
|
Given that we fixed the function registerBlockSingleProductTemplate (#10978), if we register the Product Gallery with registerBlockSingleProductTemplate, the block will not be visible in the template-part. With 784e19e, I replaced the function with |
This was referenced Sep 22, 2023
thealexandrelara
approved these changes
Sep 22, 2023
There was a problem hiding this comment.
Amazing work here, @gigitux! Thank you for addressing the issues raised and for opening new ones so we can work on them in the future.
Really nice to see the dialog in sync with the Product Gallery on the template when selecting a different image 🙌 .
I tested and everything is working well (considering that we have opened issues that will be addressed in other PRs) so I'm approving this PR! 🚀
|
Bumping the PR to the next release |
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.
What
This PR is the final chunk to fix #9942.
Why
This PR polishes the Gallery in full-view mode. It improves:
Testing Instructions
Please consider any edge cases this change may have, and also other areas of the product this may impact.
Full-screen when clickedis enabled.Screenshots or screencast
Screen.Capture.on.2023-09-14.at.10-28-51.mov
WooCommerce Visibility
Required:
Checklist
Required:
[type]label or a[skip-changelog]label.Conditional:
[skip-changelog]label is not present).Changelog