This repository has been archived by the owner on Feb 23, 2024. It is now read-only.
Product Collection: Add 'on sale' filter and enhance settings management in product collection block #9549
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
- `InspectorControls` from './inspector-controls' is now imported in `edit.tsx` and used in the returned JSX of `Edit` function. - A new file `columns-control.tsx` is added under 'product-collection' block's 'inspector-controls' directory which exports a `ColumnsControl` component. This component uses `RangeControl` from '@wordpress/components' to control the number of columns in the product collection display layout when the layout type is 'flex'. - The types file (`types.ts`) for 'product-collection' block is updated. The `Attributes` interface is renamed to `ProductCollectionAttributes` and the `ProductCollectionContext` interface is removed. The `ProductCollectionAttributes` now includes 'queryContext', 'templateSlug', and 'displayLayout' properties.
This commit simplifies the fallback return value of the ColumnsControl component. Instead of returning an empty fragment (<> </>), it now returns null when the condition isn't met. This change improves readability and aligns with best practices for conditional rendering in React.
This commit adds a new 'Order By' control to the product collection inspector. The control allows users to specify the order of products in a collection by various attributes such as title and date. To support this, a new component 'OrderByControl' has been created and included in the product collection inspector. Additionally, the types for 'order' and 'orderBy' attributes have been updated and exported for reuse.
…ocks into 9359-product-collection-editor-settings-order-by
The main changes include: 1. Added a new property 'isProductCollectionBlock' in the block.json to denote if a block is a product collection block. 2. In the ProductCollection PHP class, a new initialization function has been defined to hook into the WordPress lifecycle, register the block, and update the query based on this block. 3. Added methods to manage query parameters for both frontend rendering and the Editor. 4. Expanded allowed 'collection_params' for the REST API to include custom 'orderby' values. 5. Defined a function to build the query based on block attributes, filters, and global WP_Query. 6. Created utility functions to handle complex query operations such as merging queries, handling custom sort values, and merging arrays recursively. These improvements allow for more flexible and robust handling of product collections in both the front-end display and the WordPress editor. It also extends support for custom 'orderby' values in the REST API, which allows for more advanced sorting options in product collections.
…ocks into 9361-product-collection-filters-on-sale
…ction block This commit introduces several changes to the product collection block. - First, it adds a new 'on sale' filter that can be used to display only the products that are currently on sale. - It also refactors the settings management in the product collection block to use the experimental ToolsPanel component from WordPress, which provides a more flexible and intuitive way to manage block settings. - It moves the 'Columns' control into the ToolsPanel, along with the 'Order by' control. - A new utility function `setQueryAttribute` is introduced to simplify setting nested query parameters. - The structure of the `ProductCollectionAttributes` and `ProductCollectionQuery` types have been adjusted to accommodate the changes. - Finally, it makes corresponding changes in the PHP part to handle the new 'on sale' query parameter. This should enhance the flexibility and user-friendliness of the product collection block.
|
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. |
imanish003
added
focus: blocks
woocommercebot
requested review from
a team and
thealexandrelara
and removed request for
a team
|
Size Change: +349 B (0%) Total Size: 1.09 MB
ℹ️ View Unchanged
|
4 tasks
thealexandrelara
approved these changes
May 24, 2023
There was a problem hiding this comment.
Regarding the tests that I did following the testing instructions, everything is working as expected. I left just some small comments about the code
✅ The sidebar displays the 'On sale' setting when the Product Collection block is selected
✅ When the 'On Sale' setting is turned on, the change is immediately reflected in the editor and only on sale products are displayed on the frontend
✅ When the 'On Sale' setting is turned on, only on sale products are displayed on the frontend
| import { ProductCollectionAttributes } from '../types'; | ||
|
|
||
| const OnSaleControl = ( | ||
| props: BlockEditProps< ProductCollectionAttributes > |
There was a problem hiding this comment.
A continuation from my comment above, if we are using just the attributes prop and you think we can only pass it to this component, we should probably get rid of the BlockEditProps and create an interface just with the props that are going to be used
There was a problem hiding this comment.
Thanks for your suggestion, @thealexandrelara. You're right, OnSaleControl component is indeed only using the attributes prop currently. Passing only the required props will make our component more explicit and could prevent unnecessary re-renders. I'll make the necessary adjustments in separate PR because I have created a few more PRs which are based on this branch. Appreciate your keen observation. 🙌🏻
tarunvijwani
added
the
type: enhancement
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 introduces several changes to the product collection block.
This should enhance the flexibility and user-friendliness of the product collection block.
Fixes #9361
Testing
WooCommerce Visibility
Changelog