* Expose registerProductCollection in @woocommerce/blocks-registry Package
This commit exposes the `registerProductCollection` function as part of the `@woocommerce/blocks-registry` package. This enhancement facilitates the registration of new product collections by 3PDs, promoting better modularity and extensibility within the WooCommerce Blocks ecosystem.
Changes include:
- Migration of `register-product-collection.tsx` to `packages/checkout/blocks-registry`.
- Export `registerProductCollection` from `@woocommerce/blocks-registry/index.ts`.
- Updated related imports and references to the new path.
This update enables 3PDs to register product collections more seamlessly, enhancing the extensibility of Product Collection block.
* Replace @woocommerce/blocks-checkout with @woocommerce/blocks-registry
* Add __experimental prefix
* Add changefile(s) from automation for the following project(s): woocommerce-blocks
* Improve registerproductcollection for 3pds
* Set isDefault value to false
* Don't export all the types
* Update changelog
* Add changefile(s) from automation for the following project(s): woocommerce-blocks
* Add plugin to test __experimentalRegisterProductCollection
* Add E2E tests
* Fix Lint errors
* Improve E2E tests for __experimentalRegisterProductCollection
- Reduced preview timeout from 2000ms to 1000ms.
- Expanded E2E tests to cover new attributes and preview functionalities.
* Refactor code to improve readability and maintainability
- Added a warning comment to indicate that `__experimentalRegisterProductCollection` is an experimental API.
- Refactored variable names and imports in `register-product-collection.tsx` and `index.tsx` for clarity.
- Simplified and reorganized type definitions and imports in `types.ts` and `utils.tsx`.
- Renamed function in `register-product-collection-tester.php` for consistency.
* E2E: Also test the Frontend
* Use alias for import statement
* Don't pass isActive to registerProductCollection
Now it's handle by registerProductCollection itself.
* Update registerproductcollection API structure
Refactored the product collection block to enhance attribute management and ensure consistency in query defaults. This change includes:
- Importing `DEFAULT_QUERY` from constants and using it to set default query attributes.
- Removing `DEFAULT_ATTRIBUTES` from specific collections and directly defining required attributes.
- Ensuring `postType` and `isProductCollectionBlock` are set to default values in the query object.
- Setting `inherit` attribute to `false` by default in all collections.
* Hide inherit control in collections
Ensure the "inherit" control is always hidden, as collections should not be able to change this attribute. This includes:
- Adding `CoreFilterNames.INHERIT` to the `hideControls` set in `register-product-collection.tsx`.
- Adjusting the `hideControls` attribute in individual collection files to remove redundant hiding of the `INHERIT` control.
* Fix: Filters not showing in inspector controls
* Set inherit to false for all collections
* Add changefile(s) from automation for the following project(s): woocommerce-blocks
* Product Collection: Add validation for `__experimentalRegisterProductCollection` arguments (#48513)
* Add validation for `__experimentalRegisterProductCollection` arguments
Introduced comprehensive validation for the `ProductCollectionConfig` object in `__experimentalRegisterProductCollection` to ensure correct data types and values, enhancing error handling and robustness.
- Added a new function `isValidProductCollectionConfig` to perform various checks on the `ProductCollectionConfig` object.
- Validates properties such as `name`, `title`, `description`, `category`, `keywords`, `icon`, `isDefault`, `innerBlocks`, `example`, `scope`, `isActive`, `attributes`, and `preview`.
- Ensures correct data types and provides detailed console error messages for invalid configurations.
- Updated `__experimentalRegisterProductCollection` to use the validation function before proceeding with the registration process.
**Impact**
- Improves stability and prevents invalid configurations from causing runtime errors.
- Provides clearer error messages for developers, aiding in quicker debugging and development.
* Fix typo
* Refactor: Replace console.error with console.warn
Updated the error logging in the isValidProductCollectionConfig function to use console.warn instead of console.error for invalid configuration properties. This address the feedback from the PR review.
- Replaced console.error with console.warn for various validation checks in isValidProductCollectionConfig.
- Removed redundant return statements after console.warn calls.
- Improved logging messages to better inform about invalid configuration properties without treating them as critical errors.
- Simplified the logic in __experimentalRegisterProductCollection by combining query and attribute properties and ensuring defaults are set properly.
* Refactor: Rename isValidProductCollectionConfig to isValidCollectionConfig
Updated the function name from isValidProductCollectionConfig to isValidCollectionConfig for better clarity and consistency. Also, renamed related variables for improved readability.
* Add validation for name property
* Add changefile(s) from automation for the following project(s): woocommerce-blocks
* Title is required for new collection
* Update comments
* Fix E2E tests
* Address PR feedback
---------
Co-authored-by: github-actions <github-actions@github.com>
* Add README file for __experimentalRegisterProductCollection
* Add screenshots in README file
* Try to fix lint issue
* Docs: add example for collection with inner blocks
Enhanced the documentation for `__experimentalRegisterProductCollection` to include an example demonstrating how to define a collection with inner blocks. This example shows how to create a custom collection with nested blocks, including a heading and product elements, providing a clear guide for developers.
New content added:
- Example 4: Collection with inner blocks
- Sample code for defining a collection with inner blocks
- Tips and links to further resources on inner blocks and core collection definitions
* Fix Lint errors
* Address PR feedback
* Reduce number of JS files on /shop page
**Problem:** There was increase in number of JS files on /shop page after exposing `registerProductCollection` function in `@woocommerce/blocks-registry` package. This package is loaded on the frontend. For example, previously 45 JS files were loaded on /shop page but now 55 JS files are loaded on /shop page.
**Solution:**
1. After a bit of debugging I found out that constant file which we are importing i.e. `plugins/woocommerce-blocks/assets/js/blocks/product-collection/constants.ts` contain some heavy dependencies & it's not pure. Therefore, I decided to split this file into two files. I moved all the constants that are used in `registerProductCollection` function to a new file i.e. `plugins/woocommerce-blocks/assets/js/blocks/product-collection/constants-register-product-collection.ts`. This way, we don't need to load all the constants on the frontend i.e. /shop page.
- This reduced 4 JS files i.e. 51 JS files are loaded on /shop page.
2. After some more investigation, I found out that importing `registerBlockVariation` function is increasing number of JS files on Frontend. Therefore, I decided to use global `wp` object to call `registerBlockVariation` function. This way, we don't need to import it. This reduced last 6 files i.e. 45 JS files are loaded on /shop page.
This way, I was able to reduce number of JS files on /shop page from 55 to 45, which is same as before this PR.
* Refactor: product collection constants
- Moved constants from `constants-register-product-collection.ts` to `constants.ts`
- Deleted `constants-register-product-collection.ts`
- Updated import paths in relevant files to reflect the changes
- Moved utility functions to `utils.ts`
---------
Co-authored-by: github-actions <github-actions@github.com>
* Move `check_should_use_blockified_product_grid_templates` to `wc-template-functions.php`
* add changelog entry
* alias Blocks/Options as BlocksOptions
* Init `BlockTemplatesController` for block themes only
* Remove the `wc_current_theme_is_fse_theme()` check from BTC
* Streamline the option update logic a tad
* Revert "Streamline the option update logic a tad"
This reverts commit 54a965d9784df253f82533991e03c1112fd386ef.
* init BTC for themes that support block template parts
Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>
* init BTC for themes that support block template parts, p.2
Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>
* move the check to a new OptionsManager class
* make types consistent
* add classic theme with block template parts support
* tmp: add logs for debugging
* Initialize BlockTemplatesController on init
* Remove debugging code
* Prevent duplicate template parts appearing in the Site Editor in classic themes that support template parts
* Update e2e tests for classic themes that support template parts
* Fix Checkout header not being rendered
* Fix PHP tests
* Simplify WC_BLOCK_USE_BLOCKIFIED_PRODUCT_GRID_BLOCK_AS_TEMPLATE logic
* Rename OptionsManager class to TemplateOptions
* Change format of inline comment
* Use wc()->is_store_api_request()
* Update plugins/woocommerce/src/Blocks/TemplateOptions.php
Co-authored-by: Tom Cafferkey <tjcafferkey@gmail.com>
* Update testing theme slugs
* Add strict_types to TemplateOptions file
* Refactor check_should_use_blockified_product_grid_templates()
* Don't update 'wc_blocks_use_blockified_product_grid_block_as_template' when switching between block themes
* Add extra unit test to make sure the option is not updated when switching between block themes
* Update strict_types format
* Remove unnecessary theme switch after tests finish running
* Replace .toHaveCount( 0 ) with .toBeHidden() in several tests
* Create a TestUtils to abstract logic to open Mini-Cart block
* Remove unnecessary import
* Replace .toHaveCount( 0 ) with .toBeHidden() in several tests (II)
---------
Co-authored-by: Bart Kalisz <bartlomiej.kalisz@gmail.com>
Co-authored-by: Tom Cafferkey <tjcafferkey@gmail.com>
* Modify Product Filters block to use block variations
* Add changefile(s) from automation for the following project(s): woocommerce-blocks
* Add dynamic blocks icon and title
* Make Attribute Filter block title dynamic
* Add E2E tests for the Product Filters block
* Remove unnecessary block attribute
* Improve clarity of the comment text
* Add new icons for individual filters
* Dynamically set the title and heading of the block based on the selected attribute
* Add E2E test to check for block title and heading change on selecting an attribute
* Replace custom block variation type by BlockVariation type from @wordpress/blocks
* Replace variation `isActive` function by an array of strings
* Fix heading for each individual filter
* Add a default attribute name when there is no attributes registered in the store
* Fix i18n strings
---------
Co-authored-by: github-actions <github-actions@github.com>
* Fix: Show preview label only when Product Collection block is selected
Updated the `ProductCollectionContent` component to display the preview label only when the Product Collection block itself is selected. Previously, the preview label was shown when either the block or any of its inner blocks were selected.
Key Changes:
- Removed the `isSelectedOrInnerBlockSelected` constant and its logic.
- Updated the condition to use `props.isSelected` directly to determine if the block is selected.
* Add changefile(s) from automation for the following project(s): woocommerce-blocks
* Update E2E tests
---------
Co-authored-by: github-actions <github-actions@github.com>
* add: block scaffold
* add: block settings and editor preview
* chore: discard change to pnpm lock file
* add navigation block to the template part
* test: add basic E2E tests
* chore: changelog
* fix: no full width button
* test: remove layout check
* tweak: dynamically fetch button styles
* try: fontsizepicker
* remove: FontSizePicker dute to lack of ability to change label
* fix: use correct icon from the design
* address review feedback
* update class to follow naming convention. use explicit value to better indicate the navigation style
* fix: remove unnecessary style that breaks the global style
* fix: remove unnecessary style
* Add comment for regression E2E tests
* Add changefile(s) from automation for the following project(s): woocommerce-blocks
---------
Co-authored-by: github-actions <github-actions@github.com>
* Update - Disable toggle by default and secondary enhancements
- Disabled toggle by default in Checkout blocks Return to cart button.
- Change Account options to Navigation options.
- Add a subtext to explain when to turn it on or off.
* set default value to false in attributes.tsx also
* Add changefile(s) from automation for the following project(s): woocommerce-blocks
* Changelog
* Remove check for link from test suite—this is now hidden by default
---------
Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Mike Jolley <mike.jolley@me.com>
* Make sure the correct block template file is used in the Site Editor for templates with fallback
* Add tests
* Add changelog file
* Clean up unnecessary function
* Update plugins/woocommerce-blocks/tests/e2e/tests/templates/product-search-results.block_theme.spec.ts
Co-authored-by: Bart Kalisz <bartlomiej.kalisz@gmail.com>
---------
Co-authored-by: Bart Kalisz <bartlomiej.kalisz@gmail.com>
* Fix e2e test for product filters overlay template part
* Add changelog
* Add changefile(s) from automation for the following project(s): woocommerce-blocks
* fix: match actual template part, not template part area
---------
Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Tung Du <dinhtungdu@gmail.com>
* Make the handpicked product filter in Product Collection usable for high product number stores
* Add changelog
* Include selected products in the search
* Limit the search result to 40 as 100 is unreadible anyway
* Replace fill with pressSequentially to better mimic users behaviour
* Apply two strategies for fetching products: small catalog up to 100 products and large catalog with refetching when typing
* Add comment explaining the logic
* Bring back the Loading placeholder
* Pass explicitly perPage 0 for a small catalog to fetch all the products
* Enable block customizations
* Add changefile(s) from automation for the following project(s): woocommerce-blocks
* Enable background and color customization
* Add E2E tests
---------
Co-authored-by: github-actions <github-actions@github.com>
* Replace Products (Beta) with Product Collection block in blockified template
* Add necessary attributes that influences the look of blocks
* Replace Products (Beta) with Product Collection block in product search results
* Replace Products (Beta) with Product Collection block in products by attribute
* Replace Products (Beta) with Product Collection block in products by category
* Replace Products (Beta) with Product Collection block in products by tag
* Replace Products (Beta) with Product Collection when transforming from classic product archive
* Change the no results content in blockified search results template
* Replace Products (Beta) with Product Collection block in product search results
* Add product search in no results content of blockified product search result
* Add ts-ignore before createBlocksFromInnerBlocksTemplate imports
* Add changelog
* Remove step of replacing Products (Beta) with Product Collection in compatibility layer tests
* Remove step of replacing Products (Beta) with Product Collection in Product Collection tests
* Fix lint
* Update E2E tests of Product Collection
* Adjust Products (Beta) E2E tests
* Add Product Collection focus step in E2E tests
* Improve the way PC block is focused
* Further tests adjustments and new tests comparing classic template with Product Collection
* Bring back the click on body
* Include tips from reviewer
* Enter edit mode, step that I accidentally removde
* Bring the E2E test flow with updating product catalog
* Change the way of removing focus from PC block in tests
* Fix lint
* Improve the layout of search in No Results
* Use previous patterns in Product Search No Results to preserve translations
* Add Search button label in product search form pattern
* Fix lint
* Improve comment explanation
* Extract No Results content to separate pattern in order to make the content translatable
* Lint fix
* Add missing footer to the blockified Products by Tag template
* Exclude woocommerce/patterns from phpcs rules that dont apply there
* Make PC block responsive by default in product archive templates
* Fix typo
* Fix typo
---------
Co-authored-by: Manish Menaria <the.manish.menaria@gmail.com>
Co-authored-by: Jon Lane <jon.lane@automattic.com>
Co-authored-by: Bart Kalisz <bartlomiej.kalisz@gmail.com>
Co-authored-by: Adrian Moldovan <3854374+adimoldovan@users.noreply.github.com>
* Add (Experimental) suffix to experimental blocks
* Add comments reminding to update feature flags doc
* Update feature flag doc
* Add changelog
* Provide links to all feature flags
* Add JS flag for Product Filter: Rating (Experimental)
* Bring back linting in PHP file
* Update block references
* Update variation names
* Update tests
* Update test
* Add notification that block is not available in inserter to block references doc
* Add missing feature flag
* Remove information about block not being exposed in inserter from block references
* Update block references
* Add flaky test reporting and issue creation for Blocks
This commit introduces the functionality for identifying and reporting flaky tests within our CI workflow.
- The reporter captures flaky test results and saves them to `flaky-tests` directory.
- If a test fails initially but passes upon retries, it is marked as flaky and a corresponding report is generated.
- The workflow creates GitHub issues for flaky tests, aiding in better visibility and tracking of these intermittent issues.
1. **Workflow Changes**:
- **Archive flaky test reports**: Adds a step to archive flaky test reports generated during the test runs.
- **Merge flaky test reports**: Introduces a new step to merge all flaky test reports from different shards.
- **Create GitHub issues for flaky tests**: Implements a job that uses the `@wordpress/report-flaky-tests` package to create GitHub issues for detected flaky tests when a PR is not in draft state and flaky test reports are present.
2. **New Flaky Test Reporter**:
- Adds `flaky-tests-reporter.ts` that defines a custom Playwright reporter for identifying and recording flaky tests.
3. **Playwright Configuration**:
- Updates `playwright.config.ts` to include the new flaky tests reporter in the list of reporters when running in CI.
4. **Demo Tests**:
- Adds `demo.spec.ts` containing sample tests to validate the flaky test reporting functionality.
Implementing this feature will help us track and address flaky tests more efficiently, ensuring more stable and reliable test suites.
* Remove draft condition for testing
* 'Merge failures artifacts' job shouldn't touch flaky test artifacts
* Try fixing if condition
* Add required permissions
* Let's try providing all the permissions
* Let's try providing all the permissions
* Create flaky tests issues when PR is merged with trunk
* Update if condition
* Run action for specific paths only
* Add changefile(s) from automation for the following project(s): woocommerce-blocks
* Remove Demo file
* Remove Demo file
* Use commit hash to use exact version of the script
* Replace label with team: Kirigami & Origami
---------
Co-authored-by: github-actions <github-actions@github.com>
* Fix the issue
* Add changefile(s) from automation for the following project(s): woocommerce-blocks
* Add E2E test to cover this regression
* Fix: On sale collection should be visible after refresh in Post
---------
Co-authored-by: github-actions <github-actions@github.com>
* Fix issue where Product Collection wasn't showing anything
- Moved queryId logic to a new `useQueryId` custom hook to encapsulate the logic.
- Simplified attribute setting in `useEffect` by using a default attributes value.
- Utilized `fastDeepEqual` to check for attribute equality
These changes fix the issue where the Product Collection block did not display properly in the template editor, ensuring consistent rendering of products.
* Add comment
* Add changefile(s) from automation for the following project(s): woocommerce-blocks
* Remove leftover comment
* Add e2e tests for Product Collection block visibility after refresh
Added end-to-end tests to verify the visibility of the Product Collection block after page refresh in both Product Archive and Post contexts.
- Added tests to ensure the Product Collection block remains visible after refreshing the template or post editor.
- Updated existing tests to use `BLOCK_LABELS` for better readability and maintainability.
* Improve E2E tests
---------
Co-authored-by: github-actions <github-actions@github.com>
* Detect template ID from URL
* Add changefile(s) from automation for the following project(s): woocommerce-blocks
* Add E2E test to check if block is displayed after revisiting Single Product template
* Fix E2E tests
* Fix E2E tests
* Fix lint error
---------
Co-authored-by: github-actions <github-actions@github.com>
* Amend Query Pagination parent OR ancestor array and include product collection
* Rename the function and amend comment
* Add changelog
* Remove some leftovers
* Tets if it's possible to insert multiple Pagination blocks in Product Collection
* Add awaits to expects
* Update plugins/woocommerce-blocks/assets/js/blocks/product-collection/utils.tsx
Co-authored-by: Manish Menaria <the.manish.menaria@gmail.com>
* Add comment explaining the condition
---------
Co-authored-by: Manish Menaria <the.manish.menaria@gmail.com>
* Make shipping total show FREE if price is 0
* Make free text uppercase in order summary
* Add test to check free/paid shipping displays as free or shows price
* Add changelog
* Update E2E test to make sure shipping is selected correctly
* Update shipping cost e2e tests
* Further fixes to e2e tests
* Prevent collection different than Produyct Catalog from being filtered
* Adjust Product Filters tests
* Split taxonomies filter into seperate filter per taxonomy
* Add changelog
* Improve onDeselect function
* Update Product Filter test handlebars so they all use Product Collection that inherits query from template
* Set Product Collection to inherit query from template in PHP unit tests
* Remove unnecessary empty space
* Add changelog
* Update tests
* Fix lint
* Update Product Collection attributes in filter E2E handlebars
* Update the Product Filters testing pages title
* Satisfy TS by returning single React element rather than array of elements
* Revert some incorrect changes
* Cleanup after accidental incorrect merge
* Add template utils to dynamic contents util
* Fix Attribute Filter tests
* Cleanup Attribute tests, refactor and fix types
* Add product filter on top of attirbute filter in handlebars
* Fix lint
* Update Rating filter tests to use Product Archive template instead of post
* Update Rating Filter handlebars
* Update Stock filter tests to use Product Archive template instead of post
* Update Stock Filter handlebars
* Add more granular util to update Produyct Catalog based on handlebar template
* Use Product Catalog util and simplify test scenarios
* Unify handlebar templates
* Fix Product Collection attributes in Product Filter handlebar templates
* Revert temporary timeouts increase
* Remove unused types
* Cleanup types
* Cleanup types
* Lint fix
* Rename updateTemplatesContent to updateTemplateContents to better depict its purpose
* Fix types
* Rename updateProductCatalogContent to updateProductCatalogTemplate to better depict its purpose
* Allow for beforeAll and afterAll in PW tests
* Use beforeAll and afterAll instead of using fixture in active filters test
* Use beforeAll and afterAll instead of using fixture in attribute filters test
* Use beforeAll and afterAll instead of using fixture in price filters test
* Use beforeAll and afterAll instead of using fixture in rating filters test
* Use beforeAll and afterAll instead of using fixture in stock status filters test
* Get rid of updateProductCatalogTemplate util as it's too specific
* Extract some constants
* Remove unused file probably added here by accident
* Adjust Attribute Filter block tests to the new logic
* Merge fix
* Bring back necessary handlebars file
* Merge fix
* Merge fix
* Update beforeAll
* Avoid relying on product collection page object in before all
* Bring back the original order of tests
* Switch Filter by Attribute tests to handlebars
* Fix typo
* Update test to new circumstances
* Fix hooks usage
We no longer use hooks other than `beforeEach` since we're resetting the DB for each test (#46125). Using other hooks was not caught by the linter (on this PR) because I accidentally removed the no-hooks rule in #47228 and restored it just now in #47500. 😅
* Fix the test
* Fix Price filter test
* Update attribute filter tests
* Share the handlebars between tests
* Update price filter tests
* Update rating filter tests
* Update stock filter tests
* Remove unnecessary product collection page object from filter tests
* Fix typo
* Fix Filter by Stock test
* Simplify Attribute filter test by remoiving one filter from page
* Try to wait for element to be visible
* Fix handlebars syntax for filters so it doesnt throw validation errors and warnings
* Wait for filters to be visible for sure before performing further part of test
* Wait for Site Editor canvas loader
* Fix linter error
---------
Co-authored-by: Bart Kalisz <bartlomiej.kalisz@gmail.com>
* POC: Preview Mode using HOC
* Add explanation as comments
POC: Implement preview mode for Product Collection block in editor
- Added extensive commentary to clarify the mechanism and usage of the `handlePreviewState` function
- Implemented an internal state within `ProductCollectionContent` to manage preview status and messages, serving as a foundational example of how preview mode can enrich block functionality.
- Showcased the application of `handlePreviewState` by incorporating it as a prop in `BlockEdit`, illustrating the potential for extending the block's capabilities for dynamic and interactive previews.
This POC demonstrates a flexible approach to managing preview states within the editor, paving the way for further development and integration based on feedback and use-case analysis.
* Refactor preview state handling and collection registration
This commit introduces a centralized approach for registering product collection variations and managing their preview states. It abstracts the registration logic into a dedicated function and enhances the flexibility of preview state handling across different collection types.
* Rename file
* Minor improvements
* Don't pass previewState to handlePreviewState
I don't see any good use of it in handlePreviewState. Also, We will be going to call handlePreviewState only once
therefore, it will always have the same value as the initial value of the previewState. If in future, we decide to run it
multiple times then we can pass the previewState as an argument to handlePreviewState.
* Add comment
* Use JS closure to inject handlePreviewState
This commit introduces a refined approach for injecting the `handlePreviewState` function into product collection blocks, utilizing JavaScript closures to streamline the process. This method replaces the previous global registry mechanism, offering a more direct and efficient way to manage preview states.
Advantages of This Approach:
- Utilizing JavaScript closures for injecting `handlePreviewState` simplifies the overall architecture by directly modifying block edit components without relying on an external registry. This method enhances code clarity and reduces the cognitive load for developers.
- The conditional application of `withHandlePreviewState` ensures that the preview state handling logic is only added to blocks that require it, optimizing performance and maintainability.
* Refactor preview state management into custom hook
This commit enhances the organization and readability of the product collection content component by abstracting the preview state management into a custom hook named `usePreviewState`. This change streamlines the component's structure and aligns with React best practices for managing state and side effects.
Key Changes:
- Introduced `usePreviewState`, a custom hook responsible for initializing and managing the preview state (`isPreview` and `previewMessage`) of the product collection block. This hook encapsulates the state logic and its side effects, including the conditional invocation of `handlePreviewState`.
- Modified `ProductCollectionContent` to utilize `usePreviewState` for handling its preview state. This adjustment makes the component cleaner and focuses it more on presentation and behavior rather than state management details.
* Replace useEffect with useLayoutEffect
* Add cleanup function in handlePreviewState function
Based on [this discussion](https://github.com/woocommerce/woocommerce/pull/45703#discussion_r1535323883), I added a cleanup function support for handlePreviewState. `handlePreviewState` can return a function which will be called on cleanup in `useLayoutEffect` hook.
* Fetching random products in Preview mode
* Allow collection to set initial preview state
* Pass location & all attributes to handlePreviewState function
* Handling collection specific query for preview mode
- Consolidated `handlePreviewState` and `initialPreviewState` into a single `preview` prop in `register-product-collection.tsx` and `product-collection-content.tsx` to streamline prop passing and improve the component interface.
- Updated the `queryContextIncludes` in `constants.ts` to include 'previewState'
- Enhanced the `ProductCollection` PHP class to handle preview-specific queries more effectively, introducing a new method `get_preview_query_args` that adjusts query parameters based on the collection being previewed, thereby improving the relevance and accuracy of products displayed in preview mode.
* Always set initialPreviewState on load
* Refine preview state handling
- Renamed `HandlePreviewStateArgs` to `SetPreviewStateArgs` in `featured.tsx` to better reflect its purpose, which is now more focused on setting rather than handling states. The implementation details within `featured.tsx` have also been refined to include async operations and cleanup functions, demonstrating a more sophisticated approach to managing state.
Overall, these updates make the preview state logic more understandable and maintainable.
* Rename "initialState" to "initialPreviewState"
* Fix: Correct merging of newPreviewState into previewState attribute
This commit addresses an issue in the product-collection-content.tsx where the newPreviewState was not properly merged into the existing previewState attribute. Previously, the spread operator was incorrectly applied, leading to potential loss of existing state attributes. By changing the order of operations and correctly spreading the existing attributes before merging the newPreviewState, we ensure that all state attributes are preserved and updated correctly.
* Initial refactor POC code to productionize it
* Move `useSetPreviewState` to Utils
* Implement preview mode for Generic archive templates
Implemented a new useLayoutEffect in `utils.tsx` to dynamically set a preview message in the editor for product collection blocks located in generic archive templates (like Products by Category, Products by Tag, or Products by Attribute).
* Remove preview mode from Featured and On sale collection
* Remove preview query modfication for On Sale collection
* Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce
* Fix: hide/show preview label based on value of "inherit"
If user change the toggle "Sync with current query", then it should reflect for the preview label as well.
- If the toggle is on, then the preview label should be shown.
- If the toggle is off, then the preview label should be hidden.
* Minor improvements
* Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce
* Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce
* Refactor: Simplify SetPreviewState type definition in types.ts
This commit refines the SetPreviewState type definition by eliminating the previously used intermediate interface, SetPreviewStateArgs. The change streamlines the type definition directly within the SetPreviewState type, enhancing readability and reducing redundancy.
* Update import syntax for ElementType in register-product-collection.tsx
This commit updates the import statement for `ElementType` from `@wordpress/element` to use the more modern and concise `import type` syntax. This change does not affect functionality but aligns with TypeScript best practices for importing types, ensuring that type imports are distinguished from regular imports. This helps in clarity and in optimizing the build process by explicitly indicating that `ElementType` is used solely for type checking and not included in the JavaScript runtime.
* Refactor: Update TypeScript usage in Product Collection
This commit introduces several TypeScript refinements across product-collection components:
1. **DEFAULT_ATTRIBUTES** in `constants.ts` now uses `Pick` to explicitly define its shape, ensuring only relevant attributes are included and typed accurately.
2. **ProductCollectionAdvancedInspectorControls** and **ToolbarControls** in the `edit` subdirectory now use `Omit` to exclude the 'preview' property from props, clarifying the intended prop usage and improving type safety.
These changes collectively tighten the type definitions and improve the codebase's adherence to best practices in TypeScript.
* Refactor: Update dependencies of useSetPreviewState hook in utils.tsx
This change enhances the stability and predictability of the hook's behavior, ensuring it updates its internal state accurately when its dependencies change, thus aligning with best practices in React development.
* Refactor preview button CSS and conditional rendering
1. **CSS Refactoring:** Moved the positioning styles of the `.wc-block-product-collection__preview-button` from inline styles in the JSX to the `editor.scss` file. This separation of concerns improves maintainability and readability, aligning the styling responsibilities solely within the CSS file.
2. **Conditional Rendering Logic:** Updated the rendering condition for the preview button. Now, it not only checks if `isPreview` is true but also if the block is currently selected (`props.isSelected`). This prevents the preview button from appearing when the block is not actively selected, reducing visual clutter and enhancing the user experience in the editor.
* Enhance: Update preview button visibility logic in ProductCollectionContent
This commit enhances the visibility logic of the preview button in the `ProductCollectionContent` component:
1. **Added `isSelectedOrInnerBlockSelected`:** Introduced a new `useSelect` hook to determine if the current block or any of its inner blocks are selected. This ensures that the preview button is visible when either the product collection block or any of its inner blocks are selected.
2. **Updated Conditional Rendering:** Adjusted the conditional rendering of the preview button to use the new `isSelectedOrInnerBlockSelected` value, providing a more intuitive user experience by ensuring the preview button remains visible when any relevant block is selected.
* use __private prefix with attribute name
* Add E2E tests for Preview Mode
1. **Template-Specific Tests:** Each template (tag, category, attribute) undergoes a test to ensure the preview button behaves as expected when replacing products with product collections in these contexts.
2. **Visibility Checks:** The tests verify that the preview button is visible when the block or its inner blocks are selected and hidden when the block is not selected. This helps confirm the correct implementation of the preview button visibility logic across different use cases.
3. **Interaction with Inner Blocks:** Additional checks are included to ensure the preview button's visibility toggles appropriately when interacting with inner blocks, reinforcing the dynamic nature of block selection and its effect on UI elements within the editor.
* Add setPreviewState to dependencies
* Add data-test-id to Preview button and update e2e locator
Modifications:
- Added `data-test-id="product-collection-preview-button"` to the Preview button in `product-collection-content.tsx`.
- Updated the corresponding e2e test locator in `product-collection.block_theme.side_effects.spec.ts` to use the new `data-test-id` instead of the class name.
By using `data-test-id`, we ensure that the e2e tests are not affected by changes in the styling or restructuring of the DOM that might alter CSS classes but do not affect functionality.
* Enhance: Localize preview message in useSetPreviewState hook
* Don't show shadow & outline on focus
* Make preview button font same as Admin
* Fix SCSS lint errors
* Add missing await keyword
---------
Co-authored-by: github-actions <github-actions@github.com>
* Product Filters: add individual clear button
* Remove unused style.scss
* Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce
* Simplify searching for the tag
* Convert to use button instead of anchor
* Try using iAPI to show/hide clear button
* Use local context instead of global state
* Fix linting error
* Remove unneeded context
* Update clear button block description
* Fix frontend PHP error
* Add e2e tests for attributes filter clear button
* Add e2e tests for price filter clear button
* Add e2e tests for rating filter clear button
* Add e2e tests for stock status filter clear button
* Address feedback and use built in locators
* Address feedback and replace the use of timeouts
---------
Co-authored-by: github-actions <github-actions@github.com>
* Adds filter `woocommerce_order_received_verify_known_shoppers` to allow known shoppers to access the order received page without being logged in in Order Confirmation template
* Added changelog
* Added filter docblock
* Refactored to apply the filter correctly for non-guests only.
* Restored comment.
* Added test
* Added test
* lint
* Change plugin package name
* Update plugin name (apparently slugs are formed from that)
* Added right prefix
* JS linting
* Refactored testing into a test.step()
* typo
* Fixed tests.
* Reverted change done by mistake.
* remove getByRole specificity
* Increase selector specificity specificity
* Change test prefix
* reduce test flakyness
* reduce test flakyness
* reduce test flakyness
Manish Menaria
Karol Manijak
Thomas Roberts
Albert Juhé Lluveras
Alexandre Lara
Tung Du
Bhupesh Mishra
Paul Sealock
Roy Ho
Niels Lange
Jonathan Lane
Adrian Moldovan
Sam Seay
Bart Kalisz
Paulo Arromba