This repository has been archived by the owner on Feb 23, 2024. It is now read-only.
Product Collection: Add new flow for adding Product Collection block #10952
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
|
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/blocks/product-collection/edit/product-collection-content.tsx
assets/js/blocks/product-collection/edit/product-collection-placeholder.tsx |
|
Size Change: +2.43 kB (0%) Total Size: 1.61 MB
ℹ️ View Unchanged
|
kmanijak
changed the title
kmanijak
added
type: enhancement
1. Corrected a typographical error in the `README.md` file, changing "registred" to "registered". 2. Updated the instruction text presented in the `product-collection-placeholder.tsx` file to offer clearer guidance for users.
- Updated the New Arrivals collection's default attributes to refine the block's appearance and content structure: - Reduced the default number of columns from 5 to 3 - Set the default number of items per page to 9 - Adjusted the collection attribute to reference the collection name dynamically - Replaced the hardcoded inner blocks template with a more dynamic structure, introducing a welcoming message and centralized product template usage - Refactored constants.ts to create distinct inner block templates for product, pagination, and no-results scenarios, enhancing reusability across different collections and improving code readability with descriptive comments Note: The changes aim to streamline the New Arrivals collection setup and facilitate maintainability through a more dynamic and structured approach to inner block templates.
…onentProps and update props usage - Renamed the `QueryEditComponentProps` type to `ProductCollectionEditComponentProps` to better match the Product Collection block context. Updated all occurrences in various files to maintain consistency. - Changed `openPatternSelectionModalOpen` prop to `openPatternSelectionModal` to correct the typo and make the naming more intuitive. Updated its usage in different files accordingly.
…mments - Renamed `QueryPlaceholder` component to `ProductCollectionPlaceholder` to better describe the component in the context of the Product Collection block. - Adjusted the import statements to group WordPress dependencies together and highlighted a TypeScript expectation error regarding missing Gutenberg types with `@ts-expect-error`.
This commit introduces several improvements and refactors to the `product-collection` block: - Utilized `block.json` for defining the block name in various files to centralize the block's configuration, making the codebase easier to maintain. - Moved and renamed `PatternSelectionModal.tsx` file to streamline the file structure and reflect its usage accurately. - Refactored the `PatternSelectionModal.tsx` file to: - Enhance type definitions and deal with missing TypeScript definitions using `@ts-expect-error`. - Update the import paths due to file relocations. - Streamline function names and parameters for better readability and understanding. - Change the modal title and category to reflect that users are choosing a "collection" rather than a "pattern". - Improved `PatternSelectionModal` to use `block.json` name and category properties, promoting maintainability and adherence to DRY principle. - Refactored `PatternSelectionModal` functions to construct the block query and apply it to patterns more robustly. - Updated `product-collection-placeholder.tsx` to use block name from `block.json`. - In `pattern-chooser-toolbar.tsx`, updated button label to indicate "Choose collection" instead of "Choose pattern" to maintain consistency with other changes. - Removed redundant filter addition in `inspector-controls/index.tsx`.
This is temporary action that will be changed into "Add c...This is temporary action that will be changed into "Add custom collection" 🚀 This comment was generated by the automations bot based on a
|
This is temporary action that will be changed into "Add c...This is temporary action that will be changed into "Add custom collection" 🚀 This comment was generated by the automations bot based on a
|
|
This work awaits a designer's review/input. For the time being it's paused. |
|
Bug: All Products have "inherit query from template" hidden the same as existing collections. Expected changes:
EDIT: Done ✅ |
14 tasks
14 tasks
|
This PR has been marked as If deemed still relevant, the pr can be kept active by ensuring it's up to date with the main branch and removing the stale label. |
github-actions
bot
added
the
status: stale
|
Closing. It's been moved to monorepo: woocommerce/woocommerce#42696 |
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
In this pull request, we are introducing several important changes to the WooCommerce Product Collection block. The key modifications include:
Placeholder State
A Placeholder State has been implemented for the Product Collection block. This new state provides users with a more user-friendly starting point when adding the block to a page. It offers options to either select an existing collection or add default one, streamlining the initial configuration process.
Collection Selection Overlay
Upon selecting "Choose Collection," an Overlay now appears. This overlay simplifies the process of selecting a collection by presenting users with a list of collections, including options like New Arrivals.
Each Collection has dedicated title, icon and description as per designs (ignore the bottom part of it):
Collections README:
We've added a README file for the collections of the Product Collection block. This README documents how to use collections, what attributes they support, and how to register new collections.
Collections
We've included a set of initial collections:
- New Arrivals
- Top Rated
- Best Selling
- On Sale
- Featured
- Default Query
Fixes woocommerce/woocommerce#42224
Fixes woocommerce/woocommerce#42166
Fixes woocommerce/woocommerce#42165
Fixes woocommerce/woocommerce#42164
Why
The primary motivation behind these changes is to significantly improve the user experience when adding a new Product Collection block. The existing implementation defaults to a 3-column grid with alphabetical ordering and random stock status filters, which might not be intuitive for users. We are introducing the following enhancements:
These changes are designed to make the Product Collection block more accessible and user-centric.
For more info, you may also check Github Discussion #10694.
Testing Instructions
Please consider any edge cases this change may have, and also other areas of the product this may impact.
Case 1: "Add default Product Collection" flow
Product Collection (Beta)block to it.Case 2: "Choose Collection" flow
Product Collection (Beta)block to it.Case 3: "Choose Collection" flow with "All Products"
Product Collection (Beta)block to it.Case 4: Verify Collections ARE NOT available in the inserter
Misc
Screenshots or screencast
WooCommerce Visibility
Required:
Checklist
Required:
[type]label or a[skip-changelog]label.Conditional:
[skip-changelog]label is not present).Changelog