In this update, the layout options for the Product Collection block are transferred from the Toolbar to the Inspector controls. Below is the breakdown of the changes:
1. **Constants Update**
- `LayoutOptions` enumeration has been imported into `constants.ts`, facilitating a more structured approach to managing layout types (grid and stack).
- The default display layout type has been updated from 'flex' to reference `LayoutOptions.GRID`.
- The `getDefaultQuery` function now uses the `getDefaultValueOfInheritQueryFromTemplate` utility to set the default `inherit` value. (This is mainly done to fix a bug)
2. **Display Layout Control Removal**
- The `display-layout-control.tsx` file has been removed, discontinuing the previous method of layout management.
3. **New Layout Options Control**
- A new component `LayoutOptionsControl` has been introduced in the `layout-options-control.tsx` file, utilizing the experimental `ToggleGroupControl` and `ToggleGroupControlOption` components from the WordPress package to provide a more intuitive layout selection experience.
- The `types.ts` file has been updated to define the `LayoutOptions` enum, effectively mapping 'flex' to 'GRID' and 'list' to 'STACK'.
4. **Inspector Controls Update**
- In `inspector-controls/index.tsx`, the obsolete `DisplayLayoutControl` has been replaced with the new `LayoutOptionsControl`, integrating it into the `ProductCollectionInspectorControls` component.
- The `BlockControls` wrapper has been removed, and layout options have been relocated to the Inspector controls, presented as a toggle group within the ToolsPanel.
5. **Inherit Query Control Modification**
- The `inherit-query-control.tsx` file sees a change in the reset value for the `inherit` query attribute to employ a default value which fix one bug.
These changes aim to streamline the user experience by relocating the layout options from the Toolbar to the Inspector controls, offering a centralized location for block settings. Leveraging an enum for layout options fosters code readability and maintainability.
Do note that the update uses experimental components, hence it would be prudent to keep an eye on potential alterations or deprecations in upcoming WordPress releases.
* Enable Product Collection patterns in inserter and kick off the layout control button
* Add Choose Pattern button
* Move Toolbar settings to related directory
* Display Pattern Selection modal with available patterns after clicking the button
* Make Pattern Chooser always visible
Patterns can be changed no matter if the Inherit Query from Template option in enabled or not
* Add pattern replacement mechanism
* Switch from Gutenberg styles to internal ones
* Enable Product Collection as a core feature
* Fix: disable product query title and summary variations from inserter in favour of Product Collection ones (https://github.com/woocommerce/woocommerce-blocks/pull/10548)
* Limit the scope of Product Query's Product Title and Product Summary
* Add missing piece after refactoring
* Enable manual migration of Products to Product Collection (https://github.com/woocommerce/woocommerce-blocks/pull/10655)
* Refactor block variation registration in product-collection (https://github.com/woocommerce/woocommerce-blocks/pull/10701)
This commit refactors the product-collection block's variation registration.
Changes:
- The `product-summary` and `product-title` variations have been encapsulated within their own respective functions: `registerProductSummaryVariation` and `registerProductTitleVariation`.
- Imported and invoked these new functions in the main `index.tsx` of the product-collection block, ensuring the variations are registered.
---------
Co-authored-by: Manish Menaria <the.manish.menaria@gmail.com>
* WIP of Upgrade Notice state
* Extend the state options with seeing option
* Move the logic to the dedicated folder
* Subscribe only if not reverted
* Refactor the way UpgradeNotice is rendered
* Simplify the logic of keeping the Upgrade Notice state in local storage
* Improve types organisation
* Lift the functions interacting with local storage to the Inspector Controls of Product Colelction
* Simplify logic of showing Upgrade Notice
* Disable auto migration
* Refactoring
* Use useLocalStorageState hook
* Fix incorrect merge
* Final improvements
* Allow to display Upgrade Notice after revert and manual upgrade
* Fix incorrect merge
* Improve the unsubscribe process
* Trigger auto-update from Product Collection only
* Remove weird console.log
* Abstract manual update from Product Query
* Fix the taxQuery migration from Product Collection to Products
* Product Collection - logic to hide upgrade notice (https://github.com/woocommerce/woocommerce-blocks/pull/10494)
* Add timestamp to each upgrade notice status change
* Revert back only Product Collections converted from Products block
* Make the time threshold configurable
* Add logic that hides the Upgrade Notice after some amount of displays
* Fix the taxQuery migration from Product Collection to Products
* Change the way to count Product Collection entries
* Fix the problem of multiple display counter increments with Product Collection
* Update Upgrade Notice visibility conditions
* Add contiions to unmark Product Collection as converted from Products
* Change variable name
* Change variable t to time name for better readibility. Improve types
* Replace useState with useRef
* Remove unecessary props passed to UpgradeNotice
* Add option to manually update Products block to Product Collection
* Disable manual upgrade of Products yet
* Manual update flag doesn't have to be dependant on auto update
* Removed commented out console info logs
* Disable option to upgrade Products block
* Change the way to bold text in Upgrade Notices so it's translatable
* Change the way UpgradeNotice is rendered conditionally
This commit adds a new `__experimentalExpandOnFocus` attribute to the component within the `HandPickedProductsControl`. The value is set to `true`, enabling automatic expansion of the list when the user focuses on the product selection field.
This change aims to improve the user experience by making it easier for the user to see all available options when they focus on the selection list.
Key updates:
1. Additional CSS class to Inherit Query Control: A CSS class named `wc-block-product-collection__inherit-query-control` has been added to the ToggleControl component. This provides a precise target for E2E tests and potential custom styles.
2. E2E tests for 'Inherit query from template' control: Numerous scenarios have been covered to ensure the control's correct behavior. These scenarios include verifying visibility under different circumstances and checking its functionality in a Product Catalog template.
3. E2E test code enhancements: The E2E test code now exports the `SELECTORS` object to assist in locating different elements during the tests. This includes the new 'Inherit query from template' control. The `setShowOnlyProductsOnSale()` function has been refactored to improve readability and provide more granular control over its operations.
4. Test scenario for 'Show only products on sale': The existing E2E test for this functionality has been extended to check that it retains its state when the 'Inherit query from template' control is toggled.
These changes increase the robustness of our E2E tests, providing better coverage for the 'Inherit query from template' control in the Product Collection block.
* Refactor Columns Control inspector controls in Product Collection
* Refactor Order By inspector controls in Product Collection
* Reorder imports in Product Collection Inspector Controls
* Refactor On Sale inspector controls in Product Collection
* Refactor Stock Status inspector controls in Product Collection
* Refactor Keyword inspector controls in Product Collection
* Unify interface of query controlling Inspector Controls
* Unify interfaces of Inspector Controls that modify Query in Product Collection
* Unify other Query modifying Controls
* Simplify types
* Add Display Layout controls to Product Collection
* Adjust the layout type name
* Add explicit display layout types
* Change the function name to setDisplayLayout so it's more explicit
* Pass only the necessary props to nested inspector controls
---------
Co-authored-by: Manish Menaria <the.manish.menaria@gmail.com>
* Add E2E tests for Product Collection Block
This commit does the following changes:
1. Adjusts the .gitignore file to ignore the test-results and artifacts directories under all subdirectories named 'e2e-pw'.
2. Adds new E2E tests for the Product Collection block, specifically testing:
- If the block renders correctly, including validating the number of product images, titles, prices, and 'Add to Cart' buttons.
- If the sidebar settings correctly control the number of displayed columns.
3. Implements the 'ProductCollectionPage' class, providing methods to perform actions such as creating a new post, inserting a block, publishing a post, and locating various elements on the page.
4. Adjusts the directory structure for the E2E tests to improve organization and readability.
* Minor improvements
* Update E2E tests for Product Collection block sidebar settings
This commit updates the E2E tests for the sidebar settings of the Product Collection block. The changes include:
1. Refactoring the test assertions to use property accessors instead of method calls for the `ProductCollectionPage` class. This improves readability and consistency.
2. Updating the `ProductCollectionPage` class to initialize locators for editor and frontend elements separately. This allows easier differentiation between editor and frontend locators.
The test file `sidebar-settings.block_theme.spec.ts` has been deleted, as its functionality is now covered by the updated tests in `product-collection.block_theme.spec.ts`.
* Don't update package.json files
* Don't update gitignore file
* Add E2E test for order by control
This commit updates the E2E tests for the sidebar settings and order by control of the Product Collection block. The changes include:
1. Refactoring the test assertions and descriptions for improved readability and clarity.
2. Adding a new test case to verify the correct sorting of products by title in descending order.
3. Updating the `ProductCollectionPage` class to include a new method `setOrderBy()` to set the order by value in the order by control.
4. Adding a new method `waitForProductsToLoad()` in the `ProductCollectionPage` class to wait for the products to load in the block.
These changes ensure that the sidebar settings and order by control are functioning correctly in the Product Collection block.
* Minor improvements
* Add tests for "on sale" filter
* Add tests for Hand picked products filter
This commit updates the E2E tests for the handpicked products filter in the Product Collection block. The changes include:
1. Adding a new test case to verify that products can be filtered based on the selection in the handpicked products option.
2. Adding a new method `addFilter()` to the `ProductCollectionPage` class to select a filter option from the dropdown.
3. Adding a new method `setHandpickedProducts()` to the `ProductCollectionPage` class to set the handpicked products in the block settings.
These changes ensure that the handpicked products filter is functioning correctly in the Product Collection block.
* Verify that on sale filter works on frontend
Adding assertions to verify the count and presence of on-sale products in the frontend after publishing.
* Add tests for Keyword filter
This commit updates the E2E tests for the keyword filter in the Product Collection block. The changes include:
1. Adding assertions to verify that the products are correctly filtered based on the keyword entered.
2. Adding assertions to verify the filtered products in the frontend after publishing.
These changes ensure that the keyword filter in the Product Collection block is functioning correctly.
* Use fixture to setup product collection page
This commit refactors the E2E tests for the Product Collection block to improve test structure and readability. The changes include:
1. Refactoring the test structure using the `test.extend` function to define shared setup and teardown logic.
2. Moving the creation of the `ProductCollectionPage` instance to the shared setup logic.
3. Using the `pageObject` fixture in each test to access the `ProductCollectionPage` instance.
4. Removing duplicate code for creating the `ProductCollectionPage` instance.
These changes enhance the maintainability and readability of the E2E tests for the Product Collection block.
This commit introduces the 'Display Settings' toolbar for the 'Product Collection' block in the Gutenberg editor.
- A new component 'DisplaySettingsToolbar' is added in 'display-settings-toolbar.tsx'. It includes controls for changing the number of items per page, the offset, and the maximum number of pages to show in the block. The toolbar only shows up when the 'inherit' query attribute is set to false.
- The 'DisplaySettingsToolbar' component is then integrated into the main 'edit.tsx' file through 'ToolbarControls'.
- Styles have also been added to 'editor.scss' to ensure the popover content of the display settings toolbar has an appropriate minimum width.
* Add support for hand-picked products in Product Collection block
This commit introduces the ability to manually select specific products in the Product Collection block.
Changes include:
- Added `woocommerceHandPickedProducts` to the `ProductCollectionQuery` and `DEFAULT_FILTERS` in `constants.ts`.
- Created a new control file `hand-picked-products-control.tsx` which introduces a token field where the user can search for and select specific products.
- Included `HandPickedProductsControl` in the Product Collection block's inspector controls in `index.tsx`.
- Updated `ProductCollectionQuery` in `types.ts` to accommodate handpicked products.
- Updated the PHP `ProductCollection` class to handle the hand-picked products query parameters.
These changes allow users to hand-pick products to be displayed in the Product Collection block. This allows for greater customization of the products shown in the block.
* Enhance handling of hand-picked products
- A Set data structure is now used to store 'newHandPickedProducts' instead of an Array, which will help prevent duplicate entries.
- Additionally, the suggestions for products to be hand-picked now excludes already selected products, enhancing the user experience by avoiding redundancy in the suggestions list.
- Lastly, the function name 'displayTransform' has been changed to 'transformTokenIntoProductName' to more accurately reflect its purpose, which is to transform a token into a product name.
* Update import & export of HandPickedProductsControl
* Add author filter to ProductCollection block
This commit adds an author filter to the ProductCollection block in WooCommerce Blocks.
- A new file, `author-control.tsx`, has been created inside the `inspector-controls` directory of the `product-collection` block. This file contains the React component for the author filter, which fetches the list of authors from the WordPress database using `useEntityRecords`. The filter provides an interface for selecting authors whose products should be displayed in the ProductCollection block.
- The author filter is added to the main component of the `inspector-controls` in `index.tsx`.
- In `ProductCollection.php`, the 'author' parameter is now included in the product query. This allows products from a specific author to be displayed in the ProductCollection block, depending on the user's selection in the Gutenberg editor.
This addition enhances the functionality of the ProductCollection block by allowing site administrators to create more customized and targeted displays of products.
* Update error handling
* Refactor 'Author' interfaces and fix offset calculation
This commit refactors the 'Author' interfaces in the 'author-control.tsx' file. The interface 'AuthorsMapping' has been removed and its properties have been merged into 'AuthorsInfo' for simplicity and maintainability.
In the PHP file 'ProductCollection.php', the offset calculation logic has been improved to handle pagination correctly. Now, the offset is calculated as '(per_page * (page - 1)) + offset', which correctly accounts for both the page number and the offset when determining the starting point for the product query.
* Add columns control to product collection block editor settings
- `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.
* Refactor: Simplify Fallback Return in ColumnsControl Component
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.
* Feature: Add 'Order By' Control to Product Collection Inspector
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.
* Add more options to OrderBy type
* Add Inherit global query control to the Product Collection
* Add orderby handling on frontend & editor
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.
* Fix the condition to show query controls (they shoul appear if query is NOT inherited)
* Make Product Collection inheirt global query in product archive templates by default
* Add 'on sale' filter and enhance settings management in product collection 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.
* Revert "Make Product Collection inheirt global query in product archive templates by default"
This reverts commit d257e8bdb014742c40ef069110f6a2a35148fb7a.
* Updated 'inherit' behavior in the Product Collection block
This commit updates the 'inherit' behavior in the Product Collection block and its associated controls.
Changes include:
- Removed the 'inherit' attribute from the block's JSON definition
- Defined an array of 'archive product templates' which includes the WooCommerce product archive, taxonomy, attribute, and search results templates.
- Set the initial 'inherit' value based on the current template ID when the Product Collection block is first added to the page.
- Restored the query object value when toggling 'inherit' off.
- Conditionally rendered the InheritQueryControl based on the current editor being the site editor.
* Add stock status filter to WooCommerce product collection block
This commit introduces a stock status filter to the WooCommerce product collection block.
The changes include:
1. Added the ability to filter products based on their stock status within the 'product-collection' block. A new stock status control is created within the inspector-controls of the block.
2. A new 'get_stock_status_query' function is introduced in 'ProductCollection.php' which returns a query for products depending on their stock status.
Please note that the stock status filter will only appear in the experimental build for now.
* Refactor Stock Status control of Product Collection block
This commit refactors the Stock Status control. The changes aim to improve the code organization and make the behavior of the component more explicit.
The key modifications are:
1. Moved stock status related constants and functions from `inspector-controls/utils.tsx` to `inspector-controls/constants.ts`. This is done to ensure that all constants and similar utility functions are organized in one place.
2. Updated `product-collection/index.tsx` to import `getDefaultStockStatuses` from `inspector-controls/constants` instead of `inspector-controls/utils`.
3. Updated `stock-status-control.tsx` to determine whether the stock status has value or not by comparing with the default stock statuses using `fastDeepEqual`. If the stock status control is deselected, it resets the stock status to the default statuses.
These changes do not introduce any new functionalities, but improve the readability and maintainability of the code.
* Add keyword search control to Product Collection block
This commit introduces a keyword search functionality to the Product Collection block. The update is aimed to provide users with more flexibility and precision in product collection queries.
Key changes:
1. Introduced a new file `keyword-control.tsx` that creates a Keyword Control component. This component includes a TextControl field that allows inputting a search keyword. The keyword search is debounced to prevent unnecessary queries during input and updates the block's attributes accordingly.
2. Modified `inspector-controls/index.tsx` to include the KeywordControl in the ToolsPanel for the block's filters.
3. Adjusted `ProductCollection.php` to include the keyword search in the product query array.
With these changes, users can now search for products by keyword in the Product Collection block.
* Add product attributes filter control to ProductCollection block
- This commit introduces the ability to filter products by attributes in ProductCollection block.
- A new `woocommerceAttributes` key was added to the `block.json` file and the `ProductCollectionQuery` type. Also, a new file `attributes-control.tsx` was created, providing the UI component for the attribute filter control in the editor.
- In addition, updates were made to the `ProductCollection.php` file in the backend to support filtering products by attributes, and the tax query was updated to include attribute queries.
- Lastly, the `ProductCollectionInspectorControls` was updated to include the `AttributesControl` component, thus enabling users to filter products by attributes in the block editor."`
* remove unused import of getDefaultStockStatuses
* Delete a duplicate file
* Remove console log
* Add taxonomies control to Product collection block
The primary changes include:
1. `taxQuery` field in the `ProductCollectionAttributes` was changed from a string to an object in `assets/js/blocks/product-collection/types.ts` and `assets/js/blocks/product-collection/constants.ts`, accommodating the ability to query products by taxonomy terms.
2. `assets/js/blocks/product-collection/inspector-controls/utils.tsx` was moved to `assets/js/blocks/product-collection/utils.tsx` to make it available for broader use.
3. New component `TaxonomyControls` was created in `assets/js/blocks/product-collection/inspector-controls/taxonomy-controls.tsx`, which is included in `assets/js/blocks/product-collection/inspector-controls/index.tsx`. This new control allows users to filter products in the block by their taxonomy terms.
4. Updated the block's inspector controls in `assets/js/blocks/product-collection/inspector-controls/index.tsx` to use the new `TaxonomyControls` component.
Please note that the TaxonomyControls component uses experimental features of WordPress's FormTokenField. As a result, a comment has been added to disable eslint warnings regarding the use of experimental APIs.
* Address PR feedback & other improvements
1. Added `woocommerceAttributes` to `DEFAULT_FILTERS` in the `product-collection/constants.ts` file to fix `reset all` button issue.
2. Refactored `attributes-control.tsx` to make it more maintainable:
- The constant `EDIT_ATTRIBUTES_URL` now uses `ADMIN_URL` from `@woocommerce/settings` for a more dynamic URL generation.
- The interface `Props` has been renamed to `AttributesControlProps` for more explicit naming.
- Removed the usage of `useState` and `useEffect` for selected attributes. Instead, `selectedAttributes` is now directly derived from `woocommerceAttributes`.
- The CSS class `woocommerce-product-query-panel__external-link` was renamed to `wc-product-collection-panel__external-link`
3. Deleted the `product-collection/inspector-controls/constants.ts` file which was no longer necessary due to changes in product collection implementation.
These changes contribute to codebase quality, improving readability and maintainability.
* Address PR review comments
This commit involves a significant refactoring of the default product query inside the 'product-collection/constants.ts' file. A new constant `DEFAULT_QUERY` has been defined and used to replace the previously hard-coded default query settings. This refactoring aids in code readability and future modifications.
Changes also include adjustments in 'product-collection/inspector-controls' to enhance UI/UX. A new SCSS file 'editor.scss' has been created for custom styles related to the editor.
Additions include:
- Adding a class name `product-collection-inspector-toolspanel__filters` to ToolsPanel for additional styling.
- The experimental property `__experimentalShowHowTo` is set to false for `FormTokenField` and `StockStatusControl`, to hide some additional information.
In 'product-collection/inspector-controls/taxonomy-controls.tsx', the classname `product-collection-inspector__taxonomy-control` is added for improved CSS targeting.
* Add wc-block-editor prefix to className
* Make improvements to 'inherit' functionality in Product collection block.
Key changes are:
1. 'inherit' in 'ProductCollectionAttributes' within 'constants.ts' has been changed from 'false' to 'null'. This accommodates for situations when Product collection block is first added to the page.
2. Various improvements in 'index.tsx' file which include more robust null checking for the 'query' object, simplifying the way 'woocommerceAttributes' is obtained, and passing 'setQueryAttributeBind' and 'inherit' to the 'InheritQueryControl' component.
3. In 'inherit-query-control.tsx', 'InheritQueryControl' component has been refactored to use '__experimentalToolsPanelItem' from '@wordpress/components' instead of 'ToggleControl'. This adds more flexibility to the control.
4. Changes in 'ProductCollectionAttributes' and 'ProductCollectionQuery' types in 'types.ts'. The
* Improve product collection query inheritance and fix URL typo
This commit addresses two primary areas:
1. Fixed a typo in the URL used as a reference in the use-previous.ts file. The URL was incorrectly case-sensitive, which has been corrected.
2. The product-collection block in the JavaScript files has been refactored for better handling of query inheritance:
- Changed the 'inherit' value from false to null in the DEFAULT_QUERY constant to handle initial state more accurately.
- In product-collection/inspector-controls, implemented conditional rendering for Filters and Query Controls based on 'displayQueryControls'. Also, improved the 'InheritQueryControl' by using the 'usePrevious' hook to maintain the state before enabling the inheritance.
- In inherit-query-control, enhanced the control to toggle the query inheritance. It now considers the 'inherit' state from the query object and keeps track of the query object state before enabling inheritance. If the inheritance is toggled off, it reverts the query to the previous state before inheritance was enabled.
* Minor improvemnets
* Add wc-block-editor- prefix with classNames
* Handle duplicate taxonomy names in Taxonomy controls
the taxonomy controls have been enhanced in the following ways:
1. Modified the BASE_QUERY object to include 'slug' in the '_fields' property. This will ensure that the 'slug' of the taxonomy term is fetched along with its 'id' and 'name'.
2. Added a 'slug' property to the Term type to store the 'slug' of each term.
3. Updated the useEffect hook inside the TaxonomyItem function to generate suggestions based on search results. The suggestions now include the 'slug' of a term if the term's name is not unique. This change will help users distinguish between terms with the same name but different slugs.
* Remove isset() in if condition as it's unnecessary
* Refactor TaxonomyItem component for better readability
Following changes were made:
1. The useSelect hooks which were being used to fetch existing terms and search results have been moved into their own custom hooks named 'useExistingTerms' and 'useSearchResults' respectively. This simplifies the TaxonomyItem function's body and makes the hooks' purposes clearer.
2. The comments and props destructuring for the TaxonomyItem function have been moved up to make it easier to understand the function's purpose and the props it receives.
3. This refactor does not introduce any changes in functionality. It only changes how the code is organized and presented, which will make future development easier.
* Handling for duplicate term names & other improvements
This commit enhances the `TaxonomyControls` component within `product-collection` block by adding memoization and improving term uniqueness handling.
Changes:
1. Imported `useMemo` from `@wordpress/element` for memoizing certain results.
2. `getTermIdByTermValue` function has been modified to use a `termIdToNameMap` (term ids as keys and term names as values). This provides a more efficient and direct mapping for term search.
3. Introduced `useTermIdToNameMap` function, which returns a `Map` where term ids are keys and term names are values. It handles duplicate term names by appending the term slug to the name, ensuring unique term names.
4. Updated the `useExistingTerms` and `useSearchResults` to include `taxonomy` in their dependency arrays for `useSelect` hook. This will force re-computation when `taxonomy` changes.
5. Changed `TaxonomyItem` from a function declaration to a const arrow function, consistent with the rest of the codebase.
6. Updated `onTermsChange` function in `TaxonomyItem` to accommodate the changes in `getTermIdByTermValue` and the introduction of `termIdToNameMap`.
7. Replaced `Set` with a standard array for storing new term IDs in `onTermsChange`. The `Set` was unnecessary as term IDs are unique by default.
8. Updated `TaxonomyItem`'s effects and rendering to work with `termIdToNameMap`, ensuring the displayed term names are unique.
This update will result in more efficient term search and handling, and it will solve issues related to duplicate term names.
* Restructure taxonomy controls in product collection block
This commit restructures the taxonomy controls in the product collection block for improved clarity and maintainability.
- The file `taxonomy-controls.tsx` has been deleted, and its functionality has been divided into two new files: `index.tsx` and `taxonomy-item.tsx`.
- The `index.tsx` file contains the main TaxonomyControls component, which is responsible for displaying taxonomy-related options in the block's inspector controls. It includes a custom hook `useTaxonomies` that fetches and returns taxonomies associated with product post type.
- The `taxonomy-item.tsx` file, on the other hand, contains a TaxonomyItem component that handles the rendering of individual taxonomy items. It also contains some utility functions for mapping term names and ids and fetching terms based on the search query.
This refactor aims to improve code readability and separation of concerns, thus making future changes and maintenance easier.
* Fix case insensitive search support for FormTokenField
This change enhances the search functionality of the FormTokenField by introducing support for case insensitive search. This has been achieved by adding a lower-case version of the term name to the 'termNameToIdMap'.
This is an important enhancement as it will make the search process more user-friendly and resilient to different casing inputs. Users will now be able to find the desired taxonomy term regardless of their input's case.
* Refactor getTermIdByTermValue function and update newSuggestions mapping
This commit does a couple of important things:
1. Reorders the definition of constants in `TaxonomyItemProps` for clarity.
2. Refactors the `getTermIdByTermValue` function. Instead of checking for an exact term name match in a convoluted manner, it now directly tries to fetch the `id` from the `searchTerm` if it is an object. If the `searchTerm` is not an object, the function tries to match it against the `termNameToIdMap` in both normal and lowercase forms. This simplification makes the function more readable and concise.
3. Updates the `newSuggestions` mapping in the `TaxonomyItem` component. It now has a fallback to `searchResult.name` if a term's name is not found in `termIdToNameMap`. This change ensures that even if the term's name is not in the map for some reason, we can still display a suggestion using the original name of the term.
* Optimize term fetching and initial search state in TaxonomyItem
This commit introduces a couple of improvements to the TaxonomyItem component.
1. The initial state of the 'search' state variable has been updated to 'undefined'. This change helps prevent unnecessary initial fetching of terms when the search input is empty.
2. Term fetching logic has been optimized to only enable term fetching when necessary:
a) Fetching based on the search query is only enabled when 'search' is not 'undefined'.
b) Fetching existing terms is only enabled when there are term IDs.
3. The block of code responsible for fetching existing terms and setting the current value has been moved upwards. This reordering of code does not change the functionality, but it groups together similar pieces of code, enhancing readability and maintainability.
These optimizations make the component more efficient by reducing unnecessary requests and computations, and they improve the code organization.
* Address PR comments and other improvements
This commit makes several changes:
1. The useEffect that sets the default attributes was moved and modified. This now includes a `query` attribute that utilizes the imported function `getDefaultValueOfInheritQueryFromTemplate`.
2. An early return was added in `edit.tsx` to prevent rendering until default attributes are set.
3. In `columns-control.tsx`, the early return was removed and a label was added to the `RangeControl` component.
4. In `inherit-query-control.tsx`, logic related to `inherit` value initial setting was refactored using a `useMemo` hook with `getDefaultValueOfInheritQueryFromTemplate` function. This logic was moved to a separate utility function in `utils`.
5. The `query` attribute is no longer optional in `types.ts`.
6. A new utility function `getDefaultValueOfInheritQueryFromTemplate` was created in `utils.tsx` to encapsulate the logic of deciding the default value of `inherit` query attribute based on the current template.
These changes aim to improve code clarity and maintainability.
* Add with types import statement
---------
Co-authored-by: Manish Menaria <the.manish.menaria@gmail.com>
Co-authored-by: Alexandre Lara <allexandrelara@gmail.com>
* Add columns control to product collection block editor settings
- `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.
* Refactor: Simplify Fallback Return in ColumnsControl Component
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.
* Feature: Add 'Order By' Control to Product Collection Inspector
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.
* Add more options to OrderBy type
* Add orderby handling on frontend & editor
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.
* Add 'on sale' filter and enhance settings management in product collection 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.
* Add stock status filter to WooCommerce product collection block
This commit introduces a stock status filter to the WooCommerce product collection block.
The changes include:
1. Added the ability to filter products based on their stock status within the 'product-collection' block. A new stock status control is created within the inspector-controls of the block.
2. A new 'get_stock_status_query' function is introduced in 'ProductCollection.php' which returns a query for products depending on their stock status.
Please note that the stock status filter will only appear in the experimental build for now.
* Refactor Stock Status control of Product Collection block
This commit refactors the Stock Status control. The changes aim to improve the code organization and make the behavior of the component more explicit.
The key modifications are:
1. Moved stock status related constants and functions from `inspector-controls/utils.tsx` to `inspector-controls/constants.ts`. This is done to ensure that all constants and similar utility functions are organized in one place.
2. Updated `product-collection/index.tsx` to import `getDefaultStockStatuses` from `inspector-controls/constants` instead of `inspector-controls/utils`.
3. Updated `stock-status-control.tsx` to determine whether the stock status has value or not by comparing with the default stock statuses using `fastDeepEqual`. If the stock status control is deselected, it resets the stock status to the default statuses.
These changes do not introduce any new functionalities, but improve the readability and maintainability of the code.
* Add keyword search control to Product Collection block
This commit introduces a keyword search functionality to the Product Collection block. The update is aimed to provide users with more flexibility and precision in product collection queries.
Key changes:
1. Introduced a new file `keyword-control.tsx` that creates a Keyword Control component. This component includes a TextControl field that allows inputting a search keyword. The keyword search is debounced to prevent unnecessary queries during input and updates the block's attributes accordingly.
2. Modified `inspector-controls/index.tsx` to include the KeywordControl in the ToolsPanel for the block's filters.
3. Adjusted `ProductCollection.php` to include the keyword search in the product query array.
With these changes, users can now search for products by keyword in the Product Collection block.
* Add product attributes filter control to ProductCollection block
- This commit introduces the ability to filter products by attributes in ProductCollection block.
- A new `woocommerceAttributes` key was added to the `block.json` file and the `ProductCollectionQuery` type. Also, a new file `attributes-control.tsx` was created, providing the UI component for the attribute filter control in the editor.
- In addition, updates were made to the `ProductCollection.php` file in the backend to support filtering products by attributes, and the tax query was updated to include attribute queries.
- Lastly, the `ProductCollectionInspectorControls` was updated to include the `AttributesControl` component, thus enabling users to filter products by attributes in the block editor."`
* remove unused import of getDefaultStockStatuses
* Delete a duplicate file
* Remove console log
* Add taxonomies control to Product collection block
The primary changes include:
1. `taxQuery` field in the `ProductCollectionAttributes` was changed from a string to an object in `assets/js/blocks/product-collection/types.ts` and `assets/js/blocks/product-collection/constants.ts`, accommodating the ability to query products by taxonomy terms.
2. `assets/js/blocks/product-collection/inspector-controls/utils.tsx` was moved to `assets/js/blocks/product-collection/utils.tsx` to make it available for broader use.
3. New component `TaxonomyControls` was created in `assets/js/blocks/product-collection/inspector-controls/taxonomy-controls.tsx`, which is included in `assets/js/blocks/product-collection/inspector-controls/index.tsx`. This new control allows users to filter products in the block by their taxonomy terms.
4. Updated the block's inspector controls in `assets/js/blocks/product-collection/inspector-controls/index.tsx` to use the new `TaxonomyControls` component.
Please note that the TaxonomyControls component uses experimental features of WordPress's FormTokenField. As a result, a comment has been added to disable eslint warnings regarding the use of experimental APIs.
* Address PR feedback & other improvements
1. Added `woocommerceAttributes` to `DEFAULT_FILTERS` in the `product-collection/constants.ts` file to fix `reset all` button issue.
2. Refactored `attributes-control.tsx` to make it more maintainable:
- The constant `EDIT_ATTRIBUTES_URL` now uses `ADMIN_URL` from `@woocommerce/settings` for a more dynamic URL generation.
- The interface `Props` has been renamed to `AttributesControlProps` for more explicit naming.
- Removed the usage of `useState` and `useEffect` for selected attributes. Instead, `selectedAttributes` is now directly derived from `woocommerceAttributes`.
- The CSS class `woocommerce-product-query-panel__external-link` was renamed to `wc-product-collection-panel__external-link`
3. Deleted the `product-collection/inspector-controls/constants.ts` file which was no longer necessary due to changes in product collection implementation.
These changes contribute to codebase quality, improving readability and maintainability.
* Address PR review comments
This commit involves a significant refactoring of the default product query inside the 'product-collection/constants.ts' file. A new constant `DEFAULT_QUERY` has been defined and used to replace the previously hard-coded default query settings. This refactoring aids in code readability and future modifications.
Changes also include adjustments in 'product-collection/inspector-controls' to enhance UI/UX. A new SCSS file 'editor.scss' has been created for custom styles related to the editor.
Additions include:
- Adding a class name `product-collection-inspector-toolspanel__filters` to ToolsPanel for additional styling.
- The experimental property `__experimentalShowHowTo` is set to false for `FormTokenField` and `StockStatusControl`, to hide some additional information.
In 'product-collection/inspector-controls/taxonomy-controls.tsx', the classname `product-collection-inspector__taxonomy-control` is added for improved CSS targeting.
* Add wc-block-editor prefix to className
* Add wc-block-editor- prefix with classNames
* Handle duplicate taxonomy names in Taxonomy controls
the taxonomy controls have been enhanced in the following ways:
1. Modified the BASE_QUERY object to include 'slug' in the '_fields' property. This will ensure that the 'slug' of the taxonomy term is fetched along with its 'id' and 'name'.
2. Added a 'slug' property to the Term type to store the 'slug' of each term.
3. Updated the useEffect hook inside the TaxonomyItem function to generate suggestions based on search results. The suggestions now include the 'slug' of a term if the term's name is not unique. This change will help users distinguish between terms with the same name but different slugs.
* Remove isset() in if condition as it's unnecessary
* Refactor TaxonomyItem component for better readability
Following changes were made:
1. The useSelect hooks which were being used to fetch existing terms and search results have been moved into their own custom hooks named 'useExistingTerms' and 'useSearchResults' respectively. This simplifies the TaxonomyItem function's body and makes the hooks' purposes clearer.
2. The comments and props destructuring for the TaxonomyItem function have been moved up to make it easier to understand the function's purpose and the props it receives.
3. This refactor does not introduce any changes in functionality. It only changes how the code is organized and presented, which will make future development easier.
* Handling for duplicate term names & other improvements
This commit enhances the `TaxonomyControls` component within `product-collection` block by adding memoization and improving term uniqueness handling.
Changes:
1. Imported `useMemo` from `@wordpress/element` for memoizing certain results.
2. `getTermIdByTermValue` function has been modified to use a `termIdToNameMap` (term ids as keys and term names as values). This provides a more efficient and direct mapping for term search.
3. Introduced `useTermIdToNameMap` function, which returns a `Map` where term ids are keys and term names are values. It handles duplicate term names by appending the term slug to the name, ensuring unique term names.
4. Updated the `useExistingTerms` and `useSearchResults` to include `taxonomy` in their dependency arrays for `useSelect` hook. This will force re-computation when `taxonomy` changes.
5. Changed `TaxonomyItem` from a function declaration to a const arrow function, consistent with the rest of the codebase.
6. Updated `onTermsChange` function in `TaxonomyItem` to accommodate the changes in `getTermIdByTermValue` and the introduction of `termIdToNameMap`.
7. Replaced `Set` with a standard array for storing new term IDs in `onTermsChange`. The `Set` was unnecessary as term IDs are unique by default.
8. Updated `TaxonomyItem`'s effects and rendering to work with `termIdToNameMap`, ensuring the displayed term names are unique.
This update will result in more efficient term search and handling, and it will solve issues related to duplicate term names.
* Restructure taxonomy controls in product collection block
This commit restructures the taxonomy controls in the product collection block for improved clarity and maintainability.
- The file `taxonomy-controls.tsx` has been deleted, and its functionality has been divided into two new files: `index.tsx` and `taxonomy-item.tsx`.
- The `index.tsx` file contains the main TaxonomyControls component, which is responsible for displaying taxonomy-related options in the block's inspector controls. It includes a custom hook `useTaxonomies` that fetches and returns taxonomies associated with product post type.
- The `taxonomy-item.tsx` file, on the other hand, contains a TaxonomyItem component that handles the rendering of individual taxonomy items. It also contains some utility functions for mapping term names and ids and fetching terms based on the search query.
This refactor aims to improve code readability and separation of concerns, thus making future changes and maintenance easier.
* Fix case insensitive search support for FormTokenField
This change enhances the search functionality of the FormTokenField by introducing support for case insensitive search. This has been achieved by adding a lower-case version of the term name to the 'termNameToIdMap'.
This is an important enhancement as it will make the search process more user-friendly and resilient to different casing inputs. Users will now be able to find the desired taxonomy term regardless of their input's case.
* Refactor getTermIdByTermValue function and update newSuggestions mapping
This commit does a couple of important things:
1. Reorders the definition of constants in `TaxonomyItemProps` for clarity.
2. Refactors the `getTermIdByTermValue` function. Instead of checking for an exact term name match in a convoluted manner, it now directly tries to fetch the `id` from the `searchTerm` if it is an object. If the `searchTerm` is not an object, the function tries to match it against the `termNameToIdMap` in both normal and lowercase forms. This simplification makes the function more readable and concise.
3. Updates the `newSuggestions` mapping in the `TaxonomyItem` component. It now has a fallback to `searchResult.name` if a term's name is not found in `termIdToNameMap`. This change ensures that even if the term's name is not in the map for some reason, we can still display a suggestion using the original name of the term.
* Optimize term fetching and initial search state in TaxonomyItem
This commit introduces a couple of improvements to the TaxonomyItem component.
1. The initial state of the 'search' state variable has been updated to 'undefined'. This change helps prevent unnecessary initial fetching of terms when the search input is empty.
2. Term fetching logic has been optimized to only enable term fetching when necessary:
a) Fetching based on the search query is only enabled when 'search' is not 'undefined'.
b) Fetching existing terms is only enabled when there are term IDs.
3. The block of code responsible for fetching existing terms and setting the current value has been moved upwards. This reordering of code does not change the functionality, but it groups together similar pieces of code, enhancing readability and maintainability.
These optimizations make the component more efficient by reducing unnecessary requests and computations, and they improve the code organization.
---------
Co-authored-by: Alexandre Lara <allexandrelara@gmail.com>
* Add columns control to product collection block editor settings
- `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.
* Refactor: Simplify Fallback Return in ColumnsControl Component
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.
* Feature: Add 'Order By' Control to Product Collection Inspector
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.
* Add more options to OrderBy type
* Add orderby handling on frontend & editor
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.
* Add 'on sale' filter and enhance settings management in product collection 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.
* Add stock status filter to WooCommerce product collection block
This commit introduces a stock status filter to the WooCommerce product collection block.
The changes include:
1. Added the ability to filter products based on their stock status within the 'product-collection' block. A new stock status control is created within the inspector-controls of the block.
2. A new 'get_stock_status_query' function is introduced in 'ProductCollection.php' which returns a query for products depending on their stock status.
Please note that the stock status filter will only appear in the experimental build for now.
* Refactor Stock Status control of Product Collection block
This commit refactors the Stock Status control. The changes aim to improve the code organization and make the behavior of the component more explicit.
The key modifications are:
1. Moved stock status related constants and functions from `inspector-controls/utils.tsx` to `inspector-controls/constants.ts`. This is done to ensure that all constants and similar utility functions are organized in one place.
2. Updated `product-collection/index.tsx` to import `getDefaultStockStatuses` from `inspector-controls/constants` instead of `inspector-controls/utils`.
3. Updated `stock-status-control.tsx` to determine whether the stock status has value or not by comparing with the default stock statuses using `fastDeepEqual`. If the stock status control is deselected, it resets the stock status to the default statuses.
These changes do not introduce any new functionalities, but improve the readability and maintainability of the code.
* Add keyword search control to Product Collection block
This commit introduces a keyword search functionality to the Product Collection block. The update is aimed to provide users with more flexibility and precision in product collection queries.
Key changes:
1. Introduced a new file `keyword-control.tsx` that creates a Keyword Control component. This component includes a TextControl field that allows inputting a search keyword. The keyword search is debounced to prevent unnecessary queries during input and updates the block's attributes accordingly.
2. Modified `inspector-controls/index.tsx` to include the KeywordControl in the ToolsPanel for the block's filters.
3. Adjusted `ProductCollection.php` to include the keyword search in the product query array.
With these changes, users can now search for products by keyword in the Product Collection block.
* Add product attributes filter control to ProductCollection block
- This commit introduces the ability to filter products by attributes in ProductCollection block.
- A new `woocommerceAttributes` key was added to the `block.json` file and the `ProductCollectionQuery` type. Also, a new file `attributes-control.tsx` was created, providing the UI component for the attribute filter control in the editor.
- In addition, updates were made to the `ProductCollection.php` file in the backend to support filtering products by attributes, and the tax query was updated to include attribute queries.
- Lastly, the `ProductCollectionInspectorControls` was updated to include the `AttributesControl` component, thus enabling users to filter products by attributes in the block editor."`
* remove unused import of getDefaultStockStatuses
* Delete a duplicate file
* Remove console log
* Address PR feedback & other improvements
1. Added `woocommerceAttributes` to `DEFAULT_FILTERS` in the `product-collection/constants.ts` file to fix `reset all` button issue.
2. Refactored `attributes-control.tsx` to make it more maintainable:
- The constant `EDIT_ATTRIBUTES_URL` now uses `ADMIN_URL` from `@woocommerce/settings` for a more dynamic URL generation.
- The interface `Props` has been renamed to `AttributesControlProps` for more explicit naming.
- Removed the usage of `useState` and `useEffect` for selected attributes. Instead, `selectedAttributes` is now directly derived from `woocommerceAttributes`.
- The CSS class `woocommerce-product-query-panel__external-link` was renamed to `wc-product-collection-panel__external-link`
3. Deleted the `product-collection/inspector-controls/constants.ts` file which was no longer necessary due to changes in product collection implementation.
These changes contribute to codebase quality, improving readability and maintainability.
* Add wc-block-editor prefix to className
---------
Co-authored-by: Alexandre Lara <allexandrelara@gmail.com>
* Add columns control to product collection block editor settings
- `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.
* Refactor: Simplify Fallback Return in ColumnsControl Component
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.
* Feature: Add 'Order By' Control to Product Collection Inspector
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.
* Add more options to OrderBy type
* Add orderby handling on frontend & editor
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.
* Add 'on sale' filter and enhance settings management in product collection 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.
* Add stock status filter to WooCommerce product collection block
This commit introduces a stock status filter to the WooCommerce product collection block.
The changes include:
1. Added the ability to filter products based on their stock status within the 'product-collection' block. A new stock status control is created within the inspector-controls of the block.
2. A new 'get_stock_status_query' function is introduced in 'ProductCollection.php' which returns a query for products depending on their stock status.
Please note that the stock status filter will only appear in the experimental build for now.
* Refactor Stock Status control of Product Collection block
This commit refactors the Stock Status control. The changes aim to improve the code organization and make the behavior of the component more explicit.
The key modifications are:
1. Moved stock status related constants and functions from `inspector-controls/utils.tsx` to `inspector-controls/constants.ts`. This is done to ensure that all constants and similar utility functions are organized in one place.
2. Updated `product-collection/index.tsx` to import `getDefaultStockStatuses` from `inspector-controls/constants` instead of `inspector-controls/utils`.
3. Updated `stock-status-control.tsx` to determine whether the stock status has value or not by comparing with the default stock statuses using `fastDeepEqual`. If the stock status control is deselected, it resets the stock status to the default statuses.
These changes do not introduce any new functionalities, but improve the readability and maintainability of the code.
* Add keyword search control to Product Collection block
This commit introduces a keyword search functionality to the Product Collection block. The update is aimed to provide users with more flexibility and precision in product collection queries.
Key changes:
1. Introduced a new file `keyword-control.tsx` that creates a Keyword Control component. This component includes a TextControl field that allows inputting a search keyword. The keyword search is debounced to prevent unnecessary queries during input and updates the block's attributes accordingly.
2. Modified `inspector-controls/index.tsx` to include the KeywordControl in the ToolsPanel for the block's filters.
3. Adjusted `ProductCollection.php` to include the keyword search in the product query array.
With these changes, users can now search for products by keyword in the Product Collection block.
* remove unused import of getDefaultStockStatuses
* Add columns control to product collection block editor settings
- `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.
* Refactor: Simplify Fallback Return in ColumnsControl Component
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.
* Feature: Add 'Order By' Control to Product Collection Inspector
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.
* Add more options to OrderBy type
* Add orderby handling on frontend & editor
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.
* Add 'on sale' filter and enhance settings management in product collection 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.
* Add stock status filter to WooCommerce product collection block
This commit introduces a stock status filter to the WooCommerce product collection block.
The changes include:
1. Added the ability to filter products based on their stock status within the 'product-collection' block. A new stock status control is created within the inspector-controls of the block.
2. A new 'get_stock_status_query' function is introduced in 'ProductCollection.php' which returns a query for products depending on their stock status.
Please note that the stock status filter will only appear in the experimental build for now.
* Refactor Stock Status control of Product Collection block
This commit refactors the Stock Status control. The changes aim to improve the code organization and make the behavior of the component more explicit.
The key modifications are:
1. Moved stock status related constants and functions from `inspector-controls/utils.tsx` to `inspector-controls/constants.ts`. This is done to ensure that all constants and similar utility functions are organized in one place.
2. Updated `product-collection/index.tsx` to import `getDefaultStockStatuses` from `inspector-controls/constants` instead of `inspector-controls/utils`.
3. Updated `stock-status-control.tsx` to determine whether the stock status has value or not by comparing with the default stock statuses using `fastDeepEqual`. If the stock status control is deselected, it resets the stock status to the default statuses.
These changes do not introduce any new functionalities, but improve the readability and maintainability of the code.
* Fix: Default values of attributes not saving as serialized block comment
This was happening because of this issue: https://github.com/WordPress/gutenberg/issues/7342
Therefore, I had to use `useEffect` to set the default values of the attributes.
Here is the list of changes I made:
1. Removed default values from `block.json` for `query`, `tagName`, and `displayLayout`.
2. Moved the default values to `constants.ts` and created a new object `DEFAULT_ATTRIBUTES` to store them.
3. Relocated `constants.ts` from `inspector-controls` to the parent directory.
4. Refactored `edit.tsx` to use `DEFAULT_ATTRIBUTES` from `constants.ts` to set default attributes using `useEffect`.
5. Removed the attributes assignment from `registerBlockType` in `index.tsx`.
6. Updated `columns-control.tsx`, `index.tsx`, `order-by-control.tsx`, and `stock-status-control.tsx` to import from the relocated `constants.ts`.
7. Updated `ProductCollectionAttributes` and `ProductCollectionQuery` in `types.ts` to include `tagName` and `isProductCollectionBlock` respectively.
8. Modified `ProductCollection.php` to match the updated `orderBy` key in the query parameter.
This refactor enhances the readability of the code and reduces duplication by keeping all constants and default values in one place.
* Replace usage of 'statii' with 'statuses' in stock status handling
This commit replaces all instances of 'statii' with the correct term 'statuses' in the context of handling stock status. This change affects three files:
1. `assets/js/blocks/product-collection/inspector-controls/stock-status-control.tsx` - The term is corrected in a comment block.
2. `assets/js/blocks/product-collection/types.ts` - Updated the name of a variable in the `ProductCollectionQuery` interface.
3. `src/BlockTypes/ProductCollection.php` - Here, the term is replaced in several locations including variable names, comments and the method `get_stock_status_query`.
This commit helps improve code readability and consistency across the repository.
* Add columns control to product collection block editor settings
- `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.
* Refactor: Simplify Fallback Return in ColumnsControl Component
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.
* Feature: Add 'Order By' Control to Product Collection Inspector
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.
* Add more options to OrderBy type
* Add orderby handling on frontend & editor
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.
* Add 'on sale' filter and enhance settings management in product collection 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.
* Add columns control to product collection block editor settings
- `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.
* Refactor: Simplify Fallback Return in ColumnsControl Component
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.
* Feature: Add 'Order By' Control to Product Collection Inspector
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.
* Add more options to OrderBy type
* Add orderby handling on frontend & editor
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.
* fix: handle undefined index for isProductCollectionBlock
This commit addresses a potential issue where the 'isProductCollectionBlock' index might not be defined in certain situations within the 'build_query' method of the ProductCollection class.
Previously, we directly accessed 'isProductCollectionBlock' from the 'query' context of the block. Now, we use the null coalescing operator (??) to ensure that we assign a default value of false if 'isProductCollectionBlock' is not set.
This change provides a safer way to handle the scenario when the 'isProductCollectionBlock' is not defined in the block context and helps prevent undefined index warnings.
* Add columns control to product collection block editor settings
- `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.
* Refactor: Simplify Fallback Return in ColumnsControl Component
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.
* Add Products Collection block scaffolding
This commit adds the initial scaffolding for the new Products Collection block. It includes the creation of new files (block.json, edit.tsx, index.tsx and ProductsCollection.php) and additions to existing files (webpack-entries.js and BlockTypesController.php). The block is marked as experimental and currently displays a static "Product collection" text in both the editor and the frontend.
* Add Product Template block and integrate with Products Collection block
This commit introduces the new Product Template block and integrates it with the existing Products Collection block. The changes include:
- Creation of the Product Template block, including its block.json, edit.tsx, icon.tsx, index.tsx, and save.tsx files.
- Modification of the Products Collection block, adding an icon.tsx file and updating its edit.tsx and index.tsx files.
- Updates to the webpack-entries.js file to include the new Product Template block.
- Addition of the ProductTemplate class in the src/BlockTypes directory.
- Inclusion of the ProductTemplate class in the src/BlockTypesController.php file.
* Enhance product-template block with context and styling
This commit adds various enhancements to the product-template block. It includes:
- Introduce `usesContext` and `supports` properties to the block.json file
- Update the edit.tsx file to use BlockContextProvider and add query logic
- Add an editor.scss file for styling the product-template block in the editor
- Extend the products-collection block.json file with new properties
- Modify the products-collection edit.tsx file to include instanceId and useEffect
These changes improve the product-template block by providing better context handling and styling options.
* Add 'woocommerce/product-template' to supported inner blocks and improve product-template editing
This commit adds 'woocommerce/product-template' as a supported inner block for various product elements, including button, image, rating, sale-badge, SKU, and stock-indicator. It also improves the editing experience for the product-template block by memoizing the block previews and rendering them more efficiently. This should lead to a smoother editing experience and better performance in the block editor.
* Add product title and summary variations for Products Collection block
- Add default spacing between product elements in `style.scss`
- Register product title and summary element variations in `products-collection` block
- Create utility for registering element variations
- Extend core elements with WooCommerce namespace
* Set inherit to false by default and other improvements
This commit introduces several changes to the ProductsCollection block:
1. Set the "inherit" property to false in block.json, disabling inheritance by default.
2. Remove the default styles for inner blocks in the edit.tsx file.
3. Add a save function in the index.tsx file, and create a save.tsx file to handle saving the block.
4. Update the ProductTemplate.php file to properly render the block content based on the changes.
5. Remove the render function from the ProductsCollection.php file, as it is no longer necessary.
These changes improve the functionality and flexibility of the ProductsCollection block, allowing for better customization and control over the block's appearance and behavior.
* Fix pagination issue
* Minor code quality improvments
* Register product blocks only in experimental builds
- Wrap registerBlockType calls in product-template and products-collection with isExperimentalBuild check to enable block registration only in experimental builds.
- Update the default value for the perPage property in products-collection/block.json from null to 9, setting a default display of 9 items per page.
* Add experimental flag to PHP file
* Update documentation for feature flags
- Add Products Collection and Product Template blocks to the list of experimental flags in the feature-flags-and-experimental-interfaces.md file.
- Include references to PHP and webpack flags for both blocks.
* Change default order and orderBy values in block.json
- Update the default 'order' value from 'desc' to 'asc'.
- Update the default 'orderBy' value from 'date' to 'title'.
* Refactor experimental block registration and remove unused file
- Replace `isExperimentalBuild()` with `registerExperimentalBlockType()` in product-template/index.tsx.
- Remove unused file types.ts in product-template directory.
- Add `get_block_type_script()` function to ProductTemplate.php and ProductsCollection.php to return null.
* Update variation names in product summary and product title elements
Updated variation names for product summary and product title elements to match the new products-collection namespace. The previous variation names used the product-query namespace which will be deprecated. This change ensures that the correct variation names are used for these elements in the products-collection block.
* Rename 'Products Collection' to 'Product Collection'
- Renamed all instances of "products-collection" to "product-collection" across multiple files.
- Adjusted related types and method calls to match the new naming convention.
- Updated documentation and feature flags to reflect the name change.
- Made necessary changes in `BlockTypesController.php` and `bin/webpack-entries.js`.
* Hide product-template block from inserter
- Added "woocommerce/product-collection" to the list of parent blocks in `product-template/block.json`.
- Added `"inserter": false` to the "supports" section to disable the option of inserting this block through the editor inserter component.
* Fix Eslint error
Manish Menaria
Karol Manijak
Karol Manijak