* 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
* Make proceed to order button non sticky when zoom level is bigger than 100%
* Define sticky container based on media query
* Revert previous inline comment
* Update display logic
* Adjust threshold to stabilise visibility toggling
* Improve readability
* Fix Preview badge border-radius and alignment
The Preview badge's bottom left and right corners now have border-radius set to 0px to ensure they smoothly morph into the block's stroke. The badge is visually aligned with the furthest edge of the block's right border.
* Add changefile(s) from automation for the following project(s): woocommerce-blocks
* Fix Lint errors
---------
Co-authored-by: github-actions <github-actions@github.com>
* 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>
* Prevent duplicate update
* Style aria disabled radio input
* Disable keyboard navigation when options are being sent to server.
* Abort multiple requests to update shipping rates
* Add changefile(s) from automation for the following project(s): woocommerce-blocks
* Update changelog
---------
Co-authored-by: github-actions <github-actions@github.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>
* Revert "Add To Cart Form: Improve the default style and add the `Stepper` style (#47664)"
This reverts commit 0712c6037b.
* Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce
---------
Co-authored-by: github-actions <github-actions@github.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>
* Hide Products (Beta) from inserter
* Add changelog
* Update E2E test replacing Products with Product Collection block
* Add step to choose collection in E2E test
* Change fill PW method to pressSequentially so the inserter shows blocks
* Update changelog entry
* 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
* Hide rating stars and counter from the inserter
* Add changefile(s) from automation for the following project(s): woocommerce-blocks
---------
Co-authored-by: github-actions <github-actions@github.com>
* Fix minicart icon cursor on hover in site navbar
* Add changefile(s) from automation for the following project(s): woocommerce-blocks
---------
Co-authored-by: github-actions <github-actions@github.com>
* 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>
* Hide individual filter blocks from the inserter
* Add changefile(s) from automation for the following project(s): woocommerce-blocks
* Adjust E2E tests to check for hidden filters
* Fix file conflict
---------
Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: roykho <roykho77@gmail.com>
Previously, we registered block categories on the client-side, leading to them not
being available until client initialization. This meant, for example, that hooking
external blocks to our categories would result in a warning.
With this change, we register the categories server-side, and only update them
on the client-side to attach the SVG icon. This is the recommended approach
in the Gutenberg docs, to make sure we use the SVG primitive, which affords some
accessibility features.
* Adjust border and box-shadow color for textual inputs
* WIP: Style checkboxes
* Vertically center checkmark
* Adjust focus outline width
* Adjust selected checkbox background in light mode
* Adjust background color of selected radio button
* Add chevron icon to dropdown fields
* Add changelog
* Fix CSS lint issues
* Adjust outline width
* Revert checkbox styles
* Adjust input field height and label size
* Revert box-shadow styles
* Add spacing between coupon title and coupon code
* Simplify onFocus and onBlur
* Fix outline width when focusing combobox
* Ensure chevron points down after selecting value
* Adjust outline color of focused delivery option
* POC: Use currentColor for focus states
* Use correct AND expression
* Add changefile(s) from automation for the following project(s): woocommerce-blocks
---------
Co-authored-by: github-actions <github-actions@github.com>
* Add To Cart Form: Improve the default style and add the Stepper style
* fix height button when no variation is selected
* not allow the user to set 0 as value of the input
* format css
* fix padding
* format css
* fix CSS
* unset margin to align with the button
* Increase the length of Product Summary block (core/post-excerpt variation)
* Add changelog
* Bring back the Product Summary variation to original length
* Increase the Product Summary length to max 100 words in Single Product template and block
* Increase the Product Summary length to max 100 words in Single Product block
* Update tests
* Change the attribute type froms tring to niumber as expected
* Replace classnames with clsx within woocommerce-blocks.
* Undo unnecessary change to getClassnames const.
* Replace classnames with clsx within woocommerce-admin.
* Add changelog.
* Update the pnpm lock file
* Address lint.
* Address lint errors for the block-library.
* 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>
* Partially revert #45767
* Add changefile(s) from automation for the following project(s): woocommerce-blocks
* Add test for description on checkout order summary block
* Add another test back in for order summary description
---------
Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Alex Florisca <alex.florisca@automattic.com>
* Remove checkstyle.xml file
* Add changefile(s) from automation for the following project(s): woocommerce-blocks
---------
Co-authored-by: github-actions <github-actions@github.com>
* Extend product elements sharedConfig ancestor with Product Collection and Products (Beta)
* Utilise sharedConfig ancestor in Image block
* Utilise sharedConfig ancestor in Price block
* Utilise sharedConfig ancestor in Rating block
* Utilise sharedConfig ancestor in Sale Badge block
* Utilise sharedConfig ancestor in SKU block
* Utilise sharedConfig ancestor in Stock Indicator block
* Add changelog
* Bring back original ancestors for Summary and Title blocks
* Remove Product Price from a test as it's no longer available in global context
* 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>
* only sticky summary when it's not longer than view
* Add changefile(s) from automation for the following project(s): woocommerce-blocks
* fix tests
* correctly check for height
* switch how to get top
* remove from editor
---------
Co-authored-by: github-actions <github-actions@github.com>
* normalize IDs for form fields and fix types
* update docs as well
* update rest of docs
* Add changefile(s) from automation for the following project(s): woocommerce-blocks
* fix linting for document
* also align classnames
* revert to correct classname
---------
Co-authored-by: github-actions <github-actions@github.com>
* Add workflow_call event
* Add tests-daily-run.yml
* Remove workflow version
* Update input value
* Remove secrets from caller workflow
* Rename job
* Check context
* Check context
* Check workflow_call inputs
* Override github.event_name with inputs.trigger
* Fix input name
* Add config for daily e2e tests with Gutenberg
* Update env commands for Gutenberg run
* Add disableHpos env variable in ci-utils
* Revert the trigger to push
* Revert the env variable setting in ci-jobs
* Revert the env variable setting in ci-jobs
* Rebuild utils
* Update test env start command
* Define the Gutenberg Playwright project
* Use path relative to workspace root
* Update events for test projects
* Update events for test projects
* Add changelogs
* Remove the e2e tests with Gutenberg tests from daily runs
* Set the schedule and workflow_dispatch triggers
* Add --project default flag to only run the default tests in CI
* Renamed snapshots to match the new Playwright project name
* allow focusedOnMount element to be reset
* Add changefile(s) from automation for the following project(s): woocommerce-blocks
---------
Co-authored-by: github-actions <github-actions@github.com>
* Rename blocks to to distinguish them from new blocks
* Add changelog
* Change the naming convention to XYZ (Classic)
* Update classic templates descriptions
* Fix package.json lint error
* Use the term attribute sort order for the "Filter by attribute" block
* Allow `id` and `name_num` orderby values
* Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce
---------
Co-authored-by: github-actions <github-actions@github.com>
* Add type safety, update coming soon entire site changes for fonts
* Add conditional font to support TT24 and other themes
* Revert unnecessary change
* Changelog
* Lint
* Fix: Ensure Product Collection Block Respects "Hide Out of Stock Items" Setting
- Added logic to include the "Out of stock visibility" setting in the Product Collection block.
- Modified `ProductTemplateEdit` component to use the `getDefaultStockStatuses` function.
- Ensured that out-of-stock products are hidden in the Product Collection block when the "Hide out of stock items from the catalog" option is enabled.
* Add changefile(s) from automation for the following project(s): woocommerce-blocks
---------
Co-authored-by: github-actions <github-actions@github.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
* Make sidebar sticky on desktop
* Add changefile(s) from automation for the following project(s): woocommerce-blocks
* limit sidebar sticky to cart only
* add useless new line
---------
Co-authored-by: github-actions <github-actions@github.com>
* 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>
* return focus on drawer
* adjust notice button color
* adjust cart/checkout input label color
* return focus for shipping form button
* Add changefile(s) from automation for the following project(s): woocommerce-blocks
---------
Co-authored-by: github-actions <github-actions@github.com>
* remove the generic incompatible notice
* Add changefile(s) from automation for the following project(s): woocommerce-blocks
---------
Co-authored-by: github-actions <github-actions@github.com>
* Turn Change address link to button
* Add changefile(s) from automation for the following project(s): woocommerce-blocks
* fix lint
---------
Co-authored-by: github-actions <github-actions@github.com>
* Fix input clearing issue in PriceTextField with improved currency parsing
This commit addresses a usability issue in the PriceTextField component, highlighted by @dinhtungdu, where the input field would clear itself if users omitted a space between the numeric value and the currency symbol when the currency is configured to appear on the right with a space (e.g., "20$" instead of "20 $"). The problem was rooted in the strict parsing logic that did not account for variations in user input related to currency formatting.
The fix involves an enhancement to the numeric parsing function, which now effectively handles various user inputs regardless of space or placement of the currency symbol. The revised parsing logic uses a regular expression to strip out any characters that are not numeric or the designated decimal separator, and then replaces the locale-specific decimal separator with a period for standard numeric conversion. This approach not only fixes the specific issue but also improves the robustness of the component against similar input variations.
* Refactor currency parsing and improve handling in PriceTextField
1. Renaming `formatValueAsCurrency` to `formatNumberAsCurrency` to better
reflect its functionality.
2. Moving the `convertCurrencyStringToNumber` function outside of the
PriceTextField component, enhancing readability and reusability.
3. Changing the internal state handling from `newValue` to `inputValue`,
directly managing the string input and parsing it as needed for further
processing. This will force input field to re-render.
* Add changefile(s) from automation for the following project(s): woocommerce-blocks
* Fix: Handle empty string in price conversion to prevent 0 value
This commit fixes an issue where an empty string in the price conversion function resulted in a value of 0. Now, empty strings are properly handled and do not convert to a numerical value.
---------
Co-authored-by: github-actions <github-actions@github.com>
* fix: handle undefined templateSlug in Product Collection tracking utils
The modification introduces a check for templateSlug before attempting to access its properties or use it in further logic. This change addresses a bug that manifested when users tried to edit a synchronized Product Collection block, resulting in a JavaScript error because templateSlug could be undefined.
* Add changefile(s) from automation for the following project(s): woocommerce-blocks
* Update types to better reflect reality
---------
Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Karol Manijak <20098064+kmanijak@users.noreply.github.com>
* Update styles for WooCommerce coming soon page
- Add min-width to container for better responsiveness
- Adjust padding for smaller screens
- Update font size and text wrapping for banner
* Add changelog
* Improve readability
* Blocks: Fix JS unit tests
* Add changefile(s) from automation for the following project(s): woocommerce-blocks
* trigger CI
---------
Co-authored-by: github-actions <github-actions@github.com>
* try db reset in page teardown
* move reset to setup step
* Use wp db cli
* Fix global setup
That part is overriding the logged in user state and wipes out the nonce and rootUrl fields.
* Try importing instead from a generated dump
* Revert "Try importing instead from a generated dump"
This reverts commit 987dc471c9.
* Revert "Revert "Try importing instead from a generated dump""
This reverts commit c8d008cb20.
* Don't bypass visitSiteEditor so that the Welcome Guide is closed
* use createNewPost
* Revert "Revert "Revert "Try importing instead from a generated dump"""
This reverts commit 2684273582.
* [Blocks]: Fix E2E tests (#46344)
* Load local pickup enabled setting as bool not string
* Add changelog
* Remove unused import
* Update plugins/woocommerce-blocks/assets/js/extensions/shipping-methods/pickup-location/utils.ts
Co-authored-by: Niels Lange <info@nielslange.de>
* Use strict equality test
* try now
* try now
* add a new sql file
* remove default.sql
* fix welcome guide tour
* fix E2E tests
* Fix the template revert tests
...where the template is unreachable due to pagination.
* Add changelog entry
* improve logic to closeWelcomeGuideModal
* fix cart checkout tests
* improve flakiness
* improve flakiness
* fix flaky test
* fix company field
* fix E2E test
* fix E2E tests
---------
Co-authored-by: Thomas Roberts <thomas.roberts@automattic.com>
Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com>
Co-authored-by: Niels Lange <info@nielslange.de>
Co-authored-by: Bart Kalisz <bartlomiej.kalisz@gmail.com>
* Replace beforeAll w/ beforeEach + remove all after* hooks
* Fix broken hooks
* Activate plugins via requestUtils API
* [Blocks - E2E]: Add `playwright/no-hooks` ESlint rule (#46432)
add ESLint configuration
* Clean up console logs
* Remove obsolete language setup steps
* Remove more unnecessary setup steps
* Remove even more obsolete setup steps
* tmp: add the LYS fix
* Try stabilizing the company field test
* Use canvas param instead of manually entering edit mode
* Remove double site editor redirect
* Revert "Use canvas param instead of manually entering edit mode"
This reverts commit 5e6cc17154.
* Revert "Remove double site editor redirect"
This reverts commit 69a57a82a8.
* Fix flaky products sorting test
* Blocks: Fix ESLint errors (#46595)
fix eslint error
* Fix ESLint errors (#46626)
* Fix ESLint errors
* Add changefile(s) from automation for the following project(s): woocommerce-blocks
---------
Co-authored-by: github-actions <github-actions@github.com>
* Blocks: Migrate multiple tests to Playwright
* fix path
* migrate other tests
* add product best sellers E2E tests
* Add changefile(s) from automation for the following project(s): woocommerce-blocks
* migrate jest-puppetter E2E tests to Playwright
* Add changefile(s) from automation for the following project(s): woocommerce-blocks
* Add changefile(s) from automation for the following project(s): woocommerce-blocks
* Add changefile(s) from automation for the following project(s): woocommerce-blocks
* Blocks: Delete Jest-Puppeteer infrastructure
* Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce
* Remove obsolete waitForLoadState call
* improve E2E tests
* fix E2E tests
* improve E2E tests
* remove old test
* remove not necessary test
* fix number product
* fix E2E test
* fix number of products
* fix product count
* refactor store notice E2E tests
* update string
* fix E2E test
---------
Co-authored-by: Bart Kalisz <bartlomiej.kalisz@gmail.com>
Co-authored-by: Thomas Roberts <thomas.roberts@automattic.com>
Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com>
Co-authored-by: Niels Lange <info@nielslange.de>
Co-authored-by: github-actions <github-actions@github.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>
Thomas Roberts
Manish Menaria
Tung Du
Niels Lange
Ilyas Foo
Albert Juhé Lluveras
Bhupesh Mishra
Mike Jolley
Paul Sealock
Alexandre Lara
Roy Ho
Luigi Teschio
Karol Manijak
netzkollektiv
Adrian Moldovan
Jonathan Lane
Tom Cafferkey
Calvin Rodrigues
Sam Seay
Lucio Giannotta
Bart Kalisz
Patricia Hillebrandt
Seghir Nadir
Alba Rincón
Ron Rennick
Chi-Hsuan Huang