* Add deselect callabck to attribute filter
* Add deselect callabck to created filter
* Add deselect callabck to featured filter
* Add deselect callabck to handpicked filter
* Cleanup deselect callabck to keyword filter
* Add deselect callabck to on salefilter
* Add deselect callabck to order by option
* Add deselect callabck to stock status filter
* Add deselect callabck to price range filter
* Add deselect callabck to price taxonomies filter
* Call all the reset filer callbacks on reset
* Add changelog
* Remove unused variable
* Replace hardcoded default filter values with the DEFAULT_FILTERS constant
* Use templateSlug context in Product Collection
* Implement util recognising the location for track events
* Implement the track event when user chooses a collection in Product Collection
* Add changelog
* Remove incorrect import
* Cover cases with specific Product or Specific Taxonomy
* Update event name
* Adjust Product Filters tests
* Revert wrong commit
* Fetch all products for hand-picked products control
This commit modifies the `getProducts` function usage within the Hand-Picked Products control, aiming to fetch all products regardless of catalog size.
The change involves explicitly setting `queryArgs` to include `per_page: 0` in the function call. This adjustment overrides the default behavior based on the `isLargeCatalog` condition, ensuring that all available products are fetched from the Store API for selection within the control.
* Add changefile(s) from automation for the following project(s): woocommerce-blocks
---------
Co-authored-by: github-actions <github-actions@github.com>
* Remove clickable cursor on post title
* Add changefile(s) from automation for the following project(s): woocommerce-blocks
* Update plugins/woocommerce-blocks/assets/js/blocks/product-collection/edit/editor.scss
Co-authored-by: Karol Manijak <20098064+kmanijak@users.noreply.github.com>
* Add missing semicolon
---------
Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Karol Manijak <20098064+kmanijak@users.noreply.github.com>
* Don't show publicly non-queryable taxonomies
The main enhancement involves adding a visibility filter to the taxonomies query. Now, the query considers the `publicly_queryable` property of each taxonomy. Only taxonomies marked as publicly queryable are included in the final list returned by the `useTaxonomies` hook. This change ensures that the Product Collection block's taxonomy controls only display taxonomies relevant and accessible to the public, enhancing both the usability for content creators and the relevance of taxonomy selections for site visitors.
* Add changefile(s) from automation for the following project(s): woocommerce-blocks
---------
Co-authored-by: github-actions <github-actions@github.com>
Since we don't need it to be _perfectly_ stable,
we can just set the `queryId` to the instance ID
on every component mounting. This is fine and
won't mark the attribute as dirty unless a
collection block is added, deleted, or moved
in just the right way. The exception to this
is collection blocks in sync patterns.
In this case the ID cannot change
because it can cause update loops in some
cases that freeze the browser.
* Add dummy Force Page Reload control to Inspector Advanced Control
* Add enhancedPagination attribute that decides if client side navigation is enabled
* Consume the enhancedPagination attribute
* Force client side navigation when incompatible blocks detected
* Dummy util to detect incompatible blocks
* Detect incompatible blocks in the Editor
* Switch to WordPress Interactivity package in Product Collection
* Add initial implementation of the incompatible blocks detection in frontend
* Remove leftover
* Revert to using internal version of interactivity API
* There's no Interactivity store config available in the internal Interactivity implementation so remove it
* Disable client side navigation if the incompatible block is detected
* Add default attribute value
* Switch from enmhancedPagination attribute to forcePageReload
* Fixed some misclicked line order change
* Switch from enhancedPagination to forcePageReload in PHP code
* Apply the correct filter
* Fix the incorrect condition to detect incompatible block
* Initial implementation of orange dot to bring attention
* Cleanup
* Remove the orange dot indicator
* Refactor checking for unsupported blocks
* Add changelog
* Fix PHP lint errors
* Bring back empty line at the end of pnpm-lock
* Bring pnpm-lock.yaml file to original state
* Fix incorrect function call
* Add visibility description to function
* Switch private method to public
* More linted fixes
* Set initial vlaue of Created filter for New Arrivals collection
* Add changelog
* Remove a check for products in tests as they may not really be displayed
* Adjust the New Arrivals test
* Adjust the tests logic after the change
* Bring back previous formatting
* Bring back function closure removed by mistake
With the availability of other unique characteristics
for identifying collection blocks, it is no longer necessary
to keep this attribute. Since it has not been used it is safe
to remove it without a deprecation cycle.
* Refactor store usage
* Prepare function resolving inherit property for additional check
* Add logic to disable sync with query if there's already one Product Collection on archive that does that
* Add changelog
* Cover the post editor case
* Add E2E test for that and small refactor in tests
* Remove duplicated import
* Fix lint problems
* Fix typo in test description
Co-authored-by: Alexandre Lara <allexandrelara@gmail.com>
* Replace confusin abbreviation with other description
* Update the logic to be more robust and covering also the case where Product Collection blocks are nested
* Add issue reference to the comment
* Add eslint disable before ts-ignore
---------
Co-authored-by: Alexandre Lara <allexandrelara@gmail.com>
* Add animation for client-side pagination
This includes:
- Addition of animation state management in the frontend file to control the visual transition between pagination states.
- Introduction of new SCSS rules for the start and finish animations, ensuring a seamless and visually appealing pagination experience.
- Modification of the PHP logic to inject necessary HTML for the animation to be applied.
These updates aim to provide a more engaging and responsive interface for users navigating through product collection.
* Enhance accessibility for product collection navigation
This commit introduces several improvements to enhance accessibility and user experience. Specifically, it adds new context properties to manage accessibility messages during the navigation process, including messages for loading and when a page has loaded. These changes ensure that screen reader users receive appropriate feedback during navigation.
Changes made:
- Added `accessibilityMessage`, `accessibilityLoadingMessage`, and `accessibilityLoadedMessage` properties to the `ProductCollectionStoreContext`. These properties store messages to be announced by screen readers during different stages of page navigation.
- Implemented logic in the product collection store to update the `accessibilityMessage` during the start of navigation (showing a loading message) and upon completion (showing a loaded message).
- Utilized a technique to ensure that consecutive identical messages are still announced by screen readers, by appending a no-break space to the message if it is the same as the previous one. This follows a pattern similar to the `@wordpress/a11y` package.
- In `ProductCollection.php`, enhanced the block's HTML output to include these new accessibility messages and integrated them with the existing interactive data attributes. This ensures that the front-end components are fully prepared to handle these accessibility enhancements.
- Added a new `div` with `class="screen-reader-text"` and `aria-live="polite"` attributes, which dynamically displays the accessibility message based on the navigation state. This div complements the visual pagination animation with an accessibility-focused mechanism for announcing the page load states to screen reader users.
By addressing accessibility considerations with these enhancements, we're making Product Collection navigation more inclusive and user-friendly for all users.
* Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce
---------
Co-authored-by: github-actions <github-actions@github.com>
* Add animation for client-side pagination
This includes:
- Addition of animation state management in the frontend file to control the visual transition between pagination states.
- Introduction of new SCSS rules for the start and finish animations, ensuring a seamless and visually appealing pagination experience.
- Modification of the PHP logic to inject necessary HTML for the animation to be applied.
These updates aim to provide a more engaging and responsive interface for users navigating through product collection.
* Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce
* Allow user clicks under product collection's loading animation
This commit enhances the user experience of the loading animation for the product collection block. Changes include:
- Specifying `transform-origin: 0% 0%;` directly within the block's initial style to indicate the animation should start from the left
- Adding `pointer-events: none;` to allow user interactions with elements underneath the loading animation, thus improving usability by not blocking clicks.
Additionally, redundant `transform-origin` properties were removed from the `@keyframes` declaration to clean up the code and avoid unnecessary repetition. This simplification contributes to both the maintainability and readability of the stylesheet.
* Fix linting errors in SCSS file
---------
Co-authored-by: github-actions <github-actions@github.com>
* Make attributes available in rest_product_query hook
This commit introduces the 'includeInQueryContext' attribute to the 'woocommerce/product-collection' block and updates the 'woocommerce/product-template' block to consume this new attribute.
Key Changes:
1. `woocommerce/product-collection` Block:
- A new attribute 'includeInQueryContext' is added in `block.json`. This attribute is designed to hold a list of attribute names relevant for the query context.
- The 'includeInQueryContext' attribute is included in the `providesContext` field to ensure its availability to child blocks.
- In `constants.ts`, default values for 'includeInQueryContext' are defined, specifying 'collection' and 'id' as initial attributes.
- The `types.ts` file is updated with a comment explaining the purpose of 'includeInQueryContext'.
2. `woocommerce/product-template` Block:
- Modified `block.json` to utilize the 'includeInQueryContext' context provided by the parent `woocommerce/product-collection` block.
- The `edit.tsx` file is updated to handle the new context. It uses a newly added utility function `useProductCollectionBlockAttributes` from `utils.tsx` to access parent block attributes.
- The `utils.tsx` file is introduced, containing the `useProductCollectionBlockAttributes` hook. This hook is responsible for finding the parent 'woocommerce/product-collection' block and returning its attributes.
- Within `edit.tsx`, logic is added to create a query context object based on the attributes specified in 'includeInQueryContext', enhancing the block's ability to dynamically adapt to changes.
* Remove commented code
* Rename query context attribute and optimize parent block detection
This commit introduces two significant changes aimed at improving code readability and efficiency.
1. **Renaming of Query Context Attribute:**
- The attribute `includeInQueryContext` has been renamed to `queryContextIncludes` across various files, including block JSON configurations and TypeScript definitions. This change makes the attribute's purpose more intuitive, indicating it specifies which attributes to include in the query context.
2. **Optimized Parent Block Detection:**
- Replaced the use of `getBlockParents` with `getBlockParentsByBlockName` in utility functions to find the closest Product Collection block. This optimization allows for a more direct and efficient way to identify the relevant parent block by specifying the block name, reducing unnecessary iterations and improving code performance.
* Streamline query context construction in product template
Key Changes:
- **Introduction of `useProductCollectionQueryContext` Hook:** This new hook takes the `clientId` and `queryContextIncludes` as inputs and returns a query context object. It encapsulates the logic for fetching parent product collection block attributes and constructing the query context accordingly. This abstraction simplifies the edit component's logic, focusing on the essentials and improving code readability.
- **Optimization of Parent Block Detection:** The hook uses `getBlockParentsByBlockName` to accurately and efficiently find the closest parent `Product Collection` block, minimizing the overhead previously associated with traversing the block hierarchy.
* Always include `collection` and `id` in query context
* Minor refactor
* Enhance query context handling for more maintainable code
- Introduced `DEFAULT_QUERY_CONTEXT_ATTRIBUTES` in `edit.tsx` to maintain a clear list of default query context attributes.
- Modified `ProductTemplateEdit` to automatically include these default attributes in `queryContextIncludes`, ensuring they are always part of the query context without manual initialization.
- Simplified `useProductCollectionQueryContext` in `utils.tsx` by removing static initialization of 'collection' and 'id', relying instead on the dynamic addition of necessary attributes from `queryContextIncludes`.
This refactor enhances the maintainability and clarity of the code, ensuring a solid foundation for future enhancements and features.
* Add E2E tests for Product Collection query context
- Added a new test suite 'Query Context in Editor' to validate the correctness of query context parameters when the Product Collection block is used. This suite ensures that:
- For the 'Product Catalog', only the ID is sent in the query context, confirming that collection-specific parameters are excluded when not relevant.
- For collections such as 'On Sale', the collection name is correctly passed in the query context, validating that the block dynamically adjusts query parameters based on its settings.
- Introduced a new utility method `setupAndFetchQueryContextURL` in `product-collection.page.ts`. This method automates the setup of a post with the Product Collection block and fetches the URL with query context parameters, facilitating the validation of query context handling.
* Add changefile(s) from automation for the following project(s): woocommerce-blocks
* Fix edge case when `queryContextIncludes` is not defined
- Initializing `queryContextIncludes` with a default empty array directly in the destructuring assignment of the component's props. This approach ensures that `queryContextIncludes` is always an array, simplifying downstream logic.
- Creating a new constant `queryContextIncludesWithDefaults` to hold the combination of `queryContextIncludes` and `DEFAULT_QUERY_CONTEXT_ATTRIBUTES`. This step avoids directly mutating the `queryContextIncludes` prop, aligning with best practices for functional purity and making the code easier to understand and debug.
- Updating the `useProductCollectionQueryContext` hook call to use `queryContextIncludesWithDefaults`. This ensures that the default query context attributes are consistently included without altering the original prop.
These adjustments not only enhance the code's maintainability but also ensure more predictable behavior by avoiding side effects related to parameter mutation.
---------
Co-authored-by: github-actions <github-actions@github.com>
* Include collection attribute in the block context
* add 'collection' to useContext for Product Template
* Changelog
---------
Co-authored-by: Manish Menaria <the.manish.menaria@gmail.com>
* Initial working version
* Update scrolling behavior in product collection block frontend
This commit updates the scrolling behavior in the product collection block's frontend script.
Previously, the code focused on the first anchor or button within a product collection block. This approach was taken to maintain accessibility and ensure that the focused element was scrolled into view. However, this behavior has been changed to improve the user experience.
The updated code now directly scrolls to the first product in the collection. This is achieved by selecting the product using a new selector that targets the `.wc-block-product` class within the `.wc-block-product-template` of the specified `data-wc-navigation-id`. Once the product is selected, the `scrollIntoView` method is used with smooth behavior and start block alignment, offering a more visually appealing scroll effect.
This change enhances the user experience by smoothly directing attention to the beginning of the product collection, making it easier for users to browse products.
* Remove code related to animation
* Fix the issue related to pagination block rendering
- I have improved the code by breaking it into smaller functions
- Added unique `data-wc-key` to each anchor tag
* Enhance Product Collection Block with Interactive Prefetching
* Refine Prefetch Logic & other improvements
This commit further refines the prefetch logic and interactivity in the Product Collection block. It focuses on enhancing code clarity and improving the prefetch behavior based on user interactions.
Key changes include:
1. Renamed 'isPrefetchNextAndPreviousLink' to 'isPrefetchNextOrPreviousLink' in ProductCollectionStoreContext for better readability and accuracy.
2. Modified the scrollToFirstProductIfNotVisible function to accept a wcNavigationId as a parameter instead of a reference
3. Introduced checks for the existence of wcNavigationId in scrollToFirstProductIfNotVisible to prevent unnecessary executions.
4. Updated comments throughout frontend.tsx for enhanced clarity, explaining the prefetch logic and its triggers in detail.
5. Adjusted the logic in the navigate and prefetch functions to align with the new context structure and prefetch strategy.
6. In ProductCollection.php, updated data attributes to align with the revised prefetch strategy.
7. Refined the attribute setting in process_pagination_links function to correctly implement the updated interactivity and prefetch logic.
These changes aim to optimize the prefetch functionality, reduce unnecessary prefetching on initial page load, and ensure a smoother and more efficient navigation experience within the Product Collection block.
* Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce
* Improve comments
* Use wp_json_encode for data-wc-interactive attribute
This commit updates the `ProductCollection` class to use `wp_json_encode` for setting the `data-wc-interactive` attribute value. Previously, the attribute value was hardcoded as a JSON string. Now, by utilizing `wp_json_encode`, we ensure the JSON encoding is handled correctly by WordPress standards, enhancing readability and maintainability of the code.
---------
Co-authored-by: github-actions <github-actions@github.com>
* Add unique ID attribute to Product Collection block
In this update, we introduced a unique identifier for each instance of the Product Collection block. This change involves several key modifications:
1. **Block JSON Update**: Added a new `id` attribute in `block.json` to store the unique identifier for each block instance.
2. **Product Collection Content Update**: In `product-collection-content.tsx`, we utilized the `uuid` library to generate a unique ID. This is done in a `useEffect` hook, ensuring that each block instance receives a distinct ID upon initialization.
3. **Type Definitions**: The `ProductCollectionAttributes` interface in `types.ts` was updated to include the new `id` attribute, aligning with our enhanced data structure.
4. **Package Dependencies**: To support this feature, `@types/uuid` and `uuid` were added to `package.json`, ensuring we have the necessary tools for ID generation.
This enhancement is pivotal for uniquely identifying each Product Collection block, paving the way for more robust and individualized block handling in the future.
* Rename uniqueId to id
* Add lock file
* Add 'id' context to product collection and template
* Add changefile(s) from automation for the following project(s): woocommerce-blocks
* Merge trunk with 42861-introduce-a-unique-identifier-for-each-product-collection-block
* Regenerate the lockfile
* Remove autogenerated change in plugins/woocommerce/package.json
* Regenerate lock file
* Rerun CI actions
* Delete pnpm-lock.yaml file & regenerate it using pnpm install command
---------
Co-authored-by: github-actions <github-actions@github.com>
* Fix: Enable Pagination Block Visibility in Product Collection Block
This commit resolves an issue where the Pagination block was not visible in the block insertor within the Product Collection block.
- The core query pagination block name, initially hardcoded, is now declared as a constant `coreQueryPaginationBlockName` in `constants.ts`. This change not only improves code readability but also ensures consistency in using the block name across different files.
- In `index.tsx`, the `addProductCollectionBlockToParentOfPaginationBlock` utility function from `utils.tsx` is imported and executed. This function plays a crucial role in the fix. It dynamically adds the Product Collection block to the parent array of the Core Pagination block, ensuring the latter's visibility in the insertor when editing the Product Collection block.
- The utility function employs WordPress hooks and version checks to gracefully handle different WordPress environments. This careful approach maintains backward compatibility while addressing the current issue.
With these changes, merchants can now easily add a Pagination block from the insertor while working on the Product Collection block, enhancing the user experience and functionality.
* Add changefile(s) from automation for the following project(s): woocommerce-blocks
---------
Co-authored-by: github-actions <github-actions@github.com>
* Migrate PR to Core
* Migrate test changes
* Add Custom Collection with inherit query attribute disabled
* Update copy of Product Catalog collection
* Don't choose default active collection in polaceholder and remove highlight
* Remove inherit query option from inspector controls
* Add collection names to Product Catalog and Custom one
* Unify Collection Chooser between Modal and Placeholder
* Bring back util removed by accident
* Replace the translations domain with woocommerce
* Remove leftovers after merge
* Add pagination and no results to Product Catalog and Custom collections
* Revert textdomain change
* Fix lint error
* Add changelog entry
* Change collection label
* Bring back Inherit query from template
* Remove Custom collection and bring back single Product Collection
* Simplify applying collection
* Make sure Inherit query from template is enabled in archive templates by default and disbaled in posts/pages
* Change incorrect Playwright locator
* Add test for Product Catalog inheriting the query in product archive
* Add tests for recommendation collection hiding the predefined filters
* Add reviews to multiple products
* Update expected products in Top Rated
* Remove rating creation in test env and skip undeterministic tests
* Add skip to Best Sellers test
* Update README.md
* Add more keywords to collections, like 'product collection' to recommendation collections
* Rephrase the README note about Collections registration
* Simplify types
* Rename unchangeableFilters to hideControls
* Fix typo in file name
* Remove 'pattern' references from toolbar files
* Replace hardcoded SCSS color with wc variable
* Remove changelog file from different PR
* Move hideControls to Product Collection ayttributes
* Improve responsiveness of columns in Product Collection Placeholder
* Use admin color pallette in Product Collection Placeholder
* Move Inherit query from template to the top of Inspector Controls
* Change the Collection prefix to woocommerce rather than woocommerce-blocks
* Simplify Placeholder and Modal styles
* Add price range filter to Product Collection block
This update introduces a price range filter feature to Product Collection. Changes include:
1. Constants Update:
- Added `priceRange` as undefined in `DEFAULT_QUERY` and `DEFAULT_FILTERS` in `constants.ts`.
2. Style Adjustments:
- Added CSS for `.wc-block-product-price-range-control` in `editor.scss` to align the input text to the end.
3. Component Integration:
- In `inspector-controls/index.tsx`, the `PriceRangeControl` component is now imported and integrated.
4. New Components:
- `PriceTextField.tsx` and `PriceRangeControl/index.tsx` have been created to handle price range inputs in the Product Collection block.
5. Backend Integration:
- `PriceRange` interface added in `types.ts` for type support.
- In `ProductCollection.php`, a filter (`add_price_range_filter`) is added to modify the main query based on the price range, including adjustments for tax considerations.
Overall, this enhancement allows users to filter products within a specific price range. The backend adjustments ensure that the filtering respects tax settings and displays accurate prices.
* Fix formatting
* Fix: Price range filter not working on Editor
* Improve: Share logic between Frontend & Editor
* Add changelog
* Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce
* Remove duplicate changelog file
* Enhanced Input Control for Price Fields
Key changes include:
1. **Switch to Input Control**: Replaced the NumberControl component with the more versatile InputControl. This offers better handling of currency formatting and user input.
2. **Currency Formatting Logic**: Added robust logic for formatting numbers according to the currency settings. This includes handling thousand separators, decimal places, and currency symbols.
3. **String-to-Number Conversion**: Implemented a function to convert user-entered strings back to numbers, accounting for currency symbols and separators. This ensures accurate parsing of user input for processing.
4. **Input Handling Improvements**: Modified the onChange handlers for minimum and maximum price inputs. Now, they correctly handle edge cases like undefined or zero values, maintaining consistency in the user interface and data processing.
* Refactor price range query handling
1. Introduction of a new method `get_price_range_query_args()` to encapsulate the logic for handling price range queries, especially for the two edge cases:
- Prices excluding tax displayed including tax.
- Prices including tax displayed excluding tax.
2. Removal of direct conditionals in the `get_query_results()` method, replacing them with a call to the new `get_price_range_query_args()` method. This makes the code more modular and easier to understand.
This refactor enhances readability and maintainability of the code, ensuring that special cases in price range filtering are handled more effectively.
* Remove unnecessary suffix prop
* Refactor PriceTextField formatting logic for currency
1. Conditional application of thousand separators: The code now checks for the existence of `currency.thousandSeparator` before applying it. This prevents potential errors when the separator is undefined.
2. Simplified decimal separator handling: Introduced a fallback for the decimal separator, defaulting to a period ('.') if not specified by the currency settings.
3. Enhanced readability and documentation: Added comments to clarify the purpose of code blocks, especially where currency symbols are added or removed, and where value normalization occurs.
4. Function renaming for clarity: Renamed `formatValueWithCurrencySymbol` to `formatCurrency`, which better reflects its purpose.
* Fix onBlur issue with PriceTextField component
Refactored the PriceTextField component to utilize useState for better state management. This change introduces a local state variable, 'newValue', to store the current value. The state updates occur in the handleOnChange function, ensuring that the component's state is managed efficiently. Additionally, a new function, handleOnBlur, is implemented to handle the onBlur event, updating the component's state when focus is lost. The handleEnterKeyPress function captures the 'Enter' key press, providing a more user-friendly experience by allowing users to confirm their input with the Enter key.
* Fix linting error
---------
Co-authored-by: github-actions <github-actions@github.com>
* Reorganise Columns controls and fix undefined problem in Product Collection settings
* Remove type condition in hasValue of Columns control
* Adjust the E2E tests locator to new changes
* Add HTML entity decoding for product names in Hand-Picked Products control
In the Hand-Picked Products control within the product-collection inspector controls, a function for decoding HTML entities in product names has been added.
- A new utility function `decodeHTMLEntities` has been implemented. This function decodes HTML entities in a string, ensuring that special characters are correctly displayed in their human-readable form.
- The `transformTokenIntoProductName` function has been updated to utilize `decodeHTMLEntities`. Now, when a product name is fetched (either directly as a token or via a product ID), the HTML entities within the name are decoded.
- This enhancement ensures that product names containing characters like ampersands or other HTML entities are accurately displayed in the UI.
This change improves the readability and accuracy of product names within the Hand-Picked Products control, enhancing the user experience for store managers using WooCommerce Blocks.
* Update label and hide description
This commit updates the `HandPickedProductsControl` component. Specifically, the user-facing label for product selection has been changed from 'Pick some products' to 'Hand-picked Products'. Additionally, the `__experimentalShowHowTo` property has been added with a `false` value, to hide description. Corresponding changes have been made in the E2E test file `product-collection.block_theme.spec.ts`, where the filter name is updated to match the new label.
* Refactor: Replace custom HTML entity decoder with `@wordpress/html-entities`
Rationale:
- The shift to `@wordpress/html-entities` aligns with standard WordPress practices, ensuring consistency across the platform.
- Enhances maintainability by relying on a well-supported library rather than custom code.
- Simplifies the codebase by removing a redundant utility function.
This change enhances the robustness of our code and aligns with best practices in WordPress development.
* Enable shrink columns option in Product Collection by default
* Improve tests about responsiveness
* Make regex allowing for floating pixels
* Related products should not use sticky and author attribute or have hardcoded queryId
* Bring back properties for Related Products as it's based on Propducts block, not Product Collection
* Enable shrink columns to fit by default in patterns
* Add custom 'No Results' block for Product Collection
This commit introduces a new 'No Results' block, replacing the default core 'query-no-results' block within product collection block. The 'No Results' block provides a tailored experience for WooCommerce stores, displaying a custom message when no products are found in a query.
Key changes include:
- A new block type 'woocommerce/no-results' is registered with a complete configuration and content structure.
- Edit and save functions are implemented for the block, allowing for custom content and styles within the block editor and on the front end.
- Webpack entries are updated to include the new block in the build process.
- A PHP class NoResults is added for server-side rendering, which only displays the block when the product query returns no results, enhancing performance.
- The ProductCollectionUtils utility class is extended to support the new block's query needs.
The new block enriches the user experience by providing clearer communication when no products match the collection criteria and allows store owners to customize the message and presentation.
* Update description
* Rename 'no-results' block to 'product-collection-no-results'
Changes include:
- Updating the block name in `edit.tsx` within the `product-collection` directory.
- Modifying the block.json file in the `no-results` inner block to reflect the new name.
- Adjusting the className in `edit.tsx` for the `no-results` inner block.
- Altering the webpack entries in `webpack-entries.js` to recognize the new block name.
- Renaming the block in `NoResults.php` to align with this update.
This renaming aims to make the block's purpose more clear and to maintain a consistent naming scheme within our product collection blocks.
* Rename NoResults to ProductCollectionNoResults for clarity
This commit renames the `NoResults` class to `ProductCollectionNoResults`. The change aims to enhance clarity and specificity about the class's purpose, indicating that it specifically handles no-result scenarios within product collections.
Changes made:
- Renamed `NoResults.php` to `ProductCollectionNoResults.php`.
- Updated the class name from `NoResults` to `ProductCollectionNoResults` in the file.
- Modified the reference in `BlockTypesController.php` to use the new class name.
This renaming ensures better readability and understanding of the class's role in the context of product collections. The primary change is the renaming, with no significant alterations in the class functionality.
* Update No-Results Message Formatting in Product Collection Block
This commit simplifies the layout and message content for the 'No results found' message in the product collection block's no-results edit component. The changes include:
1. Removal of the full stop in the 'No results found' string for consistency.
2. Replacing the 'core/group' block with a 'core/paragraph' block.
3. Streamlining the message content to be more concise and integrated into fewer text blocks.
4. Direct links for 'clearing any filters' and navigating to the 'store's home' are now included in the same paragraph.
---------
Co-authored-by: Paulo Arromba <17236129+wavvves@users.noreply.github.com>
* Add support for filtering products by featured status
- Added `featured` attribute to `ProductCollectionQuery` type to enable filtering by featured status.
- Implemented `FeaturedProductsControl` to provide a toggle option in the inspector controls.
- Integrated `FeaturedProductsControl` into `ProductCollectionInspectorControls`.
- Added `get_featured_query` function in `ProductCollection` class to generate query for fetching featured products.
- Updated existing functions and queries in `ProductCollection` class to support featured products filtering.
* Revert changes to composer.lock
* Refactor handling of 'featured' parameter
This commit makes the handling of the 'featured' parameter consistent in the ProductCollection class. Previously, the 'featured' parameter was being type-casted to boolean, which was not necessary and could lead to incorrect results. Now, the 'featured' parameter is used directly without type-casting, and the check for 'featured' products in the get_featured_query method has been updated accordingly. This ensures that the 'featured' parameter is handled consistently and correctly throughout the class.
* Handle undefined 'featured' index
This commit adds null coalescing operator to handle the case when 'featured' index is not set in the $query array. This prevents potential PHP notices or errors that may arise when trying to access an undefined index.
* Add time frame filter to Product Collection block
This commit introduces the ability to filter products within the Product Collection block by a specified time frame. The changes include:
- A new 'timeFrame' property added to the DEFAULT_QUERY constant in constants.ts, initialized as null, allowing for the storage of time frame data.
- Creation of a new component `CreatedControl` in created-control.tsx that provides UI elements for selecting a time frame filter.
- Inclusion of `CreatedControl` in the Product Collection Inspector Controls.
- Expansion of the ProductCollectionQuery interface in types.ts to include a 'timeFrame' attribute.
- Addition of the 'timeFrame' parameter handling within the ProductCollection PHP class to construct and execute the date query based on the provided time frame.
The addition of the time frame filter offers enhanced flexibility in presenting products and allows users to dynamically segment their product lists based on product creation dates.
* Refactor: Standardize 'timeFrame' to be 'undefined' instead of 'null'
This commit includes a refactoring that changes the initialization and reset values for the `timeFrame` property from `null` to `undefined`. This standardization affects the constants, type definitions, and the handling of the `timeFrame` property in both the inspector controls and the PHP backend.
* Switch date query to use post_date_gmt for DST consistency
This commit changes the column reference in the date query from 'post_date' to 'post_date_gmt'. This update ensures that the product collection filtering is based on Coordinated Universal Time (UTC) rather than local time, which can be affected by Daylight Saving Time (DST) shifts. The modification will lead to more consistent and reliable behavior across different time zones and during DST changes.
* Capitalize toggle group labels
The following adjustments have been made:
- Introduced a constant `uppercaseStyle` to store the `{ textTransform: 'uppercase' }` style.
- Applied `uppercaseStyle` to both the 'IN' and 'NOT IN' toggle options to ensure label text is consistently uppercase.
- Updated the 'Not in' label text to uppercase ('NOT IN') to match the newly applied style.
These changes ensure that the toggle labels align with the design guidelines that call for uppercase styling in control elements.
* Make first letter of first work capital
* Rename to Within & Before
* Update i18n for Product Collection query operators
This commit updates the internationalization (i18n) for the Product Collection query operators in the 'Created' control component of the WooCommerce Blocks plugin. It replaces the '__' function with '_x' for translation and provides context comments for better translation handling. This improvement enhances the localization of the query operators for better multilingual support.
* Remove authors filter from Product Collection block
* Remove author filed in query
* Add back the author query argument in the final query builder
---------
Co-authored-by: Manish Menaria <the.manish.menaria@gmail.com>
* Add Toggle to inspector controls allowing shrinking number of columns
* Add logic to allow columns to shrink in Product Collection
* Rename SCSS variable
* Make sure the value provided to component is a boolean
* Rename onChange callback name to better reflect its purpose
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>
Karol Manijak
Manish Menaria
Roy Ho
Christopher Allford
Chris Lilitsas
Ron Rennick