Commit Graph

1710 Commits

Author SHA1 Message Date
Alexandre Lara 6185185589
[Experimental] Product Filters Redesign > Overlay Navigation: Add Block to the Product Filters Block (#50186)
* Add variation to Product Filters Overlay Navigation

* Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce

* Move Product Filters Overlay Navigation to correct position

* Hide block when it is outside the Product Filters template part

* Display Navigation block in the frontend

* Show the Product Filters Overlay Navigation on the frontend

* Add logic to hide Product Filters Overlay Navigation block on the frontend

* Hide block on the Overlay template part

* Fix eslint errors

* Update the block variation title

* Remove the `isActive` property from the block variations

* Use Product Filters block context

* Replace enum with const

* Remove unnecessary `StyleAttributesUtils`

* Rename context key

* Move BlockOverlayAttribute to the constants.ts file

* fix BlockOverlayAttribute import

* Fix import error

* Improve code for the shouldHideBlock method

* Remove unnecessary attributes property

* Fix error in ProductFiltersOverlay block

* Prevent block from being hidden on Product Filters template part

* Fix inspector controls when block is hidden

* Remove unnecessary import

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-08-15 14:50:45 -03:00
Alex Florisca 006fbc6714
Add new buttonAttributes API to style express checkout buttons coherently (#47899)
* Expose buttonAttributes to the express payment methods

* Add size and label attributes to the express checkout area

* Remove defaultHeight

* default button Label

* Remove the button label attribute

* Remove px from height

* Change large button height to 55px

* Load express checkout block with attributes

* Add toggle and borderRadius controls and remove getting border radius from the theme

* Remove extra border radius text

* Only pass buttonAttributes if toggled on

* Move express payment block attribute logic into a Provider

* Tidy up editor grid and parse attributes into context on frontend

* Add px to border-radius input

* Express payment methods not selectable

* Add a test

* lint fixes

* default button height is 48 not 4

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

* Update docs

* Add tests for express payment methods

* Center images within the express payment area in the editor

* Apply the buttonAttributes to the li container in the editor regardless of showButtonStyles

* Fix style issue

* fix linting

* fix lint again

* Update manifest

* Update docs manifest

* Resize images in editor

* lint fix

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-08-14 11:02:58 +01:00
Alba Rincón d04666e35c
Fix `Single product` translations on edit mode (#50599)
* Format json

* Get title and description from the registered block

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

* Add empty array dep

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-08-14 10:43:15 +02:00
Karol Manijak 8bdc78c777
Product Collection: Trigger `wc-blocks_product_list_rendered` JS event (#50166)
* Dispatch JS event about PC being rendered

* Revert format changes

* Write the callback

* Add functions descriptions

* Add changelog

* Remove empty line

* Add tests

* Rename test cases

* Replace waiting for page load with more reliable expect.poll

* Remove leftover step

Co-authored-by: Bart Kalisz <bartlomiej.kalisz@gmail.com>

* Fix typo in function name

* Add collection name to default Product Collection block

* Expect collection name in the event

* Expose the collection name through IAPI context

* Send the collection name with the event

* Trigger event also on page change

* Remove unused CUSTOM collection type

* Provide documentation

* Update TOC

* Update tests that verify the event payload

* Improve E2E tests further

* Don't add a Product Catalog collection type to default collection

* Avoid repeating the same piece of code by extracting some function on tag processor

* Rename function to better depict its purpose

* Move the documentation to the right place

* Remove the unused variable

* Add example to dom-events doc

* Update documentation

* Update docs manifest

* Attach default collection name

* Add the default collection context in PHP so it covers all the cases

* Prevent exposing product catalog collection name in event

* Update docs

* Update test

---------

Co-authored-by: Bart Kalisz <bartlomiej.kalisz@gmail.com>
2024-08-13 12:29:04 +02:00
Bart Kalisz 418c8f029f
Product Collection: Remove automatic migration code (#50440)
Co-authored-by: Karol Manijak <20098064+kmanijak@users.noreply.github.com>
2024-08-13 11:29:07 +02:00
Maikel Perez 640a6ca439
CheckboxList and CheckboxControl: Label htmlFor and Input id should be unique (#50566)
* Extract the checkbox list option logic into its own component
This allows to generate a dynamic id per option so it never repeats in the entire document.

* Add changelog file

* Move CheckboxListOptionControl to its own file

* Add value to the checkbox control to be aligned with the native input type=checkbox element. And also use it to get the correct checkbox by value in unit tests

* Because checkboxes not longer have fixed ids, now we use their value to lookup for them instead

* Updating snapshots since the checkboxes ids are now autogenerated
2024-08-12 12:33:17 -04:00
Brian Taylor 062b161525
Update docs links blocks documentation (#50239)
* Update "Learn More" docs link for incompatible extensions

* Update links to blocks documentation

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

* Remove Unnecessary changelog message

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

* Delete unneeded changelog file

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-08-09 16:27:04 +01:00
Tung Du 70e54f90ca
[Experimental]Attribute Filter: Dynamic title and description. (#50234) 2024-08-09 19:57:40 +07:00
Tung Du aaf3046eb6
[Experimental] Product Filters Redesign: Attribute Filters: List style (#50340)
* update: new simplified markup and style

* add: editor preview

* add: show 15 items initially

* fix: render li class for checked items

* chore: naming

* chore: changelog

* update: set some preview items checked for styling purpose

* fix: only show show more button when the list is long

* chore: lint

* fix: e2e tests
2024-08-09 16:17:14 +07:00
Tung Du 528be023ae
Refactor: migrate the All Products block to functional component (#50203)
* refactor: migrate the All Products block to functional component

* chore: changelog

* chore: lint
2024-08-09 14:42:45 +07:00
Alba Rincón 0235907b14
Customer Account - Maintain the size of the icon in smaller screens (#50410)
* Customer Account - Maintain the size of the icon in smaller screens

* Hide overflow text

* Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-08-07 17:45:16 +02:00
Gabriel Manussakis a00c61481d
[Accessibility] Remove opacity from the hover style of the mini cart button (#50240)
* Remove opacity from the hover style of the mini cart button

* Add changelog file
2024-08-05 15:58:48 +02:00
Manish Menaria a73c6e5546
Product Collection: Enable Context-Aware Previews by Adding `usesReference` to `registerProductCollection` (#49796)
* Allow registering custom collections with various context references

Implemented the registration of product collections with different context references using the `usesReference` property. These custom collections are now registered with specific contexts such as product, cart, order, and archive.

This enhancement allows for more tailored previews and functionality based on the specific context in which the product collection is used.

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

* Support multiple references for usesReference

* docs: update documentation to include `usesReference`

Enhanced the `register-product-collection` documentation to include details about the new `usesReference` property. This property allows collections to specify required references, enhancing their contextual relevance and preview capabilities.

- Added `usesReference` description to the collection fields section.
- Included examples demonstrating the usage of `usesReference` with single and multiple references.
- Clarified the behavior when required references are unavailable on the editor side but available on the frontend.

This documentation update provides third-party developers with the necessary information to utilize the `usesReference` property effectively in their custom product collections.

* test: add e2e tests for `usesReference`

Added end-to-end tests to verify the functionality of the `usesReference` property in product collections. These tests ensure that the appropriate preview labels are displayed.

- Created multiple custom product collections with different `usesReference` values: `product`, `cart`, `order`, `archive`, and combinations of these.
- Verified that collections show the correct preview label when the required reference is present.
- Ensured that the preview label is not shown in irrelevant contexts, such as posts or product catalog templates.

This addition enhances test coverage and ensures the robustness of the `usesReference` feature.

* Fixed issue with preview label showing in Specific Product and Archive templates.

* Handle cases when termId or productId is 0

This also improves the readability of the code by using better variable names.

* Make PC use postId context so location can be recognised correctly (#50152)

* Fix TS errors

---------

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Karol Manijak <20098064+kmanijak@users.noreply.github.com>
2024-08-01 15:33:27 +05:30
Niels Lange 3dd6a4037b
Display address card for virtual products if shopper's address is known (#50127)
* Display address card for virtual products

* Remove obsolete dependency

* Optimise dependencies

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

* Adjust core e2e tests

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-07-31 15:17:21 +02:00
Tung Du 5ffad9a659
[Experimental]: Update: new title and icon for the Overlay Navigation block (#50011)
* update: rename Navigation block to Overlay Navigation with new icon

* chore: changelog

* chore: use comment instead of update

* reset lock file

* test: update block title

* test: update overlay navigation test
2024-07-31 12:56:53 +07:00
Alex Florisca 13a79c821a
Express checkout buttons have a min-width of 240px (#49304)
* express checkout buttons have a min-width of 240px

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

* Fix linting issue

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-07-30 15:42:51 +01:00
Karol Manijak edc268afa5
Product Collection: sync with current query doesnt display the correct products in the specific category templates (#49889)
* Recognize custom category templates as archive ones

* Disable the preview label if termId is recognized

* Fetch the product category template ID

* Prepare util to properly parse product taxonomies

* Utilise the taxonomies util and update the query accordingly

* Add tests

* Update tests to be more specific

* Improve selectors in E2E test

* Add changelog

* Update selectors

* Fix the order of expected products

* Remove unneceessery entries from array that are covered by another entries

* Rename the variable to beytter depict its purpose
2024-07-29 14:21:44 +02:00
Niels Lange 752273e6ce
[React 18] Use `createRoot().render()` instead of `render()` (#48843)
* Use createRoot().render() instead of render()

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

* Replace `unmountComponentAtNode()` with `createRoot().unmount()`

* Adjust JS unit tests

* Remove obsolete import

* Remove “ReactDOM.render is no longer supported” check

* Update pnpm-lock.yaml

* Migrate JS unit test to React 18

* Revert "Update pnpm-lock.yaml"

This reverts commit 18bfc967aa.

* Migrate JS unit test to React 18

* Migrate JS unit test to React 18

* Minor refactor

* Unskip previously skipped tests

* Fix JS unit test error related to root.unmount()

* Remove obsolete dependency

* Fix failing blocks e2e test

* Fix failing core e2e tests

* Optimise memoisation to prevent “Maximum update depth exceeded” error.

* Fix Filters JS tests in #48796 (#49973)

* Run cleanup in Rating Filter JS tests

* Run cleanup and wait user interactions in Stock Status Filter JS tests

* Rename constant

* Simplify conditional statement

* Introduce TS type

* Address lint error

* Rename TS type

* Optimise multiple TS types

---------

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Sam Seay <samueljseay@gmail.com>
Co-authored-by: Karol Manijak <20098064+kmanijak@users.noreply.github.com>
2024-07-26 09:18:48 +02:00
Tung Du 234f5d7e49
[Experimental] Attribute Filter: Update Inspector Control Settings (#49751)
* add: new inspector controls

* update: cleanup the edit component

* chore: remove unused old inspector component

* tweak: add formatting to help text

as Jarek said:

> Here’s the copy. Please mind the formatting.

* add: default attribute id that closest to 30

* update: pass the whole attribute object

* update: use default attribute term in Product Filters template

* add: style settings

* add: sorting and show empty behavior in the editor preview

* tweak: use hideEmpty to align with existing settings

* chore: changelog

* test: add basic e2e tests

* chore: restore previous default value

* add: attribute help text and border support

* chore: lint

* fix: add missing context
2024-07-25 09:13:56 +07:00
Alexandre Lara 6000a1e83c
[Experimental] Product Filters Redesign: Create the template part (#49692)
* Add Product Filters template part

* Improve Product Filters template part description

* Hide Product Filters block from the inserter

* Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce

* Add E2E tests

* Fix lint error

* Fix lint error

* add: register variation for unmodified template part

We should move this to abstract class later.

* Fix lint error

---------

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Tung Du <dinhtungdu@gmail.com>
2024-07-24 17:36:18 -03:00
Thomas Roberts df8d5b751e
Revert "[Enhancement]: Add option to show price on the place order button" (#49899)
* Revert "[Enhancement]: Add option to show price on the place order button (#4…"

This reverts commit a71fb4d7a6.

* Add changelog
2024-07-24 18:08:05 +02:00
Sam Seay 137a2e8aa6
Checkout: Add placeholder option to country and state select, add error validation (#49616)
* WIP

* Add empty option for state as well

* Add client-side validation to country select inputs

* Add validation messages for state.

* Clean up redundant destructuring.

* Fix up the validation logic, fix bug where empty select was shown in some cases.

* Remove unused import

* Use import aliases instead of large relative paths

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

* Fix a typo

Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com>

* use SelectOption type

* Also handle when address changes, because we shouldnt validate state when there is an address change

* adjust validation to handle any address change, not just country. translate field validations and use lowercase

* add a lowercase label for the country select as well

* Fix an issue where scroll to would not scroll to invalid select

---------

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com>
2024-07-24 17:59:15 +02:00
Karol Manijak 0824b7e65d
Product Collection: Revert rename of "Sync with current query" option (#49907)
* Revert renaming Sync with current query option

* Add changelog
2024-07-24 14:17:37 +02:00
Karol Manijak dace7ba296
Product Collection: add control to toggle whether block is filterable in non archive context (#49627)
* Add syncWithFilters attribute to Product Collection

* Add SycnWithFilters Inspector Control to PC

* Minor import adjustments

* Move the controls to Inherit as they share the same labels

* Rename the attirbute to filterable

* Hide control for collections

* Consume the filterable

* Consume filterable attribute so it enables the filtering

* Bring back file format

* Bring back filterable

* Move filterable from attribute to query

* Improve checks

* Fix incorrent function name

* Add changelog

* Set the default filterable value on insert

* Update test selector

* Add E2E tests to #49627 (#49715)

* Remove unnecessary call to create new post

* Fix "Use page context" control tests

* Fix post ↔ template collection sync test

* Fix non-thenable linter errors

* Extend the "Use page context" default setting test

* Add test for filtering in non-archive context

* Add test for combining editor and front-end filters

* Fix lint

* Update plugins/woocommerce-blocks/assets/js/blocks/product-collection/edit/inspector-controls/inherit-query-control.tsx

Co-authored-by: Manish Menaria <the.manish.menaria@gmail.com>

* Improve query properties access

* Rename inherit-query-control to use-page-context-control to better depict its purpose

* Lint fix

---------

Co-authored-by: Bart Kalisz <bartlomiej.kalisz@gmail.com>
Co-authored-by: Manish Menaria <the.manish.menaria@gmail.com>
2024-07-24 11:51:53 +02:00
Chi-Hsuan Huang f9598fbed1
Deprecate and create new coming soon block version (#49786)
* Migrate coming soon block

* Update coming soon patterns

* Enqueue styles

* Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce

* Fix entire site block

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-07-24 15:12:38 +08:00
Karol Manijak d85acc7e09
Product Collection: allow custom collections hiding each of the filters (#49713)
* Allow hiding all of the filter controls in PC block

* Add new test

* Add changelog

* Update documentation with information about hideControls values
2024-07-23 09:03:27 +02:00
Chi-Hsuan Huang 7f23702018
Fix broken coming soon template in dataview (#49749)
* Set coming soon preview body aspect ratio to 1/1 to fix borken template

* Add changelog

* Update plugins/woocommerce/changelog/fix-broken-coming-soon-template

Co-authored-by: Ilyas Foo <foo.ilyas@gmail.com>

---------

Co-authored-by: Ilyas Foo <foo.ilyas@gmail.com>
2024-07-23 14:11:32 +08:00
Alexandre Lara 12b701d35c
[Experimental] Product Filters Redesign: Move icons to @woocommerce/icons package (#49646)
* Move icons to @woocommerce/icons package

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-07-18 15:53:39 -03:00
Roy Ho 038ef3d751
[Experimental] Add Product filters overlay settings (#48732)
* Add overlay settings

* Tweak icon size slider

* Add overlay template part link

* Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce

* Fix scss linting

* Fix php linting

* Remove preview

* Rename setting props to be more clear

* Remove unused import

* Update plugins/woocommerce-blocks/assets/js/blocks/product-filters/editor.scss

Co-authored-by: Tung Du <dinhtungdu@gmail.com>

* Update plugins/woocommerce-blocks/assets/js/blocks/product-filters/edit.tsx

Co-authored-by: Tung Du <dinhtungdu@gmail.com>

* Update plugins/woocommerce-blocks/assets/js/blocks/product-filters/types.ts

Co-authored-by: Tung Du <dinhtungdu@gmail.com>

* Update plugins/woocommerce-blocks/assets/js/blocks/product-filters/edit.tsx

Co-authored-by: Tung Du <dinhtungdu@gmail.com>

* Move experimental controls to last of list

* Improve typescript code

* Remove unneeded constructor code

* Extract icons into own component

* Moved overlay template part link to the bottom

* Add apply button

* Hide overlay settings when in always mode

* Remove overlay template part from list and put into general area

* Update api version to 3

* Update plugins/woocommerce-blocks/assets/js/icons/library/filter.tsx

Co-authored-by: Alexandre Lara <allexandrelara@gmail.com>

* Update plugins/woocommerce-blocks/assets/js/icons/library/filter-three-lines.tsx

Co-authored-by: Alexandre Lara <allexandrelara@gmail.com>

* Fix overlay button link style and clickable

* Remove edit overlay link from never mode

* Add e2e tests for the filters overlay settings

---------

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Tung Du <dinhtungdu@gmail.com>
Co-authored-by: Alexandre Lara <allexandrelara@gmail.com>
2024-07-18 11:33:25 -07:00
Roy Ho 6216408511
Prevent individual filters from being able to drag outside of parent wrapper (#49606)
* Prevent individual filters from being able to drag outside of parent wrapper

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-07-17 13:30:59 -07:00
Gabriel Manussakis ece00533e4
[Accessibility] Convert edit address link to a button (#49471)
* Update edit address button style

* Add input prop to the ValidatedTextInputHandle type

* Add optional isEditing prop to the AddressFormProps

* Convert edit address link to button

* Focus first input after opening the address form

* Pass along the editing prop to children components in the shipping address block

* Add changelog file

* Clear timeout used to delay the focus on the first input

* Adjust checkout toggler buttons for dark themes

* Get first address field by id
2024-07-17 16:54:41 +02:00
Alexandre Lara 7dd0c1a055
[Experimental] Product Filters Redesign: Rename individual inner filter blocks to "Filter Options" (#49579)
* Rename blocks to "Filter Options"

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

* Add icon to Filter Options block

* Remove unused import

* Fix e2e tests

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-07-17 11:12:32 -03:00
Thomas Roberts a71fb4d7a6
[Enhancement]: Add option to show price on the place order button (#49252) 2024-07-16 10:59:09 +01:00
Mike Jolley 77428b973d
Checkout: Add password strength meter to new field (#49164)
* Add validation message and fix rendering when account is required

* Adjust validation so we can change the label in messages with custom callback

* Add and style password meter

* Add validation feedback and zxcvbn support

* changelog

* Accessibility fixes

* Update lock file

* Fix initial state in safari

* Announce strength as you type

* Use React.ReactElement

* update lock file

* Update lock

* Downgrade local pnpm and recreate lock

* Feedback should only be shown when `showError` is true, not `hasError`

* Feedback should default to null
2024-07-15 16:22:42 +01:00
Mike Jolley 13d3e11d40
Checkout: Add password field to create account form (#48985)
* Add site title to account checkbox

* Add customer_password support to Store API

* Hide password nag if defining own password

* Add woocommerce_registration_generate_password option to block assets

* Change login prompt to just "log in"

* Add default styling to password inputs

* Reset line height for checkbox inputs

* Add customer password to store

* Add password field to contact information block

* Handle customer password in checkout processor

* Styling for new elements

* Update tests so they match new create account label

* Update log in link in tests

* Add e2e tests for password field

* Add validation message and fix rendering when account is required

* Changelog

* Add missing api to tests

* Remove console log

* rerender checkout

* Update log in link in test

* Adjust validation so we can change the label in messages with custom callback

* Use queryByText in test

* Make sure password generation is on in tests

* Create password if provided password is empty

* Skip "Place order" button translation test

* Revert "Skip "Place order" button translation test"

This reverts commit 7aed6137e88cdb3577f74f6f0c05258b531ed534.

* Update plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-contact-information-block/block.tsx

Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com>

* Update plugins/woocommerce-blocks/assets/js/data/checkout/reducers.ts

Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com>

* Comment empty condition

* Update CSS classnames

* Return null in CreateAccountUI if nothing to display

* Linting: Return return param

* Document $password param

---------

Co-authored-by: Thomas Roberts <thomas.roberts@automattic.com>
Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com>
2024-07-15 11:43:02 +01:00
Mike Jolley e0c62dce79
Extensibility: Format currency config so it can be consumed more easily (#48727)
* Export pre-formatted SITE_CURRENCY object from settings

* Fallback to SITE_CURRENCY

* Changelog

* Fix typedef

* Update mocks

* Inject site currency into cart preview data

* Update test

* Add currency formatting to preview data

* Mock currency in tests

* More currency mocking
2024-07-12 14:24:22 +01:00
Niels Lange 79786c5443
Revert #46362 (#49404)
* Revert #46262

* Remove pnpm-lock.yaml

* Revert "Remove pnpm-lock.yaml"

This reverts commit df4b87940d.

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

* Revert pnpm-lock.yaml

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-07-11 19:00:49 +02:00
Albert Juhé Lluveras ec95afc178
Fix sidebar attribute control in Products by Attribute block (#49351)
* Fix sidebar attribute control in Products by Attribute block

* Add changelog file

* Linting
2024-07-11 15:52:57 +02:00
Alex Florisca 56cc77fcef
Fix the mini cart items not being visible when zoomed in (#48384)
* Render an aria-label for the initial mini cart html

* FIx mini-cart items not visible when zoomed in

* Add changelog

* Fix linting issues

* Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce

* Kick the GH actions

* Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce

* delete duplicate changelog file

* Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce

* Delete plugins/woocommerce/changelog/48384-fix-43639-zoom-mini-cart

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-07-09 16:47:21 +01:00
Christopher Allford 7d71e2235a
Product Collection: Redesigned Collection Insertion Selection (#48911)
* Updated Collection Selection Buttons

Rather than using normal buttons we're going to replace these with cards
that we want to use instead.

* Reworked Product Catalog Creation

* Added Dropdown Collection Option

* Changelog

* Added Collection Dashicon Support

* Fixed Collection Change Modal

This is going to get replaced soon but it may as well look nicer than it
does right now.

* Type Fix

* Fixed `:focus` Hover Border

* Simplified Click Handler

* Style Fixes

* Gutenberg Style Fixes

* E2E Fixes

* Fixed E2E Test

* Added Dropdown Inserter E2E Support

* Logging

* Fixed Default Insertion Options

* Prevent Premature Rendering

* E2E Fix Attempt

* Lint Fix

* E2E Fix

* Fix test chaking if custom registred collections are available in the collection chooser

* Improve logic of choosing collection to cover both dropdown and placeholder

---------

Co-authored-by: Karol Manijak <20098064+kmanijak@users.noreply.github.com>
2024-07-09 13:53:48 +02:00
Manish Menaria 2d6448d9b4
Product Collection: Fix alignment of the first item in Grid layout for WP 6.6 (#49096)
* Remove `__experimentalLayout` from Product Template block

This commit removes `__experimentalLayout` from Product Template block. This is because we don't want to use `layout` from Gutenberg for now. This change fixes the alignment of the first item in Grid layout.

* Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce

* Fix linting errors in SCSS file

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-07-05 17:24:27 +05:30
Manish Menaria fa11141726
Expose `__experimentalRegisterProductCollection` in @woocommerce/blocks-registry Package (#48141)
* 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>
2024-07-05 16:55:35 +05:30
Chi-Hsuan Huang e59f4e406d
Fix the Coming Soon Site Page heading color is white after completing the CYS task (#49129)
* Fix site coming soon page heading color

* Add changelog
2024-07-05 10:51:30 +08:00
Roy Ho 780f27256f
Remove IE11 specific styles (#49027)
* Remove IE11 specific styles

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

* Remove unused mixin

* Remove additional IE/edge styles

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-07-04 05:28:26 -07:00
Amit Raj e562ed4ede
Add product count visibility option to mini cart block (#48545) 2024-07-04 13:52:01 +03:00
Karol Manijak ab646ace8e
Product Collection: "Sync with current query" should only apear in archive context and not other places (#48917)
* Show Sync with current query option only in archive templates

* Add changelog

* Add e2e test

* Remove unused variable
2024-07-04 09:13:36 +02:00
Alba Rincón 4dcaca793f
Add a new icon style to the Customer Account block (#48979)
* Add a new icon style to the Customer Account block

* Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce

* Fix lint errors

* Improve svg margins

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-07-02 09:34:59 +02:00
Alexandre Lara 504799bcce
[Experimental] Product Filters Redesign > Filters: Implement Dynamic Block Title and Icon (#48638)
* 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>
2024-07-01 17:46:00 -03:00
Thomas Roberts 06c98dee1b
Load mini cart scripts by default on touch-enabled (mobile) devices (#48769) 2024-06-28 13:23:32 +01:00
Manish Menaria c70750b85a
Fix: Show preview label only when Product Collection block is selected (#48795)
* 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>
2024-06-28 16:48:11 +05:30