Commit Graph

20 Commits

Author SHA1 Message Date
Alex Florisca 9b8256cc3e
[Feature] Express Checkout Improvements (#50791)
* 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>

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

* Synchronise the express payment settings between the Cart & Checkout blocks (#50688)

* Add express payment methods to sidebar

* Only add extra props for express payment methods

* Update docs

* Make title, description and gatewayId types optional

* Update docs

* Fix types again and editor side

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

* handle situation when no methods are active

* Update manifest

* Add express payment methods to inspector controls for express checkout block (#50983)

* Remove forced styles on the editor

* Remove the darkMode setting from the buttonAttributes API (#51109)

* Remove darkMode from the buttonAttributes API

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

---------

Co-authored-by: github-actions <github-actions@github.com>

* Accept supports declarations for express payment style controls + merchant ux improvements in the editor (#51296)

* Fix images in editor displaying weird

* Fix long express payment names breaking layout

* Default to uniform styles off

* Use heightControl for border radius and fix height for cart buttons

* Move formatting title and description to the config validation

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

* Fix linting

* Fix failing test

* Add back the 48px height for images in editor

* Fix linting again

* Update docs

* Update docs manifest

* Update docs to fix linting

* Add comment to test to better explain why we are expecting a console warning

* make strings translatable

* Sync cart & checkout directly without option

* Remove current styles

* Change the beta label

* Replace < and > with symbol references in docs

* Update docs manifest

* Increase padding of beta label

* fix linter issues

* change to using looger helper

* fix CSS

---------

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Nadir Seghir <nadir.seghir@gmail.com>
2024-09-18 19:49:27 +00: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
Alex Florisca cda0f8a3f8
Revert "Add new buttonAttributes API to style express checkout buttons coherently (#47899) (#50763)
* Revert "Add new buttonAttributes API to style express checkout buttons coherently (#47899)"

This reverts commit 006fbc6714.

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

* Update changelog

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

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-08-19 18:54:58 +01: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
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
Christopher Allford 1d056b3b37 Update Blocks Text Domain 2023-12-09 05:44:54 -08:00
Alex Florisca 1e2e0fbe9c Update express checkout title, description, icon (https://github.com/woocommerce/woocommerce-blocks/pull/10237)
* Change icon, title and description of the Express Checkout Block

* Fix icon style

* Update icon and add styles

* change icon for express payments in cart
2023-07-27 09:08:29 +01:00
Alex Florisca 52506cbe81 Fix margin issue with the Proceed to checkout button on the site editor (https://github.com/woocommerce/woocommerce-blocks/pull/10182)
* Fix margin issue with the Proceed to checkout button on the site editor

* Remove unecessary selector
2023-07-12 15:28:37 +01:00
Mike Jolley 62c62d3326 Checkout Block: Avoid using editor buttons in the post content to prevent inheriting global styles (https://github.com/woocommerce/woocommerce-blocks/pull/8957)
* Remove express payment placeholders when there are no express payment methods

* Only use one instance of CartCheckoutFeedbackPrompt

* Show NoPaymentMethods notice in the inspector instead of the block

* Move privacy notices to inspector

* Unused hook

* Update tests to use mocks
2023-04-06 12:16:42 +01:00
kmanijak 155a693dda In editor use the components from @wordpress/components instead of wordpress-components (https://github.com/woocommerce/woocommerce-blocks/pull/8432) 2023-02-17 15:09:26 +01:00
Lucio Giannotta 5dd05d7ab2 Improve public-facing texts and labels (https://github.com/woocommerce/woocommerce-blocks/pull/7045)
We noticed that oftentimes our labels and text tend to be overly
technical or unclear. We decided to do a bulk pass to improve
the readability to non-technical users.
2022-09-12 10:39:26 +02: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
Michael P. Pfeiffer a432a85bf0 Cart: ensure express checkout placeholder does not stick to checkout button (https://github.com/woocommerce/woocommerce-blocks/pull/6547)
* Cart: ensure express checkout placeholder does not stick to checkout button

* Display to affect description only
2022-06-10 15:20:41 +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
Mike Jolley eb196226d8 WIP: Add Inner blocks to order summary (https://github.com/woocommerce/woocommerce-blocks/pull/6065)
* Sub/Total/Fee inner blocks

* Row blocks within the inner block

* Update icons

* Resolve stying issues

* Remove old block

* Pin totals row

* Locking logic update

* Heading inner block

* Refactor where inner blocks are defined

* Add todos

* Todo for Consider deprecating OrderMetaSlotFill and DiscountSlotFill in favour of inner block areas.

* Improve frontend registration of components using new entrypoint

* Experiment- external block context

* Revert "Experiment- external block context"

This reverts commit 4b75668ec7eb62f065c6a488cd942a666e26204f.

* Duplicate inner blocks to avoid conflicts with context

* Remove todo

* Rename block dir

* Some test fixes

* Fix import

* fix import

* linting

* Remove unused attributes

* Optional classname

* fix coupons import

* fix shipping mocks

* Styling

* Fix selectors in e2e tests

* Add back the wc-block-components-totals-wrapper class that was used for each segment in the totals Order summary

Because, removing them was:
-  a breaking change for the old structure
- was making it harder to target the inner blocks. Before the class was used to target each segment
- it was making the wc-block-components-totals-item behave as a child or parent depending on the inner block, inconsitency

* Reuse the TotalsWrapper component for C& C blocks inner blocks

This component was removed in this PR, but  we wrap components in the Cart and Checkout sidebar in a TotalsWrapper. This will ensure consistent spacing and borders are applied to items in the sidebar.

Co-authored-by: Nadir Seghir <nadir.seghir@gmail.com>
Co-authored-by: Raluca Stan <ralucastn@gmail.com>
2022-04-01 15:45:18 +02:00