Commit Graph

34 Commits

Author SHA1 Message Date
Gabriel Manussakis 57ef5a884e
[Accessibility] Improve Checkout block page accessibility after removing heading level 1 (#50925)
* Add aria-label to checkout form landmark

* Remove aria-hidden from checkout form sub-titles

* Add aria-label to checkout form

* Add changelog file

* Remove aria-hidden from form-step snapshots

* Bump form-checkout template version
2024-09-03 15:42:28 +01:00
Seghir Nadir 2a406c7e8a
Update all blocks to V3 (#48720)
* Update all blocks to V3

* remove explicit version set in shared config blocks

* update styling for Cart/Checkout in iframe

* test: fix block e2e tests

* test: fix attribute filter e2e tests

* test: fix product collection e2e tests

* test: fix product on sale e2e test

* test: fix rating filter e2e tests

* test: fix review e2e tests

* test: fix stock e2e tests

* test: fix preview button test

* fix: product on sale wrapper

* test: fix insertBlockByShortcut in iframe

* test: fix core e2e tests

* chore: changelog

* test: typo

* test: update PC e2e tests

* add test to make sure iframe canvas is loaded

* fix syntax error

* Update plugins/woocommerce-blocks/tests/e2e/tests/basic.block_theme.spec.ts

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

---------

Co-authored-by: Tung Du <dinhtungdu@gmail.com>
Co-authored-by: Bart Kalisz <bartlomiej.kalisz@gmail.com>
2024-08-20 10:14:11 +00: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
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
Niels Lange 93214eeb2b
[Enhancement]: Block-based checkout input fields style updates (#46362)
* 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
2024-06-03 18:46:08 +07:00
Patricia Hillebrandt 5dd7713346
[Performance]: Replace `classnames` usage with `clsx` (#47760)
* 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.
2024-05-31 05:49:36 +02:00
Thomas Roberts b7643b9b7a
Change Checkout form step numbering so it can only be toggled for all blocks, not individually per-step (#47479) 2024-05-22 07:03:48 -07:00
Niels Lange 5168a21920
Block-based checkout - Update address fields display logic (#47160)
* Add “Address line 2” toggle

* Allow apartment field to be required

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

* Rename “Apartment, suite, etc.” to “Address line 2”

* Remove unused dependency

* Add key to fragment

* Simplify keys

* Address failing e2e tests

* Change “Optional (Recommended)” to “Optional”

* Toggle address line 2 visibility in editor

* Add e2e tests

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

* Update e2e tests

* Update e2e tests

* Ensure the address 2 field stays open when the seller empties it

* Optimise hasAddress2FieldValue

* Move address 2 filed related functionality into separate component

* Rmove + sign from address 2 field links

* WIP: Introduce AddressField component

* Update AddressFields component

* Refactor AddressFields and Address2Field components

* Fix CSS lint error

* Fix JS lint error

* Fix failing e2e tests

* Fix typo in e2e tests

* Improve e2e selector

* Fix core e2e tests

* Use address line 2 label for the link text

* Lazy initialise the “isFieldVisible” state

* Remove obsolete code

* Add inline comments for clarity

* Fix JS lint error

* Improve e2e tests

* Revert "Remove obsolete code"

This reverts commit 027d6adc89.

* Adjust visibility toggle

* Delete obsolete changelog file

* Add inline comment

* Fix TS error

* Remove obsolete parts

* Solve TS warning

* Remove obsolete “fieldsRef”

* Remove obsolete “setHasFieldBeenModified”

* Address various TS warnings

* Fix link styling issue on mobile

* Fix JS lint error

* Refactor and simplify address components

* Optimise Address2Field component

* Improve inline docs

* Move ‘+’ from CSS to i18n

* Rename rest of values and pass correct onChange

* force component to remount

* remove unsed useEffect

---------

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Nadir Seghir <nadir.seghir@gmail.com>
2024-05-21 15:48:24 +07:00
Seghir Nadir 76a9e2eb27
Move country to top of form for all countries (#47375)
* Move country to top of form for all countries

* adjust styling

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

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-05-13 16:24:40 +02:00
Niels Lange b6d9b3a013
Fix broken checkout address forms layout (#47131)
* Fix broken checkout address forms layout

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

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-05-08 10:30:12 +07:00
Seghir Nadir 401737994f
Use state name in Checkout block address card (#45799)
* Use state name in address card

* fix linting issue

* remove extra check for checkout endpoint

* address review feedback
2024-03-22 15:14:14 +01:00
Tarun Vijwani 4e6476a996
Adjust spacing in/between elements on the Cart and Checkout block pages (#44160)
* Add spacing in Checkout block page

* Add spacing in Order summary block

* Update responsive styles for order summary panel

* Update styles for cart and cart line items table

* Update styles for order summary and cross-sells products

* Remove unnecessary CSS styles from cart line items table and cart block

* Remove unused CSS class from cart line items table

* Fix linting errors

* Add changelog

* Fix changelog lint

* Update quantity selector style

* Increase the line-height of the set description and remove margin top from email field

* Add margin-top to order summary image and express payment margin adjustment

* Update styles for cart and checkout components

* Fix linting error

* Fix margin units in cart-cross-sells-products

* Replace em with px

* Add margin-top to payment method container

* Update styles for Cart block for mobile screen

* Update padding in cart style.scss
2024-02-17 01:50:11 +04:00
Thomas Roberts d8331dc3f1
Add additional information block for custom checkout fields (#43274)
Co-authored-by: Mike Jolley <mike.jolley@me.com>
Co-authored-by: github-actions <github-actions@github.com>
2024-01-10 06:20:06 -08:00
Seghir Nadir 8ecfcfb9a0
Add Checkbox support for Additional Fields in Checkout Block (#42780)
* Introduce Additional Fields API for Checkout Block https://github.com/woocommerce/woocommerce-blocks/pull/12073

* revert test to what it was

* Default to text, if the type supplied is not supported throw an error

* Add type for options

* Return null if somehow the select made it through without options

* Make select fields type enum and add options to schema

* Lint fixes

* Update plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/address-form/address-form.tsx

Co-authored-by: Niels Lange <info@nielslange.de>

* Update plugins/woocommerce/src/Blocks/Domain/Services/CheckoutFields.php

Co-authored-by: Niels Lange <info@nielslange.de>

* Update checks to log errors and fail gracefully

* Add field id to class names

* Fix lint error

* Fix short array use

* Introduce Additional Fields API for Checkout Block https://github.com/woocommerce/woocommerce-blocks/pull/12073

* Default to text, if the type supplied is not supported throw an error

* Lint fixes

* Introduce Additional Fields API for Checkout Block https://github.com/woocommerce/woocommerce-blocks/pull/12073

* add support for registering checkboxes

* remove extra error log

* add styling

* fix rebase conflit

* fix rebase conflit 2

* fix linter errors

* address review comments

* add warning for checkbox

* fix changes

---------

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>
2023-12-18 13:21:36 +01:00
Thomas Roberts 0c6a943c42
Add select field type for custom checkout fields (#42758)
Co-authored-by: Niels Lange <info@nielslange.de>
Co-authored-by: Nadir Seghir <nadir.seghir@gmail.com>
Co-authored-by: github-actions <github-actions@github.com>
2023-12-15 06:39:22 -08:00
Christopher Allford 1d056b3b37 Update Blocks Text Domain 2023-12-09 05:44:54 -08:00
Saad Tarhi 2182457673 Fix the Layout for Shipping and Billing Address Forms in the Checkout Block (https://github.com/woocommerce/woocommerce-blocks/pull/11486)
* Fix empty spaces in the address form

* Fix checkout layout for Japan and Hungary

* Added some comments in CSS
2023-11-10 08:07:49 +01:00
Mike Jolley 67f341899d Add back missing render-checkout-form hook (https://github.com/woocommerce/woocommerce-blocks/pull/11554) 2023-11-03 16:30:40 +00:00
Mike Jolley c8b8b7232d Checkout Field Padding and Spacing (https://github.com/woocommerce/woocommerce-blocks/pull/11207)
* Spacing values

* Unused opacity rule
2023-10-13 12:13:50 +01:00
Mike Jolley 2d530a7d5e Refactor ValidatedTextInput and AddressForm usage (https://github.com/woocommerce/woocommerce-blocks/pull/10309)
* Refactor ValidatedTextInput and AddressForm usage

* Remove formatting from onChange

* update useeffect dependencies

* Update validation text

* Style fields without floats (https://github.com/woocommerce/woocommerce-blocks/pull/10310)
2023-08-03 12:02:20 +01:00
Albert Juhé Lluveras df3ff6793e Per block stylesheets (https://github.com/woocommerce/woocommerce-blocks/pull/9831)
* Clean up blank lines

* Update Webpack config

* Update PHP logic to load block styles

* Style fixes

* Style fixes (II)

* Style fixes (III)

* Style fixes (IV)

* Fix missing stylesheets in the Site Editor

* Fix wrong return values in some PHP method docs

* Fix missing ProductPrice stylesheet causing 404 in tests

* Fix missing ProductGallery stylesheet causing 404 in tests
2023-07-04 13:06:48 +02:00
Mike Jolley af0520bb8d Show Cart and Checkout blocks in Style Book (https://github.com/woocommerce/woocommerce-blocks/pull/8888)
* Update forced layout

* Track isPreview in editor context

* Add preview to checkout

* Add preview to cart
2023-03-30 15:15:00 +01:00
Seghir Nadir 7d9602253c Restrict Local Pickup Checkout block users only (https://github.com/woocommerce/woocommerce-blocks/pull/7893)
* limit page visiblity to Checkout block

* only enable pickup_locations if checkout block

* always register local pickup
2023-01-12 15:42:43 +01:00
Mike Jolley 82e9155167 Rename collection to shipping to reflect the block purpose 2023-01-12 15:38:06 +01:00
Mike Jolley 23b175d246 Create Pickup Locations Block (https://github.com/woocommerce/woocommerce-blocks/pull/7316)
* prefersCollection controls shipping visibility

* Remove log

* Create skeleton pickup options block based on shipping methods

* Filter locations to local pickup methods

* Correct case of block name

* Location styling

* Pull pickup details from new core fields

* Fix linting warnings on new types

* Remove blocks_local_pickup check (this does not exist yet)

* Move enable_local_pickup_without_address so it works under all contexts

* Fix display of FREE when there are a mix of prices

* Remove undefined return value

* Update block descriptions

* fix message

* Correct case

Co-authored-by: Nadir Seghir <nadir.seghir@gmail.com>
2023-01-12 15:35:57 +01:00
Nadir Seghir 9ee5b40186 Introduce shipping method toggle block 2023-01-12 15:34:44 +01:00
Thomas Roberts 2285d1d4e2 Include Cart and Checkout Blocks when included in WC Core (https://github.com/woocommerce/woocommerce-blocks/pull/6805)
* Remove all inbox notifications about cart and checkout blocks

* Remove feature flag check from CreateAccount class

* Remove feature plugin check to register PaymentsApi class

* Comment out is_feature_plugin_build function

We might need this later, so keeping it around seems useful.

* Remove feature plugin check when adding resource hints

* Import registerBlockType and use it over registerFeaturePLuginBlockType

* Ensure Cart and Checkout inner blocks register even if not feature plugin

* Comment out registerFeaturePluginBlockType

* Remove duplicate import

* Revert "Comment out registerFeaturePluginBlockType"

This reverts commit bec6ed899b68e26e836bde1c573d6066fb2bcc47.

* Align PHPDoc correctly

* Update feature flag doc to remove Cart and Checkout blocks + PaymentApi
2022-08-15 11:15:15 +05:30
Saad Tarhi dc97e5af1e Fix missing translations in inspector (https://github.com/woocommerce/woocommerce-blocks/pull/6737)
* Try registering the "cart taxes" inner block

Registering server side. This example isn't working, but I'm pushing to
share it and see what's wrong with this implementation.

* Fix registering the cart taxes inner block issue

* Update translation script loading

* Remove unnecessary JS translation

The translation should work fine by getting the title & description from
the `block.json` file

* Put back the initial code in the 'Cart Taxes' inner block

We didn't provide the correct `block.json` file path server side,
that's why the `metadata` wasn't correctly registered

* Generate `block.json`files for inner blocks

This is the first step on fixing the missing translations of `metadata`
in `block.json` files

* Set the folder name exactly the same as the inner block name

We are doing this first test for the `Cart taxes` inner block.

The `Block` & its containing folder need to have the same name for:
- Consistency
- We use the `Block` name to get the file Path

* Update imports after folder renaming

* Get block name directly from the JSON metadata

Getting the block name from the JSON metadata is less error prone than
extracting it from the file path.

And no need to rename all our `inner-blocks` to get the correct
`block.json` path

* Revert folder naming change of `Cart taxes` inner block

Since we are getting the `block` name directly from the `block.json`
metadata instead of extracting it from the file path, there is no need
to keep their names in sync anymore

* Fix missing translations for the `Cart Subtotal` Block

* Register only the client-side settings on the client

When the block is registered on the server, you only need to register
the client-side settings on the client using the same block’s name.
See [docs](https://github.com/WordPress/gutenberg/blob/trunk/docs/reference-guides/block-api/block-metadata.md#javascript-client-side).

* Add schema validation to `block.json`

Development is improved by using a defined schema definition file.
Supported editors can provide help like tooltips, autocomplete, and
schema validation.

* Use the same `editor_script` as the parent block

This prevents WordPress from generating script tags to inexistant
inner blocks JS files

* Add C&C inner blocks in Cart.php & Checkout.php

This is a refactoring to keep the block types controller file less
overloaded

* Fix all Cart inner blocks missing translations

* Create the "AbstractInnerBlock" class

The "Inner Blocks" will use their parent's script, so no need to create
new scripts for each one of them

And, our "Inner Blocks" should always be registered using the metadata file

* Update the "Inner Blocks" PHP classes

* Fix PHP lint erros & update function description

* Fix missing translations bug for all Checkout Inner Blocks

* Update src/BlockTypes/Checkout.php

Co-authored-by: Seghir Nadir <nadir.seghir@gmail.com>

* skip lazy loaded scripts

Co-authored-by: Seghir Nadir <nadir.seghir@gmail.com>
2022-08-01 15:57:33 +01:00
Michael P. Pfeiffer 521f93619b Upgrade wp-prettier to 2.6.2 and reformat the codebase (https://github.com/woocommerce/woocommerce-blocks/pull/6566)
* Remove mixed tabs and spaces in tsconfig.json

* Update formatting in json files

* Upgrade wp-prettier to 2.6.2
2022-06-15 11:56:52 +02:00
Alex Florisca 903f96f677 Locked blocks cannot be unlocked and removed (https://github.com/woocommerce/woocommerce-blocks/pull/6419)
* DIsable the locking/unlocking mechansism for the cart-items-block so it cannot be unlocked and deleted

* Update all locked inner blocks with support: { lock: false } to disable locking/unlocking the blocks
2022-05-23 13:59:07 +02:00
Alex Florisca e37b787e50 Move mini cart outside cart-checkout folder (https://github.com/woocommerce/woocommerce-blocks/pull/6192)
* Move shared folder to /blocks

* Moved mini-cart block in blocks dir:

* Rename shared folder to cart-checkout-shared

* Remove customDir from mini-cart webpack entry

* Update assets/js/base/context/tsconfig.json

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

* Feedback changes

Co-authored-by: Tung Du <dinhtungdu@gmail.com>
2022-04-07 14:47:58 +01:00
Alex Florisca e15d516163 Revert "Move cart and mini-cart blocks into their own folders (https://github.com/woocommerce/woocommerce-blocks/pull/6126)" (https://github.com/woocommerce/woocommerce-blocks/pull/6190)
This reverts commit d005dbd2cf.
2022-04-05 11:14:32 +01:00
Alex Florisca d005dbd2cf Move cart and mini-cart blocks into their own folders (https://github.com/woocommerce/woocommerce-blocks/pull/6126)
* Move cart and mini-cart into their own folders

* Update other references of cart-checkout
2022-04-04 12:34:29 +01:00
Thomas Roberts a46f13c6c5 Move Checkout block attributes into metadata (`block.json`) (https://github.com/woocommerce/woocommerce-blocks/pull/5594)
* Add block title to AbstractBlock class

* Add block title to Checkout block

* Include all block.json files in tsconfig

* Add get_block_title method to Checkout.php

* Remove redundant block_title field

* Add block.json and remove static attributes from attributes.ts

* Register block using attributes from block.json

* Add metadata_path to AbstractBlock

* Add function to AssetsApi to get the metadata path from the plugin root

* Register the block using metadata if it's set in the block's class

* Remove get_block_title method

* Only add supports and attributes to the block when not registering with metadata

* Change get_block_metadata to get_block_metadata_path

* Change indentation to tabs in block.json

* Update comment to clarify why attributes and supports are set later

* Check if path to metadata is not empty instead of set and not empty

* Move checkout block out of cart-checkout directory

* Update get_block_metadata_path function to find block.json automatically

* Remove metadata path from AbstractBlock

* Check if there's a metadata file and register blocks with metadata if so

* Move deprecated attributes out of metadata and into attributes.ts

* Re-add deprecated attributes to checkout index

* Move order notes test

* Move test for checkout phone number in edito

* Fix indentation in checkout/block.json

* Move checkout terms tests

* Try forcing storefront theme in e2e tests

* Revert "Try forcing storefront theme in e2e tests"

This reverts commit 5b0fd47a2c39aadb0141a4ed28cbc0e6baa89625.

* Try capturing screenshot on test failures

* Try uploading error in try catch

* Try uploading artefacts on error

* Test uploading artefacts

* Screenshot just before looking for edit post layout

* Revert "Screenshot just before looking for edit post layout"

This reverts commit 61dff027789ce13a0d84e7b6f11e431637c5a450.

* Revert "Test uploading artefacts"

This reverts commit adf5cc55bcdb677f889bf5a62803b4150d98e665.

* Revert "Try uploading artefacts on error"

This reverts commit 7441a832a113a95fef89cc1b8db6dc79271be516.

* Revert "Try uploading error in try catch"

This reverts commit ca412ce505d56286b164f588a201a451f6bceeb6.

* Revert "Try capturing screenshot on test failures"

This reverts commit 0de6e97df19b116091a7bb3b8652713867d2d80f.

Co-authored-by: Alex Florisca <alex.florisca@automattic.com>
2022-01-28 16:37:06 +00:00