This repository has been archived by the owner on Feb 23, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 219
Add Product Gallery Thumbnails block #10442
Merged
danieldudzic
merged 46 commits into
trunk
from
add/9943-add-product-gallery-thumbnails-block
Aug 2, 2023
Merged
Add Product Gallery Thumbnails block #10442
danieldudzic
merged 46 commits into
trunk
from
add/9943-add-product-gallery-thumbnails-block
Aug 2, 2023
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
…Product Gallery and Thumbnails block.
…nality. Add settings for the Thumbnails in both places - Product Gallery and the Thumbnails block.
…tside of the component
…ils bottom position styling on the frontend.
…mbnails above the large image and don't overwrite that automatically
…t conditional check when moving thumbnails up and down
…ve the logic to a utils file
…roduct image is set
… position bug when initially adding the Product Gallery block
…://github.com/woocommerce/woocommerce-blocks into add/9943-add-product-gallery-thumbnails-block
This reverts commit 7de1f0f.
danieldudzic
added
skip-changelog
PRs that you don't want to appear in the changelog.
block: product gallery
Issues related to the Product Gallery block.
labels
Aug 1, 2023
woocommercebot
requested review from
a team and
gigitux
and removed request for
a team
August 1, 2023 17:25
The release ZIP for this PR is accessible via:
Script Dependencies ReportThe
This comment was automatically generated by the TypeScript Errors Report
assets/js/blocks/product-gallery/save.tsx
|
Size Change: +6.85 kB (+1%) Total Size: 1.34 MB
ℹ️ View Unchanged
|
thealexandrelara
approved these changes
Aug 1, 2023
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.
Approving this PR since it is working as expected. Great work and thank you for fixing the previous PR so quickly! 🚀
thealexandrelara
pushed a commit
that referenced
this pull request
Aug 7, 2023
* WIP Product Gallery: Add the Thumbnails block * Product Gallery Thumbnails: Add block settings * Add template for the Product Gallery block * Add template for the Product Gallery block. Add the rest of the files. * Product Gallery Thumbnails: Add context settings sharing between the Product Gallery and Thumbnails block. * Product Gallery Thumbnails: Add UI functionality and frontend functionality. Add settings for the Thumbnails in both places - Product Gallery and the Thumbnails block. * Product Gallery Thumbnails: Move the static template ouside of the component * Make sure the context is set before accesing the array values * Product Gallery Thumbnails: Move the setGroupAttributes() function outside of the component * Product Gallery Thumbnails: Fix TS errors * Product Gallery Thumbnails: Update the Features Flags and Experimental Interfaces doc * Product Gallery Thumbnails: Fix TS error * Product Gallery Thumbnails: Remove unused stylesheet * Product Gallery Thumbnails: Fix TS errors * Product Gallery Thumbnails: Remove unused context and fix the thumbnails bottom position styling on the frontend. * Product Gallery Thumbnails: Allow the user to move the horizontal thumbnails above the large image and don't overwrite that automatically * Product Gallery Thumbnails: Add code comments and remove the incorrect conditional check when moving thumbnails up and down * Product Gallery Thumbnails: Fix the eslint dependency error * Product Gallery Thumbnails: Refactor Product Gallery edit code and move the logic to a utils file * Product Gallery Thumbnails: Update the utils file * Product Gallery Thumbnails: Update the utils file. Fix comment indentation * Product Gallery Thumbnails: Fix undefined variable html when only 1 product image is set * Product Gallery: Rename clientId to productGalleryClientId * Product Gallery Thumbnails: Combine the useEffect code having the same dependencies * Product Gallery Thumbnails: Combine all useEffect code together * Product Gallery Thumbnails: Add a ThumbnailsPosition enum * Product Gallery Thumbnails: Update the thumbnailsPosition to an enum * Product Gallery Thumbnails: Fix TS errors * Product Gallery Thumbnails: Fix TS errors * Product Gallery Thumbnails: Add missing dependency * Product Gallery Thumbnails: Uppercase the enum and fix the thumbnails position bug when initially adding the Product Gallery block * Product Gallery: Add crop, zoom and full-screen settings * Product Gallery Thumbnails: Replace ts-ignore with ts-expect-error * Product Gallery Thumbnails: Replace ts-ignore with ts-expect-error * Product Gallery Thumbnails: Revert back to ts-ignore * Revert "Product Gallery: Add crop, zoom and full-screen settings" This reverts commit 7de1f0f.
thealexandrelara
added a commit
that referenced
this pull request
Aug 22, 2023
* Add block foundation * Add block styles * Add Dots Pager * Move icons to the block folder * Add block settings * Add Pager to Product Gallery template * Add setting to change Pager display mode * Change the block description * Fix the block icon color when selected * Fix php cs errors * Fix php cs errors * Fix css lint errors * Fix eslint error * Move enum to its own file * Remove unnused call to request context * Add block template * Fix php cs errors * fix php cs errors * improve docs * Remove duplicate HTML element and added classnames for single product block (#10374) * Show only products with rating (#10434) * Add Product Gallery Thumbnails block (#10442) * WIP Product Gallery: Add the Thumbnails block * Product Gallery Thumbnails: Add block settings * Add template for the Product Gallery block * Add template for the Product Gallery block. Add the rest of the files. * Product Gallery Thumbnails: Add context settings sharing between the Product Gallery and Thumbnails block. * Product Gallery Thumbnails: Add UI functionality and frontend functionality. Add settings for the Thumbnails in both places - Product Gallery and the Thumbnails block. * Product Gallery Thumbnails: Move the static template ouside of the component * Make sure the context is set before accesing the array values * Product Gallery Thumbnails: Move the setGroupAttributes() function outside of the component * Product Gallery Thumbnails: Fix TS errors * Product Gallery Thumbnails: Update the Features Flags and Experimental Interfaces doc * Product Gallery Thumbnails: Fix TS error * Product Gallery Thumbnails: Remove unused stylesheet * Product Gallery Thumbnails: Fix TS errors * Product Gallery Thumbnails: Remove unused context and fix the thumbnails bottom position styling on the frontend. * Product Gallery Thumbnails: Allow the user to move the horizontal thumbnails above the large image and don't overwrite that automatically * Product Gallery Thumbnails: Add code comments and remove the incorrect conditional check when moving thumbnails up and down * Product Gallery Thumbnails: Fix the eslint dependency error * Product Gallery Thumbnails: Refactor Product Gallery edit code and move the logic to a utils file * Product Gallery Thumbnails: Update the utils file * Product Gallery Thumbnails: Update the utils file. Fix comment indentation * Product Gallery Thumbnails: Fix undefined variable html when only 1 product image is set * Product Gallery: Rename clientId to productGalleryClientId * Product Gallery Thumbnails: Combine the useEffect code having the same dependencies * Product Gallery Thumbnails: Combine all useEffect code together * Product Gallery Thumbnails: Add a ThumbnailsPosition enum * Product Gallery Thumbnails: Update the thumbnailsPosition to an enum * Product Gallery Thumbnails: Fix TS errors * Product Gallery Thumbnails: Fix TS errors * Product Gallery Thumbnails: Add missing dependency * Product Gallery Thumbnails: Uppercase the enum and fix the thumbnails position bug when initially adding the Product Gallery block * Product Gallery: Add crop, zoom and full-screen settings * Product Gallery Thumbnails: Replace ts-ignore with ts-expect-error * Product Gallery Thumbnails: Replace ts-ignore with ts-expect-error * Product Gallery Thumbnails: Revert back to ts-ignore * Revert "Product Gallery: Add crop, zoom and full-screen settings" This reverts commit 7de1f0f. * Remove propTypes (#10432) * Fix badge wrong spacing on the newest arrivals pattern (#10446) * Product Gallery: Add Crop, Zoom and Full-screen settings (#10445) * WIP Product Gallery: Add the Thumbnails block * Product Gallery Thumbnails: Add block settings * Add template for the Product Gallery block * Add template for the Product Gallery block. Add the rest of the files. * Product Gallery Thumbnails: Add context settings sharing between the Product Gallery and Thumbnails block. * Product Gallery Thumbnails: Add UI functionality and frontend functionality. Add settings for the Thumbnails in both places - Product Gallery and the Thumbnails block. * Product Gallery Thumbnails: Move the static template ouside of the component * Make sure the context is set before accesing the array values * Product Gallery Thumbnails: Move the setGroupAttributes() function outside of the component * Product Gallery Thumbnails: Fix TS errors * Product Gallery Thumbnails: Update the Features Flags and Experimental Interfaces doc * Product Gallery Thumbnails: Fix TS error * Product Gallery Thumbnails: Remove unused stylesheet * Product Gallery Thumbnails: Fix TS errors * Product Gallery Thumbnails: Remove unused context and fix the thumbnails bottom position styling on the frontend. * Product Gallery Thumbnails: Allow the user to move the horizontal thumbnails above the large image and don't overwrite that automatically * Product Gallery Thumbnails: Add code comments and remove the incorrect conditional check when moving thumbnails up and down * Product Gallery Thumbnails: Fix the eslint dependency error * Product Gallery Thumbnails: Refactor Product Gallery edit code and move the logic to a utils file * Product Gallery Thumbnails: Update the utils file * Product Gallery Thumbnails: Update the utils file. Fix comment indentation * Product Gallery Thumbnails: Fix undefined variable html when only 1 product image is set * Product Gallery: Rename clientId to productGalleryClientId * Product Gallery Thumbnails: Combine the useEffect code having the same dependencies * Product Gallery Thumbnails: Combine all useEffect code together * Product Gallery Thumbnails: Add a ThumbnailsPosition enum * Product Gallery Thumbnails: Update the thumbnailsPosition to an enum * Product Gallery Thumbnails: Fix TS errors * Product Gallery Thumbnails: Fix TS errors * Product Gallery Thumbnails: Add missing dependency * Product Gallery Thumbnails: Uppercase the enum and fix the thumbnails position bug when initially adding the Product Gallery block * Product Gallery: Add crop, zoom and full-screen settings * Product Gallery Thumbnails: Replace ts-ignore with ts-expect-error * Product Gallery Thumbnails: Replace ts-ignore with ts-expect-error * Product Gallery Thumbnails: Revert back to ts-ignore * Revert "Product Gallery: Add crop, zoom and full-screen settings" This reverts commit 7de1f0f. * Product Gallery: Add crop, zoom and full-screen settings * Product Gallery: Remove the redundant React Fragment * Remove nested filled and empty cart blocks in cart template (#10447) * improve migration to blockified templates (#10415) * fix compatibility with WP 6.2 (#10449) * Add Product Gallery Pager to template * Add Pager settings to Product Gallery block * Remove save function and rename icon * Use nullish coalescing operator for the block context --------- Co-authored-by: Roy Ho <[email protected]> Co-authored-by: Alba Rincón <[email protected]> Co-authored-by: Daniel Dudzic <[email protected]> Co-authored-by: Thomas Roberts <[email protected]> Co-authored-by: Luigi Teschio <[email protected]>
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Labels
block: product gallery
Issues related to the Product Gallery block.
skip-changelog
PRs that you don't want to appear in the changelog.
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 is a replacement for #10247 which had to be revered due to an erroneous, accidental commit.
Fixes #9943
This PR adds an inner block Thumbnails to the parent block Product Gallery.
What is complete
Settings:
Thumbnails (Position)
- The thumbnails can be positioned to the left, to the right or at the bottom of the Large Image block.This utilizes the core Group block which gets updated from the Row to Stack modes as necessary to achieve the desired position/layout.
Settings:
Number of Thumbnails
- The minimum number of thumbnails is 2. The maximum number of thumbnails is 8.Settings: Sharing of the settings between Product Gallery and Thumbnails. Both the parent and the inner block can manage Thumbnails settings.
This utilizes the
context
sharing between Product Gallery and Thumbnails.Add testing steps to this PR
Investigate focus jumping, when switching thumbnails position with Thumbnails block being in focus.Before merging, there needs be a low priority issue opened for this.Review contexts set in
block.json
:usesContext
for each block. Make sure they only set contexts they actually use.E2E tests - Added via E2E: Product Gallery Thumbnails block tests #10370
Refactor the code in
product-gallery/edit.tsx
that's responsible for moving blocks around to achieve the desired Thumbnails position. Currently, the position is updated on every render (overriding potential non-standard user position changes).What needs to be done as a part of the next roadmap step
Thumbnails (Position)
setting) and will set the correct number of thumbnails, but doesn't include any interactivity. This todo item has been designated as the next step on the Product Gallery roadmap and will be worked on once all base code for all Product Gallery blocks have been added.Number of Thumbnails
- If more than 8 images exist for the product, a View All button should appear in the last thumbnail.Other Checks
Screenshots
Testing
Automated Tests
User Facing Testing
Appearance > Editor
.Templates > Single Product
.Thumbnails
(position) setting to all available options:Off
,Left
,Bottom
,Right
.product/v-neck-t-shirt/
product.Number of thumbnails
setting works correctly, and displays the correct number of thumbnails both in the editor and frontend.WooCommerce Visibility